Ticket #255 - Clean up: Integrate flickity in albums.

modules/boonex/albums/classes/BxAlbumsConfig.php

@@ -127,10 +127,12 @@ class BxAlbumsConfig extends BxBaseModTextConfig
         );
 
         $this->_aJsClasses = array(
+        	'main' => 'BxAlbumsMain',
         	'manage_tools' => 'BxAlbumsManageTools'
         );
 
         $this->_aJsObjects = array(
+        	'main' => 'oBxAlbumsMain',
         	'manage_tools' => 'oBxAlbumsManageTools'
         );
 

modules/boonex/albums/classes/BxAlbumsSearchResult.php

@@ -114,7 +114,7 @@ class BxAlbumsSearchResult extends BxBaseModTextSearchResult
     {
         $s = parent::displayResultBlock ();
         $s = '<div class="bx-albums-wrapper ' . ('unit_gallery.html' == $this->sUnitTemplate ? 'bx-def-margin-neg bx-clearfix' : '') . '">' . $s . '</div>';
-        return $s;
+        return $this->oModule->_oTemplate->getJsCode('main') . $s;
     }
 
     function getAlterOrder()

modules/boonex/albums/classes/BxAlbumsTemplate.php

@@ -21,6 +21,9 @@ class BxAlbumsTemplate extends BxBaseModTextTemplate
     {
         $this->MODULE = 'bx_albums';
         parent::__construct($oConfig, $oDb);
+
+        $this->addCss(array(BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'flickity/|flickity.css'));
+        $this->addJs(array('flickity/flickity.pkgd.min.js', 'main.js'));
     }
 
     function unit ($aData, $isCheckPrivateContent = true, $sTemplateName = 'unit.html', $aParams = array())

modules/boonex/albums/js/main.js

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) BoonEx Pty Limited - http://www.boonex.com/
+ * CC-BY License - http://creativecommons.org/licenses/by/3.0/
+ *
+ * @defgroup    Albums Albums
+ * @ingroup     TridentModules
+ *
+ * @{
+ */
+
+function BxAlbumsMain(oOptions) {
+	this._sActionsUrl = oOptions.sActionUrl;
+    this._sObjName = oOptions.sObjName == undefined ? 'oBxAlbumsMain' : oOptions.sObjName;
+
+    this._sAnimationEffect = oOptions.sAnimationEffect == undefined ? 'fade' : oOptions.sAnimationEffect;
+    this._iAnimationSpeed = oOptions.iAnimationSpeed == undefined ? 'slow' : oOptions.iAnimationSpeed;
+
+    this._aHtmlIds = oOptions.aHtmlIds == undefined ? {} : oOptions.aHtmlIds;
+    this._oRequestParams = oOptions.oRequestParams == undefined ? {} : oOptions.oRequestParams;
+
+    var $this = this;
+    $(document).ready(function() {
+    	$this.init();
+    });
+}
+
+BxAlbumsMain.prototype.init = function() {
+	$('.bx-albums-unit-images').flickity({
+		cellSelector: '.bx-albums-unit-image',
+		cellAlign: 'left'
+	});
+};
+
+/** @} */

modules/boonex/albums/template/css/main.css

@@ -35,15 +35,16 @@
 .bx-albums-unit-images {
     white-space:nowrap;
     width:100%;
-    height:16rem;
-    overflow-y:hidden;
-    overflow-x:scroll;
-    -webkit-overflow-scrolling:touch;
+    height:11.25rem;
+    overflow:hidden;
 }
-
-.bx-albums-unit-images img {
-    display:inline-block;
+.bx-albums-unit-image {
+	display:inline-block;
     margin-right:0.125rem;
+}
+.bx-albums-unit-image,
+.bx-albums-unit-image img {
+    
     height:11.25rem;
 }
 

modules/boonex/albums/template/unit.html

@@ -8,7 +8,7 @@
     </div>
     <div class="bx-albums-unit-images-cont bx-def-margin-sec-top bx-def-margin-sec-bottom">
         <div class="bx-albums-unit-images bx-clearfix">
-            <bx_repeat:browse><a title="__title_attr__" href="__url__"><img alt="__title_attr__" src="__img_url__" /></a></bx_repeat:browse>
+            <bx_repeat:browse><a class="bx-albums-unit-image" title="__title_attr__" href="__url__"><img alt="__title_attr__" src="__img_url__" /></a></bx_repeat:browse>
         </div> 
     </div> 
 </div>

plugins_public/flickity/flickity.css

@@ -0,0 +1,141 @@
+/*! Flickity v1.2.1
+http://flickity.metafizzy.co
+---------------------------------------------- */
+
+.flickity-enabled {
+  position: relative;
+}
+
+.flickity-enabled:focus { outline: none; }
+
+.flickity-viewport {
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+}
+
+.flickity-slider {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+/* draggable */
+
+.flickity-enabled.is-draggable {
+  -webkit-tap-highlight-color: transparent;
+          tap-highlight-color: transparent;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.flickity-enabled.is-draggable .flickity-viewport {
+  cursor: move;
+  cursor: -webkit-grab;
+  cursor: grab;
+}
+
+.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+}
+
+/* ---- previous/next buttons ---- */
+
+.flickity-prev-next-button {
+  position: absolute;
+  top: 50%;
+  width: 44px;
+  height: 44px;
+  border: none;
+  border-radius: 50%;
+  background: white;
+  background: hsla(0, 0%, 100%, 0.75);
+  cursor: pointer;
+  /* vertically center */
+  -webkit-transform: translateY(-50%);
+      -ms-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+
+.flickity-prev-next-button:hover { background: white; }
+
+.flickity-prev-next-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 5px #09F;
+}
+
+.flickity-prev-next-button:active {
+  filter: alpha(opacity=60); /* IE8 */
+  opacity: 0.6;
+}
+
+.flickity-prev-next-button.previous { left: 10px; }
+.flickity-prev-next-button.next { right: 10px; }
+/* right to left */
+.flickity-rtl .flickity-prev-next-button.previous {
+  left: auto;
+  right: 10px;
+}
+.flickity-rtl .flickity-prev-next-button.next {
+  right: auto;
+  left: 10px;
+}
+
+.flickity-prev-next-button:disabled {
+  filter: alpha(opacity=30); /* IE8 */
+  opacity: 0.3;
+  cursor: auto;
+}
+
+.flickity-prev-next-button svg {
+  position: absolute;
+  left: 20%;
+  top: 20%;
+  width: 60%;
+  height: 60%;
+}
+
+.flickity-prev-next-button .arrow {
+  fill: #333;
+}
+
+/* color & size if no SVG - IE8 and Android 2.3 */
+.flickity-prev-next-button.no-svg {
+  color: #333;
+  font-size: 26px;
+}
+
+/* ---- page dots ---- */
+
+.flickity-page-dots {
+  position: absolute;
+  width: 100%;
+  bottom: -25px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  text-align: center;
+  line-height: 1;
+}
+
+.flickity-rtl .flickity-page-dots { direction: rtl; }
+
+.flickity-page-dots .dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin: 0 8px;
+  background: #333;
+  border-radius: 50%;
+  filter: alpha(opacity=25); /* IE8 */
+  opacity: 0.25;
+  cursor: pointer;
+}
+
+.flickity-page-dots .dot.is-selected {
+  filter: alpha(opacity=100); /* IE8 */
+  opacity: 1;
+}