metro4
Version:
The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style
1,689 lines (1,440 loc) • 777 kB
JavaScript
/*
* Metro 4 Components Library v4.2.38 (https://metroui.org.ua)
* Copyright 2019 Sergey Pimenov
* Licensed under MIT
*/
(function( factory ) {
if ( typeof define === 'function' && define.amd ) {
define([ 'jquery' ], factory );
} else {
factory( jQuery );
}
}(function( jQuery ) {
// Source: js/metro.js
'use strict';
var $ = jQuery;
if (typeof jQuery === 'undefined') {
throw new Error('Metro 4 requires jQuery!');
}
if ('MutationObserver' in window === false) {
throw new Error('Metro 4 requires MutationObserver!');
}
var meta_init = $("meta[name='metro4:init']").attr("content");
var meta_locale = $("meta[name='metro4:locale']").attr("content");
var meta_week_start = $("meta[name='metro4:week_start']").attr("content");
var meta_date_format = $("meta[name='metro4:date_format']").attr("content");
var meta_date_format_input = $("meta[name='metro4:date_format_input']").attr("content");
var meta_animation_duration = $("meta[name='metro4:animation_duration']").attr("content");
var meta_callback_timeout = $("meta[name='metro4:callback_timeout']").attr("content");
var meta_timeout = $("meta[name='metro4:timeout']").attr("content");
var meta_scroll_multiple = $("meta[name='metro4:scroll_multiple']").attr("content");
var meta_cloak = $("meta[name='metro4:cloak']").attr("content"); //default or fade
var meta_cloak_duration = $("meta[name='metro4:cloak_duration']").attr("content"); //100
if (window.METRO_INIT === undefined) {
window.METRO_INIT = meta_init !== undefined ? JSON.parse(meta_init) : true;
}
if (window.METRO_DEBUG === undefined) {window.METRO_DEBUG = true;}
if (window.METRO_WEEK_START === undefined) {
window.METRO_WEEK_START = meta_week_start !== undefined ? parseInt(meta_week_start) : 0;
}
if (window.METRO_DATE_FORMAT === undefined) {
window.METRO_DATE_FORMAT = meta_date_format !== undefined ? meta_date_format : "%Y-%m-%d";
}
if (window.METRO_DATE_FORMAT_INPUT === undefined) {
window.METRO_DATE_FORMAT_INPUT = meta_date_format_input !== undefined ? meta_date_format_input : "%Y-%m-%d";
}
if (window.METRO_LOCALE === undefined) {
window.METRO_LOCALE = meta_locale !== undefined ? meta_locale : 'en-US';
}
if (window.METRO_ANIMATION_DURATION === undefined) {
window.METRO_ANIMATION_DURATION = meta_animation_duration !== undefined ? parseInt(meta_animation_duration) : 300;
}
if (window.METRO_CALLBACK_TIMEOUT === undefined) {
window.METRO_CALLBACK_TIMEOUT = meta_callback_timeout !== undefined ? parseInt(meta_callback_timeout) : 500;
}
if (window.METRO_TIMEOUT === undefined) {
window.METRO_TIMEOUT = meta_timeout !== undefined ? parseInt(meta_timeout) : 2000;
}
if (window.METRO_SCROLL_MULTIPLE === undefined) {
window.METRO_SCROLL_MULTIPLE = meta_scroll_multiple !== undefined ? parseInt(meta_scroll_multiple) : 20;
}
if (window.METRO_CLOAK_REMOVE === undefined) {
window.METRO_CLOAK_REMOVE = meta_cloak !== undefined ? (""+meta_cloak).toLowerCase() : "fade";
}
if (window.METRO_CLOAK_DURATION === undefined) {
window.METRO_CLOAK_DURATION = meta_cloak_duration !== undefined ? parseInt(meta_cloak_duration) : 500;
}
if (window.METRO_HOTKEYS_FILTER_CONTENT_EDITABLE === undefined) {window.METRO_HOTKEYS_FILTER_CONTENT_EDITABLE = true;}
if (window.METRO_HOTKEYS_FILTER_INPUT_ACCEPTING_ELEMENTS === undefined) {window.METRO_HOTKEYS_FILTER_INPUT_ACCEPTING_ELEMENTS = true;}
if (window.METRO_HOTKEYS_FILTER_TEXT_INPUTS === undefined) {window.METRO_HOTKEYS_FILTER_TEXT_INPUTS = true;}
if (window.METRO_HOTKEYS_BUBBLE_UP === undefined) {window.METRO_HOTKEYS_BUBBLE_UP = false;}
if (window.METRO_THROWS === undefined) {window.METRO_THROWS = true;}
window.METRO_MEDIA = [];
if ( typeof Object.create !== 'function' ) {
Object.create = function (o) {
function F() {}
F.prototype = o;
return new F();
};
}
if (typeof Object.values !== 'function') {
Object.values = function(obj) {
return Object.keys(obj).map(function(e) {
return obj[e]
});
}
}
if (typeof window.setImmediate !== 'function') {
window.setImmediate = function(fn){
return setTimeout(fn, 0);
}
}
var isTouch = (('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
var Metro = {
version: "4.2.38",
versionFull: "4.2.38.719 ",
isTouchable: isTouch,
fullScreenEnabled: document.fullscreenEnabled,
sheet: null,
controlsPosition: {
INSIDE: "inside",
OUTSIDE: "outside"
},
groupMode: {
ONE: "one",
MULTI: "multi"
},
aspectRatio: {
HD: "hd",
SD: "sd",
CINEMA: "cinema"
},
fullScreenMode: {
WINDOW: "window",
DESKTOP: "desktop"
},
position: {
TOP: "top",
BOTTOM: "bottom",
LEFT: "left",
RIGHT: "right",
TOP_RIGHT: "top-right",
TOP_LEFT: "top-left",
BOTTOM_LEFT: "bottom-left",
BOTTOM_RIGHT: "bottom-right",
LEFT_BOTTOM: "left-bottom",
LEFT_TOP: "left-top",
RIGHT_TOP: "right-top",
RIGHT_BOTTOM: "right-bottom"
},
popoverEvents: {
CLICK: "click",
HOVER: "hover",
FOCUS: "focus"
},
stepperView: {
SQUARE: "square",
CYCLE: "cycle",
DIAMOND: "diamond"
},
listView: {
LIST: "list",
CONTENT: "content",
ICONS: "icons",
ICONS_MEDIUM: "icons-medium",
ICONS_LARGE: "icons-large",
TILES: "tiles",
TABLE: "table"
},
events: {
click: 'click.metro',
start: isTouch ? 'touchstart.metro' : 'mousedown.metro',
stop: isTouch ? 'touchend.metro' : 'mouseup.metro',
move: isTouch ? 'touchmove.metro' : 'mousemove.metro',
enter: isTouch ? 'touchstart.metro' : 'mouseenter.metro',
leave: 'mouseleave.metro',
focus: 'focus.metro',
blur: 'blur.metro',
resize: 'resize.metro',
keyup: 'keyup.metro',
keydown: 'keydown.metro',
keypress: 'keypress.metro',
dblclick: 'dblclick.metro',
input: 'input.metro',
change: 'change.metro',
cut: 'cut.metro',
paste: 'paste.metro',
scroll: 'scroll.metro',
scrollStart: 'scrollstart.metro',
scrollStop: 'scrollstop.metro',
mousewheel: 'mousewheel.metro',
inputchange: "change.metro input.metro propertychange.metro cut.metro paste.metro copy.metro",
dragstart: "dragstart.metro",
dragend: "dragend.metro",
dragenter: "dragenter.metro",
dragover: "dragover.metro",
dragleave: "dragleave.metro",
drop: 'drop.metro',
drag: 'drag.metro'
},
keyCode: {
BACKSPACE: 8,
TAB: 9,
ENTER: 13,
SHIFT: 16,
CTRL: 17,
ALT: 18,
BREAK: 19,
CAPS: 20,
ESCAPE: 27,
SPACE: 32,
PAGEUP: 33,
PAGEDOWN: 34,
END: 35,
HOME: 36,
LEFT_ARROW: 37,
UP_ARROW: 38,
RIGHT_ARROW: 39,
DOWN_ARROW: 40,
COMMA: 188
},
media_queries: {
FS: "(min-width: 0px)",
XS: "(min-width: 360px)",
SM: "(min-width: 576px)",
MD: "(min-width: 768px)",
LG: "(min-width: 992px)",
XL: "(min-width: 1200px)",
XXL: "(min-width: 1452px)"
},
media_sizes: {
FS: 0,
XS: 360,
SM: 576,
LD: 640,
MD: 768,
LG: 992,
XL: 1200,
XXL: 1452
},
media_mode: {
FS: "fs",
XS: "xs",
SM: "sm",
MD: "md",
LG: "lg",
XL: "xl",
XXL: "xxl"
},
media_modes: ["fs","xs","sm","md","lg","xl","xxl"],
actions: {
REMOVE: 1,
HIDE: 2
},
hotkeys: [],
about: function(f){
console.log("Metro 4 - v" + (f === true ? this.versionFull : this.version));
},
aboutDlg: function(f){
alert("Metro 4 - v" + (f === true ? this.versionFull : this.version));
},
ver: function(f){
return (f === true ? this.versionFull : this.version);
},
observe: function(){
'use strict';
var observer, observerCallback;
var observerConfig = {
childList: true,
attributes: true,
subtree: true
};
observerCallback = function(mutations){
mutations.map(function(mutation){
if (mutation.type === 'attributes' && mutation.attributeName !== "data-role") {
var element = $(mutation.target);
var mc = element.data('metroComponent');
if (mc !== undefined) {
$.each(mc, function(){
'use strict';
var plug = element.data(this);
if (plug) plug.changeAttribute(mutation.attributeName);
});
}
} else
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
var i, obj, widgets = {}, plugins = {};
var nodes = mutation.addedNodes;
for(i = 0; i < nodes.length; i++) {
var node = mutation.addedNodes[i];
if (node.tagName === 'SCRIPT' || node.tagName === 'STYLE') {
continue ;
}
obj = $(mutation.addedNodes[i]);
plugins = obj.find("[data-role]");
if (obj.data('role') !== undefined) {
widgets = $.merge(plugins, obj);
} else {
widgets = plugins;
}
if (widgets.length) {
Metro.initWidgets(widgets);
}
}
} else {
//console.log(mutation);
}
});
};
observer = new MutationObserver(observerCallback);
observer.observe($("html")[0], observerConfig);
},
init: function(){
var widgets = $("[data-role]");
var hotkeys = $("[data-hotkey]");
var html = $("html");
if (isTouch === true) {
html.addClass("metro-touch-device");
} else {
html.addClass("metro-no-touch-device");
}
this.sheet = Utils.newCssSheet();
window.METRO_MEDIA = [];
$.each(Metro.media_queries, function(key, query){
if (Utils.media(query)) {
METRO_MEDIA.push(Metro.media_mode[key]);
}
});
this.observe();
this.initHotkeys(hotkeys);
this.initWidgets(widgets);
this.about(true);
if (METRO_CLOAK_REMOVE !== "fade") {
$(".m4-cloak").removeClass("m4-cloak");
} else {
$(".m4-cloak").animate({
opacity: 1
}, METRO_CLOAK_REMOVE, function(){
$(".m4-cloak").removeClass("m4-cloak");
})
}
return this;
},
initHotkeys: function(hotkeys){
$.each(hotkeys, function(){
'use strict';
var element = $(this);
var hotkey = element.data('hotkey') ? element.data('hotkey').toLowerCase() : false;
if (hotkey === false) {
return;
}
if (element.data('hotKeyBonded') === true ) {
return;
}
Metro.hotkeys.push(hotkey);
$(document).on(Metro.events.keyup, null, hotkey, function(e){
if (element === undefined) return;
if (element[0].tagName === 'A' &&
element.attr('href') !== undefined &&
element.attr('href').trim() !== '' &&
element.attr('href').trim() !== '#') {
document.location.href = element.attr('href');
} else {
element.click();
}
return METRO_HOTKEYS_BUBBLE_UP;
});
element.data('hotKeyBonded', true);
});
},
initWidgets: function(widgets) {
var that = this;
$.each(widgets, function () {
'use strict';
var $this = $(this), w = this;
var roles = $this.data('role').split(/\s*,\s*/);
roles.map(function (func) {
if ($.fn[func] !== undefined && $this.attr("data-role-"+func) === undefined) {
$.fn[func].call($this);
$this.attr("data-role-"+func, true);
var mc = $this.data('metroComponent');
if (mc === undefined) {
mc = [func];
} else {
mc.push(func);
}
$this.data('metroComponent', mc);
}
});
});
},
plugin: function(name, object){
'use strict';
$.fn[name] = function( options ) {
return this.each(function() {
$.data( this, name, Object.create(object).init(options, this ));
});
};
},
destroyPlugin: function(element, name){
var p, mc;
element = Utils.isJQueryObject(element) ? element[0] : element;
p = $(element).data(name);
if (!Utils.isValue(p)) {
throw new Error("Component can not be destroyed: the element is not a Metro 4 component.");
}
if (!Utils.isFunc(p['destroy'])) {
throw new Error("Component can not be destroyed: method destroy not found.");
}
p['destroy']();
mc = $(element).data("metroComponent");
Utils.arrayDelete(mc, name);
$(element).data("metroComponent", mc);
$.removeData(element, name);
$(element).removeAttr("data-role-"+name);
},
destroyPluginAll: function(element){
element = Utils.isJQueryObject(element) ? element[0] : element;
var mc = $(element).data("metroComponent");
if (mc !== undefined && mc.length > 0) $.each(mc, function(){
'use strict';
Metro.destroyPlugin(element, this);
});
},
initPlugin: function(element, name){
element = $(element);
try {
if ($.fn[name] !== undefined && element.attr("data-role-"+name) === undefined) {
$.fn[name].call(element);
element.attr("data-role-"+name, true);
var mc = element.data('metroComponent');
if (mc === undefined) {
mc = [name];
} else {
mc.push(name);
}
element.data('metroComponent', mc);
}
} catch (e) {
console.log(e.message, e.stack);
}
},
reinitPlugin: function(element, name){
this.destroyPlugin(element, name);
this.initPlugin(element, name);
},
reinitPluginAll: function(element){
var mc = $(element).data("metroComponent");
if (mc !== undefined && mc.length > 0) $.each(mc, function(){
'use strict';
Metro.reinitPlugin(element, this);
});
},
noop: function(){},
noop_true: function(){return true;},
noop_false: function(){return false;},
stop: function(e){
e.stopPropagation();
e.preventDefault();
},
requestFullScreen: function(element){
if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else {
element.requestFullscreen();
}
},
exitFullScreen: function(){
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else {
document.exitFullscreen();
}
},
inFullScreen: function(){
var fsm = (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
return fsm !== undefined;
}
};
window['Metro'] = Metro;
$(window).on(Metro.events.resize, function(){
window.METRO_MEDIA = [];
$.each(Metro.media_queries, function(key, query){
if (Utils.media(query)) {
METRO_MEDIA.push(Metro.media_mode[key]);
}
});
});
// Source: js/utils/animation.js
var Animation = {
duration: METRO_ANIMATION_DURATION,
func: "swing",
switch: function(current, next){
current.hide();
next.css({top: 0, left: 0}).show();
},
slideUp: function(current, next, duration, func){
var h = current.parent().outerHeight(true);
if (duration === undefined) {duration = this.duration;}
if (func === undefined) {func = this.func;}
current.css("z-index", 1).animate({
top: -h,
opacity: 0
}, duration, func);
next.css({
top: h,
left: 0,
zIndex: 2
}).animate({
top: 0,
opacity: 1
}, duration, func);
},
slideDown: function(current, next, duration, func){
var h = current.parent().outerHeight(true);
if (duration === undefined) {duration = this.duration;}
if (func === undefined) {func = this.func;}
current.css("z-index", 1).animate({
top: h,
opacity: 0
}, duration, func);
next.css({
left: 0,
top: -h,
zIndex: 2
}).animate({
top: 0,
opacity: 1
}, duration, func);
},
slideLeft: function(current, next, duration, func){
var w = current.parent().outerWidth(true);
if (duration === undefined) {duration = this.duration;}
if (func === undefined) {func = this.func;}
current.css("z-index", 1).animate({
left: -w,
opacity: 0
}, duration, func);
next.css({
left: w,
zIndex: 2
}).animate({
left: 0,
opacity: 1
}, duration, func);
},
slideRight: function(current, next, duration, func){
var w = current.parent().outerWidth(true);
if (duration === undefined) {duration = this.duration;}
if (func === undefined) {func = this.func;}
current.css("z-index", 1).animate({
left: w,
opacity: 0
}, duration, func);
next.css({
left: -w,
zIndex: 2
}).animate({
left: 0,
opacity: 1
}, duration, func);
},
fade: function(current, next, duration){
if (duration === undefined) {duration = this.duration;}
current.animate({
opacity: 0
}, duration);
next.css({
top: 0,
left: 0
}).animate({
opacity: 1
}, duration);
}
};
Metro['animation'] = Animation;
// Source: js/utils/colors.js
function RGB(r, g, b){
this.r = r || 0;
this.g = g || 0;
this.g = b || 0;
}
function RGBA(r, g, b, a){
this.r = r || 0;
this.g = g || 0;
this.g = b || 0;
this.a = a || 1;
}
function HSV(h, s, v){
this.h = h || 0;
this.s = s || 0;
this.v = v || 0;
}
function HSL(h, s, l){
this.h = h || 0;
this.s = s || 0;
this.l = l || 0;
}
function HSLA(h, s, l, a){
this.h = h || 0;
this.s = s || 0;
this.l = l || 0;
this.a = a || 1;
}
function CMYK(c, m, y, k){
this.c = c || 0;
this.m = m || 0;
this.y = y || 0;
this.k = k || 0;
}
var Colors = {
TYPES: {
HEX: "hex",
RGB: "rgb",
RGBA: "rgba",
HSV: "hsv",
HSL: "hsl",
CMYK: "cmyk",
UNKNOWN: "unknown"
},
PALETTES: {
ALL: "colorList",
METRO: "colorListMetro",
STANDARD: "colorListStandard"
},
colorListMetro: {
lime: '#a4c400',
green: '#60a917',
emerald: '#008a00',
blue: '#00AFF0',
teal: '#00aba9',
cyan: '#1ba1e2',
cobalt: '#0050ef',
indigo: '#6a00ff',
violet: '#aa00ff',
pink: '#dc4fad',
magenta: '#d80073',
crimson: '#a20025',
red: '#CE352C',
orange: '#fa6800',
amber: '#f0a30a',
yellow: '#fff000',
brown: '#825a2c',
olive: '#6d8764',
steel: '#647687',
mauve: '#76608a',
taupe: '#87794e'
},
colorListStandard: {
aliceBlue: "#f0f8ff",
antiqueWhite: "#faebd7",
aqua: "#00ffff",
aquamarine: "#7fffd4",
azure: "#f0ffff",
beige: "#f5f5dc",
bisque: "#ffe4c4",
black: "#000000",
blanchedAlmond: "#ffebcd",
blue: "#0000ff",
blueViolet: "#8a2be2",
brown: "#a52a2a",
burlyWood: "#deb887",
cadetBlue: "#5f9ea0",
chartreuse: "#7fff00",
chocolate: "#d2691e",
coral: "#ff7f50",
cornflowerBlue: "#6495ed",
cornsilk: "#fff8dc",
crimson: "#dc143c",
cyan: "#00ffff",
darkBlue: "#00008b",
darkCyan: "#008b8b",
darkGoldenRod: "#b8860b",
darkGray: "#a9a9a9",
darkGreen: "#006400",
darkKhaki: "#bdb76b",
darkMagenta: "#8b008b",
darkOliveGreen: "#556b2f",
darkOrange: "#ff8c00",
darkOrchid: "#9932cc",
darkRed: "#8b0000",
darkSalmon: "#e9967a",
darkSeaGreen: "#8fbc8f",
darkSlateBlue: "#483d8b",
darkSlateGray: "#2f4f4f",
darkTurquoise: "#00ced1",
darkViolet: "#9400d3",
deepPink: "#ff1493",
deepSkyBlue: "#00bfff",
dimGray: "#696969",
dodgerBlue: "#1e90ff",
fireBrick: "#b22222",
floralWhite: "#fffaf0",
forestGreen: "#228b22",
fuchsia: "#ff00ff",
gainsboro: "#DCDCDC",
ghostWhite: "#F8F8FF",
gold: "#ffd700",
goldenRod: "#daa520",
gray: "#808080",
green: "#008000",
greenYellow: "#adff2f",
honeyDew: "#f0fff0",
hotPink: "#ff69b4",
indianRed: "#cd5c5c",
indigo: "#4b0082",
ivory: "#fffff0",
khaki: "#f0e68c",
lavender: "#e6e6fa",
lavenderBlush: "#fff0f5",
lawnGreen: "#7cfc00",
lemonChiffon: "#fffacd",
lightBlue: "#add8e6",
lightCoral: "#f08080",
lightCyan: "#e0ffff",
lightGoldenRodYellow: "#fafad2",
lightGray: "#d3d3d3",
lightGreen: "#90ee90",
lightPink: "#ffb6c1",
lightSalmon: "#ffa07a",
lightSeaGreen: "#20b2aa",
lightSkyBlue: "#87cefa",
lightSlateGray: "#778899",
lightSteelBlue: "#b0c4de",
lightYellow: "#ffffe0",
lime: "#00ff00",
limeGreen: "#32dc32",
linen: "#faf0e6",
magenta: "#ff00ff",
maroon: "#800000",
mediumAquaMarine: "#66cdaa",
mediumBlue: "#0000cd",
mediumOrchid: "#ba55d3",
mediumPurple: "#9370db",
mediumSeaGreen: "#3cb371",
mediumSlateBlue: "#7b68ee",
mediumSpringGreen: "#00fa9a",
mediumTurquoise: "#48d1cc",
mediumVioletRed: "#c71585",
midnightBlue: "#191970",
mintCream: "#f5fffa",
mistyRose: "#ffe4e1",
moccasin: "#ffe4b5",
navajoWhite: "#ffdead",
navy: "#000080",
oldLace: "#fdd5e6",
olive: "#808000",
oliveDrab: "#6b8e23",
orange: "#ffa500",
orangeRed: "#ff4500",
orchid: "#da70d6",
paleGoldenRod: "#eee8aa",
paleGreen: "#98fb98",
paleTurquoise: "#afeeee",
paleVioletRed: "#db7093",
papayaWhip: "#ffefd5",
peachPuff: "#ffdab9",
peru: "#cd853f",
pink: "#ffc0cb",
plum: "#dda0dd",
powderBlue: "#b0e0e6",
purple: "#800080",
rebeccaPurple: "#663399",
red: "#ff0000",
rosyBrown: "#bc8f8f",
royalBlue: "#4169e1",
saddleBrown: "#8b4513",
salmon: "#fa8072",
sandyBrown: "#f4a460",
seaGreen: "#2e8b57",
seaShell: "#fff5ee",
sienna: "#a0522d",
silver: "#c0c0c0",
slyBlue: "#87ceeb",
slateBlue: "#6a5acd",
slateGray: "#708090",
snow: "#fffafa",
springGreen: "#00ff7f",
steelBlue: "#4682b4",
tan: "#d2b48c",
teal: "#008080",
thistle: "#d8bfd8",
tomato: "#ff6347",
turquoise: "#40e0d0",
violet: "#ee82ee",
wheat: "#f5deb3",
white: "#ffffff",
whiteSmoke: "#f5f5f5",
yellow: "#ffff00",
yellowGreen: "#9acd32"
},
colorList: {},
options: {
angle: 30,
algorithm: 1,
step: .1,
distance: 5,
tint1: .8,
tint2: .4,
shade1: .6,
shade2: .3,
alpha: 1
},
init: function(){
this.colorList = $.extend( {}, this.colorListStandard, this.colorListMetro );
return this;
},
setup: function(options){
this.options = $.extend( {}, this.options, options );
},
color: function(name, palette){
palette = palette || this.PALETTES.ALL;
return this[palette][name] !== undefined ? this[palette][name] : false;
},
palette: function(palette){
palette = palette || this.PALETTES.ALL;
return Object.keys(this[palette]);
},
colors: function(palette){
var c = [];
palette = palette || this.PALETTES.ALL;
$.each(this[palette], function(){
c.push(this);
});
return c;
},
hex2rgb: function(hex){
var regex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace( regex, function( m, r, g, b ) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec( hex );
return result ? {
r: parseInt( result[1], 16 ),
g: parseInt( result[2], 16 ),
b: parseInt( result[3], 16 )
} : null;
},
rgb2hex: function(rgb){
return "#" +
(( 1 << 24 ) + ( rgb.r << 16 ) + ( rgb.g << 8 ) + rgb.b )
.toString( 16 ).slice( 1 );
},
rgb2hsv: function(rgb){
var hsv = new HSV();
var h, s, v;
var r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255;
var max = Math.max(r, g, b);
var min = Math.min(r, g, b);
var delta = max - min;
v = max;
if (max === 0) {
s = 0;
} else {
s = 1 - min / max;
}
if (max === min) {
h = 0;
} else if (max === r && g >= b) {
h = 60 * ( (g - b) / delta );
} else if (max === r && g < b) {
h = 60 * ( (g - b) / delta) + 360
} else if (max === g) {
h = 60 * ( (b - r) / delta) + 120
} else if (max === b) {
h = 60 * ( (r - g) / delta) + 240
} else {
h = 0;
}
hsv.h = h;
hsv.s = s;
hsv.v = v;
return hsv;
},
hsv2rgb: function(hsv){
var r, g, b;
var h = hsv.h, s = hsv.s * 100, v = hsv.v * 100;
var Hi = Math.floor(h / 60);
var Vmin = (100 - s) * v / 100;
var alpha = (v - Vmin) * ( (h % 60) / 60 );
var Vinc = Vmin + alpha;
var Vdec = v - alpha;
switch (Hi) {
case 0: r = v; g = Vinc; b = Vmin; break;
case 1: r = Vdec; g = v; b = Vmin; break;
case 2: r = Vmin; g = v; b = Vinc; break;
case 3: r = Vmin; g = Vdec; b = v; break;
case 4: r = Vinc; g = Vmin; b = v; break;
case 5: r = v; g = Vmin; b = Vdec; break;
}
return {
r: Math.round(r * 255 / 100),
g: Math.round(g * 255 / 100),
b: Math.round(b * 255 / 100)
}
},
hsv2hex: function(hsv){
return this.rgb2hex(this.hsv2rgb(hsv));
},
hex2hsv: function(hex){
return this.rgb2hsv(this.hex2rgb(hex));
},
rgb2cmyk: function(rgb){
var cmyk = new CMYK();
var r = rgb.r / 255;
var g = rgb.g / 255;
var b = rgb.b / 255;
cmyk.k = Math.min( 1 - r, 1 - g, 1 - b );
cmyk.c = ( 1 - r - cmyk.k ) / ( 1 - cmyk.k );
cmyk.m = ( 1 - g - cmyk.k ) / ( 1 - cmyk.k );
cmyk.y = ( 1 - b - cmyk.k ) / ( 1 - cmyk.k );
cmyk.c = Math.round( cmyk.c * 100 );
cmyk.m = Math.round( cmyk.m * 100 );
cmyk.y = Math.round( cmyk.y * 100 );
cmyk.k = Math.round( cmyk.k * 100 );
return cmyk;
},
cmyk2rgb: function(cmyk){
var rgb = new RGB();
var c = cmyk.c / 100;
var m = cmyk.m / 100;
var y = cmyk.y / 100;
var k = cmyk.k / 100;
rgb.r = 1 - Math.min( 1, c * ( 1 - k ) + k );
rgb.g = 1 - Math.min( 1, m * ( 1 - k ) + k );
rgb.b = 1 - Math.min( 1, y * ( 1 - k ) + k );
rgb.r = Math.round( rgb.r * 255 );
rgb.g = Math.round( rgb.g * 255 );
rgb.b = Math.round( rgb.b * 255 );
return rgb;
},
hsv2hsl: function(hsv){
var h, s, l;
h = hsv.h;
l = (2 - hsv.s) * hsv.v;
s = hsv.s * hsv.v;
s /= (l <= 1) ? l : 2 - l;
l /= 2;
return {h: h, s: s, l: l}
},
hsl2hsv: function(hsl){
var h, s, v, l;
h = hsl.h;
l = hsl.l * 2;
s = hsl.s * (l <= 1 ? l : 2 - l);
v = (l + s) / 2;
s = (2 * s) / (l + s);
return {h: h, s: s, l: v}
},
rgb2websafe: function(rgb){
return {
r: Math.round(rgb.r / 51) * 51,
g: Math.round(rgb.g / 51) * 51,
b: Math.round(rgb.b / 51) * 51
}
},
rgba2websafe: function(rgba){
return {
r: Math.round(rgba.r / 51) * 51,
g: Math.round(rgba.g / 51) * 51,
b: Math.round(rgba.b / 51) * 51,
a: rgba.a
}
},
hex2websafe: function(hex){
return this.rgb2hex(this.rgb2websafe(this.toRGB(hex)));
},
hsv2websafe: function(hsv){
return this.rgb2hsv(this.rgb2websafe(this.toRGB(hsv)));
},
hsl2websafe: function(hsl){
return this.hsv2hsl(this.rgb2hsv(this.rgb2websafe(this.toRGB(hsl))));
},
cmyk2websafe: function(cmyk){
return this.rgb2cmyk(this.rgb2websafe(this.cmyk2rgb(cmyk)));
},
websafe: function(color){
if (this.isHEX(color)) return this.hex2websafe(color);
if (this.isRGB(color)) return this.rgb2websafe(color);
if (this.isRGBA(color)) return this.rgba2websafe(color);
if (this.isHSV(color)) return this.hsv2websafe(color);
if (this.isHSL(color)) return this.hsl2websafe(color);
if (this.isCMYK(color)) return this.cmyk2websafe(color);
return color;
},
is: function(color){
if (this.isHEX(color)) return this.TYPES.HEX;
if (this.isRGB(color)) return this.TYPES.RGB;
if (this.isRGBA(color)) return this.TYPES.RGBA;
if (this.isHSV(color)) return this.TYPES.HSV;
if (this.isHSL(color)) return this.TYPES.HSL;
if (this.isCMYK(color)) return this.TYPES.CMYK;
return this.TYPES.UNKNOWN;
},
toRGB: function(color){
if (this.isHSV(color)) return this.hsv2rgb(color);
if (this.isHSL(color)) return this.hsv2rgb(this.hsl2hsv(color));
if (this.isRGB(color)) return color;
if (this.isHEX(color)) return this.hex2rgb(color);
if (this.isCMYK(color)) return this.cmyk2rgb(color);
throw new Error("Unknown color format!");
},
toRGBA: function(color, alpha){
var result = this.toRGB(color);
result.a = alpha || 1;
return result;
},
toHSV: function(color){
return this.rgb2hsv(this.toRGB(color));
},
toHSL: function(color){
return this.hsv2hsl(this.rgb2hsv(this.toRGB(color)));
},
toHSLA: function(color, alpha){
var hsla;
hsla = this.hsv2hsl(this.rgb2hsv(this.toRGB(color)));
hsla.a = alpha || this.options.alpha;
return hsla;
},
toHEX: function(color){
return this.rgb2hex(this.toRGB(color));
},
toCMYK: function(color){
return this.rgb2cmyk(this.toRGB(color));
},
toHexString: function(color){
return this.toHEX(color);
},
toHsvString: function(color){
var hsv = this.toHSV(color);
return "hsv("+[hsv.h, hsv.s, hsv.v].join(",")+")";
},
toHslString: function(color){
var hsl = this.toHSL(color);
return "hsl("+[Math.round(hsl.h), Math.round(hsl.s * 100) + "%" , Math.round(hsl.l * 100) + "%"].join(",")+")";
},
toHslaString: function(color){
var hsl = this.toHSLA(color);
return "hsl("+[Math.round(hsl.h), Math.round(hsl.s * 100) + "%" , Math.round(hsl.l * 100) + "%", hsl.a].join(",")+")";
},
toCmykString: function(color){
var cmyk = this.toCMYK(color);
return "cmyk("+[cmyk.c, cmyk.m, cmyk.y, cmyk.k].join(",")+")";
},
toRgbString: function(color){
var rgb = this.toRGB(color);
return "rgb("+[rgb.r, rgb.g, rgb.b].join(",")+")";
},
toRgbaString: function(color){
var rgb = this.toRGBA(color);
return "rgba("+[rgb.r, rgb.g, rgb.b, rgb.a].join(",")+")";
},
toString: function(color){
if (this.isHEX(color)) return this.toHexString(color);
if (this.isRGB(color)) return this.toRgbString(color);
if (this.isRGBA(color)) return this.toRgbaString(color);
if (this.isHSV(color)) return this.toHsvString(color);
if (this.isHSL(color)) return this.toHslString(color);
if (this.isHSLA(color)) return this.toHslaString(color);
if (this.isCMYK(color)) return this.toCmykString(color);
throw new Error("Unknown color format!");
},
grayscale: function(color, output){
output = output || "hex";
var rgb = this.toRGB(color);
var gray = Math.round(rgb.r * .2125 + rgb.g * .7154 + rgb.b * .0721);
var mono = {
r: gray,
g: gray,
b: gray
};
return this["rgb2"+output](mono);
},
darken: function(color, amount){
if (amount === undefined) {
amount = 10;
}
return this.lighten(color, -1 * Math.abs(amount));
},
lighten: function(color, amount){
var type, res, alpha = 1, ring = amount > 0;
var calc = function(_color, _amount){
var col = _color.slice(1);
var num = parseInt(col, 16);
var r = (num >> 16) + _amount;
if (r > 255) r = 255;
else if (r < 0) r = 0;
var b = ((num >> 8) & 0x00FF) + _amount;
if (b > 255) b = 255;
else if (b < 0) b = 0;
var g = (num & 0x0000FF) + _amount;
if (g > 255) g = 255;
else if (g < 0) g = 0;
res = "#" + (g | (b << 8) | (r << 16)).toString(16);
return res;
};
if (amount === undefined) {
amount = 10;
}
type = this.is(color);
if (type === this.TYPES.RGBA) {
alpha = color.a;
}
do {
res = calc(this.toHEX(color), amount);
ring ? amount-- : amount++;
} while (res.length < 7);
switch (type) {
case "rgb": return this.toRGB(res);
case "rgba": return this.toRGBA(res, alpha);
case "hsv": return this.toHSV(res);
case "hsl": return this.toHSL(res);
case "cmyk": return this.toCMYK(res);
default: return res;
}
},
isDark: function(color){
var rgb = this.toRGB(color);
var YIQ = (
( rgb.r * 299 ) +
( rgb.g * 587 ) +
( rgb.b * 114 )
) / 1000;
return ( YIQ < 128 )
},
isLight: function(hex){
return !this.isDark(hex);
},
isHSV: function(val){
return Utils.isObject(val) && "h" in val && "s" in val && "v" in val;
},
isHSL: function(val){
return Utils.isObject(val) && "h" in val && "s" in val && "l" in val;
},
isHSLA: function(val){
return Utils.isObject(val) && "h" in val && "s" in val && "l" in val && "a" in val;
},
isRGB: function(val){
return Utils.isObject(val) && "r" in val && "g" in val && "b" in val;
},
isRGBA: function(val){
return Utils.isObject(val) && "r" in val && "g" in val && "b" in val && "a" in val;
},
isCMYK: function(val){
return Utils.isObject(val) && "c" in val && "m" in val && "y" in val && "k" in val;
},
isHEX: function(val){
return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(val);
},
isColor: function(color){
return this.isHEX(color) || this.isRGB(color) || this.isRGBA(color) || this.isHSV(color) || this.isHSL(color) || this.isCMYK(color);
},
hueShift: function(h, s){
h+=s;
while (h >= 360.0) h -= 360.0;
while (h < 0.0) h += 360.0;
return h;
},
getScheme: function(color, name, format, options){
this.options = $.extend( {}, this.options, options );
var i;
var scheme = [];
var hsv;
var that = this;
hsv = this.toHSV(color);
if (this.isHSV(hsv) === false) {
console.log("The value is a not supported color format!");
return false;
}
function convert(source, format) {
var result = [];
var o = that.options;
switch (format) {
case "hex": result = source.map(function(v){return Colors.toHEX(v);}); break;
case "rgb": result = source.map(function(v){return Colors.toRGB(v);}); break;
case "rgba": result = source.map(function(v){return Colors.toRGBA(v, o.alpha);}); break;
case "hsl": result = source.map(function(v){return Colors.toHSL(v);}); break;
case "cmyk": result = source.map(function(v){return Colors.toCMYK(v);}); break;
default: result = source;
}
return result;
}
function clamp( num, min, max ){
return Math.max( min, Math.min( num, max ));
}
function toRange(a, b, c){
return a < b ? b : ( a > c ? c : a);
}
var rgb, h = hsv.h, s = hsv.s, v = hsv.v;
var o = this.options;
switch (name) {
case "monochromatic":
case "mono":
if (o.algorithm === 1) {
rgb = this.hsv2rgb(hsv);
rgb.r = toRange(Math.round(rgb.r + (255 - rgb.r) * o.tint1), 0, 255);
rgb.g = toRange(Math.round(rgb.g + (255 - rgb.g) * o.tint1), 0, 255);
rgb.b = toRange(Math.round(rgb.b + (255 - rgb.b) * o.tint1), 0, 255);
scheme.push(this.rgb2hsv(rgb));
rgb = this.hsv2rgb(hsv);
rgb.r = toRange(Math.round(rgb.r + (255 - rgb.r) * o.tint2), 0, 255);
rgb.g = toRange(Math.round(rgb.g + (255 - rgb.g) * o.tint2), 0, 255);
rgb.b = toRange(Math.round(rgb.b + (255 - rgb.b) * o.tint2), 0, 255);
scheme.push(this.rgb2hsv(rgb));
scheme.push(hsv);
rgb = this.hsv2rgb(hsv);
rgb.r = toRange(Math.round(rgb.r * o.shade1), 0, 255);
rgb.g = toRange(Math.round(rgb.g * o.shade1), 0, 255);
rgb.b = toRange(Math.round(rgb.b * o.shade1), 0, 255);
scheme.push(this.rgb2hsv(rgb));
rgb = this.hsv2rgb(hsv);
rgb.r = toRange(Math.round(rgb.r * o.shade2), 0, 255);
rgb.g = toRange(Math.round(rgb.g * o.shade2), 0, 255);
rgb.b = toRange(Math.round(rgb.b * o.shade2), 0, 255);
scheme.push(this.rgb2hsv(rgb));
} else if (o.algorithm === 2) {
scheme.push(hsv);
for(i = 1; i <= o.distance; i++) {
v = clamp(v - o.step, 0, 1);
s = clamp(s - o.step, 0, 1);
scheme.push({h: h, s: s, v: v});
}
} else if (o.algorithm === 3) {
scheme.push(hsv);
for(i = 1; i <= o.distance; i++) {
v = clamp(v - o.step, 0, 1);
scheme.push({h: h, s: s, v: v});
}
} else {
v = clamp(hsv.v + o.step * 2, 0, 1);
scheme.push({h: h, s: s, v: v});
v = clamp(hsv.v + o.step, 0, 1);
scheme.push({h: h, s: s, v: v});
scheme.push(hsv); s = hsv.s; v = hsv.v;
v = clamp(hsv.v - o.step, 0, 1);
scheme.push({h: h, s: s, v: v});
v = clamp(hsv.v - o.step * 2, 0, 1);
scheme.push({h: h, s: s, v: v});
}
break;
case 'complementary':
case 'complement':
case 'comp':
scheme.push(hsv);
h = this.hueShift(hsv.h, 180.0);
scheme.push({h: h, s: s, v: v});
break;
case 'double-complementary':
case 'double-complement':
case 'double':
scheme.push(hsv);
console.log(h);
h = this.hueShift(h, 180.0);
scheme.push({h: h, s: s, v: v});
console.log(h);
h = this.hueShift(h, o.angle);
scheme.push({h: h, s: s, v: v});
console.log(h);
h = this.hueShift(h, 180.0);
scheme.push({h: h, s: s, v: v});
console.log(h);
break;
case 'analogous':
case 'analog':
h = this.hueShift(h, o.angle);
scheme.push({h: h, s: s, v: v});
scheme.push(hsv);
h = this.hueShift(hsv.h, 0.0 - o.angle);
scheme.push({h: h, s: s, v: v});
break;
case 'triadic':
case 'triad':
scheme.push(hsv);
for ( i = 1; i < 3; i++ ) {
h = this.hueShift(h, 120.0);
scheme.push({h: h, s: s, v: v});
}
break;
case 'tetradic':
case 'tetra':
scheme.push(hsv);
h = this.hueShift(hsv.h, 180.0);
scheme.push({h: h, s: s, v: v});
h = this.hueShift(hsv.h, -1 * o.angle);
scheme.push({h: h, s: s, v: v});
h = this.hueShift(h, 180.0);
scheme.push({h: h, s: s, v: v});
break;
case 'square':
scheme.push(hsv);
for ( i = 1; i < 4; i++ ) {
h = this.hueShift(h, 90.0);
scheme.push({h: h, s: s, v: v});
}
break;
case 'split-complementary':
case 'split-complement':
case 'split':
h = this.hueShift(h, 180.0 - o.angle);
scheme.push({h: h, s: s, v: v});
scheme.push(hsv);
h = this.hueShift(hsv.h, 180.0 + o.angle);
scheme.push({h: h, s: s, v: v});
break;
default: console.log("Unknown scheme name");
}
return convert(scheme, format);
}
};
Metro['colors'] = Colors.init();
// Source: js/utils/easing.js
$.easing['jswing'] = $.easing['swing'];
$.extend($.easing, {
def: 'easeOutQuad',
swing: function (x, t, b, c, d) {
//alert($.easing.default);
return $.easing[$.easing.def](x, t, b, c, d);
},
easeInQuad: function (x, t, b, c, d) {
return c * (t /= d) * t + b;
},
easeOutQuad: function (x, t, b, c, d) {
return -c * (t /= d) * (t - 2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
return -c / 2 * ((--t) * (t - 2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
return c * (t /= d) * t * t + b;
},
easeOutCubic: function (x, t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
return c / 2 * ((t -= 2) * t * t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
return c * (t /= d) * t * t * t + b;
},
easeOutQuart: function (x, t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
return c * (t /= d) * t * t * t * t + b;
},
easeOutQuint: function (x, t, b, c, d) {
return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
return c * Math.sin(t / d * (Math.PI / 2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
if (t == 0) return b;
if (t == d) return b + c;
if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
var s = 1.70158;
var p = 0;
var a = c;
if (t == 0) return b;
if ((t /= d) == 1) return b + c;
if (!p) p = d * .3;
if (a < Math.abs(c)) {
a = c;
s = p / 4;
}
else s = p / (2 * Math.PI) * Math.asin(c / a);
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
},
easeOutElastic: function (x, t, b, c, d) {
var s = 1.70158;
var p = 0;
var a = c;
if (t == 0) return b;
if ((t /= d) == 1) return b + c;
if (!p) p = d * .3;
if (a < Math.abs(c)) {
a = c;
s = p / 4;
}
else s = p / (2 * Math.PI) * Math.asin(c / a);
return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
var s = 1.70158;
var p = 0;
var a = c;
if (t == 0) return b;
if ((t /= d / 2) == 2) return b + c;
if (!p) p = d * (.3 * 1.5);
if (a < Math.abs(c)) {
a = c;
s = p / 4;
}
else s = p / (2 * Math.PI) * Math.asin(c / a);
if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c * (t /= d) * t * ((s + 1) * t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
return c - $.easing.easeOutBounce(x, d - t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t *