dlegr250_material_design 0.5.67 → 0.5.68

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 50d44d6a7663208d8d2352be34fa2be664e59f3a
-  data.tar.gz: ccf5e38e6460d17a5c2dac2676f125fa8ed4173f
+  metadata.gz: 62fd685d4bae4450d96665a38c7bc4cbc226f5c9
+  data.tar.gz: 819034bac31f7102ac82e05b68cc3aeeeb817ed4
 SHA512:
-  metadata.gz: 1a2ffdb0c946069b5392cf662f6049c60a87c8125d8f30c8796dac6458b328dd6f8207f8f0e0efb92d52659d7f3ca253eef429998d378eb4cdf756128eb6f4a2
-  data.tar.gz: 172376e999f6339d67c73b486a273ba4a116bd6861401c727c2d00f226c710425892931e765daa7778b0929ff57c89c4e49e264120d601e683e93209ff079d9e
+  metadata.gz: 57100618fdf0e113d3f5c36e36fd386c79255540e7b7cad44c3a81b6799e83ba4f61b9f7386f94b5b84f3c1fa7c34084dfa1affadcec07aea5b2bd779b7c4e81
+  data.tar.gz: 3023bb1b29cc3ca1f0a50af5631b7e21028406a36b697726a7a83acf882a0ab96a8bf0e2812068e7bc1d92197853caf3576086cf022369488c1afced47db30fe

data/lib/dlegr250_material_design/version.rb

@@ -1,3 +1,3 @@
 module Dlegr250MaterialDesign
-  VERSION = "0.5.67"
+  VERSION = "0.5.68"
 end

data/vendor/assets/stylesheets/base/mixins.scss

@@ -146,15 +146,19 @@ $default-rounded-corners-radius: 3px;
 // Flexbox
 //----------------------------------------------------------------------
 
+@mixin flex-parent() {
+  display: flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+}
+
 // For a row of flex elements, such as the appbar.
 @mixin flex-parent-row() {
+  @include flex-parent();
   align-items: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   -webkit-box-align: center;
-  display: flex;
-  display: -ms-flexbox;
-  display: -webkit-flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: flex-start;
@@ -182,13 +186,11 @@ $default-rounded-corners-radius: 3px;
 
 // Center elements vertically and horizontally
 @mixin flex-center() {
+  @include flex-parent();
   align-items: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   -webkit-box-align: center;
-  display: flex;
-  display: -ms-flexbox;
-  display: -webkit-flex;
   flex-direction: column;
   flex-wrap: nowrap;
   justify-content: center;
@@ -198,13 +200,11 @@ $default-rounded-corners-radius: 3px;
 
 // Grid list
 @mixin flex-grid-list() {
+  @include flex-parent();
   align-items: flex-start;
   -ms-flex-align: flex-start;
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
-  display: flex;
-  display: -ms-flexbox;
-  display: -webkit-flex;
   flex-direction: row;
   flex-wrap: wrap;
 }

data/vendor/assets/stylesheets/base/variables/dimensions.scss

@@ -10,8 +10,11 @@ $application-container-min-width: 300px;
 // Dimensions - appbar
 //----------------------------------------------------------------------
 
-$appbar-height: 64px;
-$appbar-button-height: 48px;
+$appbar-height-small: 56px !default; // Small devices
+$appbar-height-medium: 64px !default; // Medium to large devices
+$appbar-height: $appbar-height-medium !default;
+
+$appbar-button-height: 48px !default;
 
 // Dimensions - sidebars
 //----------------------------------------------------------------------
@@ -80,8 +83,7 @@ $button-height-large: 56px;
 
 $button-icon-height: $button-height;
 
-$button-fab-mini-height: $button-icon-height;
-$button-fab-height: $button-height-large;
+$button-fab-height: 56px;
 
 // Dimensions - inputs (text-fields, etc...)
 //----------------------------------------------------------------------
@@ -118,9 +120,22 @@ $spacing-normal: 16px;
 $spacing-large: 24px;
 $spacing-xlarge: 32px;
 
-// Depth (z-index)
+// Elevation (z-index)
+// See: https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 //----------------------------------------------------------------------
 
+$elevation-1: 1;
+$elevation-2: 2;
+$elevation-3: 3;
+$elevation-4: 4;
+$elevation-6: 6;
+$elevation-8: 8;
+$elevation-9: 9;
+$elevation-12: 12;
+$elevation-16: 16;
+$elevation-24: 24;
+
+// DEPRECATED: USE ELEVATION VARIABLES
 $layout-depth: 10;
 $menu-depth: 20;
 $overlay-depth: 30;
@@ -130,7 +145,13 @@ $dialog-depth: 50;
 // Device breakpoints
 //----------------------------------------------------------------------
 
-$width-small: 400px;
-$width-medium: 760px;
-$width-large: 1000px;
-$width-xlarge: 1200px;
+$device-small: 400px;
+$device-medium: 760px;
+$device-large: 1000px;
+$device-xlarge: 1200px;
+
+// DEPRECATED: USE DEVICE VARIABLES
+$width-small: $device-small;
+$width-medium: $device-medium;
+$width-large: $device-large;
+$width-xlarge: $device-xlarge;

data/vendor/assets/stylesheets/components/tooltips.scss

@@ -15,7 +15,8 @@
     color: color("white");
     content: attr(data-tooltip);
     font-family: "Roboto", sans-serif;
-    font-size: $font-size-small;
+    font-size: $font-size-small !important;
+    font-weight: bold !important;
     left: 50%;
     line-height: normal;
     padding: $spacing-small;
@@ -26,6 +27,7 @@
     visibility: hidden;
     white-space: nowrap;
     z-index: 2;
+    @include font-smoothing();
     @include rounded-corners;
     @include transform(translateX(-50%) translateY(10%));
     @include transition(opacity 0.2s ease, transform 0.2s ease);

data/vendor/assets/stylesheets/dlegr250_material_design.scss

@@ -1,7 +1,11 @@
-// Base (load order is important)
+//======================================================================
+// Manifest file for stylesheets.
+// Load order is IMPORTANT!
+//======================================================================
+
+// Base
 //----------------------------------------------------------------------
 
-@import "fonts/material_design_iconic_font";
 @import "fonts/google_material_design_icons";
 
 @import "base/normalize";
@@ -13,10 +17,7 @@
 // Layouts
 //----------------------------------------------------------------------
 
-@import "layouts/application/base";
-@import "layouts/application/appbar";
-@import "layouts/application/sidebars";
-@import "layouts/application/main";
+// TODO: currently in Rails app
 
 // Components
 //----------------------------------------------------------------------

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: dlegr250_material_design
 version: !ruby/object:Gem::Version
-  version: 0.5.67
+  version: 0.5.68
 platform: ruby
 authors:
 - Daniel LeGrand
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-04-21 00:00:00.000000000 Z
+date: 2017-04-28 00:00:00.000000000 Z
 dependencies: []
 description: 'WARNING: ALPHA CODE, NOT PRODUCTION READY. ACTIVELY UNDER DEVELOPMENT
   AS OF AUG 2016. Implement Google Material Design spec with modern browsers in mind
@@ -37,7 +37,6 @@ files:
 - lib/dlegr250_material_design.rb
 - lib/dlegr250_material_design/version.rb
 - vendor/assets/javascripts/base/init.js.coffee
-- vendor/assets/javascripts/components/clockpicker.coffee
 - vendor/assets/javascripts/components/combobox.coffee
 - vendor/assets/javascripts/components/datepicker.coffee
 - vendor/assets/javascripts/components/dialog.coffee
@@ -63,7 +62,6 @@ files:
 - vendor/assets/javascripts/third_party/autosize.min.3.0.20.js
 - vendor/assets/javascripts/third_party/handlebars.latest.js
 - vendor/assets/javascripts/third_party/jquery.autonumeric.1-9-44.js
-- vendor/assets/javascripts/third_party/jquery.clockpicker.js
 - vendor/assets/javascripts/third_party/jquery.inputmask.min.3.2.8-11.js
 - vendor/assets/javascripts/third_party/jquery.scroll_scope.min.0.1.0.js
 - vendor/assets/javascripts/third_party/moment.min.2.17.1.js
@@ -126,16 +124,6 @@ files:
 - vendor/assets/stylesheets/fonts/google_material_design_icons/MaterialIcons-Regular.ttf
 - vendor/assets/stylesheets/fonts/google_material_design_icons/MaterialIcons-Regular.woff
 - vendor/assets/stylesheets/fonts/google_material_design_icons/MaterialIcons-Regular.woff2
-- vendor/assets/stylesheets/fonts/material_design_iconic_font.scss
-- vendor/assets/stylesheets/fonts/material_design_iconic_font/Material-Design-Iconic-Font.eot
-- vendor/assets/stylesheets/fonts/material_design_iconic_font/Material-Design-Iconic-Font.svg
-- vendor/assets/stylesheets/fonts/material_design_iconic_font/Material-Design-Iconic-Font.ttf
-- vendor/assets/stylesheets/fonts/material_design_iconic_font/Material-Design-Iconic-Font.woff
-- vendor/assets/stylesheets/fonts/material_design_iconic_font/Material-Design-Iconic-Font.woff2
-- vendor/assets/stylesheets/layouts/application/appbar.scss
-- vendor/assets/stylesheets/layouts/application/base.scss
-- vendor/assets/stylesheets/layouts/application/main.scss
-- vendor/assets/stylesheets/layouts/application/sidebars.scss
 homepage: http://www.github.com/dlegr250/dlegr250_material_design
 licenses: []
 metadata: {}

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

@@ -1,31 +0,0 @@
-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/third_party/jquery.clockpicker.js

@@ -1,737 +0,0 @@
-/*!
- * 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);
-				}
-			}
-		});
-	};
-}());