Skip to content

Commit

Permalink
[#635 state:resolved] Dramatically improved theme dashboard usability…
Browse files Browse the repository at this point in the history
…. Now supports deep-linking, and hitting the browser back button takes you to the previously selected tab as opposed to the previous screen.
  • Loading branch information
byrnereese committed Nov 30, 2010
1 parent 6afd951 commit 78594a3
Show file tree
Hide file tree
Showing 4 changed files with 216 additions and 36 deletions.
4 changes: 2 additions & 2 deletions addons/ThemeManager.plugin/config.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ key: ThemeManager
author_link: http://endevver.com/
author_name: Endevver
description: 'A comprehensive theme management plugin!'
version: 0.9.36
version: 0.10
schema_version: 6
static_version: 4
static_version: 5
l10n_class: ThemeManager::L10N

applications:
Expand Down
39 changes: 12 additions & 27 deletions addons/ThemeManager.plugin/static/js/app.js
Original file line number Diff line number Diff line change
@@ -1,30 +1,20 @@
$(document).ready( function() {
var active = $('#content-nav ul li.active a').attr('id');
$('#' + active + '-content').show();

$('h2#page-title span').html( $('#content-nav ul li.active a b').html() );

$('#fieldsets input, #fieldsets select, #fieldsets textarea').change( function () {
var changed = $(this).parent().parent().parent().attr('id');
$('#content-nav ul li.'+changed).addClass('changed');
});
$('#content-nav ul li a').click( function() {
var newactive = $(this).attr('id');
var active = $(this).parents('ul').find('li.active a').attr('id').replace(/-tab$/,'');
var newactive = $(this).attr('id').replace(/-tab$/,'');
$('#content-nav li.active').removeClass('active');
$('#' + active + '-content').hide();
$('#content-nav li.' + newactive).addClass('active');
$('#' + newactive + '-content').show();
if ( newactive == 'apply-theme-tab' ) {
// Display only "Apply a new Theme" if the user clicks for the chooser
$('h2#page-title').html( $('#content-nav ul li.'+newactive+' a b').html() );
}
else {
// Display the theme name and the tab name for any other tab.
$('h2#page-title').html( $('#theme-label').html() + ': ' + $('#content-nav ul li.'+newactive+' a b').html() );
}
active = newactive;
$('#' + active + '-tab-content').hide();
$('#content-nav li.' + newactive+'-tab').addClass('active');
$('#' + newactive + '-tab-content').show();
$('h2#page-title').html( $(this).attr('title') );
document.title = $(this).attr('title');
window.location.hash = newactive;
});

$('.field-type-radio-image li input:checked').each( function() {
$(this).parent().addClass('selected');
});
Expand Down Expand Up @@ -78,13 +68,8 @@ $(document).ready( function() {
}
});
});
if ( $('#content-nav ul li a').length > 0) {
var myFile = document.location.toString();
if (myFile.match('#')) { // the URL contains an anchor
// click the navigation item corresponding to the anchor
var myAnchor = myFile.split('#')[1];
var sel = "#content-nav ul li."+myAnchor+" a";
$(sel).click();
}
};
$.history.init(function(hash){
if (hash == "") hash = "about";
$('#content-nav ul li.'+hash+'-tab a').click();
});
});
194 changes: 194 additions & 0 deletions addons/ThemeManager.plugin/static/js/jquery.history.js
Original file line number Diff line number Diff line change
@@ -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);
15 changes: 8 additions & 7 deletions addons/ThemeManager.plugin/tmpl/theme_dashboard.mtml
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<link rel="stylesheet" href="<mt:PluginStaticWebPath component="ThemeManager">css/docs.css" type="text/css" />
<script src="<mt:PluginStaticWebPath component="ThemeManager">js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="<mt:PluginStaticWebPath component="ThemeManager">js/jquery.qtip-1.0.min.js" type="text/javascript"></script>
<script src="<mt:PluginStaticWebPath component="ThemeManager">js/jquery.history.js" type="text/javascript"></script>
<script src="<mt:PluginStaticWebPath component="ThemeManager">js/app.js" type="text/javascript"></script>
<script type="text/javascript">
PluginStaticURI = '<$mt:PluginStaticWebPath component="ThemeManager"$>';
Expand Down Expand Up @@ -44,13 +45,13 @@

<mt:SetVarBlock name="content_nav">
<ul>
<li class="about-tab active"><a href="javascript:void(0);" id="about-tab"><b><__trans phrase="About this Theme"></b></a></li>
<li class="about-tab active"><a href="javascript:void(0);" id="about-tab" title="<__trans phrase="About">: <$mt:var name="theme_label" encode_html="1"$>"><b><__trans phrase="About Theme"></b></a></li>
<mt:If name="theme_docs">
<li class="docs-tab"><a href="javascript:void(0);" id="docs-tab"><b><__trans phrase="Documentation"></b></a></li>
<li class="docs-tab"><a href="javascript:void(0);" id="docs-tab" title="<__trans phrase="Documentation">: <$mt:var name="theme_label" encode_html="1"$>"><b><__trans phrase="Documentation"></b></a></li>
</mt:If>
<li class="customize-tab"><a href="javascript:void(0);" id="customize-tab"><b><__trans phrase="Customization"></b></a></li>
<li class="templates-tab"><a href="javascript:void(0);" id="templates-tab"><b><__trans phrase="Templates"></b></a></li>
<li class="apply-theme-tab"><a href="javascript:void(0);" id="apply-theme-tab"><b><__trans phrase="Change Theme"></b></a></li>
<li class="customize-tab"><a href="javascript:void(0);" id="customize-tab" title="<__trans phrase="Customize">: <$mt:var name="theme_label" encode_html="1"$>"><b><__trans phrase="Customization"></b></a></li>
<li class="templates-tab"><a href="javascript:void(0);" id="templates-tab" title="<__trans phrase="Templates">: <$mt:var name="theme_label" encode_html="1"$>"><b><__trans phrase="Templates"></b></a></li>
<li class="apply-theme-tab"><a href="javascript:void(0);" id="apply-theme-tab" title="<__trans phrase="Change Theme">"><b><__trans phrase="Change Theme"></b></a></li>
</ul>
</mt:SetVarBlock>

Expand All @@ -68,7 +69,7 @@
</div>
</mt:If>

<h3>About this Theme</h3>
<h3>About Theme</h3>

<p id="theme-label">
<mt:Var name="theme_label"><mt:If name="theme_version">,
Expand Down Expand Up @@ -152,7 +153,7 @@

<mt:loop name="theme_dashboard_page_actions">
<mt:If name="__first__">
<h3><__trans phrase="Customize this Theme"></h3>
<h3><__trans phrase="Customize Theme"></h3>
<ul>
</mt:If>
<mt:If name="link">
Expand Down

0 comments on commit 78594a3

Please sign in to comment.