#98 - design box menu sliders

inc/classes/BxDolTemplate.php

@@ -335,6 +335,7 @@ class BxDolTemplate extends BxDol implements iBxDolSingleton
             'media-tablet.css',
             'media-phone.css',
             'media-print.css',
+            BX_DOL_URL_PLUGINS_PUBLIC . 'marka/marka.min.css',
         ));
 
         //--- Load default JS ---//
@@ -350,6 +351,7 @@ class BxDolTemplate extends BxDol implements iBxDolSingleton
             'jquery.webForms.js',
             'jquery.dolPopup.js',
             'elementQuery.min.js',
+            'marka/marka.min.js',
         ));
 
         //--- Load default JS ---//

inc/js/functions.js

@@ -285,6 +285,51 @@ function bx_menu_popup_inline (jSel, e, options) {
         $(jSel).dolPopup(o);
 }
 
+/**
+ * Show pointer popup with menu from existing HTML.
+ * @param jSel - jQuery selector for html to show in popup
+ * @param e - element to click to open/close slider
+ * @param options - popup options
+ */
+function bx_menu_slide (jSel, e) {
+    var options = options || {};
+    var eSlider = $(jSel);
+    var eBlock = eSlider.parents('.bx-page-block-container');
+    var eIcon = $(e).find('.sys-icon-a');
+
+    var fClose = function () {
+        if (eIcon)
+            (new Marka(eIcon[0])).set(eIcon.attr('data-icon-orig'));
+        eSlider.slideUp()
+    };
+
+    var fOpen = function () {
+        if (eIcon) {
+            eIcon.attr('data-icon-orig', eIcon.attr('data-icon'));
+            (new Marka(eIcon[0])).set('times');
+        }
+        eSlider.css({
+            position: 'absolute',
+            top: eBlock.find('.bx-db-header').outerHeight(true),
+            left: 0,
+            width: eBlock.width()
+        });
+        eSlider.slideDown();
+    };    
+    
+    if ($(jSel + ':visible').length) {
+        fClose();
+    } 
+    else {
+        fOpen();
+        eSlider.find('a').each(function () {
+            $(this).on('click', function () {
+                fClose();
+            });
+        });
+    }
+}
+
 /**
  * Set ACL level for specified profile
  * @param iProfileId - profile id to set acl level for

modules/boonex/ocean/data/template/system/_header.html

@@ -53,7 +53,14 @@
 
         $(document).ready(function () {
             bx_time('__lang__');
+
             $('#bx-toolbar').css({opacity: 0.9});
+
+            $('.sys-icon-a').each(function () {
+                var e = $(this);
+                var m = new Marka(e.get(0)), r = e.attr('data-rotate'), c = e.attr('data-color');
+                m.set(e.attr('data-icon')).rotate(r ? r : 'up').color(c ? c : '#29789c');
+            });
         });
 
         (function(w) {

template/_header.html

@@ -52,7 +52,14 @@
 
         $(document).ready(function () {
             bx_time('__lang__');
+
             $('#bx-toolbar').css({opacity: 0.9});
+
+            $('.sys-icon-a').each(function () {
+                var e = $(this);
+                var m = new Marka(e.get(0)), r = e.attr('data-rotate'), c = e.attr('data-color');
+                m.set(e.attr('data-icon')).rotate(r ? r : 'up').color(c ? c : '#3e8685');
+            });
         });
 
         (function(w) {

template/css/common.css

@@ -61,8 +61,17 @@ blockquote {
     overflow:hidden;
 }
 
+.sys-icon-a {
+    width:2rem;
+    height:2rem;
+}
+
 /* --------------- design boxes */
 
+.bx-db-container {
+    position:relative;
+}
+
 .bx-db-title {
     display:inline-block;
     float:left;
@@ -169,6 +178,10 @@ blockquote {
     text-decoration:none;
 }
 
+.bx-popup-slide-wrapper li {
+    text-align:right;
+}
+
 /* --------------- message box */
 
 .bx-msg-box-container {

template/popup_slide.html

@@ -0,0 +1,3 @@
+<div  id="__id__" class="bx-popup-wrapper bx-popup-slide-wrapper bx-def-z-index-front bx-def-color-bg-box bx-def-border-bottom bx-def-border-top" style="__wrapper_style__">
+    __content__
+</div>

template/scripts/BxBaseFunctions.php

@@ -12,6 +12,7 @@ bx_import('BxDolTemplate');
 class BxBaseFunctions extends BxDol implements iBxDolSingleton
 {
     protected $_oTemplate;
+    protected $_sDesignBoxIcon = 'chevron';
 
     protected function __construct($oTemplate)
     {
@@ -109,6 +110,17 @@ class BxBaseFunctions extends BxDol implements iBxDolSingleton
             ($isPlaceInCenter ? '</div>' : '');
     }
 
+    function slideBox($sName, $sContent, $isHiddenByDefault = false)
+    {
+        $iId = !empty($sName) ? $sName : time();
+
+        return $this->_oTemplate->parseHtmlByName('popup_slide.html', array(
+            'id' => $iId,
+            'wrapper_style' => $isHiddenByDefault ? 'display:none;' : '',
+            'content' => $sContent
+        ));
+    }
+
     function getTemplateIcon($sName)
     {
         $sUrl = $this->_oTemplate->getIconUrl($sName);
@@ -228,8 +240,8 @@ class BxBaseFunctions extends BxDol implements iBxDolSingleton
 
             if ($sMenu) {
                 $sId = 'bx-menu-db-' . time() . rand(0, PHP_INT_MAX);
-                $sCode .= BxTemplFunctions::getInstance()->transBox($sId, '<div class="bx-def-padding bx-def-color-bg-block">' . $sMenu . '</div>', true);
-                $aButtonMenu = array ('icon' => 'ellipsis-h', 'onclick' => "bx_menu_popup_inline('#" . $sId . "', this)");
+                $sCode .= $this->slideBox($sId, '<div class="bx-def-padding">' . $sMenu . '</div>', true);
+                $aButtonMenu = array ('icon-a' => $this->_sDesignBoxIcon, 'onclick' => "bx_menu_slide('#" . $sId . "', this)");
             }
 
         }
@@ -252,6 +264,7 @@ class BxBaseFunctions extends BxDol implements iBxDolSingleton
 
                 $sCode .= '<a href="javascript:void(0);" ' . $sAttrs . '>';
                 $sCode .= !empty($aButton['icon']) ? '<i class="sys-icon ' . $aButton['icon'] . ' bx-def-font-h2"></i>' : '';
+                $sCode .= !empty($aButton['icon-a']) ? '<i class="sys-icon-a" data-rotate="down" data-icon="' . $aButton['icon-a'] . '"></i>' : '';
                 $sCode .= !empty($aButton['title']) ? $aButton['title'] : '';
                 $sCode .= '</a>';
             }