From e360c1f7c2bcf6422e0406a63a2fbb76d8c67aae Mon Sep 17 00:00:00 2001
From: Steve Sutton <steve@gaslightmedia.com>
Date: Fri, 13 Jun 2014 11:26:08 -0400
Subject: [PATCH] work on mobile menu

attempt at putting in mobile menu
from BayBluffs
---
 Toolkit/Page.php        |  46 ++++++++++++++++++++++++++++---
 assets/dropper.gif      | Bin 0 -> 534 bytes
 assets/dropper_2.gif    | Bin 0 -> 537 bytes
 assets/dropper_3.gif    | Bin 0 -> 526 bytes
 css/arrows.css          |  11 ++++++++
 libjs/arrowMenu.js      |  58 ++++++++++++++++++++++++++++++++++++++++
 templates/template.html |  21 +++------------
 7 files changed, 114 insertions(+), 22 deletions(-)
 create mode 100644 assets/dropper.gif
 create mode 100644 assets/dropper_2.gif
 create mode 100644 assets/dropper_3.gif
 create mode 100644 css/arrows.css
 create mode 100644 libjs/arrowMenu.js

diff --git a/Toolkit/Page.php b/Toolkit/Page.php
index 7a625f9..e75339f 100755
--- a/Toolkit/Page.php
+++ b/Toolkit/Page.php
@@ -147,9 +147,11 @@ class Toolkit_Page
         $GLOBALS['styleSheets'] = array();
         $GLOBALS['styleSheets'][] = $this->mediaBaseURL . 'fancybox/jquery.fancybox.css';
         $GLOBALS['styleSheets'][] = $this->mediaBaseURL . 'css/normalize.css';
+        $GLOBALS['styleSheets'][] = $this->mediaBaseURL . 'css/arrows.css';
         // Resources needed for every page.
         $GLOBALS['topScripts'][] = JQUERY_CDN_JS;
-        $GLOBALS['bottomScripts'][] = $this->mediaBaseURL . "fancybox/jquery.fancybox.js";
+        $GLOBALS['bottomScripts'][] = $this->mediaBaseURL . 'fancybox/jquery.fancybox.js';
+        //$GLOBALS['bottomScripts'][] = $this->mediaBaseURL . 'libjs/arrowMenu.js';
     }
 
     private function _video()
@@ -569,10 +571,46 @@ class Toolkit_Page
      */
     private function _getMainNav($catid)
     {
-        $nav          = $this->_navigationFactory->createMainNav();
-        $mainNavArray = $nav->getNavStructure($this->_pageGateway, $catid);
+        $sideNav = new Toolkit_Template_Navigation_AllInOneSideNav(
+            $this->_pageGateway
+        );
+        $nav  = $sideNav->getNavigation();
+        $html = $this->_arrayToListHTML($nav);
+        return ($html) ? $html : '';
+    }
 
-        return $nav->renderPageNav($mainNavArray, 'tree');
+    private function _arrayToListHTML($array, $level = 0)
+    {
+        static $tab = "\t", $format = '<a href="%s"%s>%s</a>';
+
+        if (empty($array)) {
+            return;
+        }
+        $tabs = str_repeat($tab, $level * 2);
+        $mainClass = ($level == 0) ? ' class="off-canvas-list"': '';
+        $result = "{$tabs}<ul{$mainClass}>\n";
+        foreach ($array as $i => $node) {
+            $class
+                = ($node['class'] == 'current')
+                ? ' class="'.$node['class'].'"'
+                : '';
+            $parent
+                = ($node['class'] == 'parent')
+                ? ' class="'.$node['class'].'"'
+                : '';
+            $link = sprintf(
+                $format,
+                $node['uri'],
+                $class,
+                $node['label']
+            );
+            $result .= "{$tabs}{$tab}<li{$parent}>\n{$tabs}{$tab}{$tab}"
+                . "{$link}\n"
+                . $this->_arrayToListHTML($node['pages'], $level + 1)
+                . "{$tabs}{$tab}</li>\n";
+        }
+        $result .= "{$tabs}</ul>\n";
+        return $result;
     }
 
     /**
diff --git a/assets/dropper.gif b/assets/dropper.gif
new file mode 100644
index 0000000000000000000000000000000000000000..2b65eacaa4c0f7ed429dd914209c3ce23e110650
GIT binary patch
literal 534
zcmV+x0_punNk%w1VLSj(0M!5hLsVORhKlLw>Cw^Az{AC~xVlDGUHA9*p{cCj-``ni
zZ_?G*?(Xi)%*<|ie*gdfgpHBp<m69YWx>J0+S}Xv`}>fXob~nfr>(EJzQ9#vYU}Oo
zVQzCwT434P+2`ly|NsB;^78rl`QhQ=Mpj&<r>M-%&%3+3zP`T2#l?V$jdFW`!^6Yc
z+}*0It?TRS@$vEH<>gRaW8vcC(bCgHRb73EjnvfCZ+n2HsjKbn?cLqo&(F`Pt+7m7
zV!_45A^8LV2LS&7EC2ui06YLt000L6z?yJKEE<o<q;kn@I-k&}bV{vSuh^`1%k6r<
z;IMd1E}PHP(g`)0q~7p2eBwfP+>Hir!0-D9c`|4<D-AauI|+)5j0qkAgF-nJBOf0d
zn3<U$1(8EEF&i*27YC-NFf%@$LL3n~7Z(+?v=tXPtV0$8AqN!?z`zFxxkNu3vcV4(
z3kJnQ5-kkAv>OV~L=GP?rw2CJMHsxM8Q?}HFEB06=0p-R9~$jODiHJc`1$(#{Qds_
z00RmfNU)&6g9sBUT*$DYLn-z4y^E(0ojP{&#PvE*Zk{%7r@on!Kw(-fYvu?b`xT5C
zxLv(i1{?Ow6)ah`X5A_VN))LxZl+SL@-(T^B~6+*c`9@$QKLqW2Hi=KXV0HMfzYU7
Y<3^6x6m%Yn9ZR;X*|TWVCJX`qJ7NtH#sB~S

literal 0
HcmV?d00001

diff --git a/assets/dropper_2.gif b/assets/dropper_2.gif
new file mode 100644
index 0000000000000000000000000000000000000000..0f3fe266a3a407eb8c7debf7edffe98c18e61e16
GIT binary patch
literal 537
zcmV+!0_OckNk%w1VLSj(0M!5hDmg%fjF0K*=`K7&&Ct<ZXl=#C#k;$^_xJbT-`}UH
zsXa(dZFhU_?(UzWq}0^Z$;-_D|Nl^1U*zQEIz>vBoS(6^xBL71_4W0^!NJ+u+H-q;
zMNwC-v9mTqNoH+v?d|R7=jYei+Rx9=yS~5w|Nrvx@<B~g`T6;Ge}duR;mpj;(b3Vv
z!^7R(-Eeq&>+9?B@$sOgr{(44zP`TM+1WZqOkQVfFg-(|qolpR!Q0#0p{1u@Xlwug
z00000A^8LV2LS&7EC2ui06YLt000L6K!9*aEE<o<q;kn@I-k&}bV{vSuh^`1%k6r<
z;IMd1E}PHP+<}(K7~b$WJflEU+z`lU&+7a4dk_m~03Rz4H7*H@jExC3FN8u48Y&?n
zAeow)Asv!JI4m<DF)<hjsHrh39-l%I6CfBE7qzw*7zM6F0Rkon7ZJk32o<|TI<mpT
z7X$;xLpB->z_u_P&_q2UF{ua)*+nwGs21Ty5HK+!&*wxomM88;8!7Ym`1$(#{Qds_
z00RmfNU)&6g9sBUT*$DYLn-z4!3!ZTU%GYe=8gM>z}&nW+`NH1XQKwSTi4E!P&O<=
zvv9qBEgM!08Z23~Zq>@QE7YhqQm4EjSk>wiB}<q#ZR+&N5F$m696=&<$3PxHe*ORw
bghmY;H*&%np!2Y-*|TWVs$I)AVGsa2IC=~Q

literal 0
HcmV?d00001

diff --git a/assets/dropper_3.gif b/assets/dropper_3.gif
new file mode 100644
index 0000000000000000000000000000000000000000..40a087b00e53bcac01a9ee333df3a9aebb3f4cd4
GIT binary patch
literal 526
zcmV+p0`dJvNk%w1VLSj(0M!5hQDtv;g^TCs=g-g2y~M|-v9<U2_luUB+uhw+Y<2PR
z@u{w`xV^yt|NqR)%+k};gpZV_sj6Xfd%L^4?d|R1;o<xH`&4Lhm!PF=dxF*3+V%DI
z!^6Yt>+9m<<i*9sQfP9)!NF#CfQOQoSZHtm|Nr^<`P|>&d5DkB(bC%5+P=QN!^g?2
zv$pN;@ALEXTy1vQ+1XobbLHjbtgf$yl$z=3>3W5V(b3W0-``VaZ`IY+-QC^e<K^$~
z?*IS*A^8LV2LS&7EC2ui06YLt000L6K#*`qEE<o<q;kn@I-k&}bV{vSuh^`1%k6r<
z;IMd1E}PHP$Yd4bxZm(N4NVGt9FBn=$M5U)4l-yUHx4^7JUkVPjEp=n5Q9PsDis0(
z6q%Zu0t}Kv4>J@B3L6Hes0tnlpF$a;8ygn0v=$pEtwR_#3I-Mpz`zCtxkM}!vcU}&
z8W+VwFbEXBv=k!GL;(W5s5RI{Egjqh-$p6oC(h+WFqRVQMk5FC^!4`l`1$(#{Qds_
z00RmfNU)&6g9sBUTqs2zzIFoM**m8oUA=JQ=xO72%3HZ;(`s2OcPv>jX5V)8`lW2x
zvscJu)tYsySg28@P^DVcijpNOOq(`!`c&vpqDDv`MWSN|&!0Yi{scm!hE1HSaON=F
Q%C)Q4uVBN9Ef@p<JMEVh{{R30

literal 0
HcmV?d00001

diff --git a/css/arrows.css b/css/arrows.css
new file mode 100644
index 0000000..5a4c680
--- /dev/null
+++ b/css/arrows.css
@@ -0,0 +1,11 @@
+#mobilenav ul li a.dropper {
+    position: absolute;
+    z-index: 80;
+    right: 4px;
+    top: 6px;
+    width: 60px;
+    height: 40px;
+    background: url(../assets/dropper.gif) 0 0 no-repeat;
+    cursor: pointer;
+    border-radius: 8px 8px 0 0;
+}
\ No newline at end of file
diff --git a/libjs/arrowMenu.js b/libjs/arrowMenu.js
new file mode 100644
index 0000000..c56fba7
--- /dev/null
+++ b/libjs/arrowMenu.js
@@ -0,0 +1,58 @@
+var menuCounter = 0;
+function setMobileNav() {
+    /* Click handler for the menu button. */
+    $('.left-off-canvas-toggle').click(function() {
+        if(menuCounter % 2 == 0) {
+            // Open nav.
+            // Animate the logo so it fits in the topbar.
+             $('#logo').addClass('open');
+             // Toggle the menu button to a close button.
+             $(this).css('background', 'url(' + media_base_url + 'assets/close.png) 0 0 no-repeat');
+             // Show the menu.
+             $('#mobilenav').css("display", "block");
+        } else {
+            // Close nav.
+            // Animate the logo to its original size.
+             $('#logo').removeClass('open');
+             // Toggle the close button to a menu button.
+             $(this).css('background', 'url(' + media_base_url + 'assets/menu.png) 0 0 no-repeat');
+             // Show the menu.
+             $('#mobilenav').css("display", "none");
+        }
+        menuCounter++;
+    });
+    /* Add drop down arrows to any links that have children. */
+    setArrows();
+
+    /* Click handler for droppers */
+    $('#mobilenav a.dropper').click(function() {
+        /* Open or Close. */
+        if($(this).siblings('ul').eq(0).hasClass('open')) {
+            /* If child ul has class of open, close. */
+            $(this).siblings('ul').eq(0).removeClass('open');
+            $(this).css('backgroundPosition', '0 0');
+        } else {
+            /* If child ul has class of closed, open. */
+            $(this).siblings('ul').eq(0).addClass('open');
+            $(this).css('backgroundPosition', '0 -40px');
+        }
+    });
+}
+
+function setArrows() {
+    /* Iterate through the nav tree and add drop down arrows to any LI that has a child UL. */
+    $('#mobilenav ul li a.dropper').each(function(i) {
+        $(this).remove();
+    });
+    $('#mobilenav ul li a').each( function (i) {
+        $(this).addClass('link');
+        if($(this).parent('li').has('ul').length > 0) {
+            $(this).after('<a class="dropper"></a>');
+        }
+    });
+}
+
+$(function(){
+
+    setMobileNav();
+})
\ No newline at end of file
diff --git a/templates/template.html b/templates/template.html
index 7c50a8f..1fa66e7 100644
--- a/templates/template.html
+++ b/templates/template.html
@@ -8,6 +8,7 @@
 <script src="{mediaBaseURL:h}libjs/vendor/modernizr.js"></script>
 <link rel="stylesheet" href="{mediaBaseURL:h}css/foundation.css" />
 <link rel="stylesheet" href="{mediaBaseURL:h}styles.css" />
+<flexy:toJavascript flexy:prefix="" media_base_url="mediaBaseURL"></flexy:toJavascript>
 {styles:h}
 {topScripts:h}
 </head>
@@ -21,24 +22,8 @@
                 </section>
             </nav>
         </div>
-        <aside class="left-off-canvas-menu">
-            <ul class="off-canvas-list">
-                <li class="menu-icon">
-                    <a href="#">Home</a>
-                </li>
-                <li>
-                    <a href="#">Tours &amp; Cruises</a>
-                </li>
-                <li>
-                    <a href="#">Tickets, Packages &amp; Coupons</a>
-                </li>
-                <li>
-                    <a href="#">Groups &amp; School Rates</a>
-                </li>
-                <li>
-                    <a href="#">About</a>
-                </li>
-            </ul>
+        <aside class="left-off-canvas-menu" id="mobilenav">
+            {mainNav:h}
         </aside>
         <section class="main-section">
             <div class="row">
-- 
2.17.1