PHP Classes

File: crud360/js/colorpicker/pick-a-color.js

Recommend this page to a friend!
  Classes of Muhammad Usman   PHP CRUD 360 Form Generator   crud360/js/colorpicker/pick-a-color.js   Download  
File: crud360/js/colorpicker/pick-a-color.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: PHP CRUD 360 Form Generator
Generate forms for administration panels
Author: By
Last change:
Date: 6 years ago
Size: 57,717 bytes
 

Contents

Class file image Download
/* * Pick-a-Color JS v1.2.3 * Copyright 2013 Lauren Sperber and Broadstreet Ads * https://github.com/lauren/pick-a-color/blob/master/LICENSE */ ;(function ($) { "use strict"; $.fn.pickAColor = function (options) { // capabilities var supportsTouch = 'ontouchstart' in window, smallScreen = (parseInt($(window).width(),10) < 767) ? true : false, supportsLocalStorage = 'localStorage' in window && window.localStorage !== null && typeof JSON === 'object', // don't use LS if JSON is not available isIELT10 = document.all && !window.atob, // OH NOES! startEvent = supportsTouch ? "touchstart.pickAColor" : "mousedown.pickAColor", moveEvent = supportsTouch ? "touchmove.pickAColor" : "mousemove.pickAColor", endEvent = supportsTouch ? "touchend.pickAColor" : "mouseup.pickAColor", clickEvent = supportsTouch ? "touchend.pickAColor" : "click.pickAColor", dragEvent = "dragging.pickAColor", endDragEvent = "endDrag.pickAColor"; // settings var settings = $.extend({ showSpectrum : true, showSavedColors : true, saveColorsPerElement : false, fadeMenuToggle : true, showAdvanced : true, showBasicColors : true, showHexInput : true, allowBlank : false, inlineDropdown : false, basicColors : { white : 'fff', red : 'f00', orange : 'f60', yellow : 'ff0', green : '008000', blue : '00f', purple : '800080', black : '000' } }, options); // override showBasicColors showAdvanced isn't shown if (!settings.showAdvanced && !settings.showBasicColors) { settings.showBasicColors = true; } var useTabs = (settings.showSavedColors && settings.showAdvanced) || (settings.showBasicColors && settings.showSavedColors) || (settings.showBasicColors && settings.showAdvanced); // so much markup var markupAfterInput = function () { var $markup = $("<div>").addClass("input-group-btn"), $dropdownButton = $("<button type='button'>").addClass("btn btn-default color-dropdown dropdown-toggle"), $dropdownColorPreview = $("<span>").addClass("color-preview current-color"), $dropdownCaret = $("<span>").addClass("caret"), $dropdownContainer = $("<div>").addClass("color-menu dropdown-menu"); if (settings.inlineDropdown) { $dropdownContainer.addClass("color-menu--inline"); } if (!settings.showHexInput) { $dropdownButton.addClass("no-hex"); $dropdownContainer.addClass("no-hex"); } $markup.append($dropdownButton.append($dropdownColorPreview).append($dropdownCaret)); if (!useTabs && !settings.showSpectrum) { $dropdownContainer.addClass("small"); } if (useTabs) { var $tabContainer = $("<div>").addClass("color-menu-tabs"), savedColorsClass = settings.showBasicColors ? "savedColors-tab tab" : "savedColors-tab tab tab-active"; if (settings.showBasicColors) { $tabContainer.append($("<span>").addClass("basicColors-tab tab tab-active"). append($("<a>").text("Basic Colors"))); } if (settings.showSavedColors) { $tabContainer.append($("<span>").addClass(savedColorsClass).append($("<a>").text("Saved Colors"))); } if (settings.showAdvanced) { $tabContainer.append($("<span>").addClass("advanced-tab tab"). append($("<a>").text("Advanced"))); } $dropdownContainer.append($tabContainer); } if (settings.showBasicColors) { var $basicColors = $("<div>").addClass("basicColors-content active-content"); if (settings.showSpectrum) { $basicColors.append($("<h6>").addClass("color-menu-instructions"). text("Tap spectrum or drag band to change color")); } var $listContainer = $("<ul>").addClass("basic-colors-list"); $.each(settings.basicColors, function (index,value) { var $thisColor = $("<li>").addClass("color-item"), $thisLink = $("<a>").addClass(index + " color-link"), $colorPreview = $("<span>").addClass("color-preview " + index), $colorLabel = $("<span>").addClass("color-label").text(index); $thisLink.append($colorPreview, $colorLabel); $colorPreview.append(); if (value[0] !== '#') { value = '#'+value; } $colorPreview.css('background-color', value); if (settings.showSpectrum) { var $thisSpectrum = $("<span>").addClass("color-box spectrum-" + index); if (isIELT10) { $.each([0,1], function (i) { if (value !== "fff" && index !== "000") $thisSpectrum.append($("<span>").addClass(index + "-spectrum-" + i + " ie-spectrum")); }); } var $thisHighlightBand = $("<span>").addClass("highlight-band"); $.each([0,1,2], function () { $thisHighlightBand.append($("<span>").addClass("highlight-band-stripe")); }); $thisLink.append($thisSpectrum.append($thisHighlightBand)); } $listContainer.append($thisColor.append($thisLink)); }); $dropdownContainer.append($basicColors.append($listContainer)); } if (settings.showSavedColors) { var savedColorsActiveClass = settings.showBasicColors ? 'inactive-content' : 'active-content', $savedColors = $("<div>").addClass("savedColors-content").addClass(savedColorsActiveClass); $savedColors.append($("<p>").addClass("saved-colors-instructions"). text("Type in a color or use the spectrums to lighten or darken an existing color.")); $dropdownContainer.append($savedColors); } if (settings.showAdvanced) { var advancedColorsActiveClass = settings.showBasicColors || settings.showSavedColors ? 'inactive-content' : 'active-content'; var $advanced = $("<div>").addClass("advanced-content").addClass(advancedColorsActiveClass). append($("<h6>").addClass("advanced-instructions").text("Tap spectrum or drag band to change color")), $advancedList = $("<ul>").addClass("advanced-list"), $hueItem = $("<li>").addClass("hue-item"), $hueContent = $("<span>").addClass("hue-text"). text("Hue: ").append($("<span>").addClass("hue-value").text("0")); var $hueSpectrum = $("<span>").addClass("color-box spectrum-hue"); if (isIELT10) { $.each([0,1,2,3,4,5,6], function (i) { $hueSpectrum.append($("<span>").addClass("hue-spectrum-" + i + " ie-spectrum hue")); }); } var $hueHighlightBand = $("<span>").addClass("highlight-band"); $.each([0,1,2], function () { $hueHighlightBand.append($("<span>").addClass("highlight-band-stripe")); }); $advancedList.append($hueItem.append($hueContent).append($hueSpectrum.append($hueHighlightBand))); var $lightnessItem = $("<li>").addClass("lightness-item"), $lightnessSpectrum = $("<span>").addClass("color-box spectrum-lightness"), $lightnessContent = $("<span>").addClass("lightness-text"). text("Lightness: ").append($("<span>").addClass("lightness-value").text("50%")); if (isIELT10) { $.each([0,1], function (i) { $lightnessSpectrum.append($("<span>").addClass("lightness-spectrum-" + i + " ie-spectrum")); }); } var $lightnessHighlightBand = $("<span>").addClass("highlight-band"); $.each([0,1,2], function () { $lightnessHighlightBand.append($("<span>").addClass("highlight-band-stripe")); }); $advancedList.append($lightnessItem. append($lightnessContent).append($lightnessSpectrum.append($lightnessHighlightBand))); var $saturationItem = $("<li>").addClass("saturation-item"), $saturationSpectrum = $("<span>").addClass("color-box spectrum-saturation"); if (isIELT10) { $.each([0,1], function (i) { $saturationSpectrum.append($("<span>").addClass("saturation-spectrum-" + i + " ie-spectrum")); }); } var $saturationHighlightBand = $("<span>").addClass("highlight-band"); $.each([0,1,2], function () { $saturationHighlightBand.append($("<span>").addClass("highlight-band-stripe")); }); var $saturationContent = $("<span>").addClass("saturation-text"). text("Saturation: ").append($("<span>").addClass("saturation-value").text("100%")); $advancedList.append($saturationItem.append($saturationContent).append($saturationSpectrum. append($saturationHighlightBand))); var $previewItem = $("<li>").addClass("preview-item").append($("<span>"). addClass("preview-text").text("Preview")), $preview = $("<span>").addClass("color-preview advanced"). append("<button class='color-select btn btn-mini advanced' type='button'>Select</button>"); $advancedList.append($previewItem.append($preview)); $dropdownContainer.append($advanced.append($advancedList)); } $markup.append($dropdownContainer); return $markup; }; var myColorVars = {}; var myStyleVars = { rowsInDropdown : 8, maxColsInDropdown : 2 }; if (settings.showSavedColors) { // if we're saving colors... var allSavedColors = []; // make an array for all saved colors if (supportsLocalStorage && localStorage.allSavedColors) { // look for them in LS allSavedColors = JSON.parse(localStorage.allSavedColors); // if there's a saved_colors cookie... } else if (document.cookie.match("pickAColorSavedColors-allSavedColors=")) { var theseCookies = document.cookie.split(";"); // split cookies into an array... $.each(theseCookies, function (index) { // find the savedColors cookie! if (theseCookies[index].match("pickAColorSavedColors-allSavedColors=")) { allSavedColors = theseCookies[index].split("=")[1].split(","); } }); } } // methods var methods = { initialize: function (index) { var $thisEl = $(this), $thisParent, myId, defaultColor; // if there's no name on the input field, create one, then use it as the myID if (!$thisEl.attr("name")) { $thisEl.attr("name","pick-a-color-" + index); } myId = $thisEl.attr("name"); // enforce .pick-a-color class on input $thisEl.addClass("pick-a-color"); // convert default color to valid hex value if (settings.allowBlank) { // convert to Hex only if the field init value is not blank if (!$thisEl.val().match(/^\s+$|^$/)) { myColorVars.defaultColor = tinycolor($thisEl.val()).toHex(); myColorVars.typedColor = myColorVars.defaultColor; $thisEl.val(myColorVars.defaultColor); } } else { myColorVars.defaultColor = tinycolor($thisEl.val()).toHex(); myColorVars.typedColor = myColorVars.defaultColor; $thisEl.val(myColorVars.defaultColor); } // wrap initializing input field with unique div and add hex symbol and post-input markup $($thisEl).wrap('<div class="input-group pick-a-color-markup" id="' + myId + '">'); $thisParent = $($thisEl.parent()); if (settings.showHexInput) { $thisParent.prepend('<span class="hex-pound input-group-addon">#</span>').append(markupAfterInput()); } else { $thisParent.append(markupAfterInput()); } // hide input for noinput option if (!settings.showHexInput) { $thisEl.attr("type","hidden"); } }, updatePreview: function ($thisEl) { if (!settings.allowBlank) { myColorVars.typedColor = tinycolor($thisEl.val()).toHex(); $thisEl.siblings(".input-group-btn").find(".current-color").css("background-color", "#" + myColorVars.typedColor); } else { myColorVars.typedColor = $thisEl.val().match(/^\s+$|^$/) ? '' : tinycolor($thisEl.val()).toHex(); if (myColorVars.typedColor === '') { $thisEl.siblings(".input-group-btn").find(".current-color").css("background", "none"); } else { $thisEl.siblings(".input-group-btn").find(".current-color").css("background-color", "#" + myColorVars.typedColor); } } }, // must be called with apply and an arguments array like [{thisEvent}] pressPreviewButton: function () { var thisEvent = arguments[0].thisEvent; thisEvent.stopPropagation(); methods.toggleDropdown(thisEvent.target); }, openDropdown: function (button,menu) { $(".color-menu").each(function () { // check all the other color menus... var $thisEl = $(this); if ($thisEl.css("display") === "block") { // if one is open, // find its color preview button var thisColorPreviewButton = $thisEl.parents(".input-group-btn"); methods.closeDropdown(thisColorPreviewButton,$thisEl); // close it } }); if (settings.fadeMenuToggle && !supportsTouch) { //fades look terrible in mobile $(menu).fadeIn("fast"); } else { $(menu).show(); } $(button).addClass("open"); }, closeDropdown: function (button,menu) { if (settings.fadeMenuToggle && !supportsTouch) { //fades look terrible in mobile $(menu).fadeOut("fast"); } else { $(menu).css("display","none"); } $(button).removeClass("open"); }, // can only be called with apply. requires an arguments array like: // [{button, menu}] closeDropdownIfOpen: function () { var button = arguments[0].button, menu = arguments[0].menu; if (menu.css("display") === "block") { methods.closeDropdown(button,menu); } }, toggleDropdown: function (element) { var $container = $(element).parents(".pick-a-color-markup"), $input = $container.find("input"), $button = $container.find(".input-group-btn"), $menu = $container.find(".color-menu"); if (!$input.is(":disabled") && $menu.css("display") === "none") { methods.openDropdown($button,$menu); } else { methods.closeDropdown($button,$menu); } }, tabbable: function () { var $this_el = $(this), $myContainer = $this_el.parents(".pick-a-color-markup"); $this_el.click(function () { var $this_el = $(this), // interpret the associated content class from the tab class and get that content div contentClass = $this_el.attr("class").split(" ")[0].split("-")[0] + "-content", myContent = $this_el.parents(".dropdown-menu").find("." + contentClass); if (!$this_el.hasClass("tab-active")) { // make all active tabs inactive $myContainer.find(".tab-active").removeClass("tab-active"); // toggle visibility of active content $myContainer.find(".active-content"). removeClass("active-content").addClass("inactive-content"); $this_el.addClass("tab-active"); // make current tab and content active $(myContent).addClass("active-content").removeClass("inactive-content"); } }); }, // takes a color and the current position of the color band, // returns the value by which the color should be multiplied to // get the color currently being highlighted by the band getColorMultiplier: function (spectrumType,position,tab) { // position of the color band as a percentage of the width of the color box var spectrumWidth = (tab === "basic") ? parseInt($(".color-box").first().width(),10) : parseInt($(".advanced-list").find(".color-box").first().width(),10); if (spectrumWidth === 0) { // in case the width isn't set correctly if (tab === "basic") { spectrumWidth = supportsTouch ? 160 : 200; } else { spectrumWidth = supportsTouch ? 160 : 300; } } var halfSpectrumWidth = spectrumWidth / 2, percentOfBox = position / spectrumWidth; // for spectrums that lighten and darken, recalculate percent of box relative // to the half of spectrum the highlight band is currently in if (spectrumType === "bidirectional") { return (percentOfBox <= 0.5) ? (1 - (position / halfSpectrumWidth)) / 2 : -((position - halfSpectrumWidth) / halfSpectrumWidth) / 2; // now that we're treating each half as an individual spectrum, both are darkenRight } else { return (spectrumType === "darkenRight") ? -(percentOfBox / 2) : (percentOfBox / 2); } }, // modifyHSLLightness based on ligten/darken in LESS // https://github.com/cloudhead/less.js/blob/master/dist/less-1.3.3.js#L1763 modifyHSLLightness: function (HSL,multiplier) { var hsl = HSL; hsl.l += multiplier; hsl.l = Math.min(Math.max(0,hsl.l),1); return tinycolor(hsl).toHslString(); }, // defines the area within which an element can be moved getMoveableArea: function ($element) { var dimensions = {}, $elParent = $element.parent(), myWidth = $element.outerWidth(), parentWidth = $elParent.width(), // don't include borders for parent width parentLocation = $elParent.offset(); dimensions.minX = parentLocation.left; dimensions.maxX = parentWidth - myWidth; //subtract myWidth to avoid pushing out of parent return dimensions; }, moveHighlightBand: function ($highlightBand, moveableArea, e) { var hbWidth = $(".highlight-band").first().outerWidth(), threeFourthsHBWidth = hbWidth * 0.75, mouseX = supportsTouch ? e.originalEvent.pageX : e.pageX, // find the mouse! // mouse position relative to width of highlight-band newPosition = mouseX - moveableArea.minX - threeFourthsHBWidth; // don't move beyond moveable area newPosition = Math.max(0,(Math.min(newPosition,moveableArea.maxX))); $highlightBand.css("position", "absolute"); $highlightBand.css("left", newPosition); }, horizontallyDraggable: function () { $(this).on(startEvent, function (event) { event.preventDefault(); var $this_el = $(event.delegateTarget); $this_el.css("cursor","-webkit-grabbing"); $this_el.css("cursor","-moz-grabbing"); var dimensions = methods.getMoveableArea($this_el); $(document).on(moveEvent, function (e) { $this_el.trigger(dragEvent); methods.moveHighlightBand($this_el, dimensions, e); }).on(endEvent, function(event) { $(document).off(moveEvent); // for desktop $(document).off(dragEvent); $this_el.css("cursor","-webkit-grab"); $this_el.css("cursor","-moz-grab"); $this_el.trigger(endDragEvent); $(document).off(endEvent); }); }).on(endEvent, function(event) { event.stopPropagation(); $(document).off(moveEvent); // for mobile $(document).off(dragEvent); }); }, modifyHighlightBand: function ($highlightBand,colorMultiplier,spectrumType) { var darkGrayHSL = { h: 0, s:0, l: 0.05 }, bwMidHSL = { h: 0, s:0, l: 0.5 }, // change to color of band is opposite of change to color of spectrum hbColorMultiplier = -colorMultiplier, hbsColorMultiplier = hbColorMultiplier * 10, // needs to be either black or white $hbStripes = $highlightBand.find(".highlight-band-stripe"), newBandColor = (spectrumType === "lightenRight") ? methods.modifyHSLLightness(bwMidHSL,hbColorMultiplier) : methods.modifyHSLLightness(darkGrayHSL,hbColorMultiplier); $highlightBand.css("border-color", newBandColor); $hbStripes.css("background-color", newBandColor); }, // must be called with apply and expects an arguments array like // [{type: "basic"}] or [{type: "advanced", hsl: {h,s,l}}] calculateHighlightedColor: function () { var $thisEl = $(this), $thisParent = $thisEl.parent(), hbWidth = $(".highlight-band").first().outerWidth(), halfHBWidth = hbWidth / 2, tab = arguments[0].type, spectrumType, colorHsl, currentHue, currentSaturation, $advancedPreview, $saturationSpectrum, $hueSpectrum, $lightnessValue; if (tab === "basic") { // get the class of the parent color box and slice off "spectrum" var colorName = $thisParent.attr("class").split("-")[2], colorHex = settings.basicColors[colorName]; colorHsl = tinycolor(colorHex).toHsl(); switch(colorHex) { case "fff": spectrumType = "darkenRight"; break; case "000": spectrumType = "lightenRight"; break; default: spectrumType = "bidirectional"; } } else { // re-set current L value to 0.5 because the color multiplier ligtens // and darkens against the baseline value var $advancedContainer = $thisEl.parents(".advanced-list"); currentSaturation = arguments[0].hsl.s; $hueSpectrum = $advancedContainer.find(".spectrum-hue"); currentHue = arguments[0].hsl.h; $saturationSpectrum = $advancedContainer.find(".spectrum-saturation"); $lightnessValue = $advancedContainer.find(".lightness-value"); $advancedPreview = $advancedContainer.find(".color-preview"); colorHsl = {"h": arguments[0].hsl.h, "l": 0.5, "s": arguments[0].hsl.s}; spectrumType = "bidirectional"; } // midpoint of the current left position of the color band var highlightBandLocation = parseInt($thisEl.css("left"),10) + halfHBWidth, colorMultiplier = methods.getColorMultiplier(spectrumType,highlightBandLocation,tab), highlightedColor = methods.modifyHSLLightness(colorHsl,colorMultiplier), highlightedHex = "#" + tinycolor(highlightedColor).toHex(), highlightedLightnessString = highlightedColor.split("(")[1].split(")")[0].split(",")[2], highlightedLightness = (parseInt(highlightedLightnessString.split("%")[0], 10)) / 100; if (tab === "basic") { $thisParent.siblings(".color-preview").css("background-color",highlightedHex); // replace the color label with a 'select' button $thisParent.prev('.color-label').replaceWith( '<button class="color-select btn btn-mini" type="button">Select</button>'); if (spectrumType !== "darkenRight") { methods.modifyHighlightBand($thisEl,colorMultiplier,spectrumType); } } else { $advancedPreview.css("background-color",highlightedHex); $lightnessValue.text(highlightedLightnessString); methods.updateSaturationStyles($saturationSpectrum,currentHue,highlightedLightness); methods.updateHueStyles($hueSpectrum,currentSaturation,highlightedLightness); methods.modifyHighlightBand($(".advanced-content .highlight-band"),colorMultiplier,spectrumType); } return (tab === "basic") ? tinycolor(highlightedColor).toHex() : highlightedLightness; }, updateSavedColorPreview: function (elements) { $.each(elements, function (index) { var $this_el = $(elements[index]), thisColor = $this_el.attr("class"); $this_el.find(".color-preview").css("background-color",thisColor); }); }, updateSavedColorMarkup: function ($savedColorsContent,mySavedColors) { mySavedColors = mySavedColors ? mySavedColors : allSavedColors; if (settings.showSavedColors && mySavedColors.length > 0) { if (!settings.saveColorsPerElement) { $savedColorsContent = $(".savedColors-content"); mySavedColors = allSavedColors; } var maxSavedColors = myStyleVars.rowsInDropdown * myStyleVars.maxColsInDropdown; mySavedColors = mySavedColors.slice(0,maxSavedColors); var $col0 = $("<ul>").addClass("saved-color-col 0"), $col1 = $("<ul>").addClass("saved-color-col 1"); $.each(mySavedColors, function (index,value) { var $this_li = $("<li>").addClass("color-item"), $this_link = $("<a>").addClass(value); $this_link.append($("<span>").addClass("color-preview")); $this_link.append($("<span>").addClass("color-label").text(value)); $this_li.append($this_link); if (index % 2 === 0) { $col0.append($this_li); } else { $col1.append($this_li); } }); $savedColorsContent.html($col0); $savedColorsContent.append($col1); var savedColorLinks = $($savedColorsContent).find("a"); methods.updateSavedColorPreview(savedColorLinks); } }, setSavedColorsCookie: function (savedColors,savedColorsDataAttr) { var now = new Date(), tenYearsInMilliseconds = 315360000000, expiresOn = new Date(now.getTime() + tenYearsInMilliseconds); expiresOn = expiresOn.toGMTString(); if (typeof savedColorsDataAttr === "undefined") { document.cookie = "pickAColorSavedColors-allSavedColors=" + savedColors + ";expires=" + expiresOn; } else { document.cookie = "pickAColorSavedColors-" + savedColorsDataAttr + "=" + savedColors + "; expires=" + expiresOn; } }, saveColorsToLocalStorage: function (savedColors,savedColorsDataAttr) { if (supportsLocalStorage) { // if there is no data attribute, save to allSavedColors if (typeof savedColorsDataAttr === "undefined") { try { localStorage.allSavedColors = JSON.stringify(savedColors); } catch(e) { localStorage.clear(); } } else { // otherwise save to a data attr-specific item try { localStorage["pickAColorSavedColors-" + savedColorsDataAttr] = JSON.stringify(savedColors); } catch(e) { localStorage.clear(); } } } else { methods.setSavedColorsCookie(savedColors,savedColorsDataAttr); } }, removeFromArray: function (array, item) { if ($.inArray(item,array) !== -1) { // make sure it's in there array.splice($.inArray(item,array),1); } }, updateSavedColors: function (color,savedColors,savedColorsDataAttr) { methods.removeFromArray(savedColors,color); savedColors.unshift(color); methods.saveColorsToLocalStorage(savedColors,savedColorsDataAttr); }, // when settings.saveColorsPerElement, colors are saved to both mySavedColors and // allSavedColors so they will be avail to color pickers with no savedColorsDataAttr addToSavedColors: function (color,mySavedColorsInfo,$mySavedColorsContent) { if (settings.showSavedColors && color !== undefined) { // make sure we're saving colors if (color[0] != "#") { color = "#" + color; } methods.updateSavedColors(color,allSavedColors); if (settings.saveColorsPerElement) { // if we're saving colors per element... var mySavedColors = mySavedColorsInfo.colors, dataAttr = mySavedColorsInfo.dataAttr; methods.updateSavedColors(color,mySavedColors,dataAttr); methods.updateSavedColorMarkup($mySavedColorsContent,mySavedColors); } else { // if not saving per element, update markup with allSavedColors methods.updateSavedColorMarkup($mySavedColorsContent,allSavedColors); } } }, // handles selecting a color from the basic menu of colors. // must be called with apply and relies on an arguments array like: // [{els, savedColorsInfo}] selectFromBasicColors: function () { var selectedColor = $(this).find("span:first").css("background-color"), myElements = arguments[0].els, mySavedColorsInfo = arguments[0].savedColorsInfo; selectedColor = tinycolor(selectedColor).toHex(); $(myElements.thisEl).val(selectedColor); $(myElements.thisEl).trigger("change"); methods.updatePreview(myElements.thisEl); methods.addToSavedColors(selectedColor,mySavedColorsInfo,myElements.savedColorsContent); methods.closeDropdown(myElements.colorPreviewButton,myElements.colorMenu); // close the dropdown }, // handles user clicking or tapping on spectrum to select a color. // must be called with apply and relies on an arguments array like: // [{thisEvent, savedColorsInfo, els, mostRecentClick}] tapSpectrum: function () { var thisEvent = arguments[0].thisEvent, mySavedColorsInfo = arguments[0].savedColorsInfo, myElements = arguments[0].els, mostRecentClick = arguments[0].mostRecentClick; thisEvent.stopPropagation(); // stop this click from closing the dropdown var $highlightBand = $(this).find(".highlight-band"), dimensions = methods.getMoveableArea($highlightBand); if (supportsTouch) { methods.moveHighlightBand($highlightBand, dimensions, mostRecentClick); } else { methods.moveHighlightBand($highlightBand, dimensions, thisEvent); } var highlightedColor = methods.calculateHighlightedColor.apply($highlightBand, [{type: "basic"}]); methods.addToSavedColors(highlightedColor,mySavedColorsInfo,myElements.savedColorsContent); // update touch instructions myElements.touchInstructions.html("Press 'select' to choose this color"); }, // bind to mousedown/touchstart, execute provied function if the top of the // window has not moved when there is a mouseup/touchend // must be called with apply and an arguments array like: // [{thisFunction, theseArguments}] executeUnlessScrolled: function () { var thisFunction = arguments[0].thisFunction, theseArguments = arguments[0].theseArguments, windowTopPosition, mostRecentClick; $(this).on(startEvent, function (e) { windowTopPosition = $(window).scrollTop(); // save to see if user is scrolling in mobile mostRecentClick = e; }).on(clickEvent, function (event) { var distance = windowTopPosition - $(window).scrollTop(); if (supportsTouch && (Math.abs(distance) > 0)) { return false; } else { theseArguments.thisEvent = event; //add the click event to the arguments object theseArguments.mostRecentClick = mostRecentClick; //add start event to the arguments object thisFunction.apply($(this), [theseArguments]); } }); }, updateSaturationStyles: function (spectrum, hue, lightness) { var lightnessString = (lightness * 100).toString() + "%", start = "#" + tinycolor("hsl(" + hue + ",0%," + lightnessString).toHex(), mid = "#" + tinycolor("hsl(" + hue + ",50%," + lightnessString).toHex(), end = "#" + tinycolor("hsl(" + hue + ",100%," + lightnessString).toHex(), fullSpectrumString = "", standard = $.each(["-webkit-linear-gradient","-o-linear-gradient"], function(index,value) { fullSpectrumString += "background-image: " + value + "(left, " + start + " 0%, " + mid + " 50%, " + end + " 100%);"; }), ieSpectrum0 = "progid:DXImageTransform.Microsoft.gradient(startColorstr='" + start + "', endColorstr='" + mid + "', GradientType=1)", ieSpectrum1 = "progid:DXImageTransform.Microsoft.gradient(startColorstr='" + mid + "', endColorstr='" + end + "', GradientType=1)"; fullSpectrumString = "background-image: -moz-linear-gradient(left center, " + start + " 0%, " + mid + " 50%, " + end + " 100%);" + "background-image: linear-gradient(to right, " + start + " 0%, " + mid + " 50%, " + end + " 100%); " + "background-image: -webkit-gradient(linear, left top, right top," + "color-stop(0, " + start + ")," + "color-stop(0.5, " + mid + ")," + "color-stop(1, " + end + "));" + fullSpectrumString; if (isIELT10) { var $spectrum0 = $(spectrum).find(".saturation-spectrum-0"); var $spectrum1 = $(spectrum).find(".saturation-spectrum-1"); $spectrum0.css("filter",ieSpectrum0); $spectrum1.css("filter",ieSpectrum1); } else { spectrum.attr("style",fullSpectrumString); } }, updateLightnessStyles: function (spectrum, hue, saturation) { var saturationString = (saturation * 100).toString() + "%", start = "#" + tinycolor("hsl(" + hue + "," + saturationString + ",100%)").toHex(), mid = "#" + tinycolor("hsl(" + hue + "," + saturationString + ",50%)").toHex(), end = "#" + tinycolor("hsl(" + hue + "," + saturationString + ",0%)").toHex(), fullSpectrumString = "", standard = $.each(["-webkit-linear-gradient","-o-linear-gradient"], function(index, value) { fullSpectrumString += "background-image: " + value + "(left, " + start + " 0%, " + mid + " 50%, " + end + " 100%);"; }), ieSpectrum0 = "progid:DXImageTransform.Microsoft.gradient(startColorstr='" + start + "', endColorstr='" + mid + "', GradientType=1)", ieSpectrum1 = "progid:DXImageTransform.Microsoft.gradient(startColorstr='" + mid + "', endColorstr='" + end + "', GradientType=1)"; fullSpectrumString = "background-image: -moz-linear-gradient(left center, " + start + " 0%, " + mid + " 50%, " + end + " 100%); " + "background-image: linear-gradient(to right, " + start + " 0%, " + mid + " 50%, " + end + " 100%); " + "background-image: -webkit-gradient(linear, left top, right top," + " color-stop(0, " + start + ")," + " color-stop(0.5, " + mid + ")," + " color-stop(1, " + end + ")); " + fullSpectrumString; if (isIELT10) { var $spectrum0 = $(spectrum).find(".lightness-spectrum-0"); var $spectrum1 = $(spectrum).find(".lightness-spectrum-1"); $spectrum0.css("filter",ieSpectrum0); $spectrum1.css("filter",ieSpectrum1); } else { spectrum.attr("style",fullSpectrumString); } }, updateHueStyles: function (spectrum, saturation, lightness) { var saturationString = (saturation * 100).toString() + "%", lightnessString = (lightness * 100).toString() + "%", color1 = "#" + tinycolor("hsl(0," + saturationString + "," + lightnessString + ")").toHex(), color2 = "#" + tinycolor("hsl(60," + saturationString + "," + lightnessString + ")").toHex(), color3 = "#" + tinycolor("hsl(120," + saturationString + "," + lightnessString + ")").toHex(), color4 = "#" + tinycolor("hsl(180," + saturationString + "," + lightnessString + ")").toHex(), color5 = "#" + tinycolor("hsl(240," + saturationString + "," + lightnessString + ")").toHex(), color6 = "#" + tinycolor("hsl(300," + saturationString + "," + lightnessString + ")").toHex(), color7 = "#" + tinycolor("hsl(0," + saturationString + "," + lightnessString + ")").toHex(), ieSpectrum0 = "progid:DXImageTransform.Microsoft.gradient(startColorstr='" + color1 + "', endColorstr='" + color2 + "', GradientType=1)", ieSpectrum1 = "progid:DXImageTransform.Microsoft.gradient(startColorstr='" + color2 + "', endColorstr='" + color3 + "', GradientType=1)", ieSpectrum2 = "progid:DXImageTransform.Microsoft.gradient(startColorstr='" + color3 + "', endColorstr='" + color4 + "', GradientType=1)", ieSpectrum3 = "progid:DXImageTransform.Microsoft.gradient(startColorstr='" + color4 + "', endColorstr='" + color5 + "', GradientType=1)", ieSpectrum4 = "progid:DXImageTransform.Microsoft.gradient(startColorstr='" + color5 + "', endColorstr='" + color6 + "', GradientType=1)", ieSpectrum5 = "progid:DXImageTransform.Microsoft.gradient(startColorstr='" + color6 + "', endColorstr='" + color7 + "', GradientType=1)", fullSpectrumString = "", standard = $.each(["-webkit-linear-gradient","-o-linear-gradient"], function(index,value) { fullSpectrumString += "background-image: " + value + "(left, " + color1 + " 0%, " + color2 + " 17%, " + color3 + " 24%, " + color4 + " 51%, " + color5 + " 68%, " + color6 + " 85%, " + color7 + " 100%);"; }); fullSpectrumString += "background-image: -webkit-gradient(linear, left top, right top," + "color-stop(0%, " + color1 + ")," + "color-stop(17%, " + color2 + ")," + "color-stop(34%, " + color3 + ")," + "color-stop(51%, " + color4 + ")," + "color-stop(68%, " + color5 + ")," + "color-stop(85%, " + color6 + ")," + "color-stop(100%, " + color7 + "));" + "background-image: linear-gradient(to right, " + color1 + " 0%, " + color2 + " 17%, " + color3 + " 24%," + color4 + " 51%," + color5 + " 68%," + color6 + " 85%," + color7 + " 100%); " + "background-image: -moz-linear-gradient(left center, " + color1 + " 0%, " + color2 + " 17%, " + color3 + " 24%, " + color4 + " 51%, " + color5 + " 68%, " + color6 + " 85%, " + color7 + " 100%);"; if (isIELT10) { var $spectrum0 = $(spectrum).find(".hue-spectrum-0"), $spectrum1 = $(spectrum).find(".hue-spectrum-1"), $spectrum2 = $(spectrum).find(".hue-spectrum-2"), $spectrum3 = $(spectrum).find(".hue-spectrum-3"), $spectrum4 = $(spectrum).find(".hue-spectrum-4"), $spectrum5 = $(spectrum).find(".hue-spectrum-5"); $spectrum0.css("filter",ieSpectrum0); $spectrum1.css("filter",ieSpectrum1); $spectrum2.css("filter",ieSpectrum2); $spectrum3.css("filter",ieSpectrum3); $spectrum4.css("filter",ieSpectrum4); $spectrum5.css("filter",ieSpectrum5); } else { spectrum.attr("style",fullSpectrumString); } }, // takes the position of a highlight band on the hue spectrum and finds highlighted hue // and updates the background of the lightness and saturation spectrums // relies on apply and an arguments array like [{h, s, l}] getHighlightedHue: function () { var $thisEl = $(this), hbWidth = $thisEl.outerWidth(), halfHBWidth = hbWidth / 2, position = parseInt($thisEl.css("left"),10) + halfHBWidth, $advancedContainer = $thisEl.parents(".advanced-list"), $advancedPreview = $advancedContainer.find(".color-preview"), $lightnessSpectrum = $advancedContainer.find(".spectrum-lightness"), $saturationSpectrum = $advancedContainer.find(".spectrum-saturation"), spectrumWidth = parseInt($advancedContainer.find(".color-box").first().width(),10), $hueValue = $advancedContainer.find(".hue-value"), currentLightness = arguments[0].l, currentSaturation = arguments[0].s, saturationString = (currentSaturation * 100).toString() + "%", lightnessString = (currentLightness * 100).toString() + "%"; if (spectrumWidth === 0) { // in case the width isn't set correctly spectrumWidth = supportsTouch ? 160 : 300; } var hue = Math.floor((position/spectrumWidth) * 360), color = "hsl(" + hue + "," + saturationString + "," + lightnessString + ")"; color = "#" + tinycolor(color).toHex(); $advancedPreview.css("background-color",color); $hueValue.text(hue); methods.updateLightnessStyles($lightnessSpectrum,hue,currentSaturation); methods.updateSaturationStyles($saturationSpectrum,hue,currentLightness); return hue; }, // relies on apply and an arguments array like [{h, s, l}] getHighlightedSaturation: function () { var $thisEl = $(this), hbWidth = $thisEl.outerWidth(), halfHBWidth = hbWidth / 2, position = parseInt($thisEl.css("left"),10) + halfHBWidth, $advancedContainer = $thisEl.parents(".advanced-list"), $advancedPreview = $advancedContainer.find(".color-preview"), $lightnessSpectrum = $advancedContainer.find(".spectrum-lightness"), $hueSpectrum = $advancedContainer.find(".spectrum-hue"), $saturationValue = $advancedContainer.find(".saturation-value"), spectrumWidth = parseInt($advancedContainer.find(".color-box").first().width(),10), currentLightness = arguments[0].l, lightnessString = (currentLightness * 100).toString() + "%", currentHue = arguments[0].h; if (spectrumWidth === 0) { // in case the width isn't set correctly spectrumWidth = supportsTouch ? 160 : 300; } var saturation = position/spectrumWidth, saturationString = Math.round((saturation * 100)).toString() + "%", color = "hsl(" + currentHue + "," + saturationString + "," + lightnessString + ")"; color = "#" + tinycolor(color).toHex(); $advancedPreview.css("background-color",color); $saturationValue.text(saturationString); methods.updateLightnessStyles($lightnessSpectrum,currentHue,saturation); methods.updateHueStyles($hueSpectrum,saturation,currentLightness); return saturation; }, updateAdvancedInstructions: function (instructionsEl) { instructionsEl.html("Press the color preview to choose this color"); } }; return this.each(function (index) { methods.initialize.apply(this,[index]); // commonly used DOM elements for each color picker var myElements = { thisEl: $(this), thisWrapper: $(this).parent(), colorTextInput: $(this).find("input"), colorMenuLinks: $(this).parent().find(".color-menu li a"), colorPreviewButton: $(this).parent().find(".input-group-btn"), colorMenu: $(this).parent().find(".color-menu"), colorSpectrums: $(this).parent().find(".color-box"), basicSpectrums: $(this).parent().find(".basicColors-content .color-box"), touchInstructions: $(this).parent().find(".color-menu-instructions"), advancedInstructions: $(this).parent().find(".advanced-instructions"), highlightBands: $(this).parent().find(".highlight-band"), basicHighlightBands: $(this).parent().find(".basicColors-content .highlight-band") }; var mostRecentClick, // for storing click events when needed windowTopPosition, // for storing the position of the top of the window when needed advancedStatus, mySavedColorsInfo; if (useTabs) { myElements.tabs = myElements.thisWrapper.find(".tab"); } if (settings.showSavedColors) { myElements.savedColorsContent = myElements.thisWrapper.find(".savedColors-content"); if (settings.saveColorsPerElement) { // when saving colors for each color picker... mySavedColorsInfo = { colors: [], dataObj: $(this).data() }; $.each(mySavedColorsInfo.dataObj, function (key) { mySavedColorsInfo.dataAttr = key; }); // get this picker's colors from local storage if possible if (supportsLocalStorage && localStorage["pickAColorSavedColors-" + mySavedColorsInfo.dataAttr]) { mySavedColorsInfo.colors = JSON.parse(localStorage["pickAColorSavedColors-" + mySavedColorsInfo.dataAttr]); // otherwise, get them from cookies } else if (document.cookie.match("pickAColorSavedColors-" + mySavedColorsInfo.dataAttr)) { var theseCookies = document.cookie.split(";"); // an array of cookies... for (var i=0; i < theseCookies.length; i++) { if (theseCookies[i].match(mySavedColorsInfo.dataAttr)) { mySavedColorsInfo.colors = theseCookies[i].split("=")[1].split(","); } } } else { // if no data-attr specific colors are in local storage OR cookies... mySavedColorsInfo.colors = allSavedColors; // use mySavedColors } } } if (settings.showAdvanced) { advancedStatus = { h: 0, s: 1, l: 0.5 }; myElements.advancedSpectrums = myElements.thisWrapper.find(".advanced-list").find(".color-box"); myElements.advancedHighlightBands = myElements.thisWrapper.find(".advanced-list").find(".highlight-band"); myElements.hueSpectrum = myElements.thisWrapper.find(".spectrum-hue"); myElements.lightnessSpectrum = myElements.thisWrapper.find(".spectrum-lightness"); myElements.saturationSpectrum = myElements.thisWrapper.find(".spectrum-saturation"); myElements.hueHighlightBand = myElements.thisWrapper.find(".spectrum-hue .highlight-band"); myElements.lightnessHighlightBand = myElements.thisWrapper.find(".spectrum-lightness .highlight-band"); myElements.saturationHighlightBand = myElements.thisWrapper.find(".spectrum-saturation .highlight-band"); myElements.advancedPreview = myElements.thisWrapper.find(".advanced-content .color-preview"); } // add the default color to saved colors methods.addToSavedColors(myColorVars.defaultColor,mySavedColorsInfo,myElements.savedColorsContent); methods.updatePreview(myElements.thisEl); //input field focus: clear content // input field blur: update preview, restore previous content if no value entered myElements.thisEl.focus(function () { var $thisEl = $(this); myColorVars.typedColor = $thisEl.val(); // update with the current if (!settings.allowBlank) { $thisEl.val(""); //clear the field on focus } methods.toggleDropdown(myElements.colorPreviewButton,myElements.ColorMenu); }).blur(function () { var $thisEl = $(this); myColorVars.newValue = $thisEl.val(); // on blur, check the field's value // if the field is empty, put the original value back in the field if (myColorVars.newValue.match(/^\s+$|^$/)) { if (!settings.allowBlank) { $thisEl.val(myColorVars.typedColor); } } else { // otherwise... myColorVars.newValue = tinycolor(myColorVars.newValue).toHex(); // convert to hex $thisEl.val(myColorVars.newValue); // put the new value in the field // save to saved colors methods.addToSavedColors(myColorVars.newValue,mySavedColorsInfo,myElements.savedColorsContent); } methods.toggleDropdown(myElements.colorPreviewButton,myElements.ColorMenu); methods.updatePreview($thisEl); // update preview }); // toggle visibility of dropdown menu when you click or press the preview button methods.executeUnlessScrolled.apply(myElements.colorPreviewButton, [{"thisFunction": methods.pressPreviewButton, "theseArguments" : {}}]); // any touch or click outside of a dropdown should close all dropdowns methods.executeUnlessScrolled.apply($(document), [{"thisFunction": methods.closeDropdownIfOpen, "theseArguments": {"button": myElements.colorPreviewButton, "menu": myElements.colorMenu}}]); // prevent click/touchend to color-menu or color-text input from closing dropdown myElements.colorMenu.on(clickEvent, function (e) { e.stopPropagation(); }); myElements.thisEl.on(clickEvent, function(e) { e.stopPropagation(); }); // update field and close menu when selecting from basic dropdown methods.executeUnlessScrolled.apply(myElements.colorMenuLinks, [{"thisFunction": methods.selectFromBasicColors, "theseArguments": {"els": myElements, "savedColorsInfo": mySavedColorsInfo}}]); if (useTabs) { // make tabs tabbable methods.tabbable.apply(myElements.tabs); } if (settings.showSpectrum || settings.showAdvanced) { methods.horizontallyDraggable.apply(myElements.highlightBands); } // for using the light/dark spectrums if (settings.showSpectrum) { // move the highlight band when you click on a spectrum methods.executeUnlessScrolled.apply(myElements.basicSpectrums, [{"thisFunction": methods.tapSpectrum, "theseArguments": {"savedColorsInfo": mySavedColorsInfo, "els": myElements}}]); $(myElements.basicHighlightBands).on(dragEvent,function (event) { var $thisEl = event.target; methods.calculateHighlightedColor.apply(this, [{type: "basic"}]); }).on(endDragEvent, function (event) { var $thisEl = event.delegateTarget; var finalColor = methods.calculateHighlightedColor.apply($thisEl, [{type: "basic"}]); methods.addToSavedColors(finalColor,mySavedColorsInfo,myElements.savedColorsContent); }); } if (settings.showAdvanced) { // for dragging advanced sliders $(myElements.hueHighlightBand).on(dragEvent, function(event) { advancedStatus.h = methods.getHighlightedHue.apply(this, [advancedStatus]); }); $(myElements.lightnessHighlightBand).on(dragEvent, function() { methods.calculateHighlightedColor.apply(this, [{"type": "advanced", "hsl": advancedStatus}]); }).on(endEvent, function () { advancedStatus.l = methods.calculateHighlightedColor.apply(this, [{"type": "advanced", "hsl": advancedStatus}]); }); $(myElements.saturationHighlightBand).on(dragEvent, function() { methods.getHighlightedSaturation.apply(this, [advancedStatus]); }).on(endDragEvent, function () { advancedStatus.s = methods.getHighlightedSaturation.apply(this, [advancedStatus]); }); $(myElements.advancedHighlightBand).on(endDragEvent, function () { methods.updateAdvancedInstructions(myElements.advancedInstructions); }); // for clicking/tapping advanced sliders $(myElements.lightnessSpectrum).click( function (event) { event.stopPropagation(); // stop this click from closing the dropdown var $highlightBand = $(this).find(".highlight-band"), dimensions = methods.getMoveableArea($highlightBand); methods.moveHighlightBand($highlightBand, dimensions, event); advancedStatus.l = methods.calculateHighlightedColor.apply($highlightBand, [{"type": "advanced", "hsl": advancedStatus}]); }); $(myElements.hueSpectrum).click( function (event) { event.stopPropagation(); // stop this click from closing the dropdown var $highlightBand = $(this).find(".highlight-band"), dimensions = methods.getMoveableArea($highlightBand); methods.moveHighlightBand($highlightBand, dimensions, event); advancedStatus.h = methods.getHighlightedHue.apply($highlightBand, [advancedStatus]); }); $(myElements.saturationSpectrum).click( function (event) { event.stopPropagation(); // stop this click from closing the dropdown var $highlightBand = $(this).find(".highlight-band"), dimensions = methods.getMoveableArea($highlightBand); methods.moveHighlightBand($highlightBand, dimensions, event); advancedStatus.s = methods.getHighlightedSaturation.apply($highlightBand, [advancedStatus]); }); $(myElements.advancedSpectrums).click( function () { methods.updateAdvancedInstructions(myElements.advancedInstructions); }); //for clicking advanced color preview $(myElements.advancedPreview).click( function () { var selectedColor = tinycolor($(this).css("background-color")).toHex(); $(myElements.thisEl).val(selectedColor); $(myElements.thisEl).trigger("change"); methods.updatePreview(myElements.thisEl); methods.addToSavedColors(selectedColor,mySavedColorsInfo,myElements.savedColorsContent); methods.closeDropdown(myElements.colorPreviewButton,myElements.colorMenu); // close the dropdown }); } // for using saved colors if (settings.showSavedColors) { // make the links in saved colors work $(myElements.savedColorsContent).click( function (event) { var $thisEl = $(event.target); // make sure click happened on a link or span if ($thisEl.is("SPAN") || $thisEl.is("A")) { //grab the color the link's class or span's parent link's class var selectedColor = $thisEl.is("SPAN") ? $thisEl.parent().attr("class").split("#")[1] : $thisEl.attr("class").split("#")[1]; $(myElements.thisEl).val(selectedColor); $(myElements.thisEl).trigger("change"); methods.updatePreview(myElements.thisEl); methods.closeDropdown(myElements.colorPreviewButton,myElements.colorMenu); methods.addToSavedColors(selectedColor,mySavedColorsInfo,myElements.savedColorsContent); } }); // update saved color markup with content from localStorage or cookies, if available if (!settings.saveColorsPerElement) { methods.updateSavedColorMarkup(myElements.savedColorsContent,allSavedColors); } else if (settings.saveColorsPerElement) { methods.updateSavedColorMarkup(myElements.savedColorsContent,mySavedColorsInfo.colors); } } }); }; })(jQuery);