From 5bd481a36a48ae10b9827c8f38cc2c06a96053f0 Mon Sep 17 00:00:00 2001 From: Oliver Gorwits Date: Sat, 28 Jan 2012 19:56:54 +0000 Subject: [PATCH] implement history for AJAX --- Netdisco/public/javascripts/bootstrap-tabs.js | 80 ----------- .../public/javascripts/jquery-deserialize.js | 99 +++++++++++++ Netdisco/public/javascripts/jquery-history.js | 1 + Netdisco/views/device.tt | 2 +- Netdisco/views/js/device.js | 96 ++----------- Netdisco/views/js/fixes.js | 6 + Netdisco/views/js/search.js | 71 +--------- Netdisco/views/js/tabs.js | 133 ++++++++++++++++++ Netdisco/views/layouts/main.tt | 3 +- Netdisco/views/search.tt | 2 +- Netdisco/views/sidebar/device/addresses.tt | 1 + Netdisco/views/sidebar/device/details.tt | 1 + Netdisco/views/sidebar/device/modules.tt | 1 + 13 files changed, 263 insertions(+), 233 deletions(-) delete mode 100644 Netdisco/public/javascripts/bootstrap-tabs.js create mode 100644 Netdisco/public/javascripts/jquery-deserialize.js create mode 100644 Netdisco/public/javascripts/jquery-history.js create mode 100644 Netdisco/views/js/fixes.js create mode 100644 Netdisco/views/js/tabs.js diff --git a/Netdisco/public/javascripts/bootstrap-tabs.js b/Netdisco/public/javascripts/bootstrap-tabs.js deleted file mode 100644 index a3c7ee14..00000000 --- a/Netdisco/public/javascripts/bootstrap-tabs.js +++ /dev/null @@ -1,80 +0,0 @@ -/* ======================================================== - * bootstrap-tabs.js v1.4.0 - * http://twitter.github.com/bootstrap/javascript.html#tabs - * ======================================================== - * Copyright 2011 Twitter, Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ======================================================== */ - - -!function( $ ){ - - "use strict" - - function activate ( element, container ) { - container - .find('> .active') - .removeClass('active') - .find('> .dropdown-menu > .active') - .removeClass('active') - - element.addClass('active') - - if ( element.parent('.dropdown-menu') ) { - element.closest('li.dropdown').addClass('active') - } - } - - function tab( e ) { - var $this = $(this) - , $ul = $this.closest('ul:not(.dropdown-menu)') - , href = $this.attr('href') - , previous - , $href - - if ( /^#\w+/.test(href) ) { - e.preventDefault() - - if ( $this.parent('li').hasClass('active') ) { - return - } - - previous = $ul.find('.active a').last()[0] - $href = $(href) - - activate($this.parent('li'), $ul) - activate($href, $href.parent()) - - $this.trigger({ - type: 'change' - , relatedTarget: previous - }) - } - } - - - /* TABS/PILLS PLUGIN DEFINITION - * ============================ */ - - $.fn.tabs = $.fn.pills = function ( selector ) { - return this.each(function () { - $(this).delegate(selector || '.tabs li > a, .pills > li > a', 'click', tab) - }) - } - - $(document).ready(function () { - $('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a') - }) - -}( window.jQuery || window.ender ); diff --git a/Netdisco/public/javascripts/jquery-deserialize.js b/Netdisco/public/javascripts/jquery-deserialize.js new file mode 100644 index 00000000..5cba0d40 --- /dev/null +++ b/Netdisco/public/javascripts/jquery-deserialize.js @@ -0,0 +1,99 @@ +/** + * @author Kyle Florence + * @website https://github.com/kflorence/jquery-deserialize/ + * @version 1.1.0 + * + * Dual licensed under the MIT and GPLv2 licenses. + */ + +(function( jQuery ) { + +var push = Array.prototype.push, + rcheck = /^(radio|checkbox)$/i, + rselect = /^(option|select-one|select-multiple)$/i, + rvalue = /^(hidden|text|search|tel|url|email|password|datetime|date|month|week|time|datetime-local|number|range|color|submit|image|reset|button|textarea)$/i; + +jQuery.fn.extend({ + deserialize: function( data, callback ) { + if ( !this.length || !data ) { + return this; + } + + var i, length, + elements = this[ 0 ].elements || this.find( ":input" ).get(), + normalized = []; + + if ( !elements ) { + return this; + } + + if ( jQuery.isArray( data ) ) { + normalized = data; + } else if ( jQuery.isPlainObject( data ) ) { + var key, value; + + for ( key in data ) { + jQuery.isArray( value = data[ key ] ) ? + push.apply( normalized, jQuery.map( value, function( v ) { + return { name: key, value: v }; + })) : push.call( normalized, { name: key, value: value } ); + } + } else if ( typeof data === "string" ) { + var parts; + + data = decodeURIComponent( data ).split( "&" ); + + for ( i = 0, length = data.length; i < length; i++ ) { + parts = data[ i ].split( "=" ); + push.call( normalized, { name: parts[ 0 ], value: parts[ 1 ] } ); + } + } + + if ( !( length = normalized.length ) ) { + return this; + } + + var current, element, item, j, len, property, type; + + for ( i = 0; i < length; i++ ) { + current = normalized[ i ]; + + if ( !( element = elements[ current.name ] ) ) { + continue; + } + + type = ( len = element.length ) ? element[ 0 ] : element; + type = type.type || type.nodeName; + property = null; + + if ( rvalue.test( type ) ) { + property = "value"; + } else if ( rcheck.test( type ) ) { + property = "checked"; + } else if ( rselect.test( type ) ) { + property = "selected"; + } + + // Handle element group + if ( len ) { + for ( j = 0; j < len; j++ ) { + item = element [ j ]; + + if ( item.value == current.value ) { + item[ property ] = true; + } + } + } else { + element[ property ] = current.value; + } + } + + if ( jQuery.isFunction( callback ) ) { + callback.call( this ); + } + + return this; + } +}); + +})( jQuery ); diff --git a/Netdisco/public/javascripts/jquery-history.js b/Netdisco/public/javascripts/jquery-history.js new file mode 100644 index 00000000..628d41d1 --- /dev/null +++ b/Netdisco/public/javascripts/jquery-history.js @@ -0,0 +1 @@ +(function(a,b){"use strict";var c=a.History=a.History||{},d=a.jQuery;if(typeof c.Adapter!="undefined")throw new Error("History.js Adapter has already been loaded...");c.Adapter={bind:function(a,b,c){d(a).bind(b,c)},trigger:function(a,b,c){d(a).trigger(b,c)},extractEventData:function(a,c,d){var e=c&&c.originalEvent&&c.originalEvent[a]||d&&d[a]||b;return e},onDomLoad:function(a){d(a)}},typeof c.init!="undefined"&&c.init()})(window),function(a,b){"use strict";var c=a.console||b,d=a.document,e=a.navigator,f=a.sessionStorage||!1,g=a.setTimeout,h=a.clearTimeout,i=a.setInterval,j=a.clearInterval,k=a.JSON,l=a.alert,m=a.History=a.History||{},n=a.history;k.stringify=k.stringify||k.encode,k.parse=k.parse||k.decode;if(typeof m.init!="undefined")throw new Error("History.js Core has already been loaded...");m.init=function(){return typeof m.Adapter=="undefined"?!1:(typeof m.initCore!="undefined"&&m.initCore(),typeof m.initHtml4!="undefined"&&m.initHtml4(),!0)},m.initCore=function(){if(typeof m.initCore.initialized!="undefined")return!1;m.initCore.initialized=!0,m.options=m.options||{},m.options.hashChangeInterval=m.options.hashChangeInterval||100,m.options.safariPollInterval=m.options.safariPollInterval||500,m.options.doubleCheckInterval=m.options.doubleCheckInterval||500,m.options.storeInterval=m.options.storeInterval||1e3,m.options.busyDelay=m.options.busyDelay||250,m.options.debug=m.options.debug||!1,m.options.initialTitle=m.options.initialTitle||d.title,m.intervalList=[],m.clearAllIntervals=function(){var a,b=m.intervalList;if(typeof b!="undefined"&&b!==null){for(a=0;a")&&c[0]);return a>4?a:!1}();return a},m.isInternetExplorer=function(){var a=m.isInternetExplorer.cached=typeof m.isInternetExplorer.cached!="undefined"?m.isInternetExplorer.cached:Boolean(m.getInternetExplorerMajorVersion());return a},m.emulated={pushState:!Boolean(a.history&&a.history.pushState&&a.history.replaceState&&!/ Mobile\/([1-7][a-z]|(8([abcde]|f(1[0-8]))))/i.test(e.userAgent)&&!/AppleWebKit\/5([0-2]|3[0-2])/i.test(e.userAgent)),hashChange:Boolean(!("onhashchange"in a||"onhashchange"in d)||m.isInternetExplorer()&&m.getInternetExplorerMajorVersion()<8)},m.enabled=!m.emulated.pushState,m.bugs={setHash:Boolean(!m.emulated.pushState&&e.vendor==="Apple Computer, Inc."&&/AppleWebKit\/5([0-2]|3[0-3])/.test(e.userAgent)),safariPoll:Boolean(!m.emulated.pushState&&e.vendor==="Apple Computer, Inc."&&/AppleWebKit\/5([0-2]|3[0-3])/.test(e.userAgent)),ieDoubleCheck:Boolean(m.isInternetExplorer()&&m.getInternetExplorerMajorVersion()<8),hashEscape:Boolean(m.isInternetExplorer()&&m.getInternetExplorerMajorVersion()<7)},m.isEmptyObject=function(a){for(var b in a)return!1;return!0},m.cloneObject=function(a){var b,c;return a?(b=k.stringify(a),c=k.parse(b)):c={},c},m.getRootUrl=function(){var a=d.location.protocol+"//"+(d.location.hostname||d.location.host);if(d.location.port||!1)a+=":"+d.location.port;return a+="/",a},m.getBaseHref=function(){var a=d.getElementsByTagName("base"),b=null,c="";return a.length===1&&(b=a[0],c=b.href.replace(/[^\/]+$/,"")),c=c.replace(/\/+$/,""),c&&(c+="/"),c},m.getBaseUrl=function(){var a=m.getBaseHref()||m.getBasePageUrl()||m.getRootUrl();return a},m.getPageUrl=function(){var a=m.getState(!1,!1),b=(a||{}).url||d.location.href,c;return c=b.replace(/\/+$/,"").replace(/[^\/]+$/,function(a,b,c){return/\./.test(a)?a:a+"/"}),c},m.getBasePageUrl=function(){var a=d.location.href.replace(/[#\?].*/,"").replace(/[^\/]+$/,function(a,b,c){return/[^\/]$/.test(a)?"":a}).replace(/\/+$/,"")+"/";return a},m.getFullUrl=function(a,b){var c=a,d=a.substring(0,1);return b=typeof b=="undefined"?!0:b,/[a-z]+\:\/\//.test(a)||(d==="/"?c=m.getRootUrl()+a.replace(/^\/+/,""):d==="#"?c=m.getPageUrl().replace(/#.*/,"")+a:d==="?"?c=m.getPageUrl().replace(/[\?#].*/,"")+a:b?c=m.getBaseUrl()+a.replace(/^(\.\/)+/,""):c=m.getBasePageUrl()+a.replace(/^(\.\/)+/,"")),c.replace(/\#$/,"")},m.getShortUrl=function(a){var b=a,c=m.getBaseUrl(),d=m.getRootUrl();return m.emulated.pushState&&(b=b.replace(c,"")),b=b.replace(d,"/"),m.isTraditionalAnchor(b)&&(b="./"+b),b=b.replace(/^(\.\/)+/g,"./").replace(/\#$/,""),b},m.store={},m.idToState=m.idToState||{},m.stateToId=m.stateToId||{},m.urlToId=m.urlToId||{},m.storedStates=m.storedStates||[],m.savedStates=m.savedStates||[],m.normalizeStore=function(){m.store.idToState=m.store.idToState||{},m.store.urlToId=m.store.urlToId||{},m.store.stateToId=m.store.stateToId||{}},m.getState=function(a,b){typeof a=="undefined"&&(a=!0),typeof b=="undefined"&&(b=!0);var c=m.getLastSavedState();return!c&&b&&(c=m.createStateObject()),a&&(c=m.cloneObject(c),c.url=c.cleanUrl||c.url),c},m.getIdByState=function(a){var b=m.extractId(a.url),c;if(!b){c=m.getStateString(a);if(typeof m.stateToId[c]!="undefined")b=m.stateToId[c];else if(typeof m.store.stateToId[c]!="undefined")b=m.store.stateToId[c];else{for(;;){b=(new Date).getTime()+String(Math.random()).replace(/\D/g,"");if(typeof m.idToState[b]=="undefined"&&typeof m.store.idToState[b]=="undefined")break}m.stateToId[c]=b,m.idToState[b]=a}}return b},m.normalizeState=function(a){var b,c;if(!a||typeof a!="object")a={};if(typeof a.normalized!="undefined")return a;if(!a.data||typeof a.data!="object")a.data={};b={},b.normalized=!0,b.title=a.title||"",b.url=m.getFullUrl(m.unescapeString(a.url||d.location.href)),b.hash=m.getShortUrl(b.url),b.data=m.cloneObject(a.data),b.id=m.getIdByState(b),b.cleanUrl=b.url.replace(/\??\&_suid.*/,""),b.url=b.cleanUrl,c=!m.isEmptyObject(b.data);if(b.title||c)b.hash=m.getShortUrl(b.url).replace(/\??\&_suid.*/,""),/\?/.test(b.hash)||(b.hash+="?"),b.hash+="&_suid="+b.id;return b.hashedUrl=m.getFullUrl(b.hash),(m.emulated.pushState||m.bugs.safariPoll)&&m.hasUrlDuplicate(b)&&(b.url=b.hashedUrl),b},m.createStateObject=function(a,b,c){var d={data:a,title:b,url:c};return d=m.normalizeState(d),d},m.getStateById=function(a){a=String(a);var c=m.idToState[a]||m.store.idToState[a]||b;return c},m.getStateString=function(a){var b,c,d;return b=m.normalizeState(a),c={data:b.data,title:a.title,url:a.url},d=k.stringify(c),d},m.getStateId=function(a){var b,c;return b=m.normalizeState(a),c=b.id,c},m.getHashByState=function(a){var b,c;return b=m.normalizeState(a),c=b.hash,c},m.extractId=function(a){var b,c,d;return c=/(.*)\&_suid=([0-9]+)$/.exec(a),d=c?c[1]||a:a,b=c?String(c[2]||""):"",b||!1},m.isTraditionalAnchor=function(a){var b=!/[\/\?\.]/.test(a);return b},m.extractState=function(a,b){var c=null,d,e;return b=b||!1,d=m.extractId(a),d&&(c=m.getStateById(d)),c||(e=m.getFullUrl(a),d=m.getIdByUrl(e)||!1,d&&(c=m.getStateById(d)),!c&&b&&!m.isTraditionalAnchor(a)&&(c=m.createStateObject(null,null,e))),c},m.getIdByUrl=function(a){var c=m.urlToId[a]||m.store.urlToId[a]||b;return c},m.getLastSavedState=function(){return m.savedStates[m.savedStates.length-1]||b},m.getLastStoredState=function(){return m.storedStates[m.storedStates.length-1]||b},m.hasUrlDuplicate=function(a){var b=!1,c;return c=m.extractState(a.url),b=c&&c.id!==a.id,b},m.storeState=function(a){return m.urlToId[a.url]=a.id,m.storedStates.push(m.cloneObject(a)),a},m.isLastSavedState=function(a){var b=!1,c,d,e;return m.savedStates.length&&(c=a.id,d=m.getLastSavedState(),e=d.id,b=c===e),b},m.saveState=function(a){return m.isLastSavedState(a)?!1:(m.savedStates.push(m.cloneObject(a)),!0)},m.getStateByIndex=function(a){var b=null;return typeof a=="undefined"?b=m.savedStates[m.savedStates.length-1]:a<0?b=m.savedStates[m.savedStates.length+a]:b=m.savedStates[a],b},m.getHash=function(){var a=m.unescapeHash(d.location.hash);return a},m.unescapeString=function(b){var c=b,d;for(;;){d=a.unescape(c);if(d===c)break;c=d}return c},m.unescapeHash=function(a){var b=m.normalizeHash(a);return b=m.unescapeString(b),b},m.normalizeHash=function(a){var b=a.replace(/[^#]*#/,"").replace(/#.*/,"");return b},m.setHash=function(a,b){var c,e,f;return b!==!1&&m.busy()?(m.pushQueue({scope:m,callback:m.setHash,args:arguments,queue:b}),!1):(c=m.escapeHash(a),m.busy(!0),e=m.extractState(a,!0),e&&!m.emulated.pushState?m.pushState(e.data,e.title,e.url,!1):d.location.hash!==c&&(m.bugs.setHash?(f=m.getPageUrl(),m.pushState(null,null,f+"#"+c,!1)):d.location.hash=c),m)},m.escapeHash=function(b){var c=m.normalizeHash(b);return c=a.escape(c),m.bugs.hashEscape||(c=c.replace(/\%21/g,"!").replace(/\%26/g,"&").replace(/\%3D/g,"=").replace(/\%3F/g,"?")),c},m.getHashByUrl=function(a){var b=String(a).replace(/([^#]*)#?([^#]*)#?(.*)/,"$2");return b=m.unescapeHash(b),b},m.setTitle=function(a){var b=a.title,c;b||(c=m.getStateByIndex(0),c&&c.url===a.url&&(b=c.title||m.options.initialTitle));try{d.getElementsByTagName("title")[0].innerHTML=b.replace("<","<").replace(">",">").replace(" & "," & ")}catch(e){}return d.title=b,m},m.queues=[],m.busy=function(a){typeof a!="undefined"?m.busy.flag=a:typeof m.busy.flag=="undefined"&&(m.busy.flag=!1);if(!m.busy.flag){h(m.busy.timeout);var b=function(){var a,c,d;if(m.busy.flag)return;for(a=m.queues.length-1;a>=0;--a){c=m.queues[a];if(c.length===0)continue;d=c.shift(),m.fireQueueItem(d),m.busy.timeout=g(b,m.options.busyDelay)}};m.busy.timeout=g(b,m.options.busyDelay)}return m.busy.flag},m.busy.flag=!1,m.fireQueueItem=function(a){return a.callback.apply(a.scope||m,a.args||[])},m.pushQueue=function(a){return m.queues[a.queue||0]=m.queues[a.queue||0]||[],m.queues[a.queue||0].push(a),m},m.queue=function(a,b){return typeof a=="function"&&(a={callback:a}),typeof b!="undefined"&&(a.queue=b),m.busy()?m.pushQueue(a):m.fireQueueItem(a),m},m.clearQueue=function(){return m.busy.flag=!1,m.queues=[],m},m.stateChanged=!1,m.doubleChecker=!1,m.doubleCheckComplete=function(){return m.stateChanged=!0,m.doubleCheckClear(),m},m.doubleCheckClear=function(){return m.doubleChecker&&(h(m.doubleChecker),m.doubleChecker=!1),m},m.doubleCheck=function(a){return m.stateChanged=!1,m.doubleCheckClear(),m.bugs.ieDoubleCheck&&(m.doubleChecker=g(function(){return m.doubleCheckClear(),m.stateChanged||a(),!0},m.options.doubleCheckInterval)),m},m.safariStatePoll=function(){var b=m.extractState(d.location.href),c;if(!m.isLastSavedState(b))c=b;else return;return c||(c=m.createStateObject()),m.Adapter.trigger(a,"popstate"),m},m.back=function(a){return a!==!1&&m.busy()?(m.pushQueue({scope:m,callback:m.back,args:arguments,queue:a}),!1):(m.busy(!0),m.doubleCheck(function(){m.back(!1)}),n.go(-1),!0)},m.forward=function(a){return a!==!1&&m.busy()?(m.pushQueue({scope:m,callback:m.forward,args:arguments,queue:a}),!1):(m.busy(!0),m.doubleCheck(function(){m.forward(!1)}),n.go(1),!0)},m.go=function(a,b){var c;if(a>0)for(c=1;c<=a;++c)m.forward(b);else{if(!(a<0))throw new Error("History.go: History.go requires a positive or negative integer passed.");for(c=-1;c>=a;--c)m.back(b)}return m};if(m.emulated.pushState){var o=function(){};m.pushState=m.pushState||o,m.replaceState=m.replaceState||o}else m.onPopState=function(b,c){var e=!1,f=!1,g,h;return m.doubleCheckComplete(),g=m.getHash(),g?(h=m.extractState(g||d.location.href,!0),h?m.replaceState(h.data,h.title,h.url,!1):(m.Adapter.trigger(a,"anchorchange"),m.busy(!1)),m.expectedStateId=!1,!1):(e=m.Adapter.extractEventData("state",b,c)||!1,e?f=m.getStateById(e):m.expectedStateId?f=m.getStateById(m.expectedStateId):f=m.extractState(d.location.href),f||(f=m.createStateObject(null,null,d.location.href)),m.expectedStateId=!1,m.isLastSavedState(f)?(m.busy(!1),!1):(m.storeState(f),m.saveState(f),m.setTitle(f),m.Adapter.trigger(a,"statechange"),m.busy(!1),!0))},m.Adapter.bind(a,"popstate",m.onPopState),m.pushState=function(b,c,d,e){if(m.getHashByUrl(d)&&m.emulated.pushState)throw new Error("History.js does not support states with fragement-identifiers (hashes/anchors).");if(e!==!1&&m.busy())return m.pushQueue({scope:m,callback:m.pushState,args:arguments,queue:e}),!1;m.busy(!0);var f=m.createStateObject(b,c,d);return m.isLastSavedState(f)?m.busy(!1):(m.storeState(f),m.expectedStateId=f.id,n.pushState(f.id,f.title,f.url),m.Adapter.trigger(a,"popstate")),!0},m.replaceState=function(b,c,d,e){if(m.getHashByUrl(d)&&m.emulated.pushState)throw new Error("History.js does not support states with fragement-identifiers (hashes/anchors).");if(e!==!1&&m.busy())return m.pushQueue({scope:m,callback:m.replaceState,args:arguments,queue:e}),!1;m.busy(!0);var f=m.createStateObject(b,c,d);return m.isLastSavedState(f)?m.busy(!1):(m.storeState(f),m.expectedStateId=f.id,n.replaceState(f.id,f.title,f.url),m.Adapter.trigger(a,"popstate")),!0};if(f){try{m.store=k.parse(f.getItem("History.store"))||{}}catch(p){m.store={}}m.normalizeStore()}else m.store={},m.normalizeStore();m.Adapter.bind(a,"beforeunload",m.clearAllIntervals),m.Adapter.bind(a,"unload",m.clearAllIntervals),m.saveState(m.storeState(m.extractState(d.location.href,!0))),f&&(m.onUnload=function(){var a,b;try{a=k.parse(f.getItem("History.store"))||{}}catch(c){a={}}a.idToState=a.idToState||{},a.urlToId=a.urlToId||{},a.stateToId=a.stateToId||{};for(b in m.idToState){if(!m.idToState.hasOwnProperty(b))continue;a.idToState[b]=m.idToState[b]}for(b in m.urlToId){if(!m.urlToId.hasOwnProperty(b))continue;a.urlToId[b]=m.urlToId[b]}for(b in m.stateToId){if(!m.stateToId.hasOwnProperty(b))continue;a.stateToId[b]=m.stateToId[b]}m.store=a,m.normalizeStore(),f.setItem("History.store",k.stringify(a))},m.intervalList.push(i(m.onUnload,m.options.storeInterval)),m.Adapter.bind(a,"beforeunload",m.onUnload),m.Adapter.bind(a,"unload",m.onUnload));if(!m.emulated.pushState){m.bugs.safariPoll&&m.intervalList.push(i(m.safariStatePoll,m.options.safariPollInterval));if(e.vendor==="Apple Computer, Inc."||(e.appCodeName||"")==="Mozilla")m.Adapter.bind(a,"hashchange",function(){m.Adapter.trigger(a,"popstate")}),m.getHash()&&m.Adapter.onDomLoad(function(){m.Adapter.trigger(a,"hashchange")})}},m.init()}(window) \ No newline at end of file diff --git a/Netdisco/views/device.tt b/Netdisco/views/device.tt index 5789413b..a072abe7 100644 --- a/Netdisco/views/device.tt +++ b/Netdisco/views/device.tt @@ -23,7 +23,7 @@
    [% FOREACH tab IN vars.tabs %] - [% tab.label %] + [% tab.label %] [% END %]

  • [% d.ip %]

    diff --git a/Netdisco/views/js/device.js b/Netdisco/views/js/device.js index e6835800..7ece119a 100644 --- a/Netdisco/views/js/device.js +++ b/Netdisco/views/js/device.js @@ -31,79 +31,6 @@ collapseHtml: '', }); - // parameterised for the active tab - submits search form and injects - // HTML response into the tab pane, or an error/empty-results message - function do_search (event, tab) { - var form = '#' + tab + '_form'; - var target = '#' + tab + '_pane'; - var mark = '#' + tab + '_bookmark'; - - // stop form from submitting normally - event.preventDefault(); - - // get the form params - var query = $(form).serialize(); - - // in case of slow data load, let the user know - $(target).html( - '

    Waiting for results...

    ' - ); - - // submit the query and put results into the tab pane - $(target).load( '[% uri_for('/ajax/content/device') %]/' + tab + '?' + query, - function(response, status, xhr) { - if (status !== "success") { - $(target).html( - '
    ' + - '

    Search failed! Please contact your site administrator.

    ' - ); - return; - } - if (response === "") { - $(target).html( - '

    No matching records.

    ' - ); - } - // looks good, update the bookmark for this search - $(mark).attr('href', '[% uri_for('/device') %]?' + query); - - // enable collapser on any large vlan lists - $('.nd_collapse_vlans').collapser({ - target: 'next', - effect: 'slide', - changeText: true, - expandHtml: '
    Show VLANs
    ', - collapseHtml: '
    Hide VLANs
    ', - }); - } - ); - } - - // on tab change, hide previous tab's search form and show new tab's - // search form. also trigger to load the content for the newly active tab. - $('#search_results').bind('change', function(e) { - var to = $(e.target).attr('href').replace(/^#/,"").replace(/_pane$/,""); - var from = $(e.relatedTarget).attr('href').replace(/^#/,"").replace(/_pane$/,""); - - $('#' + from + '_search').toggleClass('active'); - $('#' + to + '_search').toggleClass('active'); - - var to_form = '#' + to + '_form'; - var from_form = '#' + from + '_form'; - // copy current search string to new form's input box - $(to_form).find("input[name=q]").val( - $(from_form).find("input[name=q]").val() - ); - $(to_form).trigger("submit"); - }); - - // fix green background on search checkboxes - // https://github.com/twitter/bootstrap/issues/742 - syncCheckBox = function() { - $(this).parents('.add-on').toggleClass('active', $(this).is(':checked')); - }; - $('.add-on :checkbox').each(syncCheckBox).click(syncCheckBox); - // show or hide sweeping brush icon when field has content var sweep = $('#ports_form').find("input[name=q]"); @@ -128,18 +55,21 @@ $('#ports_form').trigger('submit'); }); - // search hook for each tab - [% FOREACH tab IN vars.tabs %] - $('[% "#${tab.id}_form" %]').submit(function(event){ do_search(event, '[% tab.id %]'); }); - [% END %] - - // on page load, load the content for the active tab - [% IF params.tab %] - $('#[% params.tab %]_form').trigger("submit"); - [% END %] - // everything starts hidden and then we show defaults $('#nd_collapse_legend').click(); + function inner_view_processing() { + // enable collapser on any large vlan lists + $('.nd_collapse_vlans').collapser({ + target: 'next', + effect: 'slide', + changeText: true, + expandHtml: '
    Show VLANs
    ', + collapseHtml: '
    Hide VLANs
    ', + }); + } + +[%+ INCLUDE 'js/tabs.js' path="device" -%] [%+ INCLUDE 'js/sidebar.js' -%] +[%+ INCLUDE 'js/fixes.js' -%] }); diff --git a/Netdisco/views/js/fixes.js b/Netdisco/views/js/fixes.js new file mode 100644 index 00000000..a7682394 --- /dev/null +++ b/Netdisco/views/js/fixes.js @@ -0,0 +1,6 @@ + // fix green background on search checkboxes + // https://github.com/twitter/bootstrap/issues/742 + syncCheckBox = function() { + $(this).parents('.add-on').toggleClass('active', $(this).is(':checked')); + }; + $('.add-on :checkbox').each(syncCheckBox).click(syncCheckBox); diff --git a/Netdisco/views/js/search.js b/Netdisco/views/js/search.js index 970e0a49..faa4e434 100644 --- a/Netdisco/views/js/search.js +++ b/Netdisco/views/js/search.js @@ -1,71 +1,4 @@ $(document).ready(function() { - // parameterised for the active tab - submits search form and injects - // HTML response into the tab pane, or an error/empty-results message - function do_search (event, tab) { - var form = '#' + tab + '_form'; - var target = '#' + tab + '_pane'; - var mark = '#' + tab + '_bookmark'; - - // stop form from submitting normally - event.preventDefault(); - - // get the form params - var query = $(form).serialize(); - - // in case of slow data load, let the user know - $(target).html( - '

    Waiting for results...

    ' - ); - - // submit the query and put results into the tab pane - $(target).load( '[% uri_for('/ajax/content/search') %]/' + tab + '?' + query, - function(response, status, xhr) { - if (status !== "success") { - $(target).html( - '
    ' + - '

    Search failed! Please contact your site administrator.

    ' - ); - return; - } - if (response === "") { - $(target).html( - '

    No matching records.

    ' - ); - } - // looks good, update the bookmark for this search - $(mark).attr('href', '[% uri_for('/search') %]?' + query); - } - ); - } - - // search hook for each tab - [% FOREACH tab IN vars.tabs %] - $('[% "#${tab.id}_form" %]').submit(function(event){ do_search(event, '[% tab.id %]'); }); - [% END %] - - // on page load, load the content for the active tab - [% IF params.tab %] - $('#[% params.tab %]_form').trigger("submit"); - [% END %] - - // on tab change, hide previous tab's search form and show new tab's - // search form. also trigger to load the content for the newly active tab. - $('#search_results').bind('change', function(e) { - var to = $(e.target).attr('href').replace(/^#/,"").replace(/_pane$/,""); - var from = $(e.relatedTarget).attr('href').replace(/^#/,"").replace(/_pane$/,""); - - $('#' + from + '_search').toggleClass('active'); - $('#' + to + '_search').toggleClass('active'); - - var to_form = '#' + to + '_form'; - var from_form = '#' + from + '_form'; - // copy current search string to new form's input box - $(to_form).find("input[name=q]").val( - $(from_form).find("input[name=q]").val() - ); - $(to_form).trigger("submit"); - }); - // fix green background on search checkboxes // https://github.com/twitter/bootstrap/issues/742 syncCheckBox = function() { @@ -105,5 +38,9 @@ } }); + function inner_view_processing() {} // noop + +[%+ INCLUDE 'js/tabs.js' path="search" -%] [%+ INCLUDE 'js/sidebar.js' -%] +[%+ INCLUDE 'js/fixes.js' -%] }); diff --git a/Netdisco/views/js/tabs.js b/Netdisco/views/js/tabs.js new file mode 100644 index 00000000..c79fde2e --- /dev/null +++ b/Netdisco/views/js/tabs.js @@ -0,0 +1,133 @@ + // parameterised for the active tab - submits search form and injects + // HTML response into the tab pane, or an error/empty-results message + function do_search (event, tab) { + var form = '#' + tab + '_form'; + var target = '#' + tab + '_pane'; + var mark = '#' + tab + '_bookmark'; + + // stop form from submitting normally + event.preventDefault(); + + // copy current search string to other forms' input box + $('form').find("input[name=q]").each( function() { + $(this).val( $(form).find("input[name=q]").val() ); + }); + + // get the form params + var query = $(form).serialize(); + + if (window.History.enabled) { + is_from_history_plugin = 1; + window.History.replaceState( + {name: tab, fields: $(form).serializeArray()}, + 'Netdisco - '+ tab.charAt(0).toUpperCase() + tab.slice(1), + '[% uri_for('/' _ path) %]?' + query + ); + is_from_history_plugin = 0; + } + + // in case of slow data load, let the user know + $(target).html( + '

    Waiting for results...

    ' + ); + + // submit the query and put results into the tab pane + $(target).load( '[% uri_for('/ajax/content/' _ path) %]/' + tab + '?' + query, + function(response, status, xhr) { + if (status !== "success") { + $(target).html( + '
    ' + + '

    Search failed! Please contact your site administrator.

    ' + ); + return; + } + if (response === "") { + $(target).html( + '

    No matching records.

    ' + ); + } + // looks good, update the bookmark for this search + $(mark).attr('href', '[% uri_for('/' _ path) %]?' + query); + + inner_view_processing(); + } + ); + } + + // the history.js plugin is great, but fires statechange at pushState + // so we have these semaphpores to help avoid messing the History. + + // set true when faking a user click on a tab + var is_from_state_event = 0; + // set true when the history plugin does pushState - to prevent loop + var is_from_history_plugin = 0; + + // handler for ajax navigation + if (window.History.enabled) { + var History = window.History; + History.Adapter.bind(window, "statechange", function() { + if (is_from_history_plugin == 0) { + is_from_state_event = 1; + var State = History.getState(); + // History.log(State.data.name, State.title, State.url); + $('#'+ State.data.name + '_form').deserialize(State.data.fields); + $('#'+ State.data.name + '_link').click(); + is_from_state_event = 0; + } + }); + } + + // on tab change, hide previous tab's search form and show new tab's + // search form. also trigger to load the content for the newly active tab. + function update_content(from, to) { + $('#' + from + '_search').toggleClass('active'); + $('#' + to + '_search').toggleClass('active'); + + var to_form = '#' + to + '_form'; + var from_form = '#' + from + '_form'; + + if (window.History.enabled && is_from_state_event == 0) { + is_from_history_plugin = 1; + window.History.pushState( + {name: to, fields: $(to_form).serializeArray()}, + 'Netdisco '+ $(to_form).find("input[name=ip]").val() +' '+ to.charAt(0).toUpperCase() + to.slice(1), + '[% uri_for('/' _ path) %]?' + $(to_form).serialize() + ); + is_from_history_plugin = 0; + } + + $(to_form).trigger("submit"); + } + + // could not get twitter bootstrap tabs to behave, so implemented this + // but warning! will probably not work for dropdowns in tabs + $('#search_results li').delegate('a', 'click', function(event) { + event.preventDefault(); + var from_li = $('.tabs').find('> .active').first(); + var to_li = $(this).parent('li') + + from_li.removeClass('active'); + to_li.addClass('active'); + + var from = from_li.find('a').attr('href'); + var to = $(this).attr('href'); + + $(from).toggleClass('active'); + $(to).toggleClass('active'); + + update_content( + from.replace(/^#/,"").replace(/_pane$/,""), + to.replace(/^#/,"").replace(/_pane$/,"") + ); + }); + + // search hook for each tab + [% FOREACH tab IN vars.tabs %] + $('[% "#${tab.id}_form" %]').submit(function(event){ do_search(event, '[% tab.id %]'); }); + [% END %] + + // on page load, load the content for the active tab + [% IF params.tab %] + $('#[% params.tab %]_form').trigger("submit"); + [% END %] + diff --git a/Netdisco/views/layouts/main.tt b/Netdisco/views/layouts/main.tt index c47001f3..0ffd7d1f 100644 --- a/Netdisco/views/layouts/main.tt +++ b/Netdisco/views/layouts/main.tt @@ -13,10 +13,11 @@ + + -