fix fluent-menu initialize

olton · Jul 29, 2015 · 4a58195 · 4a58195
1 parent bf8e39e
commit 4a58195
Show file tree

Hide file tree

Showing 10 changed files with 134 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## 3.0.9
 * add hotkeys binding
+* fix fluent-menu initialize
 
 ## 3.0.8
 * upd font declaration add sans-serif

diff --git a/build/js/metro.js b/build/js/metro.js
@@ -30,7 +30,6 @@ if (window.METRO_CURRENT_LOCALE === undefined) window.METRO_CURRENT_LOCALE = 'en
 if (window.METRO_SHOW_TYPE === undefined) window.METRO_SHOW_TYPE = 'slide';
 if (window.METRO_DEBUG === undefined) window.METRO_DEBUG = true;
 if (window.METRO_CALENDAR_WEEK_START === undefined) window.METRO_CALENDAR_WEEK_START = 0;
-if (window.METRO_OVERWRITE_HOTKEY === undefined) window.METRO_OVERWRITE_HOTKEY = 0;
 
 window.canObserveMutation = 'MutationObserver' in window;
 
@@ -1651,14 +1650,15 @@ $.widget("metro.accordion", {
     _openFrame: function(frame){
         var o = this.options;
         var content = frame.children('.content');
+        var result;
 
         if (typeof o.onFrameOpen === 'function') {
             if (!o.onFrameOpen(frame)) {return false;}
         } else {
             if (typeof window[o.onFrameOpen] === 'function') {
                 if (!window[o.onFrameOpen](frame)) {return false;}
             } else {
-                var result = eval("(function(){"+o.onFrameOpen+"})");
+                result = eval("(function(){"+o.onFrameOpen+"})");
                 if (!result.call(frame)) {return false;}
             }
         }
@@ -1674,7 +1674,7 @@ $.widget("metro.accordion", {
             if (typeof window[o.onFrameOpened] === 'function') {
                 window[o.onFrameOpened](frame);
             } else {
-                var result = eval("(function(){"+o.onFrameOpened+"})");
+                result = eval("(function(){"+o.onFrameOpened+"})");
                 result.call(frame);
             }
         }
@@ -4331,6 +4331,9 @@ $.widget( "metro.fluentmenu" , {
 
     _createMenu: function(){
         var that = this, element = this.element, o = this.options;
+        var active_tab = $(element.find(".tabs-holder > li.active")[0]);
+
+        this.openTab(active_tab);
 
         element.on("click", ".tabs-holder > li > a", function(e){
             var a = $(this);
@@ -4392,6 +4395,18 @@ $.widget( "metro.fluentmenu" , {
         $(panel).show();
     },
 
+    openTab: function(tab){
+        var that = this, element = this.element, o = this.options;
+        var target_panel = $(tab.children('a').attr('href'));
+        if (target_panel.length === 0) {
+            return false;
+        }
+        this._hidePanels();
+        this._showPanel(target_panel);
+        element.find('.tabs-holder > li').removeClass('active');
+        tab.addClass('active');
+    },
+
     _destroy: function () {
     },
 

diff --git a/build/js/metro.min.js b/build/js/metro.min.js
diff --git a/docs/fluent-menu.html b/docs/fluent-menu.html
@@ -56,7 +56,7 @@ <h1 class="text-light">Special menu</h1>
                 <ul class="tabs-holder">
                     <li class="special"><a href="#">File</a></li>
                     <li class="active"><a href="#tab_home">Home</a></li>
-                    <li><a href="#tab_mailings">Mailing</a></li>
+                    <li class="active"><a href="#tab_mailings">Mailing</a></li>
                     <li><a href="#tab_folder">Folder</a></li>
                     <li><a href="#tab_view">View</a></li>
                 </ul>
@@ -131,12 +131,81 @@ <h1 class="text-light">Special menu</h1>
                     </div>
 
                     <div class="tab-panel" id="tab_mailings">
+                        <div class="tab-panel-group">
+                            <div class="tab-group-content">
+                                <button class="fluent-big-button">
+                                    <span class="icon mif-envelop"></span>
+                                    Create<br />message
+                                </button>
+                                <div class="tab-content-segment">
+                                    <button class="fluent-big-button dropdown-toggle">
+                                        <span class="icon mif-file-picture"></span>
+                                        <span class="label">Create<br />element</span>
+                                    </button>
+                                    <ul class="d-menu" data-role="dropdown">
+                                        <li><a href="#">Message</a></li>
+                                        <li><a href="#">Event</a></li>
+                                        <li><a href="#">Meeting</a></li>
+                                        <li><a href="#">Contact</a></li>
+                                    </ul>
+                                </div>
+                                <div class="tab-content-segment">
+                                    <button class="fluent-big-button">
+                                        <span class="mif-cancel"></span>
+                                        <span class="label">Delete</span>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="tab-group-caption">Clipboard</div>
+                        </div>
                     </div>
 
                     <div class="tab-panel" id="tab_folder">
+                        <div class="tab-panel-group">
+                            <div class="tab-group-content">
+                                <div class="tab-content-segment">
+                                    <button class="fluent-button"><span class="mif-loop"></span>Replay</button>
+                                    <button class="fluent-button"><span class="mif-infinite"></span>Replay all</button>
+                                    <button class="fluent-button"><span class="mif-loop2"></span>Forward</button>
+                                </div>
+                                <div class="tab-content-segment">
+                                    <button class="fluent-tool-button"><img src="images/Notebook-Save.png"></button>
+                                    <button class="fluent-tool-button"><img src="images/Folder-Rename.png"></button>
+                                    <button class="fluent-tool-button"><img src="images/Calendar-Next.png"></button>
+                                </div>
+                            </div>
+                            <div class="tab-group-caption">Reply</div>
+                        </div>
                     </div>
 
                     <div class="tab-panel" id="tab_view">
+                        <div class="tab-panel-group">
+                            <div class="tab-group-content">
+                                <button class="fluent-big-button">
+                                    <span class="icon mif-envelop"></span>
+                                    Create<br />message
+                                </button>
+                                <div class="tab-content-segment">
+                                    <button class="fluent-big-button dropdown-toggle">
+                                        <span class="icon mif-file-picture"></span>
+                                        <span class="label">Create<br />element</span>
+                                    </button>
+                                    <ul class="d-menu" data-role="dropdown">
+                                        <li><a href="#">Message</a></li>
+                                        <li><a href="#">Event</a></li>
+                                        <li><a href="#">Meeting</a></li>
+                                        <li><a href="#">Contact</a></li>
+                                    </ul>
+                                </div>
+                                <div class="tab-content-segment">
+                                    <button class="fluent-big-button">
+                                        <span class="mif-cancel"></span>
+                                        <span class="label">Delete</span>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="tab-group-caption">Clipboard</div>
+                        </div>
                     </div>
                 </div>
             </div>

diff --git a/docs/header.html b/docs/header.html
@@ -75,7 +75,7 @@
                     <li>
                         <a href="#" class="dropdown-toggle">Information</a>
                         <ul class="d-menu" data-role="dropdown" data-no-close="true">
-                            <li><a data-hotkey="alt+n" href="notify.html">Notify system</a></li>
+                            <li><a href="notify.html">Notify system</a></li>
                             <li><a href="dialog.html">Dialogs</a></li>
                             <li><a href="windows.html">Window</a></li>
                         </ul>

diff --git a/docs/hotkeys.html b/docs/hotkeys.html
@@ -18,10 +18,6 @@
 
     <link href="css/docs.css" rel="stylesheet">
 
-    <script>
-        var METRO_OVERWRITE_HOTKEY = 1;
-    </script>
-
     <script src="js/jquery-2.1.3.min.js"></script>
     <script src="js/metro.js"></script>
     <script src="js/docs.js"></script>

diff --git a/docs/js/metro.js b/docs/js/metro.js
@@ -30,7 +30,6 @@ if (window.METRO_CURRENT_LOCALE === undefined) window.METRO_CURRENT_LOCALE = 'en
 if (window.METRO_SHOW_TYPE === undefined) window.METRO_SHOW_TYPE = 'slide';
 if (window.METRO_DEBUG === undefined) window.METRO_DEBUG = true;
 if (window.METRO_CALENDAR_WEEK_START === undefined) window.METRO_CALENDAR_WEEK_START = 0;
-if (window.METRO_OVERWRITE_HOTKEY === undefined) window.METRO_OVERWRITE_HOTKEY = 0;
 
 window.canObserveMutation = 'MutationObserver' in window;
 
@@ -1651,14 +1650,15 @@ $.widget("metro.accordion", {
     _openFrame: function(frame){
         var o = this.options;
         var content = frame.children('.content');
+        var result;
 
         if (typeof o.onFrameOpen === 'function') {
             if (!o.onFrameOpen(frame)) {return false;}
         } else {
             if (typeof window[o.onFrameOpen] === 'function') {
                 if (!window[o.onFrameOpen](frame)) {return false;}
             } else {
-                var result = eval("(function(){"+o.onFrameOpen+"})");
+                result = eval("(function(){"+o.onFrameOpen+"})");
                 if (!result.call(frame)) {return false;}
             }
         }
@@ -1674,7 +1674,7 @@ $.widget("metro.accordion", {
             if (typeof window[o.onFrameOpened] === 'function') {
                 window[o.onFrameOpened](frame);
             } else {
-                var result = eval("(function(){"+o.onFrameOpened+"})");
+                result = eval("(function(){"+o.onFrameOpened+"})");
                 result.call(frame);
             }
         }
@@ -4331,6 +4331,9 @@ $.widget( "metro.fluentmenu" , {
 
     _createMenu: function(){
         var that = this, element = this.element, o = this.options;
+        var active_tab = $(element.find(".tabs-holder > li.active")[0]);
+
+        this.openTab(active_tab);
 
         element.on("click", ".tabs-holder > li > a", function(e){
             var a = $(this);
@@ -4392,6 +4395,18 @@ $.widget( "metro.fluentmenu" , {
         $(panel).show();
     },
 
+    openTab: function(tab){
+        var that = this, element = this.element, o = this.options;
+        var target_panel = $(tab.children('a').attr('href'));
+        if (target_panel.length === 0) {
+            return false;
+        }
+        this._hidePanels();
+        this._showPanel(target_panel);
+        element.find('.tabs-holder > li').removeClass('active');
+        tab.addClass('active');
+    },
+
     _destroy: function () {
     },
 

diff --git a/js/global.js b/js/global.js
@@ -7,7 +7,6 @@ if (window.METRO_CURRENT_LOCALE === undefined) window.METRO_CURRENT_LOCALE = 'en
 if (window.METRO_SHOW_TYPE === undefined) window.METRO_SHOW_TYPE = 'slide';
 if (window.METRO_DEBUG === undefined) window.METRO_DEBUG = true;
 if (window.METRO_CALENDAR_WEEK_START === undefined) window.METRO_CALENDAR_WEEK_START = 0;
-if (window.METRO_OVERWRITE_HOTKEY === undefined) window.METRO_OVERWRITE_HOTKEY = 0;
 
 window.canObserveMutation = 'MutationObserver' in window;
 

diff --git a/js/widgets/accordion.js b/js/widgets/accordion.js
@@ -41,14 +41,15 @@ $.widget("metro.accordion", {
     _openFrame: function(frame){
         var o = this.options;
         var content = frame.children('.content');
+        var result;
 
         if (typeof o.onFrameOpen === 'function') {
             if (!o.onFrameOpen(frame)) {return false;}
         } else {
             if (typeof window[o.onFrameOpen] === 'function') {
                 if (!window[o.onFrameOpen](frame)) {return false;}
             } else {
-                var result = eval("(function(){"+o.onFrameOpen+"})");
+                result = eval("(function(){"+o.onFrameOpen+"})");
                 if (!result.call(frame)) {return false;}
             }
         }
@@ -64,7 +65,7 @@ $.widget("metro.accordion", {
             if (typeof window[o.onFrameOpened] === 'function') {
                 window[o.onFrameOpened](frame);
             } else {
-                var result = eval("(function(){"+o.onFrameOpened+"})");
+                result = eval("(function(){"+o.onFrameOpened+"})");
                 result.call(frame);
             }
         }

diff --git a/js/widgets/fluentmenu.js b/js/widgets/fluentmenu.js
@@ -29,6 +29,9 @@ $.widget( "metro.fluentmenu" , {
 
     _createMenu: function(){
         var that = this, element = this.element, o = this.options;
+        var active_tab = $(element.find(".tabs-holder > li.active")[0]);
+
+        this.openTab(active_tab);
 
         element.on("click", ".tabs-holder > li > a", function(e){
             var a = $(this);
@@ -90,6 +93,18 @@ $.widget( "metro.fluentmenu" , {
         $(panel).show();
     },
 
+    openTab: function(tab){
+        var that = this, element = this.element, o = this.options;
+        var target_panel = $(tab.children('a').attr('href'));
+        if (target_panel.length === 0) {
+            return false;
+        }
+        this._hidePanels();
+        this._showPanel(target_panel);
+        element.find('.tabs-holder > li').removeClass('active');
+        tab.addClass('active');
+    },
+
     _destroy: function () {
     },