euscanwww: Adding PoC switches for feed settings

Signed-off-by: volpino <fox91@anche.no>
2012-08-08 14:33:37 +02:00
parent 225350f584
commit 78bc2520a7
10 changed files with 507 additions and 23 deletions
--- a/euscanwww/htdocs/js/jquery.js
+++ b/euscanwww/htdocs/js/jquery.js
--- a/euscanwww/htdocs/js/jquery.toggle.buttons.js
+++ b/euscanwww/htdocs/js/jquery.toggle.buttons.js
@ -0,0 +1,105 @@
+!function ($) {
+  "use strict";
+  // version: 1.3
+
+  $.fn.toggleButtons = function (opt) {
+    var $element
+      , $labelEnabled
+      , options
+      , active
+      , styleActive
+      , styleDisabled
+      , animationCss
+      , transitionSpeed = 0.05
+      , defaultSpeed = 0.05;
+
+    this.each(function () {
+      $element = $(this);
+
+      options = $.extend({}, $.fn.toggleButtons.defaults, opt);
+
+      $element.addClass('toggle-button');
+
+      $labelEnabled = $('<label></label>').attr('for', $element.find('input').attr('id'));
+      $element.append($labelEnabled);
+
+      if (options.animated) {
+        $element.addClass('toggle-button-animated');
+
+        if (options.transitionSpeed !== undefined)
+          if (/^(\d*%$)/.test(options.transitionSpeed))  // is a percent value?
+            transitionSpeed = defaultSpeed * parseInt(options.transitionSpeed) / 100;
+          else
+            transitionSpeed = options.transitionSpeed;
+
+        animationCss = ["-webkit-", "-moz-", "-o-", ""];
+        $(animationCss).each(function () {
+          $element.find('label').css(this + 'transition', 'all ' + transitionSpeed + 's');
+        });
+      }
+
+      $element.css('width', options.width);
+
+      $element.attr("data-enabled", options.label.enabled === undefined ? "ON" : options.label.enabled);
+      $element.attr("data-disabled", options.label.disabled === undefined ? "OFF " : options.label.disabled);
+
+      active = $element.find('input').is(':checked');
+
+      if (!active)
+        $element.addClass('disabled');
+
+      styleActive = options.style.enabled === undefined ? "" : options.style.enabled;
+      styleDisabled = options.style.disabled === undefined ? "" : options.style.disabled;
+
+      if (active && styleActive !== undefined)
+        $element.addClass(styleActive);
+      if (!active && styleDisabled !== undefined)
+        $element.addClass(styleDisabled);
+
+      $element.on('click', function (e) {
+        if ($(e.target).is('input'))
+          return true;
+
+        e.stopPropagation();
+        $(this).find('label').click();
+      });
+
+
+      $element.find('label').on('click', function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+
+        $element = $(this).parent();
+
+        $element
+          .delay(transitionSpeed * 500).queue(function () {
+            $(this).toggleClass('disabled')
+              .toggleClass(styleActive)
+              .toggleClass(styleDisabled)
+              .dequeue();
+          });
+
+        active = !($element.find('input').is(':checked'));
+
+        $element.find('input').attr('checked', active);
+        options.onChange($element, active, e);
+      });
+    });
+  };
+
+  $.fn.toggleButtons.defaults = {
+    onChange: function () {
+    },
+    width: 100,
+    animated: true,
+    transitionSpeed: undefined,
+    label: {
+      enabled: undefined,
+      disabled: undefined
+    },
+    style: {
+      enabled: undefined,
+      disabled: undefined
+    }
+  };
+}($);