Megamenu new feature: support tab-style in megamenu. Close #405

t3framework · Jul 30, 2015 · 80ca609 · 80ca609
1 parent 86592ce
commit 80ca609
Show file tree

Hide file tree

Showing 27 changed files with 1,440 additions and 581 deletions.
diff --git a/source/plg_system_t3/admin/megamenu/css/megamenu.css b/source/plg_system_t3/admin/megamenu/css/megamenu.css
@@ -735,6 +735,39 @@ body.bd {
   margin-left: -1px;
 }
 
+.mega-tab {
+  position: relative;
+}
+.mega-tab > div > ul {
+  width: 200px;
+}
+
+.mega-tab > div > ul > li {
+  position: static;
+}
+
+.mega-tab > div > ul > li > .dropdown-menu{
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 200px;
+}
+
+.mega-tab > div > ul > li > .mega-dropdown-menu {
+  	border: none;
+  	box-shadow: none;
+}
+
+.mega-tab > div > ul > li:first-child > .mega-dropdown-menu {
+	display: block;
+  	opacity: 1!important;
+}	
+
+.mega-tab > div > ul > li > .mega-dropdown-menu > div {
+	margin-left: 0!important;
+	transition: none!important;
+}
 /* Fix not hide element in admin when adding hidden class */
 #t3-admin-mm-container .hidden-xs,
 #t3-admin-mm-container .hidden-sm,

diff --git a/source/plg_system_t3/admin/megamenu/js/megamenu.js b/source/plg_system_t3/admin/megamenu/js/megamenu.js
@@ -634,6 +634,8 @@ var T3AdminMegamenu = window.T3AdminMegamenu || {};
 				/* enable/disable module chosen */
 				if (currentSelected.find ('.mega-nav').length > 0) {
 					$('.toolcol-position').parent().addClass('disabled');
+				} else {
+					$('.toolcol-groupstyle').parent().addClass('disabled');	
 				}
 				// disable choose width if signle column
 				if (currentSelected.parent().children().length == 1) {
@@ -649,8 +651,10 @@ var T3AdminMegamenu = window.T3AdminMegamenu || {};
 				} else {
 					// toggle disable
 					update_toggle (toggle, 0);
-				}	
-
+				}
+
+				// toggle group style
+				update_toggle ($('.toolcol-groupstyle'), currentSelected.data('groupstyle') == 'mega-tab' ? 1 : 0);
 				break;
 		}
 	}
@@ -757,6 +761,14 @@ var T3AdminMegamenu = window.T3AdminMegamenu || {};
 					currentSelected.data (name, value);
 				}
 				break;
+			case 'groupstyle':
+				console.log(name + ':' + value);
+				if (value == 1) {
+					currentSelected.data (name, 'mega-tab').addClass('mega-tab');					
+				} else {
+					currentSelected.data (name, '').removeClass('mega-tab');
+				}
+				break;
 		}
 	}
 

diff --git a/source/plg_system_t3/admin/megamenu/megamenu.tpl.php b/source/plg_system_t3/admin/megamenu/megamenu.tpl.php
@@ -273,6 +273,18 @@
                   </fieldset>
                 </li>
               </ul>
+              <ul>  
+                <li>
+                  <label class="hasTip" title="<?php echo self::tooltipText('T3_NAVIGATION_MM_GROUP_STYLE', 'T3_NAVIGATION_MM_GROUP_STYLE_DESC') ?>"><?php echo JText::_('T3_NAVIGATION_MM_GROUP_STYLE') ?></label>
+                  <fieldset class="radio btn-group toolcol-groupstyle">
+                    <input type="radio" id="toggleGroupStyle0" class="toolbox-input" name="toggleGroupStyle" data-name="groupstyle" value="0" checked="checked"/>
+                    <label for="toggleGroupStyle0"><?php echo JText::_('JNO') ?></label>
+                    <input type="radio" id="toggleGroupStyle1" class="toolbox-input" name="toggleGroupStyle" data-name="groupstyle" value="1"/>
+                    <label for="toggleGroupStyle1"><?php echo JText::_('JYES') ?></label>
+                  </fieldset>
+                </li>
+              </ul>
+
             </div>    
           </div> 
 

diff --git a/source/plg_system_t3/base-bs3/css/megamenu.css b/source/plg_system_t3/base-bs3/css/megamenu.css
@@ -168,6 +168,31 @@
 .t3-megamenu .nav .fa {
   margin-right: 5px;
 }
+.t3-megamenu .mega-tab > div {
+  position: relative;
+}
+.t3-megamenu .mega-tab > div > ul {
+  width: 200px;
+}
+.t3-megamenu .mega-tab > div > ul > li {
+  position: static;
+}
+.t3-megamenu .mega-tab > div > ul > li > .dropdown-menu {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 200px;
+}
+.t3-megamenu .mega-tab > div > ul > li > .mega-dropdown-menu {
+  border: none;
+  box-shadow: none;
+}
+.t3-megamenu .mega-tab > div > ul > li > .mega-dropdown-menu > div {
+  opacity: 1 !important;
+  margin-left: 0 !important;
+  transition: none !important;
+}
 @media (min-width: 768px) {
   .t3-megamenu.animate .mega  > .mega-dropdown-menu {
     transition: all 400ms;