From a280ea7aa8994c6d9fa1d9beeb1134a7eab8f3ed Mon Sep 17 00:00:00 2001 From: Stephen Hoogendijk Date: Mon, 27 Jan 2014 14:27:37 +0100 Subject: [PATCH 1/2] Added tab select based on hash feature to return to proper tab --- js/bootstrap-remote-tabs.js | 40 ++++++++++++++++++++++++--------- js/bootstrap-remote-tabs.min.js | 2 +- 2 files changed, 31 insertions(+), 11 deletions(-) diff --git a/js/bootstrap-remote-tabs.js b/js/bootstrap-remote-tabs.js index 8d8a1ce..1765318 100644 --- a/js/bootstrap-remote-tabs.js +++ b/js/bootstrap-remote-tabs.js @@ -1,7 +1,8 @@ var $ = jQuery; -/** +/*! * * Bootstrap remote data tabs plugin + * Version 1.0.1 * * Author: Stephen Hoogendijk (TheCodeAssassin) * @@ -10,7 +11,20 @@ var $ = jQuery; * @returns {{hasLoadingMask: boolean, load: Function, _executeRemoteCall: Function}} * @constructor */ +var hasLoadingMask = (jQuery().mask ? true : false), + bootstrapVersion2 = (jQuery().typeahead ? true : false); + +// hook the event based on the version of bootstrap +var showEvent = (bootstrapVersion2 ? 'show' : 'show.bs.tab'); + +$(function() { + var hash = document.location.hash; + if (hash) { + $('.nav-tabs a[href*='+hash+']').tab(showEvent); + } +}); var RemoteTabs = function() { + var obj = { hasLoadingMask: false, @@ -32,15 +46,18 @@ var RemoteTabs = function() { tabData, tabCallback, url, - simulateDelay; + simulateDelay, + alwaysRefresh; // check if the tab has a data-url property if(tabObj.is('[data-tab-url]')) { url = tabObj.attr('data-tab-url'); - tabDiv = $(tabObj.attr('href')); + tabDiv = $( '#' + tabObj.attr('href').split('#')[1]); tabData = tabObj.attr('data-tab-json') || []; tabCallback = tabObj.attr('data-tab-callback') || null; simulateDelay = tabObj.attr('data-tab-delay') || null; + alwaysRefresh = (tabObj.is('[data-tab-always-refresh]') + && tabObj.attr('data-tab-always-refresh') == 'true') || null; if(tabData.length > 0) { try @@ -54,12 +71,17 @@ var RemoteTabs = function() { } tabObj.on(tabEvent, function(e) { + + // change the hash of the location + window.location.hash = e.target.hash; - if (!tabObj.hasClass("loaded") || tabObj.is('[data-tab-always-refresh]')) { + if ((!tabObj.hasClass("loaded") || alwaysRefresh) && + !tabObj.hasClass('loading')) { if(me.hasLoadingMask) { tabDiv.mask('Loading...'); } + tabObj.addClass('loading'); // delay the json call if it has been given a value if(simulateDelay) { @@ -97,6 +119,7 @@ var RemoteTabs = function() { url: url, data: customData || [], success: function(data) { + trigger.removeClass('loading'); if(me.hasLoadingMask) { tabContainer.unmask(); } @@ -111,6 +134,7 @@ var RemoteTabs = function() { } }, fail: function(data) { + trigger.removeClass('loading'); if(me.hasLoadingMask) { tabContainer.unmask(); } @@ -118,14 +142,10 @@ var RemoteTabs = function() { }); } }; - var hasLoadingMask = (jQuery().mask ? true : false), - bootstrapVersion2 = (jQuery().typeahead ? true : false); - // hook the event based on the version of bootstrap - var event = (bootstrapVersion2 ? 'show' : 'show.bs.tab'); - obj.load(event, hasLoadingMask); + obj.load(showEvent, hasLoadingMask); return obj; }; -var remoteTabsPluginLoaded = new RemoteTabs(); \ No newline at end of file +var remoteTabsPluginLoaded = new RemoteTabs(); diff --git a/js/bootstrap-remote-tabs.min.js b/js/bootstrap-remote-tabs.min.js index 082e33d..2331052 100644 --- a/js/bootstrap-remote-tabs.min.js +++ b/js/bootstrap-remote-tabs.min.js @@ -11,4 +11,4 @@ var $=jQuery; * @returns {{hasLoadingMask: boolean, load: Function, _executeRemoteCall: Function}} * @constructor */ -var RemoteTabs=function(){var c={hasLoadingMask:false,load:function(e,g){var f=this;f.hasLoadingMask=!!g;$("[data-toggle=tab]").each(function(m,l){var h=$(l),o,r,n,i,p,j;if(h.is("[data-tab-url]")){i=h.attr("data-tab-url");o=$("#"+h.attr("href").split("#")[1]);r=h.attr("data-tab-json")||[];n=h.attr("data-tab-callback")||null;p=h.attr("data-tab-delay")||null;j=(h.is("[data-tab-always-refresh]")&&h.attr("data-tab-always-refresh")=="true")||null;if(r.length>0){try{r=$.parseJSON(r)}catch(q){console.log("Invalid json passed to data-tab-json");console.log(q)}}h.on(e,function(k){if((!h.hasClass("loaded")||j)&&!h.hasClass("loading")){if(f.hasLoadingMask){o.mask("Loading...")}h.addClass("loading");if(p){clearTimeout(window.timer);window.timer=setTimeout(function(){f._executeRemoteCall(i,r,n,h,o)},p)}else{f._executeRemoteCall(i,r,n,h,o)}}})}})},_executeRemoteCall:function(h,j,f,g,e){var i=this;$.ajax({url:h,data:j||[],success:function(k){g.removeClass("loading");if(i.hasLoadingMask){e.unmask()}if(k){if(typeof window[f]=="function"){window[f].call(null,k,g,e,j)}if(!g.hasClass("loaded")){g.addClass("loaded")}e.html(k)}},fail:function(k){g.removeClass("loading");if(i.hasLoadingMask){e.unmask()}}})}};var d=(jQuery().mask?true:false),b=(jQuery().typeahead?true:false);var a=(b?"show":"show.bs.tab");c.load(a,d);return c};var remoteTabsPluginLoaded=new RemoteTabs(); \ No newline at end of file +var hasLoadingMask=(jQuery().mask?true:false),bootstrapVersion2=(jQuery().typeahead?true:false);var showEvent=(bootstrapVersion2?"show":"show.bs.tab");$(function(){var a=document.location.hash;if(a){$(".nav-tabs a[href*="+a+"]").tab(showEvent)}});var RemoteTabs=function(){var a={hasLoadingMask:false,load:function(b,d){var c=this;c.hasLoadingMask=!!d;$("[data-toggle=tab]").each(function(i,h){var e=$(h),l,o,j,f,m,g;if(e.is("[data-tab-url]")){f=e.attr("data-tab-url");l=$("#"+e.attr("href").split("#")[1]);o=e.attr("data-tab-json")||[];j=e.attr("data-tab-callback")||null;m=e.attr("data-tab-delay")||null;g=(e.is("[data-tab-always-refresh]")&&e.attr("data-tab-always-refresh")=="true")||null;if(o.length>0){try{o=$.parseJSON(o)}catch(n){console.log("Invalid json passed to data-tab-json");console.log(n)}}e.on(b,function(k){window.location.hash=k.target.hash;if((!e.hasClass("loaded")||g)&&!e.hasClass("loading")){if(c.hasLoadingMask){l.mask("Loading...")}e.addClass("loading");if(m){clearTimeout(window.timer);window.timer=setTimeout(function(){c._executeRemoteCall(f,o,j,e,l)},m)}else{c._executeRemoteCall(f,o,j,e,l)}}})}})},_executeRemoteCall:function(e,g,c,d,b){var f=this;$.ajax({url:e,data:g||[],success:function(h){d.removeClass("loading");if(f.hasLoadingMask){b.unmask()}if(h){if(typeof window[c]=="function"){window[c].call(null,h,d,b,g)}if(!d.hasClass("loaded")){d.addClass("loaded")}b.html(h)}},fail:function(h){d.removeClass("loading");if(f.hasLoadingMask){b.unmask()}}})}};a.load(showEvent,hasLoadingMask);return a};var remoteTabsPluginLoaded=new RemoteTabs(); \ No newline at end of file From bbfa6731dc6a6e05723604bafae828b29b06c65c Mon Sep 17 00:00:00 2001 From: Stephen Hoogendijk Date: Mon, 27 Jan 2014 14:42:17 +0100 Subject: [PATCH 2/2] Modified README to reflect latest changes --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index 1e20df9..2fa097d 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,11 @@ shown event. Changelog === +Version 1.1.0 +------ +Added feature to go to the tab specified in the URL (for example #tab1 will open the tab with ID #tab1) + + Version 1.0.1 ------ Added minified version of the script. Fixed small issue with gracefully degrading