From f7d4f022e38137c1d871f7c39151c71707d9d971 Mon Sep 17 00:00:00 2001 From: John Pencola Date: Mon, 8 Aug 2016 17:30:12 -0400 Subject: [PATCH 1/8] Fix example path reference for GalleryMain --- styleguide/block/gallery-singleton/gallerySingleton.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/styleguide/block/gallery-singleton/gallerySingleton.json b/styleguide/block/gallery-singleton/gallerySingleton.json index 6b941b77..01a16580 100644 --- a/styleguide/block/gallery-singleton/gallerySingleton.json +++ b/styleguide/block/gallery-singleton/gallerySingleton.json @@ -6,7 +6,7 @@ "html": "{{paragraphs(1)}}" }, { - "_template": "/base/main/Gallery", + "_template": "/base/main/GalleryMain", "singleton": true, "slides": [ { @@ -17,9 +17,9 @@ { "_template": "/base/util/RawHtml", "html": "{{paragraphs(1)}}" - }, + }, { - "_template": "/base/main/Gallery", + "_template": "/base/main/GalleryMain", "singleton": true, "id": "my-singleton-unique-id-2", "slides": [ @@ -33,7 +33,7 @@ "html": "{{paragraphs(1)}}" }, { - "_template": "/base/main/Gallery", + "_template": "/base/main/GalleryMain", "singleton": true, "id": "my-singleton-unique-id-2", "slides": [ From 1ef4c5054a5fea5c90a114a157fb2e5a9112a2a4 Mon Sep 17 00:00:00 2001 From: John Pencola Date: Tue, 9 Aug 2016 11:20:54 -0400 Subject: [PATCH 2/8] Fix bower deps to remove semver range specifiers. Upgrades to latest of bsp-carousel --- bower.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/bower.json b/bower.json index d85afc22..c798d71d 100644 --- a/bower.json +++ b/bower.json @@ -3,12 +3,12 @@ "version": "3.0.0", "homepage": "https://github.com/perfectsense/brightspot-base", "dependencies": { - "bsp-utils": "perfectsense/brightspot-js-utils#^3.1.0", - "jquery": "^2.1.4", - "normalize-css": "necolas/normalize.css#^3.0.3", - "masonry": "masonry#^4.0.0", - "bsp-modal": "perfectsense/brightspot-js-modal#^1.0.2", - "bsp-carousel": "perfectsense/brightspot-js-carousel#^1.2.0", + "bsp-utils": "perfectsense/brightspot-js-utils#3.1.0", + "jquery": "2.1.4", + "normalize-css": "necolas/normalize.css#3.0.3", + "masonry": "masonry#4.0.0", + "bsp-modal": "perfectsense/brightspot-js-modal#1.0.2", + "bsp-carousel": "perfectsense/brightspot-js-carousel#1.4.1", "vex" : "2.3.2" }, "main": "src/main/webapp/main.js", From a182869835f51bf15ebb5a1f1e58810ebd03a407 Mon Sep 17 00:00:00 2001 From: John Pencola Date: Tue, 9 Aug 2016 13:28:04 -0400 Subject: [PATCH 3/8] Update to latest masonry version in bower.json --- bower.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/bower.json b/bower.json index c798d71d..3f783f48 100644 --- a/bower.json +++ b/bower.json @@ -6,10 +6,10 @@ "bsp-utils": "perfectsense/brightspot-js-utils#3.1.0", "jquery": "2.1.4", "normalize-css": "necolas/normalize.css#3.0.3", - "masonry": "masonry#4.0.0", + "masonry": "masonry#4.1.0", "bsp-modal": "perfectsense/brightspot-js-modal#1.0.2", "bsp-carousel": "perfectsense/brightspot-js-carousel#1.4.1", - "vex" : "2.3.2" + "vex": "2.3.2" }, "main": "src/main/webapp/main.js", "ignore": [ @@ -40,10 +40,10 @@ } ], "normalize-css": [ - { - "src": "normalize.css", - "dest": "bower/normalize-css/normalize.css" - } + { + "src": "normalize.css", + "dest": "bower/normalize-css/normalize.css" + } ] } } From 640d301eca7c7cea4346a5f428f1f0ee906eac80 Mon Sep 17 00:00:00 2001 From: Patrick Fitzgerald Date: Wed, 10 Aug 2016 17:54:48 -0400 Subject: [PATCH 4/8] Gallery replace singleton setting with js logic Instead of having a setting singleton:true, modify the Gallery javascript so if there is only a single slide in the gallery, automatically switch to singleton mode. --- src/main/webapp/base/main/GalleryMain.js | 3 ++- src/main/webapp/sample/Gallery.less | 6 ++++++ .../{block => main/gallery-main}/_gallery-slide.json | 0 styleguide/main/gallery-main/gallery.json | 2 +- .../main/gallery-main/galleryIntroBackgroundImage.json | 2 +- .../gallery-main}/gallerySingleton.json | 9 +++------ .../gallery-main}/gallerySingleton.md | 4 ++-- 7 files changed, 15 insertions(+), 11 deletions(-) rename styleguide/{block => main/gallery-main}/_gallery-slide.json (100%) rename styleguide/{block/gallery-singleton => main/gallery-main}/gallerySingleton.json (78%) rename styleguide/{block/gallery-singleton => main/gallery-main}/gallerySingleton.md (85%) diff --git a/src/main/webapp/base/main/GalleryMain.js b/src/main/webapp/base/main/GalleryMain.js index 021134f3..ee85eccb 100644 --- a/src/main/webapp/base/main/GalleryMain.js +++ b/src/main/webapp/base/main/GalleryMain.js @@ -121,7 +121,7 @@ class Gallery { */ init() { this.initSlides(); - if (this.settings.singleton) { + if (this.$slides.length < 2) { this.initSingleton(); } else { this.initIntro(); @@ -151,6 +151,7 @@ class Gallery { // Also set it to the optional id for the singleton, so if the user opens the modal // we can gather up all the slides that have the same id and let the user navigate // between them all. + this.settings.singleton = true; this.$el.attr(this.attr.singleton, this.settings.id || ''); } diff --git a/src/main/webapp/sample/Gallery.less b/src/main/webapp/sample/Gallery.less index 6629813b..384982b0 100644 --- a/src/main/webapp/sample/Gallery.less +++ b/src/main/webapp/sample/Gallery.less @@ -95,6 +95,12 @@ &[data-gallery-singleton] { // If the gallery is in singleton mode + .Gallery-intro { + display:none; + } + .Gallery-controls { + display:none; + } } &-intro { diff --git a/styleguide/block/_gallery-slide.json b/styleguide/main/gallery-main/_gallery-slide.json similarity index 100% rename from styleguide/block/_gallery-slide.json rename to styleguide/main/gallery-main/_gallery-slide.json diff --git a/styleguide/main/gallery-main/gallery.json b/styleguide/main/gallery-main/gallery.json index b838e314..6f9c5519 100644 --- a/styleguide/main/gallery-main/gallery.json +++ b/styleguide/main/gallery-main/gallery.json @@ -13,7 +13,7 @@ "slides": [ { - "_dataUrl": "/block/_gallery-slide.json", + "_dataUrl": "/main/gallery-main/_gallery-slide.json", "_repeat": [8,12] } ] diff --git a/styleguide/main/gallery-main/galleryIntroBackgroundImage.json b/styleguide/main/gallery-main/galleryIntroBackgroundImage.json index 4d3c2476..1b188855 100644 --- a/styleguide/main/gallery-main/galleryIntroBackgroundImage.json +++ b/styleguide/main/gallery-main/galleryIntroBackgroundImage.json @@ -11,7 +11,7 @@ "slides": [ { - "_dataUrl": "/block/_gallery-slide.json", + "_dataUrl": "/main/gallery-main/_gallery-slide.json", "_repeat": [8,20] } ] diff --git a/styleguide/block/gallery-singleton/gallerySingleton.json b/styleguide/main/gallery-main/gallerySingleton.json similarity index 78% rename from styleguide/block/gallery-singleton/gallerySingleton.json rename to styleguide/main/gallery-main/gallerySingleton.json index 01a16580..309133cb 100644 --- a/styleguide/block/gallery-singleton/gallerySingleton.json +++ b/styleguide/main/gallery-main/gallerySingleton.json @@ -7,10 +7,9 @@ }, { "_template": "/base/main/GalleryMain", - "singleton": true, "slides": [ { - "_dataUrl": "/block/_gallery-slide.json" + "_dataUrl": "/main/gallery-main/_gallery-slide.json" } ] }, @@ -20,11 +19,10 @@ }, { "_template": "/base/main/GalleryMain", - "singleton": true, "id": "my-singleton-unique-id-2", "slides": [ { - "_dataUrl": "/block/_gallery-slide.json" + "_dataUrl": "/main/gallery-main/_gallery-slide.json" } ] }, @@ -34,11 +32,10 @@ }, { "_template": "/base/main/GalleryMain", - "singleton": true, "id": "my-singleton-unique-id-2", "slides": [ { - "_dataUrl": "/block/_gallery-slide.json" + "_dataUrl": "/main/gallery-main/_gallery-slide.json" } ] }, diff --git a/styleguide/block/gallery-singleton/gallerySingleton.md b/styleguide/main/gallery-main/gallerySingleton.md similarity index 85% rename from styleguide/block/gallery-singleton/gallerySingleton.md rename to styleguide/main/gallery-main/gallerySingleton.md index 37b92b21..47f4a59c 100644 --- a/styleguide/block/gallery-singleton/gallerySingleton.md +++ b/styleguide/main/gallery-main/gallerySingleton.md @@ -9,10 +9,10 @@ In this demonstration, the first image opens by itself. The second and third ima modal carousel you can navigate between those two slides. ### Blocks and properties +The singleton gallery experience is triggered automatically when the gallery contains a only a single slide. The singleton gallery uses the same properties as the main gallery, but it does not display the intro block -or the list/tiles view. It has a couple additional properties: +or the list/tiles view. It has an additional (optional) property: * `Gallery`: - * `singleton`: (Boolean) A flag to indicate this image is a singleton (and will not show intro, list view, or tile view) * `id`: (String/Optional) An id can be used to associate multiple singletons, so when the user clicks the singleton image, the modal carousel lets the user navigate between all the images that have the same id. If this is not specified then the modal carousel will show only the image that was clicked, and will not have navigation controls. From 0269b42d27d7d731fc92232abb85412855cfc43c Mon Sep 17 00:00:00 2001 From: Patrick Fitzgerald Date: Thu, 11 Aug 2016 11:08:21 -0400 Subject: [PATCH 5/8] Gallery always show zoom control on mobile For devices that do not support hover, always display the zoom control over the image, to avoid having to double-click. --- src/main/webapp/sample/Gallery.less | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/main/webapp/sample/Gallery.less b/src/main/webapp/sample/Gallery.less index 384982b0..542f4d2b 100644 --- a/src/main/webapp/sample/Gallery.less +++ b/src/main/webapp/sample/Gallery.less @@ -236,6 +236,13 @@ display: block; } } + + // Always display the zoom controls when device does not support hover + @media (hover:none) { + .GallerySlide-mediaControlsZoom { + display: block; + } + } } &-mediaControlsZoom { From 5327b9226a6db0c5dee49501daa2368e62986613 Mon Sep 17 00:00:00 2001 From: John Pencola Date: Thu, 11 Aug 2016 12:56:31 -0400 Subject: [PATCH 6/8] Add back in deleted files from merging release/3.0 --- Gruntfile.js | 40 +++++++++ src/main/webapp/base/All.less | 4 + src/main/webapp/base/GalleryIntro.hbs | 27 ++++++ src/main/webapp/base/GalleryIntro.less | 11 +++ src/main/webapp/base/GallerySlide.hbs | 60 +++++++++++++ src/main/webapp/base/GallerySlide.less | 23 +++++ src/main/webapp/base/main/GalleryMain.hbs | 85 ++++++++++++++++++ src/main/webapp/base/main/GalleryMain.less | 86 +++++++++++++++++++ src/main/webapp/main.js | 2 + src/main/webapp/sample/All.less | 2 + styleguide/main/gallery-main/gallery.md | 30 +++++++ .../galleryIntroBackgroundImage.md | 4 + 12 files changed, 374 insertions(+) create mode 100644 src/main/webapp/base/GalleryIntro.hbs create mode 100644 src/main/webapp/base/GalleryIntro.less create mode 100644 src/main/webapp/base/GallerySlide.hbs create mode 100644 src/main/webapp/base/GallerySlide.less create mode 100644 src/main/webapp/base/main/GalleryMain.hbs create mode 100644 src/main/webapp/base/main/GalleryMain.less create mode 100644 styleguide/main/gallery-main/gallery.md create mode 100644 styleguide/main/gallery-main/galleryIntroBackgroundImage.md diff --git a/Gruntfile.js b/Gruntfile.js index 578539a1..e9045bbf 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -4,6 +4,46 @@ module.exports = function (grunt) { require('bsp-grunt')(grunt, { bsp: { + bower: { + // Gallery uses Masonry javascript, which has a few dependencies + // BEGIN dependencies for Masonry + 'outlayer': [ + { + src: 'outlayer.js', + dest: 'outlayer/outlayer.js' + }, + { + src: 'item.js', + dest: 'outlayer/item.js' + } + ], + 'ev-emitter': [ + { + src: 'ev-emitter.js', + dest: 'ev-emitter/ev-emitter.js' + } + ], + 'get-size': [ + { + src: 'get-size.js', + dest: 'get-size/get-size.js' + } + ], + 'fizzy-ui-utils': [ + { + src: 'utils.js', + dest: 'fizzy-ui-utils/utils.js' + } + ], + 'desandro-matches-selector': [ + { + src: 'matches-selector.js', + dest: 'desandro-matches-selector/matches-selector.js' + } + ] + // END dependencies for Masonry + }, + styles: { dir: '', less: [ diff --git a/src/main/webapp/base/All.less b/src/main/webapp/base/All.less index 1af23f15..b8837a08 100644 --- a/src/main/webapp/base/All.less +++ b/src/main/webapp/base/All.less @@ -13,6 +13,10 @@ @import "main/ArticleMain.less"; @import "main/CreativeWorkMain.less"; @import "main/Main.less"; +@import "main/GalleryMain.less"; + +@import "GalleryIntro.less"; +@import "GallerySlide.less"; @import "page/Page.less"; @import "page/PageFooter.less"; diff --git a/src/main/webapp/base/GalleryIntro.hbs b/src/main/webapp/base/GalleryIntro.hbs new file mode 100644 index 00000000..2d495670 --- /dev/null +++ b/src/main/webapp/base/GalleryIntro.hbs @@ -0,0 +1,27 @@ +{{#defineBlock "GalleryIntro"}} + + {{#defineElement "titleShort"}}data-shorttext="{{this}}"{{/defineElement}} + {{#defineElement "title" noWith=true}} +
+ {{title}} +
+ {{/defineElement}} + + {{#defineElement "descriptionShort"}}data-shorttext="{{this}}"{{/defineElement}} + {{#defineElement "description" noWith=true}} +
+ {{description}} +
+ {{/defineElement}} + + {{#defineBlockContainer}} +
+ + {{#defineBlockBody}} + {{element "title"}} + {{element "description"}} + {{/defineBlockBody}} + +
+ {{/defineBlockContainer}} +{{/defineBlock}} diff --git a/src/main/webapp/base/GalleryIntro.less b/src/main/webapp/base/GalleryIntro.less new file mode 100644 index 00000000..66a5ef95 --- /dev/null +++ b/src/main/webapp/base/GalleryIntro.less @@ -0,0 +1,11 @@ +.GalleryIntro { + + &-title { + &:extend(.GalleryIntro-title all); + } + + &-description { + &:extend(.GalleryIntro-description all); + } + +} diff --git a/src/main/webapp/base/GallerySlide.hbs b/src/main/webapp/base/GallerySlide.hbs new file mode 100644 index 00000000..2e50633c --- /dev/null +++ b/src/main/webapp/base/GallerySlide.hbs @@ -0,0 +1,60 @@ +{{#defineBlock "GallerySlide"}} + + {{#defineElement "mediaContent"}} +
{{this}}
+ {{/defineElement}} + + {{#defineElement "mediaControlsZoom" noWith=true}} + + {{/defineElement}} + + {{#defineElement "mediaControls" noWith=true}} +
+ {{element "mediaControlsZoom"}} +
+ {{/defineElement}} + + {{#defineElement "media" noWith=true}} +
+ {{element "mediaControls"}} + {{element "mediaContent"}} +
+ {{/defineElement}} + + {{#defineElement "infoTitleShort"}}data-shorttext="{{this}}"{{/defineElement}} + {{#defineElement "infoTitle" noWith=true}} +
+ {{infoTitle}} +
+ {{/defineElement}} + + {{#defineElement "infoDescriptionShort"}}data-shorttext="{{this}}"{{/defineElement}} + {{#defineElement "infoDescription" noWith=true}} +
+ {{infoDescription}} +
+ {{/defineElement}} + + {{#defineElement "infoAttribution"}} +
{{this}}
+ {{/defineElement}} + + {{#defineElement "info" noWith=true}} +
+ {{element "infoTitle"}} + {{element "infoDescription"}} + {{element "infoAttribution"}} +
+ {{/defineElement}} + + {{#defineBlockContainer}} +
+ + {{#defineBlockBody}} + {{element "media"}} + {{element "info"}} + {{/defineBlockBody}} + +
+ {{/defineBlockContainer}} +{{/defineBlock}} diff --git a/src/main/webapp/base/GallerySlide.less b/src/main/webapp/base/GallerySlide.less new file mode 100644 index 00000000..3dc65425 --- /dev/null +++ b/src/main/webapp/base/GallerySlide.less @@ -0,0 +1,23 @@ +.GallerySlide { + + &-image { + &:extend(.GallerySlide-image all); + } + + &-info { + &:extend(.GallerySlide-info all); + } + + &-infoTitle { + &:extend(.GallerySlide-infoTitle all); + } + + &-infoDescription { + &:extend(.GallerySlide-infoDescription all); + } + + &-infoAttribution { + &:extend(.GallerySlide-infoAttribution all); + } + +} diff --git a/src/main/webapp/base/main/GalleryMain.hbs b/src/main/webapp/base/main/GalleryMain.hbs new file mode 100644 index 00000000..45769b39 --- /dev/null +++ b/src/main/webapp/base/main/GalleryMain.hbs @@ -0,0 +1,85 @@ +{{#defineBlock "Gallery"}} + + {{#defineElement "intro"}} +
{{this}}
+ {{/defineElement}} + + {{#defineElement "controls" noWith=true}} +
+ + + + + +
+ {{/defineElement}} + + {{#defineElement "slides" noWith=true}} +
+ {{#each slides}}{{this}}{{/each}} +
+ {{/defineElement}} + + {{#defineElement "modalControlsClose" noWith=true}} + + {{/defineElement}} + {{#defineElement "modalControlsFullscreen" noWith=true}} + + {{/defineElement}} + + {{#defineElement "modalControlsPrev" noWith=true}} + + {{/defineElement}} + + {{#defineElement "modalControlsNext" noWith=true}} + + {{/defineElement}} + + {{#defineElement "modalControlsCount" noWith=true}} + + {{/defineElement}} + + {{#defineElement "modalControlsInfo" noWith=true}} + + {{/defineElement}} + + {{#defineElement "modalControls" noWith=true}} +
+ {{element "modalControlsClose"}} + {{element "modalControlsFullscreen"}} + {{element "modalControlsPrev"}} + {{element "modalControlsCount"}} + {{element "modalControlsNext"}} + {{element "modalControlsInfo"}} +
+ {{/defineElement}} + + {{#defineElement "modalCarousel" noWith=true}} +
+ {{/defineElement}} + + {{#defineElement "modal" noWith=true}} +
+ {{element "modalControls"}} + {{element "modalCarousel"}} +
+ {{/defineElement}} + + {{#defineBlockContainer}} +
+ + {{#defineBlockBody}} + {{#unless singleton}} + {{element "intro"}} + {{element "controls"}} + {{/unless}} + {{element "slides"}} + {{element "modal"}} + {{/defineBlockBody}} + +
+ {{/defineBlockContainer}} +{{/defineBlock}} diff --git a/src/main/webapp/base/main/GalleryMain.less b/src/main/webapp/base/main/GalleryMain.less new file mode 100644 index 00000000..f2352818 --- /dev/null +++ b/src/main/webapp/base/main/GalleryMain.less @@ -0,0 +1,86 @@ +.Gallery { + + //--------------- + // Gallery-intro + // Javascript also adds either Gallery-intro-background-single or Gallery-intro-background-montage + // to display images as a background behind the intro content. + //--------------- + &-intro { + &:extend(.Gallery-intro all); + + &-background { // Optional element added by javascript + &:extend(.Gallery-intro-background all); + } + + &-background-single { // Optional element added by javascript + &:extend(.Gallery-intro-background-single all); + } + + &-background-montage { // Optional element added by javascript + &:extend(.Gallery-intro-background-montage all); + } + } + + //------------------ + // Gallery-controls + // Contains a photo count, plus buttons to switch between list and tiles views. + //------------------ + &-controls { + &:extend(.Gallery-controls all); + + &-count { + &:extend(.Gallery-controls-count all); + } + + &-buttons { + &:extend(.Gallery-controls-buttons all); + + // List button + &-list { + &:extend(.Gallery-controls-buttons-list all); + } + + // Tiles button + &-tiles { + &:extend(.Gallery-controls-buttons-tiles all); + } + + // Make a button appear selected + &-active { + &:extend(.Gallery-controls-buttons-active all); + } + } + } + + //---------------- + // Gallery-slides + // Container for the gallery slides. + // However note that this is hidden because=, but the javascript duplicates the content + // into Gallery-view-list and Gallery-view-tiles + // Contains GallerySlide blocks. + // --------------- + &-slides { + &:extend(.Gallery-slides all); + // Refer to GallerySlide.less + } + + //------------------- + // Gallery-view-list + // Added by javascript to represent slides in a list view. + // Contains GallerySlide blocks. + //------------------- + &-view-list { // Elements added by javascript + &:extend(.Gallery-view-list all); + // Refer to GallerySlide.less + } + + //------------------- + // Gallery-view-tiles + // Added by javascript to represent slides in a tile view. + // Contains GallerySlide blocks. + //------------------- + &-view-tiles { // Elements added by javascript + &:extend(.Gallery-view-tiles all); + // Refer to GallerySlide.less + } +} diff --git a/src/main/webapp/main.js b/src/main/webapp/main.js index 6db5a4d2..737439db 100644 --- a/src/main/webapp/main.js +++ b/src/main/webapp/main.js @@ -18,4 +18,6 @@ import Comment from "community/commenting/Comment.js"; import CommentEntry from "community/commenting/CommentEntry.js"; import Commenting from "community/commenting/Commenting.js"; +import Gallery from "base/main/GalleryMain.js"; + export default {}; diff --git a/src/main/webapp/sample/All.less b/src/main/webapp/sample/All.less index 192c19fc..f5793375 100644 --- a/src/main/webapp/sample/All.less +++ b/src/main/webapp/sample/All.less @@ -1 +1,3 @@ @import "../base/All.less"; + +@import "Gallery.less"; diff --git a/styleguide/main/gallery-main/gallery.md b/styleguide/main/gallery-main/gallery.md new file mode 100644 index 00000000..c7c6bee1 --- /dev/null +++ b/styleguide/main/gallery-main/gallery.md @@ -0,0 +1,30 @@ +## Gallery with random image montage + +### Requirements +* [Jira Ticket and Requirements](https://perfectsense.atlassian.net/browse/BSP-1571) +* Designs: [Zeplin](https://zpl.io/Z11ulFh), [PNG](https://www.dropbox.com/sh/n1ljua526dyo6l3/AAB43ovSiTFXz4LxKuIARrGfa?dl=0), [Sketch](https://www.dropbox.com/s/bz9w6u8mn742rjt/Base%20Photo%20Gallery.sketch?dl=0) + +### Blocks and properties +* `Gallery`: + * `intro`: (Block) A single `GalleryIntro` block. + * `introBackgroundImage`: (URL/Optional) By default, the gallery displays a randomized matrix of images + as a background. However, you can specify a single image here to use as the background. This URL will + be placed in the `data-gallery-intro-background-image` HTML parameter and used by the JavaScript. + * `slides`: (Array) List of `GallerySlide` blocks. + * `modal` (HTML) Placeholder for the gallery modal, including additional properties for adding controls to the modal. +* `GalleryIntro`: Introductory content for the gallery. + * `title` (String|HTML) + * `titleShort` (String|HTML) Optional short version of the title. + * `description` (HTML) + * `descriptionShort` (HTML) Optional short version of the description. +* `GallerySlide`: A single slide for the gallery. + * `media` + * `mediaContent`: (Image Element) Image or other content for the slide. + * `mediaControls` (HTML) Controls to overlay on top of the media. + * `mediaControlsZoom` (HTML) Control to zoom the image (display the modal) + * info: (HTML) Descriptive content for the image. By default contains infoTitle, infoDescription, infoAttribution. + * `infoTitle` (HTML) Title for the image. + * `infoTitleShort` (HTML) Optional short title for the image. + * `infoDescription` (HTML) Description for the image. + * `infoDescriptionShort` (HTML) Optional short description for the image. + * `infoAttribution` (HTML) Attribution for the image. diff --git a/styleguide/main/gallery-main/galleryIntroBackgroundImage.md b/styleguide/main/gallery-main/galleryIntroBackgroundImage.md new file mode 100644 index 00000000..ff26d8ae --- /dev/null +++ b/styleguide/main/gallery-main/galleryIntroBackgroundImage.md @@ -0,0 +1,4 @@ +## Gallery with single intro background image + +This shows the gallery if you specify the `introBackgroundImage` property. +Instead of a matrix of images, you get a single image background. From 8b7a5bc94b822e50ccfc2d0a447c4b916da567a1 Mon Sep 17 00:00:00 2001 From: John Pencola Date: Thu, 11 Aug 2016 15:08:38 -0400 Subject: [PATCH 7/8] Removes Gallery sample style from Base since this will exist in IC instead --- Gruntfile.js | 3 +- src/main/webapp/sample/All.less | 3 - src/main/webapp/sample/Gallery.less | 961 ---------------------------- styleguide/_config.json | 4 - 4 files changed, 1 insertion(+), 970 deletions(-) delete mode 100644 src/main/webapp/sample/All.less delete mode 100644 src/main/webapp/sample/Gallery.less diff --git a/Gruntfile.js b/Gruntfile.js index e9045bbf..1a23e6d0 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -47,8 +47,7 @@ module.exports = function (grunt) { styles: { dir: '', less: [ - 'base/All.less', - 'sample/All.less' + 'base/All.less' ], options : { autoprefixer: true diff --git a/src/main/webapp/sample/All.less b/src/main/webapp/sample/All.less deleted file mode 100644 index f5793375..00000000 --- a/src/main/webapp/sample/All.less +++ /dev/null @@ -1,3 +0,0 @@ -@import "../base/All.less"; - -@import "Gallery.less"; diff --git a/src/main/webapp/sample/Gallery.less b/src/main/webapp/sample/Gallery.less deleted file mode 100644 index 384982b0..00000000 --- a/src/main/webapp/sample/Gallery.less +++ /dev/null @@ -1,961 +0,0 @@ -// Stylesheet theme to show sample styling for the gallery -// In the styleguide, select "Gallery" from the dropdown in the upper right of the page. - -@import "../base/Reset.less"; - -/** -* Bowered CSS. -* ---------------------------------------------------------------------------- -* This is for plugins that we bowered in that have their own CSS -* ---------------------------------------------------------------------------- -*/ -@import (inline) "../bsp-carousel.css"; -@import (inline) "../bsp-modal.css"; - -// Blank styles to set up LESS extend inheritance -@import "../base/main/GalleryMain.less"; -@import "../base/GalleryIntro.less"; -@import "../base/GallerySlide.less"; - -// Sample styles for Gallery - -.GallerySample() { - @screen-xs-min: 320px; - @screen-sm-min: 568px; - @screen-md-min: 768px; - @screen-lg-min: 1024px; - @screen-xl-min: 1440px; - @screen-xxl-min: 1920px; - - @_screen-xs-max: (@screen-sm-min - 1); - @_screen-sm-max: (@screen-md-min - 1); - @_screen-md-max: (@screen-lg-min - 1); - @_screen-lg-max: (@screen-xl-min - 1); - @_screen-xl-max: (@screen-xxl-min - 1); - - @mq-xs: ~"only screen and (min-width: @{screen-xs-min})"; - @mq-xs-landscape: ~"@{mq-xs} and (orientation: landscape)"; - @mq-sm: ~"only screen and (min-width: @{screen-sm-min})"; - @mq-md: ~"only screen and (min-width: @{screen-md-min})"; - @mq-lg: ~"only screen and (min-width: @{screen-lg-min})"; - @mq-xl: ~"only screen and (min-width: @{screen-xl-min})"; - @mq-xxl: ~"only screen and (min-width: @{screen-xxl-min})"; - - @mq-only-xs: ~"only screen and (max-width: @{_screen-xs-max})"; - @mq-only-sm: ~"only screen and (min-width: @{screen-sm-min}) and (max-width: @{_screen-sm-max})"; - @mq-only-md: ~"only screen and (min-width: @{screen-md-min}) and (max-width: @{_screen-md-max})"; - @mq-only-lg: ~"only screen and (min-width: @{screen-lg-min})"; - @mq-only-xl: ~"only screen and (min-width: @{screen-xl-min})"; - @mq-only-xxl: ~"only screen and (min-width: @{screen-xxl-min})"; - - // Gallery colors - @gallery-color-bg: black; - @gallery-color-fg: white; - @gallery-color-slide-border: white; - @gallery-color-button-bg: white; - @gallery-color-button-fg: black; - @gallery-color-intro-bg: white; - @gallery-color-intro-fg: black; - @gallery-color-slide-info-bg: #1b1b1b; - @gallery-color-slide-info-fg: white; - @gallery-color-modal-controls-bg: #3c3c3c; - @gallery-color-modal-controls-fg: white; - - // Mixin to clear floats - .clearfix() { - &:before, - &:after { - content: " "; - display: table; - } - &:after { - clear: both; - } - } - - // Mixin to clear absolute position - .clearpos() { - left: auto; - right: auto; - top: auto; - bottom: auto; - } - - // Mobile first styles - // Starting with @mq-xs (320px) - - .Gallery { - - background-color: @gallery-color-bg; - color: @gallery-color-fg; - button { - background-color: @gallery-color-button-bg; - color: @gallery-color-button-fg;; - } - - &[data-gallery-singleton] { - // If the gallery is in singleton mode - .Gallery-intro { - display:none; - } - .Gallery-controls { - display:none; - } - } - - &-intro { - // Gallery-background images to be positioned absolutely - position: relative; - - // Set a minimum height but allow it to expand if the GalleryIntro content goes long - min-height: 540px; - - // Center the GalleryIntro block - display: flex; - align-items: center; - justify-content: center; - - // The intro box that sits above the background images - .GalleryIntro { - z-index: 1; // Needs a z-index so it will sit on top of Gallery-background - width: 240px - (20px * 2); - padding: 30px 20px; - margin: 1em 0; // in case the intro gets larger than the - background-color: @gallery-color-intro-bg; - color: @gallery-color-intro-fg; - } - - &-background { - - &[data-gallery-intro-background="single"] { - img { - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - object-fit: cover; - } - } - - &[data-gallery-intro-background="montage"] { - - img { - position: absolute; - object-fit: cover; - - // Image grid: - // - // 111 2 - // 111 3 - // 4 777 - // 5 777 - // 6 777 - - &:nth-child(1) { - top: 0; - left: 0; - width:65%; // let width expand - height:40%; - } - &:nth-child(2) { - top: 0; - right: 0; - width: 32%; - height: 19%; - } - &:nth-child(3) { - top: 21%; - right:0; - width: 32%; - height: 19%; - } - &:nth-child(4) { - width: 32%; - height: 18%; - left: 0; - top: 42%; - } - &:nth-child(5) { - width: 32%; - height: 18%; - left: 0; - top: 62%; - } - &:nth-child(6) { - width: 32%; - height: 18%; - left: 0; - bottom: 0; - } - &:nth-child(7) { - width: 65%; - height: 58%; - right: 0; - bottom: 0; - } - - // Hide anything past seven images - &:nth-child(n+8) { - display:none; - } - } - } - } - } - - &-controls { - - margin-top: 20px; - margin-bottom: 10px; - padding: 0 20px; - - &-count { - } - - &-buttons { - // Hide control buttons for small screens - display:none; - } - } - - // Slides are cloned into List and Tiles views, so hide the original slides - // unless we're in "singleton" mode. In that case there are not list or tiles views. - &-slides { - display: none; - } - - .GallerySlide { - - &-media { - position:relative; - cursor: pointer; - - &:hover { - .GallerySlide-mediaControlsZoom { - display: block; - } - } - } - - &-mediaControlsZoom { - // Hide by default, show on :hover - display: none; - position: absolute; - right: 26px; - top: 26px; - } - } - - /* List View */ - &-slides[data-gallery-view="list"] { - - display:block; - - .GallerySlide { - - border-top: 1px solid @gallery-color-slide-border; - padding-top: 10px; - padding-bottom: 10px; - - .clearfix; - - &-media { - width:100%; - } - &-mediaContent { - img { - display:block; - width:100%; - height: auto; - } - } - &-info { - margin: 10px 20px; - } - } - } - - /* Singleton view */ - &[data-gallery-singleton] &-slides { - - display: block; - - .GallerySlide { - - padding-top: 0; - padding-bottom: 10px; - - .clearfix; - - &-media { - width:100%; - } - &-mediaContent { - img { - display:block; - width:100%; - height: auto; - } - } - &-info { - margin: 10px 20px; - } - } - } - - /* Tile view */ - &-slides[data-gallery-view="tiles"] { - // No tiles until window is wide enough - display: none; - } - } - - // Gallery modal used for zoomed view - .modal-theme-gallery { - .vex-content { - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 100%; - } - // Hide the default close button for the modal since we will provide our own - .vex-close { - display:none; - } - } - - // Modal is outside of the main Gallery element - .Gallery-modal { - width: 100vw; - height: 100vh; - position:relative; - } - - // Extra controls that appear in the modal (Close, Prev, Next, Count, Info) - .Gallery-modalControls { - position: absolute; - - // Give a z-index so it sits on top of image - z-index:1; - - &Close { - position: fixed; - right:15px; - top:10px; - } - &Fullscreen { - display: none; - position: fixed; - right:15px; - top:60px; - } - &Prev { - display:none; - } - &Next { - display:none; - } - &Info { - position: fixed; - right: 15px; - bottom: 10px; - } - &Count { - // Hidden for mobile view but displayed when info button is clicked - display:none; - color: @gallery-color-fg; - position: fixed; - right: 70px; - bottom: 10px; - - // Hack to fix a bug in Chrome browser with fixed position - // and force the element to be updated when the content changes - // See here: http://stackoverflow.com/a/15203880/101157 - -webkit-transform: translateZ(0); - } - } - - // Slides within the modal - .Gallery-slides[data-gallery-view="modal"] { - - // The Gallery-slides are hidden initially, so we need to override that and display them. - display: block; - background-color: @gallery-color-bg; - - .GallerySlide { - - // Set up a flex columns so the image and info can expand / contract to fill available space - display: flex; - flex-direction: column; - - width: 100vw; - height: 100vh; - - &-media { - display: flex; - width: 100%; - height: 100%; - } - - &-mediaContent { - - // Set up flex display so the image scales to available space - display: flex; - width: 100%; - height: 100%; - - min-height: 40%; - - img { - // Make the image fill the available space - display: block; - min-width: 100%; - min-height:100%; - - // If the image gets stretched, add space so the image stays at same aspect ratio. - object-fit: contain; - } - } - - &-mediaControlsZoom { - // Since we're already in the modal, hide the zoom control on the image - display: none !important; - } - - &-info { - - // Hide the info by default - display: none; - - z-index:1; - background-color: @gallery-color-slide-info-bg; - color: @gallery-color-slide-info-fg; - padding: 20px; - font-size:80%; - } - } - } - - // An attribute is added to indicate when the carousel navigation should be hidden within modal view - // (if there is only a single slide to show in the carousel) - .Gallery-modal[data-gallery-hidenav] { - .Gallery-modalControls { - &Prev, &Count, &Next { - display: none !important; - } - } - } - - // Hide the "Fullscreen" button if the modal is already in fullscreen, - // or if fullscreen mode is not supported - .Gallery-modal:fullscreen, .Gallery-modal:not([data-gallery-fullscreen-is-supported]) { - .Gallery-modalControls { - &Fullscreen { - display: none !important; - } - } - } - - // An attribute is added to indicate when the info should be displayed within modal view - .Gallery-modal[data-gallery-showinfo] { - - .GallerySlide { - &-media { - // Make the image take up any remaining space not used by the info - flex-grow: 1; - flex-shrink: 99; - } - &-info { - display:block; - overflow: auto; - - // A little extra padding so the text can scroll up past the "Info" button - // to ensure the text is not obscured. - padding-bottom: 40px; - - flex-shrink: 1; - } - } - - .Gallery-modalControls { - - &Count { - display:inline-block; - } - - &Info { - // Make the "Info" button appear selected - font-weight: bold; - } - } - } - - // For certain sizes show the alternate short text if it is defined - @media only screen and (max-width: 567px) { - .Gallery, .Gallery-modal { - [data-shorttext] { - > span { font-size: 0; display:table; } - &:after { - font-size: inherit; - content: attr(data-shortText); - } - } - } - } - - // Styles for 568px - @media @mq-sm { - - .Gallery { - - &-intro { - - min-height: 326px; - - .GalleryIntro { - width: 460px - (40px * 2); - padding: 30px 40px; - } - - &-background[data-gallery-intro-background="montage"] { - - img { - - // Different image grid: - // - // 1 2 44444 - // 333 44444 - // 333 5 6 7 - - &:nth-child(1) { - .clearpos; - top: 0; - left: 0; - width: 19%; - height: 32%; - } - &:nth-child(2) { - .clearpos; - top: 0; - left: 20%; - width: 19%; - height: 32%; - } - &:nth-child(3) { - .clearpos; - bottom: 0; - left: 0; - width: 39%; - height: 66%; - } - &:nth-child(4) { - .clearpos; - right: 0; - top: 0; - width: 60%; - height: 66%; - } - &:nth-child(5) { - .clearpos; - left: 40%; - bottom: 0; - width: 19%; - height: 32%; - } - &:nth-child(6) { - .clearpos; - left: 60%; - bottom: 0; - width: 20%; - height: 32%; - } - &:nth-child(7) { - .clearpos; - right: 0; - bottom: 0; - width: 19%; - height: 32%; - } - } - } - } - } - - // Modal 568px - // Move the slide info to the right instead of the bottom - .Gallery-modal[data-gallery-showinfo] { - .GallerySlide { - flex-direction: row; - &-media { - width: 65%; - } - &-info { - display:flex; - flex-direction:column; - justify-content: center; - padding-top: 40px; - width: 35%; - } - } - } - } - - // Styles for 768px - @media @mq-md { - - .Gallery { - - &-intro { - - min-height: 432px; - - .GalleryIntro { - width: 568px - (40px * 2); - padding: 40px; - } - } - - &-controls { - - .clearfix; - margin-top: 40px; - margin-bottom: 20px; - - &-count { - float:left; - } - - &-buttons { - - // Start displaying control buttons at this breakpoint - display:block; - float:right; - - &-list { - // Replace control buttons with icons if desired - } - - &-tiles { - // Replace control buttons with icons if desired - } - - [data-gallery-button-active] { - font-weight:bold; - text-decoration:none; - pointer-events: none; - } - } - } - - &-slides[data-gallery-view="list"] { - - display: none; - - .GallerySlide { - - border-top: 1px solid @gallery-color-slide-border; - padding-top: 20px; - padding-bottom: 20px; - - .clearfix; - - &-media { - float:right; - margin-right:20px; - width:72%; - img { - display:block; - width:100%; - height: auto; - } - } - &-info { - float: left; - width: 20%; - margin-left: 20px; - margin-right: 10px; - } - } - } - - &-slides[data-gallery-view="tiles"] { - - display: none; - border-top: 1px solid @gallery-color-slide-border; - padding: 20px; - - .GallerySlide { - - width: 45%; - margin-bottom: 30px; - - &-media { - width:100%; - } - &-mediaContent { - img { - width:100%; - height: auto; - } - } - &-info { - margin-top:10px; - } - } - } - - &-slides[data-gallery-view-active] { - display:block; - } - } - - // Modal 768px - // Goes back to putting the info below the image - // Also puts controls at the bottom and adds next/previous buttons - // Modal controls appear at the bottom of the screen - .Gallery-modalControls { - position: absolute; - left: 0; - right: 0; - bottom: 0; - height: 60px; - background-color: @gallery-color-modal-controls-bg; - - &Close { - .clearpos; - position: fixed; - left: 15px; - bottom: 20px; - } - &Fullscreen { - .clearpos; - position: fixed; - left: 80px; - bottom: 20px; - - // For demo purposes we are not displaying the fullscreeen button. - // Change this to display:inline to use the fullscreen button - display: none; - } - - &Count { - .clearpos; - position: fixed; - left: 0; - bottom: 20px; - width: 100%; - text-align: center; - color: @gallery-color-modal-controls-fg; - display: inline-block; - z-index: -1; - } - - &Info { - bottom: 20px; - } - - &Prev { - display: inline-block; - position: fixed; - right: 55%; - bottom: 20px; - } - &Next { - display: inline-block; - position: fixed; - left: 55%; - bottom: 20px; - } - } - - .Gallery-modalCarousel { - .GallerySlide { - &-media { - // Leave space for modal controls - margin-bottom: 60px; - } - } - } - .Gallery-modal[data-gallery-showinfo] { - .GallerySlide { - flex-direction: column; - &-media { - margin-bottom: 0; - width: 100vw; - } - &-info { - display:block; - padding-top: 20px; - padding-bottom: 70px; - width: 100vw; - } - } - } - } - - // Styles for 1024px - @media @mq-lg { - - .Gallery { - - &-intro { - min-height: 576px; - .GalleryIntro { - width: 768px - (84px * 2); - padding: 40px 84px; - } - } - - &-slides[data-gallery-view="list"] { - .GallerySlide { - padding-top: 30px; - padding-bottom: 30px; - } - } - - &-slides[data-gallery-view="tiles"] { - padding: 30px 20px; - .GallerySlide { - width: 30%; - } - } - } - - // Modal 1024 - // Goes back to putting the info to the right of the image - // Also puts controls at the rigth of the image. - .Gallery-modalControls { - position: absolute; - left: auto; - right: 0; - top: 0; - bottom: 0; - width: 60px; - height: 100vh; - - &Close { - .clearpos; - position: fixed; - top: 20px; - right: 15px; - } - - &Fullscreen { - .clearpos; - position: fixed; - top: 60px; - right: 15px; - } - - &Count { - .clearpos; - position: fixed; - top: 50%; - right: 0; - text-align: center; - vertical-align: middle; - color: @gallery-color-modal-controls-fg; - display: inline-block; - z-index: auto; - width: 60px; - } - - &Info { - bottom: 20px; - } - - &Prev { - .clearpos; - display: inline-block; - position: fixed; - right: 0; - top: 46%; - } - &Next { - .clearpos; - display: inline-block; - position: fixed; - right: 0; - top: 54%; - } - } - - .Gallery-modalCarousel { - // Reduce size of media to leave room for modal controls - width: ~"calc(100vw - 60px)"; - .GallerySlide { - &-media { - // Remove space for modal controls at bottom since they are now on right - margin-bottom: 0; - } - } - } - .Gallery-modal[data-gallery-showinfo] { - .Gallery-modalControls { - background-color: @gallery-color-modal-controls-bg; - } - .GallerySlide { - flex-direction: row; - &-media { - width: 75%; - } - &-info { - display:flex; - padding: 0 80px 0 20px; // leave extra room on right for controls - width: 25%; - } - } - } - } - - // Styles for 1440px - @media @mq-xl { - - .Gallery { - - // Set a fixed width so gallery doesn't get any larger than this - width: @screen-xl-min; - - &-intro { - min-height: 810px; - .GalleryIntro { - width: 1024px - (212px * 2); - padding: 50px 212px; - } - } - - &-slides[data-gallery-view="list"] { - - .GallerySlide { - - padding-top: 40px; - padding-bottom: 40px; - - &-media { - // Since we're not letting gallery expand beyond this size, using px width instead of % - width: 1024px; - margin-right:98px; - } - - &-info { - // Since we're not letting gallery expand beyond this size, using px width instead of % - width:200px; - margin-left: 98px; - margin-right: 20px; - } - } - } - - &-slides[data-gallery-view="tiles"] { - padding: 40px 100px; - .GallerySlide { - width: 400px; - } - } - } - } -} - -.GallerySample(); diff --git a/styleguide/_config.json b/styleguide/_config.json index 13287a89..31b1c4e3 100644 --- a/styleguide/_config.json +++ b/styleguide/_config.json @@ -3,10 +3,6 @@ { "name": "Base", "href": "/base/All.min.css" - }, - { - "name": "Samples", - "href": "/sample/All.min.css" } ] } From ac4803fe7dbd305a7183881503d811159115fd66 Mon Sep 17 00:00:00 2001 From: John Pencola Date: Thu, 11 Aug 2016 15:09:02 -0400 Subject: [PATCH 8/8] Renaming to be more consistent --- ...oBackgroundImage.json => gallery-main-single-intro-image.json} | 0 ...IntroBackgroundImage.md => gallery-main-single-intro-image.md} | 0 .../{gallerySingleton.json => gallery-main-single-slide.json} | 0 .../{gallerySingleton.md => gallery-main-single-slide.md} | 0 styleguide/main/gallery-main/{gallery.json => gallery-main.json} | 0 styleguide/main/gallery-main/{gallery.md => gallery-main.md} | 0 6 files changed, 0 insertions(+), 0 deletions(-) rename styleguide/main/gallery-main/{galleryIntroBackgroundImage.json => gallery-main-single-intro-image.json} (100%) rename styleguide/main/gallery-main/{galleryIntroBackgroundImage.md => gallery-main-single-intro-image.md} (100%) rename styleguide/main/gallery-main/{gallerySingleton.json => gallery-main-single-slide.json} (100%) rename styleguide/main/gallery-main/{gallerySingleton.md => gallery-main-single-slide.md} (100%) rename styleguide/main/gallery-main/{gallery.json => gallery-main.json} (100%) rename styleguide/main/gallery-main/{gallery.md => gallery-main.md} (100%) diff --git a/styleguide/main/gallery-main/galleryIntroBackgroundImage.json b/styleguide/main/gallery-main/gallery-main-single-intro-image.json similarity index 100% rename from styleguide/main/gallery-main/galleryIntroBackgroundImage.json rename to styleguide/main/gallery-main/gallery-main-single-intro-image.json diff --git a/styleguide/main/gallery-main/galleryIntroBackgroundImage.md b/styleguide/main/gallery-main/gallery-main-single-intro-image.md similarity index 100% rename from styleguide/main/gallery-main/galleryIntroBackgroundImage.md rename to styleguide/main/gallery-main/gallery-main-single-intro-image.md diff --git a/styleguide/main/gallery-main/gallerySingleton.json b/styleguide/main/gallery-main/gallery-main-single-slide.json similarity index 100% rename from styleguide/main/gallery-main/gallerySingleton.json rename to styleguide/main/gallery-main/gallery-main-single-slide.json diff --git a/styleguide/main/gallery-main/gallerySingleton.md b/styleguide/main/gallery-main/gallery-main-single-slide.md similarity index 100% rename from styleguide/main/gallery-main/gallerySingleton.md rename to styleguide/main/gallery-main/gallery-main-single-slide.md diff --git a/styleguide/main/gallery-main/gallery.json b/styleguide/main/gallery-main/gallery-main.json similarity index 100% rename from styleguide/main/gallery-main/gallery.json rename to styleguide/main/gallery-main/gallery-main.json diff --git a/styleguide/main/gallery-main/gallery.md b/styleguide/main/gallery-main/gallery-main.md similarity index 100% rename from styleguide/main/gallery-main/gallery.md rename to styleguide/main/gallery-main/gallery-main.md