dlegr250_material_design 0.5.56 → 0.5.57

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 5f7e4851568813052c1e24e54bc36411acd45172
-  data.tar.gz: 5a28b7a91bf5ad136608df5ce363d98a9c8c56b3
+  metadata.gz: cb92af7b02663bd3df3f46e5569dc993ebba9437
+  data.tar.gz: d2c2ae272666057ce34659b7b4e0eaf4a60d3a9a
 SHA512:
-  metadata.gz: 3fd9a6b19f7d003614647abfcc2a2b5cb74cd8f4e666d2fade0945332e9cc4cbc2c4168383be1677078f494416d707d3ec1d4fe9b04fb9b565bd59aa55d04ba7
-  data.tar.gz: 1830de9b6f2f00550e3c24ea479784e713575440683af5a700ffc6cdadd805bee63a8d15c264a5071616a469a3ae25e04e61d420d558f07bea96069c70be26d6
+  metadata.gz: 552ee703ae299327f500448b04c03453dd437c39dd7ded79c8307d691384257677d1aa3abc44ff56db2f7fa848c31aa309d54eeac2399c57b2551fbd7ff12a0c
+  data.tar.gz: d898459d07bdb43a6dbe7fa3bd77ae8a96144bbdc23f3f70fff5c3296c56c7c31dcef8c413f27de44b0a1e901e1497e3027e80a53bd6ddbe9045025722a218cf

data/lib/dlegr250_material_design/version.rb

@@ -1,3 +1,3 @@
 module Dlegr250MaterialDesign
-  VERSION = "0.5.56"
+  VERSION = "0.5.57"
 end

data/vendor/assets/javascripts/components/clockpicker.coffee

@@ -0,0 +1,31 @@
+class App.MD.Clockpicker
+  @init: () ->
+    # TODO DEPRECATE
+    $.map $("[role='clockpicker']"), (element, index) ->
+      new App.MD.Clockpicker(element)
+
+    $.map $("[data-behavior='clockpicker']"), (element, index) ->
+      new App.MD.Clockpicker(element)
+
+  constructor: (element, options = {}) ->
+    @$element = $(element)
+
+    # Do not re-run on elements that already have clockpickers
+    if @$element.attr("data-has-clockpicker") == "true"
+      return
+    else
+      @options = $.extend({}, @defaultOptions(), options)
+      @init()
+
+  init: () ->
+    @$element.clockpicker(@options)
+    @$element.attr("data-has-clockpicker", true)
+
+  defaultOptions: () ->
+    {
+      donetext: "Select",
+      twelvehour: true,
+      autoclose: false,
+      placement: "bottom",
+      align: "left",
+    }

data/vendor/assets/javascripts/components/combobox.coffee

@@ -0,0 +1,28 @@
+class App.MD.Combobox
+  @init: () ->
+    $.map $("[role='combobox']"), (element, index) ->
+      new App.MD.Combobox(element)
+
+    $.map $("[data-behavior='combobox']"), (element, index) ->
+      new App.MD.Combobox(element)
+
+  constructor: (element, options = {}) ->
+    @$element = $(element)
+
+    if @$element.attr("data-has-combobox") == "true"
+      return
+    else
+      @options = $.extend({}, @defaultOptions(), options)
+      @init()
+
+  init: () ->
+    @$element.select2(@options)
+    @$element.attr("data-has-combobox", true)
+
+  defaultOptions: () ->
+    {
+      placeholder: null,
+      allowClear: true,
+      minimumResultsForSearch: Infinity,
+      maximumSelectionLength: 1
+    }

data/vendor/assets/javascripts/components/datepicker.coffee

@@ -0,0 +1,29 @@
+class App.MD.Datepicker
+  @init: () ->
+    # TODO DEPRECATE: use data-behavior below
+    $.map $("[role='datepicker']"), (element, index) ->
+      new App.MD.Datepicker(element)
+
+    $.map $("[data-behavior='datepicker']"), (element, index) ->
+      new App.MD.Datepicker(element)
+
+  constructor: (element, options = {}) ->
+    @$element = $(element)
+
+    # Do not re-run on elements that already have datepickers
+    if @$element.attr("data-has-datepicker") == "true"
+      return
+    else
+      @options = $.extend({}, @defaultOptions(), options)
+      @init()
+
+  init: () ->
+    @$element.pikaday(@options)
+    @$element.attr("data-has-datepicker", true)
+
+  defaultOptions: () ->
+    {
+      format: "MM/DD/YYYY",
+      bound: true,
+      keyboardInput: false,
+    }

data/vendor/assets/javascripts/components/expansion_panels.coffee

@@ -0,0 +1,14 @@
+window.App.MD ||= {}
+
+class App.MD.ExpansionPanel
+  @init: () ->
+    $(document).off("click", "[data-behavior='expansion-panel-toggle']").on "click", "[data-behavior='expansion-panel-toggle']", (e) ->
+      $panel = $(this).closest("[data-behavior='expansion-panel']")
+      $details = $panel.find("[data-behavior='expansion-panel-details']")
+      $editor = $details.find("[data-behavior~='html-editor']")
+
+      if $panel.attr("data-state") == "expanded"
+        $panel.attr("data-state", "collapsed")
+      else
+        $panel.attr("data-state", "expanded")
+        $editor.froalaEditor("events.focus") if $editor.length > 0

data/vendor/assets/javascripts/components/form_submit_buttons.coffee

@@ -0,0 +1,4 @@
+$(document).on "turbolinks:load", ->
+  $("[data-submit]").on "click", (e) ->
+    formId = $(this).data("submit")
+    $(formId).submit()

data/vendor/assets/javascripts/components/html_editor.coffee

@@ -0,0 +1,94 @@
+class App.MD.HtmlEditor
+  constructor: (element, options = {}) ->
+    @$element = $(element)
+    @format = options["format"] || "simple"
+    @templateVariables = options["templateVariables"] || false
+
+    if @format == "full"
+      @options = $.extend({}, @defaultFullSettings(), options)
+    else if @format == "core"
+      @options = $.extend({}, @defaultCoreSettings(), options)
+    else
+      @options = $.extend({}, @defaultSimpleSettings(), options)
+
+    @init()
+
+  init: () ->
+    if @templateVariables
+      @$element.on("froalaEditor.initialized", (e, editor) ->
+        new App.AtWhoWithTemplateVariables(editor.$el)
+        editor.events.on("keydown", (e) ->
+          if (e.which == $.FroalaEditor.KEYCODE.ENTER && editor.$el.atwho("isSelecting"))
+            return false
+        , true)
+      ).froalaEditor(@options)
+    else
+      @$element.froalaEditor(@options)
+
+    if @options["focus"] == true || @$element.attr("autofocus")
+      @$element.froalaEditor("events.focus")
+
+  # Simple Settings
+  #----------------------------------------------------------------------
+
+  defaultCoreSettings: () ->
+    {
+      placeholderText: null,
+      enter: 2, # $.FroalaEditor.ENTER_BR
+      heightMin: 100,
+      toolbarBottom: false,
+      toolbarSticky: false,
+      toolbarButtons: @coreToolbarButtons(),
+      toolbarButtonsMD: @coreToolbarButtons(),
+      toolbarButtonsSM: @coreToolbarButtons(),
+      toolbarButtonsXS: @coreToolbarButtons(),
+    }
+
+  coreToolbarButtons: () ->
+    [
+      "bold", "italic", "underline", "|", "formatOL", "formatUL"
+    ]
+
+  defaultSimpleSettings: () ->
+    {
+      placeholderText: null,
+      enter: 2, # $.FroalaEditor.ENTER_BR
+      heightMin: 100,
+      toolbarBottom: false,
+      toolbarSticky: false,
+      toolbarButtons: @simpleToolbarButtons(),
+      toolbarButtonsMD: @simpleToolbarButtons(),
+      toolbarButtonsSM: @simpleToolbarButtons(),
+      toolbarButtonsXS: @simpleToolbarButtons(),
+    }
+
+  simpleToolbarButtons: () ->
+    [
+      "bold", "italic", "underline", "color",
+      "|", "insertLink",
+      "|", "formatOL", "formatUL", "outdent", "indent",
+      "|", "clearFormatting"
+    ]
+
+  # Full Settings
+  #----------------------------------------------------------------------
+
+  defaultFullSettings: () ->
+    {
+      placeholderText: null,
+      enter: 2, # $.FroalaEditor.ENTER_BR
+      heightMin: 100,
+      toolbarBottom: false,
+      toolbarSticky: false,
+      toolbarButtons: @fullToolbarButtons(),
+      toolbarButtonsMD: @fullToolbarButtons(),
+      toolbarButtonsSM: @fullToolbarButtons(),
+      toolbarButtonsXS: @fullToolbarButtons(),
+    }
+
+  fullToolbarButtons: () ->
+    [
+      "fontSize", "|", "bold", "italic", "underline", "color",
+      "|", "align", "formatOL", "formatUL", "outdent",
+      "indent", "|", "insertLink", "|", "clearFormatting"
+    ]

data/vendor/assets/javascripts/dlegr250_material_design.js

@@ -4,11 +4,7 @@
 //= require jquery3
 //= require jquery_ujs
 //= require turbolinks
-//= require extensions/jquery
-//= require extensions/coffeescript
+//= require ./extensions
 //= require base/init
-//= require third_party/handlebars.latest
-//= require third_party/jquery.inputmask.min.3.2.8-11
-//= require third_party/jquery.autonumeric.1-9-44
-//= require third_party/jquery.scroll_scope.min.0.1.0
+//= require_tree ./third_party
 //= require_tree ./components

data/vendor/assets/javascripts/extensions/jquery/binary_insert.coffee

@@ -0,0 +1,61 @@
+jQuery.extend jQuery.fn,
+  binaryInsert: (element) ->
+    @each ->
+      $list = $(this)
+
+      # Remove any elements that have a blank sort attribute
+      # See: http://stackoverflow.com/a/8127904/667772
+      $collection = $list.children().filter ->
+        return !!$(this).attr("data-sort")
+
+      # Pre-fetch values to compare
+      $collectionValues = $collection.map ->
+        $(this).attr("data-sort")
+
+      # New element to insert
+      $element = $(element)
+      elementValue = $element.attr("data-sort")
+
+      collectionLength = $collection.length
+      startIndex = 0
+      endIndex = collectionLength - 1
+      middleIndex = startIndex + Math.floor((endIndex - startIndex) / 2)
+
+      # Edge cases for optimizations
+      #----------------------------------------------------------------------
+
+      # Empty list, make new element first one
+      if collectionLength <= 0
+        $list.append($element)
+        return
+
+      # New element does not have a sortable value, add to the bottom
+      if elementValue == null || elementValue == "" || isNaN(elementValue)
+        $list.append($element)
+        return
+
+      # Less than start element, so prepend to collection
+      if elementValue <= $collection.first().attr("data-sort")
+        $list.prepend($element)
+        return
+
+      # Greater than last element, so append to collection
+      if elementValue >= $collection.last().attr("data-sort")
+        $list.append($element)
+        return
+
+      # Actual binary search algorithm
+      #----------------------------------------------------------------------
+
+      while startIndex <= endIndex
+        middleIndex = startIndex + Math.floor((endIndex - startIndex) / 2)
+
+        if $collectionValues[middleIndex] > elementValue
+          endIndex = middleIndex - 1
+          continue
+
+        startIndex = middleIndex + 1
+        if $collectionValues[middleIndex] == elementValue
+          break
+
+      $collection.eq(startIndex).before($element)

data/vendor/assets/javascripts/extensions/jquery/increment_and_decrement.coffee

@@ -0,0 +1,19 @@
+jQuery.extend jQuery.fn,
+  increment: ->
+    @each ->
+      $element = $(this)
+      $value = parseInt($element.text())
+      if $value != NaN
+        $element.text($value + 1)
+      $element
+
+  decrement: ->
+    @each ->
+      $element = $(this)
+      $value = parseInt($element.text())
+      if $value != NaN
+        if $value <= 0
+          $element.text(0)
+        else
+          $element.text($value - 1)
+      $element

data/vendor/assets/javascripts/extensions/jquery/positioning.coffee

@@ -0,0 +1,22 @@
+# Center an absolute element horizontally and vertically in window
+#----------------------------------------------------------------------
+
+jQuery.extend jQuery.fn,
+  absoluteCenter: ->
+    @each ->
+      element = $(this)
+      element.css("left", ($(document).width() - element.width()) / 2)
+      element.css("top", ($(document).height() - element.height()) / 2)
+      element
+
+  horizontalCenter: ->
+    @each ->
+      element = $(this)
+      element.css("left", ($(document).width() - element.width()) / 2)
+      element
+
+  verticalCenter: ->
+    @each ->
+      element = $(this)
+      element.css("top", ($(document).height() - element.height()) / 2)
+      element

data/vendor/assets/javascripts/extensions/jquery/spinner.coffee

@@ -0,0 +1,13 @@
+# Change content of element to be centered spinner
+#----------------------------------------------------------------------
+
+jQuery.extend jQuery.fn,
+  replaceWithSpinner: (options = {}) ->
+    color = options["color"] || "primary"
+    size = options["size"] || "normal"
+
+    @each ->
+      element = $(this)
+      spinner = $("<div class='spinner-container'><div class='spinner spinner-#{color} spinner-#{size}'></div></div>")
+      element.html(spinner)
+      element

data/vendor/assets/javascripts/third_party/autosize.min.3.0.20.js

@@ -0,0 +1,6 @@
+/*!
+	Autosize 3.0.20
+	license: MIT
+	http://www.jacklmoore.com/autosize
+*/
+!function(e,t){if("function"==typeof define&&define.amd)define(["exports","module"],t);else if("undefined"!=typeof exports&&"undefined"!=typeof module)t(exports,module);else{var n={exports:{}};t(n.exports,n),e.autosize=n.exports}}(this,function(e,t){"use strict";function n(e){function t(){var t=window.getComputedStyle(e,null);"vertical"===t.resize?e.style.resize="none":"both"===t.resize&&(e.style.resize="horizontal"),s="content-box"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),isNaN(s)&&(s=0),l()}function n(t){var n=e.style.width;e.style.width="0px",e.offsetWidth,e.style.width=n,e.style.overflowY=t}function o(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push({node:e.parentNode,scrollTop:e.parentNode.scrollTop}),e=e.parentNode;return t}function r(){var t=e.style.height,n=o(e),r=document.documentElement&&document.documentElement.scrollTop;e.style.height="auto";var i=e.scrollHeight+s;return 0===e.scrollHeight?void(e.style.height=t):(e.style.height=i+"px",u=e.clientWidth,n.forEach(function(e){e.node.scrollTop=e.scrollTop}),void(r&&(document.documentElement.scrollTop=r)))}function l(){r();var t=Math.round(parseFloat(e.style.height)),o=window.getComputedStyle(e,null),i=Math.round(parseFloat(o.height));if(i!==t?"visible"!==o.overflowY&&(n("visible"),r(),i=Math.round(parseFloat(window.getComputedStyle(e,null).height))):"hidden"!==o.overflowY&&(n("hidden"),r(),i=Math.round(parseFloat(window.getComputedStyle(e,null).height))),a!==i){a=i;var l=d("autosize:resized");try{e.dispatchEvent(l)}catch(e){}}}if(e&&e.nodeName&&"TEXTAREA"===e.nodeName&&!i.has(e)){var s=null,u=e.clientWidth,a=null,p=function(){e.clientWidth!==u&&l()},c=function(t){window.removeEventListener("resize",p,!1),e.removeEventListener("input",l,!1),e.removeEventListener("keyup",l,!1),e.removeEventListener("autosize:destroy",c,!1),e.removeEventListener("autosize:update",l,!1),Object.keys(t).forEach(function(n){e.style[n]=t[n]}),i.delete(e)}.bind(e,{height:e.style.height,resize:e.style.resize,overflowY:e.style.overflowY,overflowX:e.style.overflowX,wordWrap:e.style.wordWrap});e.addEventListener("autosize:destroy",c,!1),"onpropertychange"in e&&"oninput"in e&&e.addEventListener("keyup",l,!1),window.addEventListener("resize",p,!1),e.addEventListener("input",l,!1),e.addEventListener("autosize:update",l,!1),e.style.overflowX="hidden",e.style.wordWrap="break-word",i.set(e,{destroy:c,update:l}),t()}}function o(e){var t=i.get(e);t&&t.destroy()}function r(e){var t=i.get(e);t&&t.update()}var i="function"==typeof Map?new Map:function(){var e=[],t=[];return{has:function(t){return e.indexOf(t)>-1},get:function(n){return t[e.indexOf(n)]},set:function(n,o){e.indexOf(n)===-1&&(e.push(n),t.push(o))},delete:function(n){var o=e.indexOf(n);o>-1&&(e.splice(o,1),t.splice(o,1))}}}(),d=function(e){return new Event(e,{bubbles:!0})};try{new Event("test")}catch(e){d=function(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!1),t}}var l=null;"undefined"==typeof window||"function"!=typeof window.getComputedStyle?(l=function(e){return e},l.destroy=function(e){return e},l.update=function(e){return e}):(l=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return n(e,t)}),e},l.destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],o),e},l.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],r),e}),t.exports=l});

data/vendor/assets/javascripts/third_party/jquery.clockpicker.js

@@ -0,0 +1,737 @@
+/*!
+ * ClockPicker v0.0.7 (http://weareoutman.github.io/clockpicker/)
+ * Copyright 2014 Wang Shenwei.
+ * Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE)
+ */
+
+;(function(){
+	var $ = window.jQuery,
+		$win = $(window),
+		$doc = $(document),
+		$body;
+
+	// Can I use inline svg ?
+	var svgNS = 'http://www.w3.org/2000/svg',
+		svgSupported = 'SVGAngle' in window && (function(){
+			var supported,
+				el = document.createElement('div');
+			el.innerHTML = '<svg/>';
+			supported = (el.firstChild && el.firstChild.namespaceURI) == svgNS;
+			el.innerHTML = '';
+			return supported;
+		})();
+
+	// Can I use transition ?
+	var transitionSupported = (function(){
+		var style = document.createElement('div').style;
+		return 'transition' in style ||
+			'WebkitTransition' in style ||
+			'MozTransition' in style ||
+			'msTransition' in style ||
+			'OTransition' in style;
+	})();
+
+	// Listen touch events in touch screen device, instead of mouse events in desktop.
+	var touchSupported = 'ontouchstart' in window,
+		mousedownEvent = 'mousedown' + ( touchSupported ? ' touchstart' : ''),
+		mousemoveEvent = 'mousemove.clockpicker' + ( touchSupported ? ' touchmove.clockpicker' : ''),
+		mouseupEvent = 'mouseup.clockpicker' + ( touchSupported ? ' touchend.clockpicker' : '');
+
+	// Vibrate the device if supported
+	var vibrate = navigator.vibrate ? 'vibrate' : navigator.webkitVibrate ? 'webkitVibrate' : null;
+
+	function createSvgElement(name) {
+		return document.createElementNS(svgNS, name);
+	}
+
+	function leadingZero(num) {
+		return (num < 10 ? '0' : '') + num;
+	}
+
+	// Get a unique id
+	var idCounter = 0;
+	function uniqueId(prefix) {
+		var id = ++idCounter + '';
+		return prefix ? prefix + id : id;
+	}
+
+	// Clock size
+	var dialRadius = 100,
+		outerRadius = 80,
+		// innerRadius = 80 on 12 hour clock
+		innerRadius = 54,
+		tickRadius = 13,
+		diameter = dialRadius * 2,
+		duration = transitionSupported ? 350 : 1;
+
+	// Popover template
+	var tpl = [
+		'<div class="popover clockpicker-popover">',
+			// '<div class="arrow"></div>',
+			'<div class="popover-title">',
+				'<span class="clockpicker-span-hours text-primary"></span>',
+				' : ',
+				'<span class="clockpicker-span-minutes"></span>',
+				' <span class="clockpicker-span-am-pm"></span>',
+			'</div>',
+			'<div class="popover-content">',
+				'<div class="clockpicker-plate">',
+					'<div class="clockpicker-canvas"></div>',
+					'<div class="clockpicker-dial clockpicker-hours"></div>',
+					'<div class="clockpicker-dial clockpicker-minutes clockpicker-dial-out"></div>',
+				'</div>',
+				'<span class="clockpicker-am-pm-block">',
+				'</span>',
+			'</div>',
+		'</div>'
+	].join('');
+
+	// ClockPicker
+	function ClockPicker(element, options) {
+		var popover = $(tpl),
+			plate = popover.find('.clockpicker-plate'),
+			hoursView = popover.find('.clockpicker-hours'),
+			minutesView = popover.find('.clockpicker-minutes'),
+			amPmBlock = popover.find('.clockpicker-am-pm-block'),
+			isInput = element.prop('tagName') === 'INPUT',
+			input = isInput ? element : element.find('input'),
+			addon = element.find('.input-group-addon'),
+			self = this,
+			timer;
+
+		this.id = uniqueId('cp');
+		this.element = element;
+		this.options = options;
+		this.isAppended = false;
+		this.isShown = false;
+		this.currentView = 'hours';
+		this.isInput = isInput;
+		this.input = input;
+		this.addon = addon;
+		this.popover = popover;
+		this.plate = plate;
+		this.hoursView = hoursView;
+		this.minutesView = minutesView;
+		this.amPmBlock = amPmBlock;
+		this.spanHours = popover.find('.clockpicker-span-hours');
+		this.spanMinutes = popover.find('.clockpicker-span-minutes');
+		this.spanAmPm = popover.find('.clockpicker-span-am-pm');
+		this.amOrPm = "PM";
+
+		// Setup for for 12 hour clock if option is selected
+		if (options.twelvehour) {
+
+			var  amPmButtonsTemplate = ['<div class="clockpicker-am-pm-block">',
+				'<button type="button" class="btn btn-sm btn-default clockpicker-button clockpicker-am-button">',
+				'AM</button>',
+				'<button type="button" class="btn btn-sm btn-default clockpicker-button clockpicker-pm-button">',
+				'PM</button>',
+				'</div>'].join('');
+
+			var amPmButtons = $(amPmButtonsTemplate);
+			//amPmButtons.appendTo(plate);
+
+			////Not working b/c they are not shown when this runs
+			//$('clockpicker-am-button')
+			//    .on("click", function() {
+			//        self.amOrPm = "AM";
+			//        $('.clockpicker-span-am-pm').empty().append('AM');
+			//    });
+			//
+			//$('clockpicker-pm-button')
+			//    .on("click", function() {
+			//         self.amOrPm = "PM";
+			//        $('.clockpicker-span-am-pm').empty().append('PM');
+			//    });
+
+			$('<button type="button" class="btn btn-sm btn-default clockpicker-button am-button">' + "AM" + '</button>')
+				.on("click", function() {
+					self.amOrPm = "AM";
+					$('.clockpicker-span-am-pm').empty().append('AM');
+				}).appendTo(this.amPmBlock);
+
+
+			$('<button type="button" class="btn btn-sm btn-default clockpicker-button pm-button">' + "PM" + '</button>')
+				.on("click", function() {
+					self.amOrPm = 'PM';
+					$('.clockpicker-span-am-pm').empty().append('PM');
+				}).appendTo(this.amPmBlock);
+
+		}
+
+		if (! options.autoclose) {
+			// If autoclose is not setted, append a button
+			$('<button type="button" class="btn btn-sm btn-default btn-block clockpicker-button">' + options.donetext + '</button>')
+				.click($.proxy(this.done, this))
+				.appendTo(popover);
+		}
+
+		// Placement and arrow align - make sure they make sense.
+		if ((options.placement === 'top' || options.placement === 'bottom') && (options.align === 'top' || options.align === 'bottom')) options.align = 'left';
+		if ((options.placement === 'left' || options.placement === 'right') && (options.align === 'left' || options.align === 'right')) options.align = 'top';
+
+		popover.addClass(options.placement);
+		popover.addClass('clockpicker-align-' + options.align);
+
+		this.spanHours.click($.proxy(this.toggleView, this, 'hours'));
+		this.spanMinutes.click($.proxy(this.toggleView, this, 'minutes'));
+
+		// Show or toggle
+		input.on('focus.clockpicker click.clockpicker', $.proxy(this.show, this));
+		addon.on('click.clockpicker', $.proxy(this.toggle, this));
+
+		// Build ticks
+		var tickTpl = $('<div class="clockpicker-tick"></div>'),
+			i, tick, radian, radius;
+
+		// Hours view
+		if (options.twelvehour) {
+			for (i = 1; i < 13; i += 1) {
+				tick = tickTpl.clone();
+				radian = i / 6 * Math.PI;
+				radius = outerRadius;
+				tick.css('font-size', '120%');
+				tick.css({
+					left: dialRadius + Math.sin(radian) * radius - tickRadius,
+					top: dialRadius - Math.cos(radian) * radius - tickRadius
+				});
+				tick.html(i === 0 ? '00' : i);
+				hoursView.append(tick);
+				tick.on(mousedownEvent, mousedown);
+			}
+		} else {
+			for (i = 0; i < 24; i += 1) {
+				tick = tickTpl.clone();
+				radian = i / 6 * Math.PI;
+				var inner = i > 0 && i < 13;
+				radius = inner ? innerRadius : outerRadius;
+				tick.css({
+					left: dialRadius + Math.sin(radian) * radius - tickRadius,
+					top: dialRadius - Math.cos(radian) * radius - tickRadius
+				});
+				if (inner) {
+					tick.css('font-size', '120%');
+				}
+				tick.html(i === 0 ? '00' : i);
+				hoursView.append(tick);
+				tick.on(mousedownEvent, mousedown);
+			}
+		}
+
+		// Minutes view
+		for (i = 0; i < 60; i += 5) {
+			tick = tickTpl.clone();
+			radian = i / 30 * Math.PI;
+			tick.css({
+				left: dialRadius + Math.sin(radian) * outerRadius - tickRadius,
+				top: dialRadius - Math.cos(radian) * outerRadius - tickRadius
+			});
+			tick.css('font-size', '120%');
+			tick.html(leadingZero(i));
+			minutesView.append(tick);
+			tick.on(mousedownEvent, mousedown);
+		}
+
+		// Clicking on minutes view space
+		plate.on(mousedownEvent, function(e){
+			if ($(e.target).closest('.clockpicker-tick').length === 0) {
+				mousedown(e, true);
+			}
+		});
+
+		// Mousedown or touchstart
+		function mousedown(e, space) {
+			var offset = plate.offset(),
+				isTouch = /^touch/.test(e.type),
+				x0 = offset.left + dialRadius,
+				y0 = offset.top + dialRadius,
+				dx = (isTouch ? e.originalEvent.touches[0] : e).pageX - x0,
+				dy = (isTouch ? e.originalEvent.touches[0] : e).pageY - y0,
+				z = Math.sqrt(dx * dx + dy * dy),
+				moved = false;
+
+			// When clicking on minutes view space, check the mouse position
+			if (space && (z < outerRadius - tickRadius || z > outerRadius + tickRadius)) {
+				return;
+			}
+			e.preventDefault();
+
+			// Set cursor style of body after 200ms
+			var movingTimer = setTimeout(function(){
+				$body.addClass('clockpicker-moving');
+			}, 200);
+
+			// Place the canvas to top
+			if (svgSupported) {
+				plate.append(self.canvas);
+			}
+
+			// Clock
+			self.setHand(dx, dy, ! space, true);
+
+			// Mousemove on document
+			$doc.off(mousemoveEvent).on(mousemoveEvent, function(e){
+				e.preventDefault();
+				var isTouch = /^touch/.test(e.type),
+					x = (isTouch ? e.originalEvent.touches[0] : e).pageX - x0,
+					y = (isTouch ? e.originalEvent.touches[0] : e).pageY - y0;
+				if (! moved && x === dx && y === dy) {
+					// Clicking in chrome on windows will trigger a mousemove event
+					return;
+				}
+				moved = true;
+				self.setHand(x, y, false, true);
+			});
+
+			// Mouseup on document
+			$doc.off(mouseupEvent).on(mouseupEvent, function(e){
+				$doc.off(mouseupEvent);
+				e.preventDefault();
+				var isTouch = /^touch/.test(e.type),
+					x = (isTouch ? e.originalEvent.changedTouches[0] : e).pageX - x0,
+					y = (isTouch ? e.originalEvent.changedTouches[0] : e).pageY - y0;
+				if ((space || moved) && x === dx && y === dy) {
+					self.setHand(x, y);
+				}
+				if (self.currentView === 'hours') {
+					self.toggleView('minutes', duration / 2);
+				} else {
+					if (options.autoclose) {
+						self.minutesView.addClass('clockpicker-dial-out');
+						setTimeout(function(){
+							self.done();
+						}, duration / 2);
+					}
+				}
+				plate.prepend(canvas);
+
+				// Reset cursor style of body
+				clearTimeout(movingTimer);
+				$body.removeClass('clockpicker-moving');
+
+				// Unbind mousemove event
+				$doc.off(mousemoveEvent);
+			});
+		}
+
+		if (svgSupported) {
+			// Draw clock hands and others
+			var canvas = popover.find('.clockpicker-canvas'),
+				svg = createSvgElement('svg');
+			svg.setAttribute('class', 'clockpicker-svg');
+			svg.setAttribute('width', diameter);
+			svg.setAttribute('height', diameter);
+			var g = createSvgElement('g');
+			g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')');
+			var bearing = createSvgElement('circle');
+			bearing.setAttribute('class', 'clockpicker-canvas-bearing');
+			bearing.setAttribute('cx', 0);
+			bearing.setAttribute('cy', 0);
+			bearing.setAttribute('r', 2);
+			var hand = createSvgElement('line');
+			hand.setAttribute('x1', 0);
+			hand.setAttribute('y1', 0);
+			var bg = createSvgElement('circle');
+			bg.setAttribute('class', 'clockpicker-canvas-bg');
+			bg.setAttribute('r', tickRadius);
+			var fg = createSvgElement('circle');
+			fg.setAttribute('class', 'clockpicker-canvas-fg');
+			fg.setAttribute('r', 3.5);
+			g.appendChild(hand);
+			g.appendChild(bg);
+			g.appendChild(fg);
+			g.appendChild(bearing);
+			svg.appendChild(g);
+			canvas.append(svg);
+
+			this.hand = hand;
+			this.bg = bg;
+			this.fg = fg;
+			this.bearing = bearing;
+			this.g = g;
+			this.canvas = canvas;
+		}
+
+		raiseCallback(this.options.init);
+	}
+
+	function raiseCallback(callbackFunction) {
+		if (callbackFunction && typeof callbackFunction === "function") {
+			callbackFunction();
+		}
+	}
+
+	// Default options
+	ClockPicker.DEFAULTS = {
+		'default': '',       // default time, 'now' or '13:14' e.g.
+		fromnow: 0,          // set default time to * milliseconds from now (using with default = 'now')
+		placement: 'bottom', // clock popover placement
+		align: 'left',       // popover arrow align
+		donetext: 'Done',    // done button text
+		autoclose: false,    // auto close when minute is selected
+		twelvehour: false, // change to 12 hour AM/PM clock from 24 hour
+		vibrate: true        // vibrate the device when dragging clock hand
+	};
+
+	// Show or hide popover
+	ClockPicker.prototype.toggle = function(){
+		this[this.isShown ? 'hide' : 'show']();
+	};
+
+	// Set popover position
+	ClockPicker.prototype.locate = function(){
+		var element = this.element,
+			popover = this.popover,
+			offset = element.offset(),
+			width = element.outerWidth(),
+			height = element.outerHeight(),
+			placement = this.options.placement,
+			align = this.options.align,
+			styles = {},
+			self = this;
+
+		popover.show();
+
+		// Place the popover
+		switch (placement) {
+			case 'bottom':
+				styles.top = offset.top + height;
+				break;
+			case 'right':
+				styles.left = offset.left + width;
+				break;
+			case 'top':
+				styles.top = offset.top - popover.outerHeight();
+				break;
+			case 'left':
+				styles.left = offset.left - popover.outerWidth();
+				break;
+		}
+
+		// Align the popover arrow
+		switch (align) {
+			case 'left':
+				styles.left = offset.left;
+				break;
+			case 'right':
+				styles.left = offset.left + width - popover.outerWidth();
+				break;
+			case 'top':
+				styles.top = offset.top;
+				break;
+			case 'bottom':
+				styles.top = offset.top + height - popover.outerHeight();
+				break;
+		}
+
+		popover.css(styles);
+	};
+
+	// Show popover
+	ClockPicker.prototype.show = function(e){
+		// Not show again
+		if (this.isShown) {
+			return;
+		}
+
+		raiseCallback(this.options.beforeShow);
+
+		var self = this;
+
+		// Initialize
+		if (! this.isAppended) {
+			// Append popover to body
+			$body = $(document.body).append(this.popover);
+
+			// Reset position when resize
+			$win.on('resize.clockpicker' + this.id, function(){
+				if (self.isShown) {
+					self.locate();
+				}
+			});
+
+			this.isAppended = true;
+		}
+
+		// Get the time sets [hour, min]
+		var inputValue = ((this.input.prop('value') || this.options['default'] || '') + '');
+		var value = inputValue.split(":");
+		value[1] = parseInt(value[1]); // 2017-03-14 / dan.legrand@gmail.com: was setting "MM PM" and blanking out
+		console.log(inputValue);
+		value[2] = inputValue.match(/am/i) ? "AM" : "PM";
+		if (value[0] === 'now') {
+			var now = new Date(+ new Date() + this.options.fromnow);
+			value = [
+				now.getHours(),
+				now.getMinutes()
+			];
+		}
+		this.hours = + value[0] || 0;
+		this.minutes = + value[1] || 0;
+		this.spanHours.html(leadingZero(this.hours));
+		this.spanMinutes.html(leadingZero(this.minutes));
+		this.amOrPm = value[2];
+
+		// $('.clockpicker-span-am-pm').empty().append(value[2]);
+		this.spanAmPm.text(value[2]);
+
+		// Toggle to hours view
+		this.toggleView('hours');
+
+		// Set position
+		this.locate();
+
+		this.isShown = true;
+
+		// Hide when clicking or tabbing on any element except the clock, input and addon
+		$doc.on('click.clockpicker.' + this.id + ' focusin.clockpicker.' + this.id, function(e){
+			var target = $(e.target);
+			if (target.closest(self.popover).length === 0 &&
+					target.closest(self.addon).length === 0 &&
+					target.closest(self.input).length === 0) {
+				self.hide();
+			}
+		});
+
+		// Hide when ESC is pressed
+		$doc.on('keyup.clockpicker.' + this.id, function(e){
+			if (e.keyCode === 27) {
+				self.hide();
+			}
+		});
+
+		raiseCallback(this.options.afterShow);
+	};
+
+	// Hide popover
+	ClockPicker.prototype.hide = function(){
+		raiseCallback(this.options.beforeHide);
+
+		this.isShown = false;
+
+		// Unbinding events on document
+		$doc.off('click.clockpicker.' + this.id + ' focusin.clockpicker.' + this.id);
+		$doc.off('keyup.clockpicker.' + this.id);
+
+		this.popover.hide();
+
+		raiseCallback(this.options.afterHide);
+	};
+
+	// Toggle to hours or minutes view
+	ClockPicker.prototype.toggleView = function(view, delay){
+		var raiseAfterHourSelect = false;
+		if (view === 'minutes' && $(this.hoursView).css("visibility") === "visible") {
+			raiseCallback(this.options.beforeHourSelect);
+			raiseAfterHourSelect = true;
+		}
+		var isHours = view === 'hours',
+			nextView = isHours ? this.hoursView : this.minutesView,
+			hideView = isHours ? this.minutesView : this.hoursView;
+
+		this.currentView = view;
+
+		this.spanHours.toggleClass('text-primary', isHours);
+		this.spanMinutes.toggleClass('text-primary', ! isHours);
+
+		// Let's make transitions
+		hideView.addClass('clockpicker-dial-out');
+		nextView.css('visibility', 'visible').removeClass('clockpicker-dial-out');
+
+		// Reset clock hand
+		this.resetClock(delay);
+
+		// After transitions ended
+		clearTimeout(this.toggleViewTimer);
+		this.toggleViewTimer = setTimeout(function(){
+			hideView.css('visibility', 'hidden');
+		}, duration);
+
+		if (raiseAfterHourSelect) {
+			raiseCallback(this.options.afterHourSelect);
+		}
+	};
+
+	// Reset clock hand
+	ClockPicker.prototype.resetClock = function(delay){
+		var view = this.currentView,
+			value = this[view],
+			isHours = view === 'hours',
+			unit = Math.PI / (isHours ? 6 : 30),
+			radian = value * unit,
+			radius = isHours && value > 0 && value < 13 ? innerRadius : outerRadius,
+			x = Math.sin(radian) * radius,
+			y = - Math.cos(radian) * radius,
+			self = this;
+		if (svgSupported && delay) {
+			self.canvas.addClass('clockpicker-canvas-out');
+			setTimeout(function(){
+				self.canvas.removeClass('clockpicker-canvas-out');
+				self.setHand(x, y);
+			}, delay);
+		} else {
+			this.setHand(x, y);
+		}
+	};
+
+	// Set clock hand to (x, y)
+	ClockPicker.prototype.setHand = function(x, y, roundBy5, dragging){
+		var radian = Math.atan2(x, - y),
+			isHours = this.currentView === 'hours',
+			unit = Math.PI / (isHours || roundBy5 ? 6 : 30),
+			z = Math.sqrt(x * x + y * y),
+			options = this.options,
+			inner = isHours && z < (outerRadius + innerRadius) / 2,
+			radius = inner ? innerRadius : outerRadius,
+			value;
+
+			if (options.twelvehour) {
+				radius = outerRadius;
+			}
+
+		// Radian should in range [0, 2PI]
+		if (radian < 0) {
+			radian = Math.PI * 2 + radian;
+		}
+
+		// Get the round value
+		value = Math.round(radian / unit);
+
+		// Get the round radian
+		radian = value * unit;
+
+		// Correct the hours or minutes
+		if (options.twelvehour) {
+			if (isHours) {
+				if (value === 0) {
+					value = 12;
+				}
+			} else {
+				if (roundBy5) {
+					value *= 5;
+				}
+				if (value === 60) {
+					value = 0;
+				}
+			}
+		} else {
+			if (isHours) {
+				if (value === 12) {
+					value = 0;
+				}
+				value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12;
+			} else {
+				if (roundBy5) {
+					value *= 5;
+				}
+				if (value === 60) {
+					value = 0;
+				}
+			}
+		}
+
+		// Once hours or minutes changed, vibrate the device
+		if (this[this.currentView] !== value) {
+			if (vibrate && this.options.vibrate) {
+				// Do not vibrate too frequently
+				if (! this.vibrateTimer) {
+					navigator[vibrate](10);
+					this.vibrateTimer = setTimeout($.proxy(function(){
+						this.vibrateTimer = null;
+					}, this), 100);
+				}
+			}
+		}
+
+		this[this.currentView] = value;
+		this[isHours ? 'spanHours' : 'spanMinutes'].html(leadingZero(value));
+
+		// If svg is not supported, just add an active class to the tick
+		if (! svgSupported) {
+			this[isHours ? 'hoursView' : 'minutesView'].find('.clockpicker-tick').each(function(){
+				var tick = $(this);
+				tick.toggleClass('active', value === + tick.html());
+			});
+			return;
+		}
+
+		// Place clock hand at the top when dragging
+		if (dragging || (! isHours && value % 5)) {
+			this.g.insertBefore(this.hand, this.bearing);
+			this.g.insertBefore(this.bg, this.fg);
+			this.bg.setAttribute('class', 'clockpicker-canvas-bg clockpicker-canvas-bg-trans');
+		} else {
+			// Or place it at the bottom
+			this.g.insertBefore(this.hand, this.bg);
+			this.g.insertBefore(this.fg, this.bg);
+			this.bg.setAttribute('class', 'clockpicker-canvas-bg');
+		}
+
+		// Set clock hand and others' position
+		var cx = Math.sin(radian) * radius,
+			cy = - Math.cos(radian) * radius;
+		this.hand.setAttribute('x2', cx);
+		this.hand.setAttribute('y2', cy);
+		this.bg.setAttribute('cx', cx);
+		this.bg.setAttribute('cy', cy);
+		this.fg.setAttribute('cx', cx);
+		this.fg.setAttribute('cy', cy);
+	};
+
+	// Hours and minutes are selected
+	ClockPicker.prototype.done = function() {
+		raiseCallback(this.options.beforeDone);
+		this.hide();
+		var last = this.input.prop('value'),
+			value = leadingZero(this.hours) + ':' + leadingZero(this.minutes);
+		if  (this.options.twelvehour) {
+			value = value + " " + this.amOrPm;
+		}
+
+		this.input.prop('value', value);
+		if (value !== last) {
+			this.input.triggerHandler('change');
+			if (! this.isInput) {
+				this.element.trigger('change');
+			}
+		}
+
+		if (this.options.autoclose) {
+			this.input.trigger('blur');
+		}
+
+		raiseCallback(this.options.afterDone);
+	};
+
+	// Remove clockpicker from input
+	ClockPicker.prototype.remove = function() {
+		this.element.removeData('clockpicker');
+		this.input.off('focus.clockpicker click.clockpicker');
+		this.addon.off('click.clockpicker');
+		if (this.isShown) {
+			this.hide();
+		}
+		if (this.isAppended) {
+			$win.off('resize.clockpicker' + this.id);
+			this.popover.remove();
+		}
+	};
+
+	// Extends $.fn.clockpicker
+	$.fn.clockpicker = function(option){
+		var args = Array.prototype.slice.call(arguments, 1);
+		return this.each(function(){
+			var $this = $(this),
+				data = $this.data('clockpicker');
+			if (! data) {
+				var options = $.extend({}, ClockPicker.DEFAULTS, $this.data(), typeof option == 'object' && option);
+				$this.data('clockpicker', new ClockPicker($this, options));
+			} else {
+				// Manual operatsions. show, hide, remove, e.g.
+				if (typeof data[option] === 'function') {
+					data[option].apply(data, args);
+				}
+			}
+		});
+	};
+}());