Skip to content

Commonjs #505

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Commonjs #505

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
8c09a2c
Add failing test case for flat picker change event with initial color…
bgrins Dec 9, 2014
ae1a7f8
Reorganizing updateOriginalInput calls as discussed in #250
bgrins Dec 10, 2014
ccdb960
call updateOriginalInput from set, expand test coverage
bgrins Dec 10, 2014
eb4cd0e
Force input update on choose, call updateUI during dragging, and expa…
bgrins Dec 10, 2014
1c5f5d4
update offset test to work in browsers
bgrins Dec 10, 2014
807cb24
remove old localStorage migration
bgrins Dec 10, 2014
fa5f3fd
expand drag tests
bgrins Dec 10, 2014
5a96667
fix for commonjs
bgrins Dec 13, 2015
3395f33
fixup lint errors
bgrins Dec 13, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 51 additions & 62 deletions spectrum.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@

(function (factory) {
"use strict";

if (typeof define === 'function' && define.amd) { // AMD
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
}
else if (typeof exports == "object" && typeof module == "object") { // CommonJS
module.exports = factory;
}
else { // Browser
} else if (typeof exports === 'object') {
// Node/CommonJS
module.exports = factory(require('jquery'));
} else {
// Browser globals
factory(jQuery);
}
})(function($, undefined) {
Expand Down Expand Up @@ -237,6 +237,7 @@
previewElement = replacer.find(".sp-preview-inner"),
initialColor = opts.color || (isInput && boundElement.val()),
colorOnShow = false,
lastKnownColor = false,
preferredFormat = opts.preferredFormat,
currentPreferredFormat = preferredFormat,
clickoutFiresChange = !opts.showButtons || opts.clickoutFiresChange,
Expand Down Expand Up @@ -347,12 +348,8 @@
e.stopPropagation();
e.preventDefault();
isEmpty = true;
move();

if(flat) {
//for the flat style, this is a change event
updateOriginalInput(true);
}
updateOriginalInput();
});

chooseButton.text(opts.chooseText);
Expand Down Expand Up @@ -391,7 +388,8 @@
currentAlpha = Math.round(currentAlpha * 10) / 10;
}

move();
updateUI();
updateOriginalInput();
}, dragStart, dragStop);

draggable(slider, function (dragX, dragY) {
Expand All @@ -400,7 +398,8 @@
if (!opts.showAlpha) {
currentAlpha = 1;
}
move();
updateUI();
updateOriginalInput();
}, dragStart, dragStop);

draggable(dragger, function (dragX, dragY, e) {
Expand Down Expand Up @@ -431,13 +430,13 @@
if (!opts.showAlpha) {
currentAlpha = 1;
}

move();
updateUI();
updateOriginalInput();

}, dragStart, dragStop);

if (!!initialColor) {
set(initialColor);
set(initialColor, false, true);

// In case color was black - update the preview UI and set the format
// since the set function will not run (default color is black).
Expand All @@ -457,12 +456,9 @@
function paletteElementClick(e) {
if (e.data && e.data.ignore) {
set($(e.target).closest(".sp-thumb-el").data("color"));
move();
}
else {
set($(e.target).closest(".sp-thumb-el").data("color"));
move();
updateOriginalInput(true);
if (opts.hideAfterPaletteSelect) {
hide();
}
Expand All @@ -472,26 +468,12 @@
}

var paletteEvent = IE ? "mousedown.spectrum" : "click.spectrum touchstart.spectrum";
paletteContainer.delegate(".sp-thumb-el", paletteEvent, paletteElementClick);
initialColorContainer.delegate(".sp-thumb-el:nth-child(1)", paletteEvent, { ignore: true }, paletteElementClick);
paletteContainer.on(paletteEvent, ".sp-thumb-el", paletteElementClick);
initialColorContainer.on(paletteEvent, ".sp-thumb-el:nth-child(1)", { ignore: true }, paletteElementClick);
}

function updateSelectionPaletteFromStorage() {

if (localStorageKey && window.localStorage) {

// Migrate old palettes over to new format. May want to remove this eventually.
try {
var oldPalette = window.localStorage[localStorageKey].split(",#");
if (oldPalette.length > 1) {
delete window.localStorage[localStorageKey];
$.each(oldPalette, function(i, c) {
addColorToSelectionPalette(c);
});
}
}
catch(e) { }

try {
selectionPalette = window.localStorage[localStorageKey].split(";");
}
Expand Down Expand Up @@ -578,13 +560,11 @@

if ((value === null || value === "") && allowEmpty) {
set(null);
updateOriginalInput(true);
}
else {
var tiny = tinycolor(value);
if (tiny.isValid()) {
set(tiny);
updateOriginalInput(true);
}
else {
textInput.addClass("sp-validation-error");
Expand Down Expand Up @@ -665,7 +645,7 @@
set(colorOnShow, true);
}

function set(color, ignoreFormatChange) {
function set(color, ignoreFormatChange, ignoreInputChange) {
if (tinycolor.equals(color, get())) {
// Update UI just in case a validation error needs
// to be cleared.
Expand All @@ -686,11 +666,15 @@
currentValue = newHsv.v;
currentAlpha = newHsv.a;
}
updateUI();

if (newColor && newColor.isValid() && !ignoreFormatChange) {
currentPreferredFormat = preferredFormat || newColor.getFormat();
}

updateUI();
if (!ignoreInputChange) {
updateOriginalInput();
}
}

function get(opts) {
Expand All @@ -712,13 +696,6 @@
return !textInput.hasClass("sp-validation-error");
}

function move() {
updateUI();

callbacks.move(get());
boundElement.trigger('move.spectrum', [ get() ]);
}

function updateUI() {

textInput.removeClass("sp-validation-error");
Expand Down Expand Up @@ -842,20 +819,32 @@

function updateOriginalInput(fireCallback) {
var color = get(),
displayColor = '',
hasChanged = !tinycolor.equals(color, colorOnShow);
displayColor = '';

if (color) {
displayColor = color.toString(currentPreferredFormat);
// Update the selection palette with the current color
addColorToSelectionPalette(color);

if (isInput) {
boundElement.val(color.toString(currentPreferredFormat));
}
}

if (isInput) {
boundElement.val(displayColor);
// Fire the "input" event (aka 'move')
if (!tinycolor.equals(color, lastKnownColor)) {
lastKnownColor = color;
callbacks.move(get());
boundElement.trigger('move.spectrum', [ get() ]);
}

if (fireCallback && hasChanged) {
// Flat colorpickers fire "change" event on any input
// since they don't have a way to revert.
// Normal colorpickers wait until the picker is closed
// to fire one (if necessary).
var careAboutChanges = flat || fireCallback;
var hasChanged = !tinycolor.equals(color, colorOnShow);
if (careAboutChanges && hasChanged) {
colorOnShow = color;
callbacks.change(color);
boundElement.trigger('change', [ color ]);
}
Expand Down Expand Up @@ -890,6 +879,7 @@
}

function destroy() {
hide();
boundElement.show();
offsetElement.unbind("click.spectrum touchstart.spectrum");
container.remove();
Expand Down Expand Up @@ -938,10 +928,7 @@
enable: enable,
disable: disable,
offset: setOffset,
set: function (c) {
set(c);
updateOriginalInput();
},
set: set,
get: get,
destroy: destroy,
container: container
Expand Down Expand Up @@ -1047,8 +1034,8 @@
var pageX = touches ? touches[0].pageX : e.pageX;
var pageY = touches ? touches[0].pageY : e.pageY;

var dragX = Math.max(0, Math.min(pageX - offset.left, maxWidth));
var dragY = Math.max(0, Math.min(pageY - offset.top, maxHeight));
var dragX = Math.max(0, Math.min(pageX - offset.left, maxWidth)) || 0;
var dragY = Math.max(0, Math.min(pageY - offset.top, maxHeight)) || 0;

if (hasTouch) {
// Stop scrolling in iOS
Expand Down Expand Up @@ -1093,16 +1080,18 @@
$(element).bind("touchstart mousedown", start);
}

function throttle(func, wait, debounce) {
/**
* Only call a function at a max of once per N milliseconds
*/
function throttle(func, wait) {
var timeout;
return function () {
var context = this, args = arguments;
var throttler = function () {
timeout = null;
func.apply(context, args);
};
if (debounce) clearTimeout(timeout);
if (debounce || !timeout) timeout = setTimeout(throttler, wait);
if (!timeout) timeout = setTimeout(throttler, wait);
};
}

Expand Down
Loading