Merge pull request #55 from perfectsense/feature/gallery

BSP-1571 Gallery
perfectsense · Aug 11, 2016 · 71bcb16 · 71bcb16
2 parents cf2d73a + 0a1c707
commit 71bcb16
Show file tree

Hide file tree

Showing 20 changed files with 1,296 additions and 14 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -4,11 +4,50 @@ 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: [
-                    'base/All.less',
-                    'sample/All.less'
+                    'base/All.less'
                 ],
                 options : {
                     autoprefixer: true

diff --git a/bower.json b/bower.json
@@ -3,9 +3,13 @@
   "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"
+    "bsp-utils": "perfectsense/brightspot-js-utils#3.1.0",
+    "jquery": "2.1.4",
+    "normalize-css": "necolas/normalize.css#3.0.3",
+    "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"
   },
   "main": "src/main/webapp/main.js",
   "ignore": [
@@ -36,10 +40,10 @@
       }
     ],
     "normalize-css": [
-        {
-            "src": "normalize.css",
-            "dest": "bower/normalize-css/normalize.css"
-        }
+      {
+        "src": "normalize.css",
+        "dest": "bower/normalize-css/normalize.css"
+      }
     ]
   }
 }
diff --git 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
@@ -0,0 +1,27 @@
+{{#defineBlock "GalleryIntro"}}
+
+    {{#defineElement "titleShort"}}data-shorttext="{{this}}"{{/defineElement}}
+    {{#defineElement "title" noWith=true}}
+        <div class="{{elementName}}" {{element "titleShort"}} itemprop="headline">
+            <span>{{title}}</span>
+        </div>
+    {{/defineElement}}
+
+    {{#defineElement "descriptionShort"}}data-shorttext="{{this}}"{{/defineElement}}
+    {{#defineElement "description" noWith=true}}
+        <div class="{{elementName}}" {{element "descriptionShort"}} itemprop="description">
+            <span>{{description}}</span>
+        </div>
+    {{/defineElement}}
+
+    {{#defineBlockContainer}}
+        <div class="{{blockName}}" {{extraAttributes}}>
+
+            {{#defineBlockBody}}
+                {{element "title"}}
+                {{element "description"}}
+            {{/defineBlockBody}}
+
+        </div>
+    {{/defineBlockContainer}}
+{{/defineBlock}}
diff --git a/src/main/webapp/base/GalleryIntro.less 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
@@ -0,0 +1,60 @@
+{{#defineBlock "GallerySlide"}}
+
+    {{#defineElement "mediaContent"}}
+        <div class="{{elementName}}">{{this}}</div>
+    {{/defineElement}}
+
+    {{#defineElement "mediaControlsZoom" noWith=true}}
+        <button title="Increase image size" class="{{elementName}}">Zoom</button>
+    {{/defineElement}}
+
+    {{#defineElement "mediaControls" noWith=true}}
+        <div class="{{elementName}}">
+            {{element "mediaControlsZoom"}}
+        </div>
+    {{/defineElement}}
+
+    {{#defineElement "media" noWith=true}}
+        <div class="{{elementName}}">
+            {{element "mediaControls"}}
+            {{element "mediaContent"}}
+        </div>
+    {{/defineElement}}
+
+    {{#defineElement "infoTitleShort"}}data-shorttext="{{this}}"{{/defineElement}}
+    {{#defineElement "infoTitle" noWith=true}}
+        <div class="{{elementName}}" {{element "infoTitleShort"}} itemprop="name">
+            <span>{{infoTitle}}</span>
+        </div>
+    {{/defineElement}}
+
+    {{#defineElement "infoDescriptionShort"}}data-shorttext="{{this}}"{{/defineElement}}
+    {{#defineElement "infoDescription" noWith=true}}
+        <div class="{{elementName}}" {{element "infoDescriptionShort"}} itemprop="description">
+            <span>{{infoDescription}}</span>
+        </div>
+    {{/defineElement}}
+
+    {{#defineElement "infoAttribution"}}
+        <div class="{{elementName}}">{{this}}</div>
+    {{/defineElement}}
+
+    {{#defineElement "info" noWith=true}}
+        <div class="{{elementName}}">
+            {{element "infoTitle"}}
+            {{element "infoDescription"}}
+            {{element "infoAttribution"}}
+        </div>
+    {{/defineElement}}
+
+    {{#defineBlockContainer}}
+        <div class="{{blockName}}" itemprop="image" itemtype="http://schema.org/ImageObject" {{extraAttributes}}>
+
+            {{#defineBlockBody}}
+                {{element "media"}}
+                {{element "info"}}
+            {{/defineBlockBody}}
+
+        </div>
+    {{/defineBlockContainer}}
+{{/defineBlock}}
diff --git a/src/main/webapp/base/GallerySlide.less 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
@@ -0,0 +1,85 @@
+{{#defineBlock "Gallery"}}
+
+    {{#defineElement "intro"}}
+        <div class="{{elementName}}">{{this}}</div>
+    {{/defineElement}}
+
+    {{#defineElement "controls" noWith=true}}
+        <div class="{{elementName}}">
+            <span class="{{elementName}}-count"></span>
+            <span class="{{elementName}}-buttons">
+                <button class="{{elementName}}-buttons-list"><span>List</span></button>
+                <button class="{{elementName}}-buttons-tiles"><span>Tiles<span></button>
+            </span>
+        </div>
+    {{/defineElement}}
+
+    {{#defineElement "slides" noWith=true}}
+        <div class="{{elementName}}">
+            {{#each slides}}{{this}}{{/each}}
+        </div>
+    {{/defineElement}}
+
+    {{#defineElement "modalControlsClose" noWith=true}}
+        <button class="{{elementName}}"><span>Close</span></button>
+    {{/defineElement}}
+    {{#defineElement "modalControlsFullscreen" noWith=true}}
+        <button class="{{elementName}}"><span>Fullscreen</span></button>
+    {{/defineElement}}
+
+    {{#defineElement "modalControlsPrev" noWith=true}}
+        <button class="{{elementName}}"><span>Previous</span></button>
+    {{/defineElement}}
+
+    {{#defineElement "modalControlsNext" noWith=true}}
+        <button class="{{elementName}}"><span>Next</span></button>
+    {{/defineElement}}
+
+    {{#defineElement "modalControlsCount" noWith=true}}
+        <span class="{{elementName}}"></span>
+    {{/defineElement}}
+
+    {{#defineElement "modalControlsInfo" noWith=true}}
+        <button class="{{elementName}}"><span>Info</span></button>
+    {{/defineElement}}
+
+    {{#defineElement "modalControls" noWith=true}}
+        <div class="{{elementName}}">
+            {{element "modalControlsClose"}}
+            {{element "modalControlsFullscreen"}}
+            {{element "modalControlsPrev"}}
+            {{element "modalControlsCount"}}
+            {{element "modalControlsNext"}}
+            {{element "modalControlsInfo"}}
+        </div>
+    {{/defineElement}}
+
+    {{#defineElement "modalCarousel" noWith=true}}
+        <div class="{{elementName}}"></div>
+    {{/defineElement}}
+
+    {{#defineElement "modal" noWith=true}}
+        <div class="{{elementName}}">
+            {{element "modalControls"}}
+            {{element "modalCarousel"}}
+        </div>
+    {{/defineElement}}
+
+    {{#defineBlockContainer}}
+        <section class="{{blockName}}"
+            itemscope itemtype="https://schema.org/ImageGallery"
+            data-bsp-gallery-list
+            data-bsp-gallery-list-options="{ &quot;singleton&quot;:&quot;{{singleton}}&quot;, &quot;id&quot;:&quot;{{id}}&quot;, &quot;introBackgroundImage&quot;:&quot;{{introBackgroundImage}}&quot; }" {{extraAttributes}}>
+
+            {{#defineBlockBody}}
+                {{#unless singleton}}
+                    {{element "intro"}}
+                    {{element "controls"}}
+                {{/unless}}
+                {{element "slides"}}
+                {{element "modal"}}
+            {{/defineBlockBody}}
+
+        </section>
+    {{/defineBlockContainer}}
+{{/defineBlock}}