semantic_ui_rails 0.0.2

data/app/assets/javascript/semantic/tab.js

@@ -0,0 +1,674 @@
+/*  ******************************
+  Module - Tabs
+  Author: Jack Lukic
+  Notes: First Commit Aug 15, 2012
+
+  History based tab navigation
+******************************  */
+
+;(function ($, window, document, undefined) {
+
+  $.fn.tab = function(parameters) {
+
+    var
+      settings        = $.extend(true, {}, $.fn.tab.settings, parameters),
+
+      $module         = $(this),
+      $tabs           = $(settings.context).find(settings.selector.tabs),
+
+      moduleSelector  = $module.selector || '',
+
+      cache           = {},
+      firstLoad       = true,
+      recursionDepth  = 0,
+
+      activeTabPath,
+      parameterArray,
+      historyEvent,
+
+      element         = this,
+      time            = new Date().getTime(),
+      performance     = [],
+
+      className       = settings.className,
+      metadata        = settings.metadata,
+      error           = settings.error,
+
+      eventNamespace  = '.' + settings.namespace,
+      moduleNamespace = settings.namespace + '-module',
+
+      instance        = $module.data(moduleNamespace),
+
+      query           = arguments[0],
+      methodInvoked   = (instance !== undefined && typeof query == 'string'),
+      queryArguments  = [].slice.call(arguments, 1),
+
+      module,
+      invokedResponse
+    ;
+
+    module = {
+
+      initialize: function() {
+        module.debug('Initializing Tabs', $module);
+        // attach history events
+        if(settings.history) {
+          if( $.address === undefined ) {
+            module.error(error.state);
+            return false;
+          }
+          else if(settings.path === false) {
+            module.error(error.path);
+            return false;
+          }
+          else {
+            if(settings.auto) {
+              settings.apiSettings = {
+                url: settings.path + '/{$tab}'
+              };
+            }
+            module.verbose('Address library found adding state change event');
+            $.address
+              .state(settings.path)
+              .unbind('change')
+              .bind('change', module.event.history.change)
+            ;
+          }
+        }
+        // attach events if navigation wasn't set to window
+        if( !$.isWindow( element ) ) {
+          $module
+            .on('click' + eventNamespace, module.event.click)
+          ;
+        }
+        module.instantiate();
+      },
+
+      instantiate: function () {
+        module.verbose('Storing instance of module', module);
+        $module
+          .data(moduleNamespace, module)
+        ;
+      },
+
+      destroy: function() {
+        module.debug('Destroying tabs', $module);
+        $module
+          .off(eventNamespace)
+        ;
+      },
+
+      event: {
+        click: function() {
+          module.debug('Navigation clicked');
+          var
+            tabPath = $(this).data(metadata.tab)
+          ;
+          if(tabPath !== undefined) {
+            if(settings.history) {
+              $.address.value(tabPath);
+            }
+            else {
+              module.changeTab(tabPath);
+            }
+          }
+          else {
+            module.debug('No tab specified');
+          }
+        },
+        history: {
+          change: function(event) {
+            var
+              tabPath   = event.pathNames.join('/') || module.get.initialPath(),
+              pageTitle = settings.templates.determineTitle(tabPath) || false
+            ;
+            module.debug('History change event', tabPath, event);
+            historyEvent = event;
+            if(tabPath !== undefined) {
+              module.changeTab(tabPath);
+            }
+            if(pageTitle) {
+              $.address.title(pageTitle);
+            }
+          }
+        }
+      },
+
+      refresh: function() {
+        if(activeTabPath) {
+          module.debug('Refreshing tab', activeTabPath);
+          module.changeTab(activeTabPath);
+        }
+      },
+
+      cache: {
+
+        read: function(cacheKey) {
+          return (cacheKey !== undefined)
+            ? cache[cacheKey]
+            : false
+          ;
+        },
+        add: function(cacheKey, content) {
+          cacheKey = cacheKey || activeTabPath;
+          module.debug('Adding cached content for', cacheKey);
+          cache[cacheKey] = content;
+        },
+        remove: function(cacheKey) {
+          cacheKey = cacheKey || activeTabPath;
+          module.debug('Removing cached content for', cacheKey);
+          delete cache[cacheKey];
+        }
+      },
+
+      changeTab: function(tabPath) {
+        var
+          pushStateAvailable = (window.history && window.history.pushState),
+          shouldIgnoreLoad   = (pushStateAvailable && settings.ignoreFirstLoad && firstLoad),
+          remoteContent      = (settings.auto || $.isPlainObject(settings.apiSettings) ),
+          // only get default path if not remote content
+          pathArray = (remoteContent && !shouldIgnoreLoad)
+            ? module.utilities.pathToArray(tabPath)
+            : module.get.defaultPathArray(tabPath),
+          tabPath   = module.utilities.arrayToPath(pathArray)
+        ;
+        module.deactivate.all();
+        $.each(pathArray, function(index, tab) {
+          var
+            currentPathArray   = pathArray.slice(0, index + 1),
+            currentPath        = module.utilities.arrayToPath(currentPathArray),
+
+            isTab              = module.is.tab(currentPath),
+            isLastIndex        = (index + 1 == pathArray.length),
+
+            $tab               = module.get.tabElement(currentPath),
+            nextPathArray,
+            nextPath,
+            isLastTab
+          ;
+          module.verbose('Looking for tab', tab);
+          if(isTab) {
+            module.verbose('Tab was found', tab);
+
+            // scope up
+            activeTabPath = currentPath;
+            parameterArray = module.utilities.filterArray(pathArray, currentPathArray);
+
+            if(isLastIndex) {
+              isLastTab = true;
+            }
+            else {
+              nextPathArray = pathArray.slice(0, index + 2);
+              nextPath      = module.utilities.arrayToPath(nextPathArray);
+              isLastTab     = ( !module.is.tab(nextPath) );
+              if(isLastTab) {
+                module.verbose('Tab parameters found', nextPathArray);
+              }
+            }
+            if(isLastTab && remoteContent) {
+              if(!shouldIgnoreLoad) {
+                module.activate.navigation(currentPath);
+                module.content.fetch(currentPath, tabPath);
+              }
+              else {
+                module.debug('Ignoring remote content on first tab load', currentPath);
+                firstLoad = false;
+                module.cache.add(tabPath, $tab.html());
+                module.activate.all(currentPath);
+                $.proxy(settings.onTabInit, $tab)(currentPath, parameterArray, historyEvent);
+                $.proxy(settings.onTabLoad, $tab)(currentPath, parameterArray, historyEvent);
+              }
+              return false;
+            }
+            else {
+              module.debug('Opened local tab', currentPath);
+              module.activate.all(currentPath);
+              $.proxy(settings.onTabLoad, $tab)(currentPath, parameterArray, historyEvent);
+            }
+          }
+          else {
+            module.error(error.missingTab, tab);
+            return false;
+          }
+        });
+      },
+
+      content: {
+
+        fetch: function(tabPath, fullTabPath) {
+          var
+            $tab             = module.get.tabElement(tabPath),
+            fullTabPath      = fullTabPath || tabPath,
+            cachedContent    = module.cache.read(fullTabPath),
+            apiSettings      = {
+              dataType     : 'html',
+              stateContext : $tab,
+              success      : function(response) {
+                module.cache.add(fullTabPath, response);
+                module.content.update(tabPath, response);
+                if(tabPath == activeTabPath) {
+                  module.debug('Content loaded', tabPath);
+                  module.activate.tab(tabPath);
+                }
+                else {
+                  module.debug('Content loaded in background', tabPath);
+                }
+                $.proxy(settings.onTabInit, $tab)(tabPath, parameterArray, historyEvent);
+                $.proxy(settings.onTabLoad, $tab)(tabPath, parameterArray, historyEvent);
+              },
+              urlData: { tab: fullTabPath }
+            },
+            request         = $tab.data(metadata.promise) || false,
+            existingRequest = ( request && request.state() === 'pending' )
+          ;
+          if(settings.cache && cachedContent) {
+            module.debug('Showing existing content', fullTabPath);
+            module.content.update(tabPath, cachedContent);
+            module.activate.tab(tabPath);
+            $.proxy(settings.onTabLoad, $tab)(tabPath, parameterArray, historyEvent);
+          }
+          else if(existingRequest) {
+            module.debug('Content is already loading', fullTabPath);
+            $tab
+              .addClass(className.loading)
+            ;
+          }
+          else if($.api !== undefined) {
+            module.debug('Retrieving remote content', fullTabPath);
+            $.api( $.extend(true, { headers: { 'X-Remote': true } }, settings.apiSettings, apiSettings) );
+          }
+          else {
+            module.error(error.api);
+          }
+        },
+
+        update: function(tabPath, html) {
+          module.debug('Updating html for', tabPath);
+          var
+            $tab = module.get.tabElement(tabPath)
+          ;
+          $tab
+            .html(html)
+          ;
+        }
+      },
+
+      activate: {
+        all: function(tabPath) {
+          module.activate.tab(tabPath);
+          module.activate.navigation(tabPath);
+        },
+        tab: function(tabPath) {
+          var
+            $tab = module.get.tabElement(tabPath)
+          ;
+          module.verbose('Showing tab content for', $tab);
+          $tab.addClass(className.active);
+        },
+        navigation: function(tabPath) {
+          var
+            $navigation = module.get.navElement(tabPath)
+          ;
+          module.verbose('Activating tab navigation for', $navigation, tabPath);
+          $navigation.addClass(className.active);
+        }
+      },
+
+      deactivate: {
+        all: function() {
+          module.deactivate.navigation();
+          module.deactivate.tabs();
+        },
+        navigation: function() {
+          $module
+            .removeClass(className.active)
+          ;
+        },
+        tabs: function() {
+          $tabs
+            .removeClass(className.active + ' ' + className.loading)
+          ;
+        }
+      },
+
+      is: {
+        tab: function(tabName) {
+          return (tabName !== undefined)
+            ? ( module.get.tabElement(tabName).size() > 0 )
+            : false
+          ;
+        }
+      },
+
+      get: {
+        initialPath: function() {
+          return $module.eq(0).data(metadata.tab) || $tabs.eq(0).data(metadata.tab);
+        },
+        path: function() {
+          return $.address.value();
+        },
+        // adds default tabs to tab path
+        defaultPathArray: function(tabPath) {
+          return module.utilities.pathToArray( module.get.defaultPath(tabPath) );
+        },
+        defaultPath: function(tabPath) {
+          var
+            $defaultNav = $module.filter('[data-' + metadata.tab + '^="' + tabPath + '/"]').eq(0),
+            defaultTab  = $defaultNav.data(metadata.tab) || false
+          ;
+          if( defaultTab ) {
+            module.debug('Found default tab', defaultTab);
+            if(recursionDepth < settings.maxDepth) {
+              recursionDepth++;
+              return module.get.defaultPath(defaultTab);
+            }
+            module.error(error.recursion);
+          }
+          else {
+            module.debug('No default tabs found for', tabPath);
+          }
+          recursionDepth = 0;
+          return tabPath;
+        },
+        navElement: function(tabPath) {
+          tabPath = tabPath || activeTabPath;
+          return $module.filter('[data-' + metadata.tab + '="' + tabPath + '"]');
+        },
+        tabElement: function(tabPath) {
+          var
+            $fullPathTab,
+            $simplePathTab,
+            tabPathArray,
+            lastTab
+          ;
+          tabPath        = tabPath || activeTabPath;
+          tabPathArray   = module.utilities.pathToArray(tabPath);
+          lastTab        = module.utilities.last(tabPathArray);
+          $fullPathTab   = $tabs.filter('[data-' + metadata.tab + '="' + lastTab + '"]');
+          $simplePathTab = $tabs.filter('[data-' + metadata.tab + '="' + tabPath + '"]');
+          return ($fullPathTab.size() > 0)
+            ? $fullPathTab
+            : $simplePathTab
+          ;
+        },
+        tab: function() {
+          return activeTabPath;
+        }
+      },
+
+      utilities: {
+        filterArray: function(keepArray, removeArray) {
+          return $.grep(keepArray, function(keepValue) {
+            return ( $.inArray(keepValue, removeArray) == -1);
+          });
+        },
+        last: function(array) {
+          return $.isArray(array)
+            ? array[ array.length - 1]
+            : false
+          ;
+        },
+        pathToArray: function(pathName) {
+          if(pathName === undefined) {
+            pathName = activeTabPath;
+          }
+          return typeof pathName == 'string'
+            ? pathName.split('/')
+            : [pathName]
+          ;
+        },
+        arrayToPath: function(pathArray) {
+          return $.isArray(pathArray)
+            ? pathArray.join('/')
+            : false
+          ;
+        }
+      },
+
+      setting: function(name, value) {
+        if(value !== undefined) {
+          if( $.isPlainObject(name) ) {
+            $.extend(true, settings, name);
+          }
+          else {
+            settings[name] = value;
+          }
+        }
+        else {
+          return settings[name];
+        }
+      },
+      internal: function(name, value) {
+        if(value !== undefined) {
+          if( $.isPlainObject(name) ) {
+            $.extend(true, module, name);
+          }
+          else {
+            module[name] = value;
+          }
+        }
+        else {
+          return module[name];
+        }
+      },
+      debug: function() {
+        if(settings.debug) {
+          if(settings.performance) {
+            module.performance.log(arguments);
+          }
+          else {
+            module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
+            module.debug.apply(console, arguments);
+          }
+        }
+      },
+      verbose: function() {
+        if(settings.verbose && settings.debug) {
+          if(settings.performance) {
+            module.performance.log(arguments);
+          }
+          else {
+            module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
+            module.verbose.apply(console, arguments);
+          }
+        }
+      },
+      error: function() {
+        module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
+        module.error.apply(console, arguments);
+      },
+      performance: {
+        log: function(message) {
+          var
+            currentTime,
+            executionTime,
+            previousTime
+          ;
+          if(settings.performance) {
+            currentTime   = new Date().getTime();
+            previousTime  = time || currentTime;
+            executionTime = currentTime - previousTime;
+            time          = currentTime;
+            performance.push({
+              'Element'        : element,
+              'Name'           : message[0],
+              'Arguments'      : [].slice.call(message, 1) || '',
+              'Execution Time' : executionTime
+            });
+          }
+          clearTimeout(module.performance.timer);
+          module.performance.timer = setTimeout(module.performance.display, 100);
+        },
+        display: function() {
+          var
+            title = settings.name + ':',
+            totalTime = 0
+          ;
+          time = false;
+          clearTimeout(module.performance.timer);
+          $.each(performance, function(index, data) {
+            totalTime += data['Execution Time'];
+          });
+          title += ' ' + totalTime + 'ms';
+          if(moduleSelector) {
+            title += ' \'' + moduleSelector + '\'';
+          }
+          if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+            console.groupCollapsed(title);
+            if(console.table) {
+              console.table(performance);
+            }
+            else {
+              $.each(performance, function(index, data) {
+                console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
+              });
+            }
+            console.groupEnd();
+          }
+          performance = [];
+        }
+      },
+      invoke: function(query, passedArguments, context) {
+        var
+          maxDepth,
+          found,
+          response
+        ;
+        passedArguments = passedArguments || queryArguments;
+        context         = element         || context;
+        if(typeof query == 'string' && instance !== undefined) {
+          query    = query.split(/[\. ]/);
+          maxDepth = query.length - 1;
+          $.each(query, function(depth, value) {
+            var camelCaseValue = (depth != maxDepth)
+              ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
+              : query
+            ;
+            if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
+              instance = instance[value];
+            }
+            else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) {
+              instance = instance[camelCaseValue];
+            }
+            else if( instance[value] !== undefined ) {
+              found = instance[value];
+              return false;
+            }
+            else if( instance[camelCaseValue] !== undefined ) {
+              found = instance[camelCaseValue];
+              return false;
+            }
+            else {
+              module.error(error.method);
+              return false;
+            }
+          });
+        }
+        if ( $.isFunction( found ) ) {
+          response = found.apply(context, passedArguments);
+        }
+        else if(found !== undefined) {
+          response = found;
+        }
+        if($.isArray(invokedResponse)) {
+          invokedResponse.push(response);
+        }
+        else if(typeof invokedResponse == 'string') {
+          invokedResponse = [invokedResponse, response];
+        }
+        else if(response !== undefined) {
+          invokedResponse = response;
+        }
+        return found;
+      }
+    };
+
+    if(methodInvoked) {
+      if(instance === undefined) {
+        module.initialize();
+      }
+      module.invoke(query);
+    }
+    else {
+      if(instance !== undefined) {
+        module.destroy();
+      }
+      module.initialize();
+    }
+
+    return (invokedResponse !== undefined)
+      ? invokedResponse
+      : this
+    ;
+
+  };
+
+  // shortcut for tabbed content with no defined navigation
+  $.tab = function(settings) {
+    $(window).tab(settings);
+  };
+
+  $.fn.tab.settings = {
+
+    name        : 'Tab',
+    verbose     : true,
+    debug       : true,
+    performance : true,
+    namespace   : 'tab',
+
+    // only called first time a tab's content is loaded (when remote source)
+    onTabInit   : function(tabPath, parameterArray, historyEvent) {},
+    // called on every load
+    onTabLoad   : function(tabPath, parameterArray, historyEvent) {},
+
+    templates   : {
+      determineTitle: function(tabArray) {}
+    },
+
+    // uses pjax style endpoints fetching content from same url with remote-content headers
+    auto            : false,
+
+    history         : false,
+    path            : false,
+
+    context         : 'body',
+
+    // max depth a tab can be nested
+    maxDepth        : 25,
+    // dont load content on first load
+    ignoreFirstLoad : true,
+    // load tab content new every tab click
+    alwaysRefresh   : false,
+    // cache the content requests to pull locally
+    cache           : true,
+    // settings for api call
+    apiSettings     : false,
+
+    error: {
+      api        : 'You attempted to load content without API module',
+      noContent  : 'The tab you specified is missing a content url.',
+      method     : 'The method you called is not defined',
+      state      : 'The state library has not been initialized',
+      missingTab : 'Tab cannot be found',
+      path       : 'History enabled, but no path was specified',
+      recursion  : 'Max recursive depth reached'
+    },
+
+    metadata : {
+      tab    : 'tab',
+      loaded : 'loaded',
+      promise: 'promise'
+    },
+
+    className   : {
+      loading : 'loading',
+      active  : 'active'
+    },
+
+    selector    : {
+      tabs : '.tab'
+    }
+
+  };
+
+})( jQuery, window , document );