[#618] Added better state management for clicking on left hand vertic…

…al tabs for the Plugin Preferences screen. Improved default state handling. Added support for deep linking into a plugin's preferences.

lib/MT/CMS/Plugin.pm

@@ -121,8 +121,7 @@ sub save_config {
         $tmpl->param( plugin_config_saved => 1 );
         return $app->build_page($tmpl);
     }
-    $app->add_return_arg( saved  => 1 );
-    $app->add_return_arg( plugin => $profile->{object}->id );
+    $app->add_return_arg( saved  => $profile->{object}->id );
     $app->call_return;
 } ## end sub save_config
 

mt-static/jquery/jquery.history.js

@@ -0,0 +1,194 @@
+/*
+ * jQuery history plugin
+ * 
+ * The MIT License
+ * 
+ * Copyright (c) 2006-2009 Taku Sano (Mikage Sawatari)
+ * Copyright (c) 2010 Takayuki Miwa
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+(function($) {
+    var locationWrapper = {
+        put: function(hash, win) {
+            (win || window).location.hash = this.encoder(hash);
+        },
+        get: function(win) {
+            var hash = ((win || window).location.hash).replace(/^#/, '');
+            try {
+                return $.browser.mozilla ? hash : decodeURIComponent(hash);
+            }
+            catch (error) {
+                return hash;
+            }
+        },
+        encoder: encodeURIComponent
+    };
+
+    var iframeWrapper = {
+        id: "__jQuery_history",
+        init: function() {
+            var html = '<iframe id="'+ this.id +'" style="display:none" src="javascript:false;" />';
+            $("body").prepend(html);
+            return this;
+        },
+        _document: function() {
+            return $("#"+ this.id)[0].contentWindow.document;
+        },
+        put: function(hash) {
+            var doc = this._document();
+            doc.open();
+            doc.close();
+            locationWrapper.put(hash, doc);
+        },
+        get: function() {
+            return locationWrapper.get(this._document());
+        }
+    };
+
+    function initObjects(options) {
+        options = $.extend({
+                unescape: false
+            }, options || {});
+
+        locationWrapper.encoder = encoder(options.unescape);
+
+        function encoder(unescape_) {
+            if(unescape_ === true) {
+                return function(hash){ return hash; };
+            }
+            if(typeof unescape_ == "string" &&
+               (unescape_ = partialDecoder(unescape_.split("")))
+               || typeof unescape_ == "function") {
+                return function(hash) { return unescape_(encodeURIComponent(hash)); };
+            }
+            return encodeURIComponent;
+        }
+
+        function partialDecoder(chars) {
+            var re = new RegExp($.map(chars, encodeURIComponent).join("|"), "ig");
+            return function(enc) { return enc.replace(re, decodeURIComponent); };
+        }
+    }
+
+    var implementations = {};
+
+    implementations.base = {
+        callback: undefined,
+        type: undefined,
+
+        check: function() {},
+        load:  function(hash) {},
+        init:  function(callback, options) {
+            initObjects(options);
+            self.callback = callback;
+            self._options = options;
+            self._init();
+        },
+
+        _init: function() {},
+        _options: {}
+    };
+
+    implementations.timer = {
+        _appState: undefined,
+        _init: function() {
+            var current_hash = locationWrapper.get();
+            self._appState = current_hash;
+            self.callback(current_hash);
+            setInterval(self.check, 100);
+        },
+        check: function() {
+            var current_hash = locationWrapper.get();
+            if(current_hash != self._appState) {
+                self._appState = current_hash;
+                self.callback(current_hash);
+            }
+        },
+        load: function(hash) {
+            if(hash != self._appState) {
+                locationWrapper.put(hash);
+                self._appState = hash;
+                self.callback(hash);
+            }
+        }
+    };
+
+    implementations.iframeTimer = {
+        _appState: undefined,
+        _init: function() {
+            var current_hash = locationWrapper.get();
+            self._appState = current_hash;
+            iframeWrapper.init().put(current_hash);
+            self.callback(current_hash);
+            setInterval(self.check, 100);
+        },
+        check: function() {
+            var iframe_hash = iframeWrapper.get(),
+                location_hash = locationWrapper.get();
+
+            if (location_hash != iframe_hash) {
+                if (location_hash == self._appState) {    // user used Back or Forward button
+                    self._appState = iframe_hash;
+                    locationWrapper.put(iframe_hash);
+                    self.callback(iframe_hash); 
+                } else {                              // user loaded new bookmark
+                    self._appState = location_hash;  
+                    iframeWrapper.put(location_hash);
+                    self.callback(location_hash);
+                }
+            }
+        },
+        load: function(hash) {
+            if(hash != self._appState) {
+                locationWrapper.put(hash);
+                iframeWrapper.put(hash);
+                self._appState = hash;
+                self.callback(hash);
+            }
+        }
+    };
+
+    implementations.hashchangeEvent = {
+        _init: function() {
+            self.callback(locationWrapper.get());
+            $(window).bind('hashchange', self.check);
+        },
+        check: function() {
+            self.callback(locationWrapper.get());
+        },
+        load: function(hash) {
+            locationWrapper.put(hash);
+        }
+    };
+
+    var self = $.extend({}, implementations.base);
+
+    if($.browser.msie && ($.browser.version < 8 || document.documentMode < 8)) {
+        self.type = 'iframeTimer';
+    } else if("onhashchange" in window) {
+        self.type = 'hashchangeEvent';
+    } else {
+        self.type = 'timer';
+    }
+
+    $.extend(self, implementations[self.type]);
+    $.history = self;
+})(jQuery);

mt-static/js/melody/cfg_plugins.js

@@ -0,0 +1,40 @@
+function getParameterByName( name )
+{
+    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
+    var regexS = "[\\?&]"+name+"=([^&#]*)";
+    var regex = new RegExp( regexS );
+    var results = regex.exec( window.location.href );
+    if( results == null )
+        return "";
+    else
+      return decodeURIComponent(results[1].replace(/\+/g, " "));
+}
+
+$(document).ready( function() {
+    $('#content-nav ul li a').click( function() {
+        var active    = $(this).parents('ul').find('li.active a').attr('id').replace(/-tab$/,'');
+        var newactive = $(this).attr('id').replace(/-tab$/,'');
+        //alert('active:'+active+', newactive='+newactive);
+        if (active != newactive) {
+          $('#content-nav li.active').removeClass('active');
+          $('#' + active + '-tab-content').hide();
+          $('#content-nav li.' + newactive).addClass('active');
+        }
+        $('#' + newactive + '-tab-content').show();
+        $('h2#page-title').html( $(this).attr('title') );
+        document.title = $(this).attr('title');
+        window.location.hash = newactive;
+    });
+    $.history.init(function(hash){
+        if (hash == "") { 
+            if (getParameterByName('saved')) {
+               hash = 'plugin-' + getParameterByName('saved');
+            } else {
+                hash = $('#content-nav ul li:first-child a').attr('id').replace(/-tab$/,'');
+            }
+        }
+        //alert('hash='+hash);
+        $('#content-nav ul li.'+hash+'-tab').addClass('active');
+        $('#content-nav ul li.'+hash+'-tab a').click();
+    });
+});

mt-static/melody/styles.css

@@ -63,4 +63,6 @@
   background-image: url(../images/status_icons/user-enabled-sysadmin.png);
 }
 
-
+/* Refactored Plugin Preferences */
+#list-plugins .plugin_form h3.plugin-name { display: none; }
+/* END Refactored Plugin Preferences */

tmpl/cms/cfg_plugin.tmpl

@@ -40,6 +40,8 @@
 </mt:setvarblock>
 
 <mt:setvarblock name="html_head" append="1">
+    <script src="<mt:StaticWebPath>jquery/jquery.history.js" type="text/javascript"></script>
+    <script src="<mt:StaticWebPath>js/melody/cfg_plugins.js" type="text/javascript"></script>
     <script type="text/javascript">
     /* <![CDATA[ */
     var last_shown;
@@ -61,7 +63,7 @@
 <mt:loop name="plugin_loop">
   <mt:if name="plugin_has_config"><mt:if name="can_config">
 
-    <div id="plugin-<$mt:var name="plugin_id" dirify="1"$>" class="plugin_form">
+    <div id="plugin-<$mt:var name="plugin_id" dirify="1"$>-tab-content" class="plugin_form">
 
       <h3 class="plugin-name"><$mt:var name="plugin_name" escape="html"$></h3>
 

tmpl/cms/include/plugins_content_nav.tmpl

@@ -1,28 +1,5 @@
-<script type="text/javascript">
-$(document).ready( function() {
-  var url = document.URL;
-  var a   = url.match(/#(.+)$/);
-  $('#content-nav ul li a').click( function() {
-    var current = $(this).parent().parent().find('.active');
-    var newactive = $(this).attr('title');
-    current.removeClass('active');
-    $('#' + current.find('a').attr('title')).hide();
-    $(this).parent().addClass('active');
-    $('#' + newactive).show();
-  });  
-<mt:if name="plugin">
-  $('#content-nav ul li a[title="plugin-<$mt:var name="plugin"$>"]').trigger('click');
-<mt:else>
-  if (a && $('#content-nav ul li a[title="'+a[1]+'"]')) {
-    $('#content-nav ul li a[title="'+a[1]+'"]').trigger('click');
-  } else {
-    $('#content-nav ul li:first-child').find('a').trigger('click');
-  }
-</mt:if>
-});
-</script>
 <ul>
 <mt:loop name="plugin_loop"><mt:if name="plugin_has_config">
-    <li<mt:if name="plugin" eq="$plugin_id"> class="active"</mt:if>><a href="javascript:void(0)" title="plugin-<$mt:var name="plugin_id" dirify="1"$>"><b><$mt:var name="plugin_name"$></b></a></li>
+    <li class="plugin-<$mt:var name="plugin_id" dirify="1"$>-tab<mt:if name="plugin" eq="$plugin_id"> active</mt:if>"><a href="javascript:void(0)" id="plugin-<$mt:var name="plugin_id" dirify="1"$>-tab" title="<__trans phrase="[_1] Preferences" params="<$mt:var name="plugin_name" encode_html="1"$>">"><b><$mt:var name="plugin_name"$></b></a></li>
 </mt:if></mt:loop>
 </ul>