Netsyms
/
colorPicker
mirror of https://github.com/PitPik/colorPicker.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Merge f95370d3fb into ab70f43f6f

Browse Source
pull/54/merge
Lucien A 7 years ago committed by GitHub
parent ab70f43f6f f95370d3fb
commit 7d2a074285
8 changed files with 79 additions and 17 deletions
Show Stats Download Patch File Download Diff File

6
color.all.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
colorPicker.js.map
View File

File diff suppressed because one or more lines are too long

22
jQuery_implementation/index.html
Unescape Escape View File

@ -20,11 +20,33 @@
<body>
<h1>Simple jQuery implementation</h1>
Calling the colorPicker on all inputs with the calssName 'color': <pre>$('input.color').colorPicker();</pre>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione rerum dolore, similique expedita optio quas consectetur, sequi beatae deleniti labore, reprehenderit rem. Aut voluptatibus quas, aliquam nobis tempore, blanditiis adipisci.</p>
<p>Nesciunt expedita, magnam fugiat obcaecati asperiores dolorum non culpa sit commodi dolores sed itaque laudantium ullam, suscipit repellat eveniet voluptatum, sapiente consequatur ipsa! Hic quisquam soluta, harum neque tempore ea!</p>
<p>Aperiam ipsam, reiciendis! Odit atque delectus culpa magni asperiores! Quos quas distinctio aut facilis, labore iste animi aspernatur rem commodi consequuntur repellat laborum explicabo, recusandae libero quisquam voluptates sed quaerat.</p>
<p>Doloribus rerum, illum cupiditate eum molestias nisi deleniti, saepe esse quam soluta vitae qui, consectetur eligendi! Quibusdam nemo doloremque reiciendis eaque expedita pariatur deserunt ea illo molestiae similique, ipsam maiores.</p>
<p>Dolorem corporis id similique modi totam, atque dignissimos, explicabo aperiam facilis labore eos odio veniam debitis iure porro quis rem earum voluptate cum aspernatur assumenda voluptates ullam quae. Maxime, sapiente!</p>
<p>Eum neque dignissimos, fugit amet quidem vitae consectetur quasi deserunt facere excepturi error similique explicabo nemo harum libero voluptas mollitia voluptates illo earum itaque commodi beatae blanditiis corporis? Ratione, vel.</p>
<p>Corporis in repudiandae blanditiis suscipit perferendis unde iste illo distinctio! Qui numquam temporibus eaque sint, debitis magni perferendis, exercitationem sed doloribus vel. Expedita illo, error dolorum dolore maiores ea at?</p>
<p>Eligendi velit adipisci corporis quaerat deserunt consectetur. Dignissimos distinctio, porro sed saepe beatae delectus odio tempore nisi veritatis tenetur eaque recusandae quisquam eum et error culpa quibusdam ut asperiores assumenda?</p>
<p>Debitis quas doloremque vitae eius, aperiam eveniet perspiciatis voluptatum harum fugit, dolor quod sequi, voluptate aspernatur nisi animi eaque! Alias, quia, asperiores ad ut qui optio non at atque delectus.</p>
<p>Nihil suscipit vel assumenda tempore, voluptates eveniet quisquam eos, aliquam porro cumque commodi error eaque quia! Architecto aperiam, ex. Impedit dolorem quo voluptatem voluptatum quis incidunt, voluptatibus quisquam perferendis blanditiis.</p>
<p>Quod, facere suscipit ipsum aliquid nobis recusandae et quam corporis placeat numquam fugiat modi fuga magni quas quo eum quae tenetur dicta nulla ex commodi alias error velit totam! Voluptates.</p>
<p>Dicta quas eveniet, doloremque excepturi rerum dolor optio mollitia, omnis atque vitae et necessitatibus hic officia temporibus autem odio dolorum. Similique accusamus, veniam necessitatibus eum suscipit sed, laudantium omnis nam?</p>
<p>Ratione eligendi incidunt ipsam laudantium mollitia sit itaque, blanditiis, dolores neque saepe atque quia, quas, dolore cumque soluta velit qui repudiandae architecto harum quisquam dignissimos quaerat aliquam explicabo a. Deleniti.</p>
<p>Reiciendis sequi dignissimos harum optio molestiae excepturi expedita tenetur non aperiam ut hic maiores debitis, consequatur placeat maxime quibusdam asperiores facere, illo quidem vitae? Vel consequatur nisi qui! Quibusdam, odit.</p>
<p>Maxime omnis nemo alias provident porro a dolorem, est perspiciatis asperiores. Veniam nostrum, ad deserunt tempora magni similique? Ut et incidunt veritatis sunt possimus voluptate quam quidem doloremque id ipsa!</p>
<p>Aliquam dolore nam suscipit mollitia veritatis maiores excepturi omnis commodi, accusantium impedit deserunt libero iure labore, sequi quibusdam sunt laborum possimus dolores fuga necessitatibus. Dolores maxime ab, facilis natus provident.</p>
<p>Voluptatem fugit eum adipisci rem necessitatibus illo sunt saepe quod a cumque nisi, rerum expedita modi enim possimus maxime, quos totam suscipit consequuntur libero corrupti. Fugit tempore tenetur, neque recusandae.</p>
<p class="the-paragraph">
<input class="color" value="#B6BD79" />
<input class="color" value="rgb(162, 63, 3)" />
<input class="color" value="hsl(32, 95%, 23%)" />
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor expedita officia, corporis nisi cumque saepe numquam. Repellendus est, nihil eveniet voluptatum culpa illo, tempore cumque, adipisci architecto voluptatem vel facere.</p>
<p>Cum eligendi, architecto, perspiciatis consequuntur omnis autem nemo culpa facilis alias ipsa eos dolorem est maiores quam minima sunt! Voluptas soluta dolorum perspiciatis at ipsam ipsum minima eaque autem unde!</p>
<p>Voluptate, blanditiis cumque quisquam pariatur saepe quidem, maxime dicta sapiente eos itaque, tempore praesentium repellat impedit. Deserunt perspiciatis eligendi accusantium ea quia culpa minima recusandae a, optio, aliquid placeat. Cum.</p>
<p>Tempore quam sint incidunt non harum quisquam! Omnis tempore, asperiores nulla expedita cumque vitae porro, deleniti obcaecati vero harum quam dolores ab hic ipsam minus, nisi cum. Cumque, magni, obcaecati.</p>
<p>Voluptatum odio ea voluptates accusamus voluptatibus ex vel blanditiis recusandae rem consequuntur animi, nihil facere obcaecati doloremque cumque dolore magni, dolorum, aspernatur sapiente dignissimos illum hic provident non praesentium. Assumenda.</p>
<!-- <button onclick="$colors.colorPicker('destroy')">destroy</button> -->
<script type="text/javascript" src="../colors.js"></script>
<script type="text/javascript" src="../colorPicker.data.js"></script>

6
jQuery_implementation/jQueryColorPicker.min.js vendored
View File

File diff suppressed because one or more lines are too long

14
jQuery_implementation/jqColor.js
Unescape Escape View File

@ -91,7 +91,7 @@
instance;
for (var n in config) {
initConfig[n] = config[n];
initConfig[n] = config[n];
}
instance = new initConfig.klass(initConfig);
instance.color.options._instance = instance.color;
@ -133,10 +133,18 @@
waitTimer = setInterval(function() { // compensating late style on onload in colorPicker
if (colorPickers.current.cssIsReady) {
waitTimer = clearInterval(waitTimer);
$colorPicker.show(colorPicker.color.options.animationSpeed);
$colorPicker.show(colorPicker.color.options.animationSpeed, function() {
// Color picker is out of screen
if($colorPicker.height() + $colorPicker.offset().top - window.scrollY > window.innerHeight) {
$colorPicker.css('top', (window.scrollY + window.innerHeight - $colorPicker.height())+'px');
}
if($colorPicker.width() + $colorPicker.offset().left - window.scrollX > window.innerWidth) {
$colorPicker.css('left', (window.scrollX + window.innerWidth - $colorPicker.width())+'px');
}
});
}
}, 10);
});
$(window)[onOff]('mousedown.colorPicker', function(e) {

22
javascript_implementation/index.html
Unescape Escape View File

@ -17,11 +17,33 @@
<body>
<h1>Simple javaScript implementation</h1>
Calling the colorPicker on all inputs with the calssName 'color': <pre>jsColorPicker('input.color');</pre>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut cumque, voluptas, consequuntur fugiat assumenda culpa provident quae repellat nemo necessitatibus adipisci repellendus perferendis illum commodi corporis, officiis neque. Autem, nulla.</p>
<p>Harum error libero placeat, laudantium doloremque maiores voluptatem quasi eos dolorum ea praesentium commodi consectetur, consequuntur laboriosam illum beatae repellendus quibusdam nostrum suscipit optio aperiam. Autem eum nesciunt, at enim.</p>
<p>Aut distinctio quas maiores fugiat sequi, vel dolores quidem. Quia dolores veniam accusantium accusamus eos ipsa vitae eum? Rem at quas suscipit accusamus. Mollitia fugit amet eveniet, quos voluptates aperiam!</p>
<p>Dolores maxime eius soluta architecto dolore fugit id minus, illum obcaecati. Nam possimus repellat eos natus excepturi! Veritatis similique at quia modi provident sequi, unde quas numquam! Molestias quidem, debitis.</p>
<p>Similique ab consectetur assumenda maiores quae, ipsum amet earum facilis quaerat. Optio, dolor sapiente ducimus ad repellendus porro minus quidem nihil assumenda repellat? Mollitia officia quia nihil doloribus at blanditiis.</p>
<p>Repellendus mollitia doloribus in necessitatibus illum porro ipsum laudantium ipsa dolor velit labore libero impedit praesentium adipisci, voluptates harum asperiores deleniti nesciunt! Sit provident ratione unde, commodi fugiat, expedita quidem.</p>
<p>Iusto fugiat ullam pariatur rem unde, natus quam possimus doloribus esse, mollitia aliquid, autem dignissimos animi illo aspernatur numquam. Vero nemo quod dolorum ratione porro tempora eius voluptatem nihil fugit.</p>
<p>Hic saepe ab voluptas deleniti id veniam aspernatur accusamus aut impedit at quidem, quis sint, rerum recusandae consequuntur, minus, ex dolore eum repellat? Aut numquam magni asperiores praesentium culpa aperiam.</p>
<p>Sed eligendi ab rerum et laborum repudiandae culpa labore ad temporibus, minus facilis minima accusantium laudantium iure quidem nulla laboriosam sunt doloremque neque iusto repellat officia illo itaque saepe. Enim.</p>
<p>Nisi, cumque quia qui ratione, nesciunt est repudiandae similique magni laborum ea tempore impedit numquam ex quae! Temporibus blanditiis consectetur rem modi aperiam praesentium dolorem, eaque veniam numquam ea, libero!</p>
<p>Numquam ab earum a cupiditate iure aperiam atque dolor, temporibus adipisci optio perspiciatis dolores asperiores maxime dicta quaerat sed tempora expedita tempore suscipit odit quidem labore autem enim? Recusandae, culpa?</p>
<p>Illo dolores cupiditate non ipsum neque, expedita eveniet aperiam illum at sed aliquid nam voluptate. Nostrum rerum itaque nam illo, distinctio. Sit iure dolorem quis, numquam sapiente, magni fugiat dolores.</p>
<p>Odit nulla alias ab, tenetur facere laudantium eveniet voluptate quam. Repudiandae error repellendus at voluptates harum qui soluta tempore officiis necessitatibus obcaecati nam adipisci reiciendis accusantium magni ducimus, doloribus. Fuga?</p>
<p>Tempora error quos rerum nostrum amet perspiciatis at quis vitae aliquam veritatis beatae asperiores, eius, commodi. Explicabo vitae minima et debitis ipsam nulla vel, aut vero libero, rerum beatae dicta.</p>
<p>Maxime quia perferendis repellendus obcaecati, voluptates quod soluta alias quibusdam earum. Aut obcaecati nesciunt error minus, quis in maxime sit, eum accusamus voluptates aspernatur? Hic omnis commodi in itaque provident.</p>
<p>Natus aliquid dignissimos modi nesciunt nostrum id nam hic ullam autem voluptates ab, commodi porro veniam cumque, quibusdam molestias neque libero labore ipsa deserunt quis, consectetur dolorum. Dolore, enim, dignissimos!</p>
<p>Optio consectetur cupiditate, dolor explicabo ratione nesciunt reiciendis similique velit laudantium nisi sit, placeat assumenda. Architecto, non exercitationem harum. Tenetur pariatur fugit iure natus accusamus, rem earum incidunt at perspiciatis.</p>
<p>
<input class="color" value="#B6BD79" />
<input class="color" value="rgb(162, 63, 3)" />
<input class="color" value="hsla(32, 95%, 23%, 0.9)" />
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque odit, unde. Earum ex distinctio ea, ab perferendis magni eum reprehenderit, ad ipsa, sequi praesentium nemo facere beatae modi quasi, ipsam?</p>
<p>Aperiam id officiis odio quo commodi rem vero tempora, maiores provident nulla numquam doloremque voluptate dicta. Facilis esse consectetur fuga provident, earum mollitia inventore, vitae, omnis quod veritatis in blanditiis.</p>
<p>Aliquam sunt, at iusto reiciendis quibusdam ut illum. Sequi ratione est fugiat ducimus obcaecati optio. Tempore sunt maiores, delectus. Deserunt excepturi ratione eveniet quia, nesciunt ut consequatur autem sequi odit!</p>
<p>Consequuntur totam expedita distinctio repellendus voluptatum laborum assumenda. Id, quas labore repellendus! Commodi aut doloremque optio natus dolores, temporibus architecto voluptas dignissimos iure nostrum officiis, placeat voluptatibus, aspernatur rerum. Sed.</p>
<p>Ex odit quibusdam dolor repellat voluptatibus debitis distinctio vero nesciunt corporis repudiandae porro, consequatur, voluptatem necessitatibus asperiores et omnis ratione quae voluptate ipsa tempore quasi culpa. Impedit aperiam labore ullam.</p>
<!-- <button onclick="$colors.colorPicker('destroy')">destroy</button> -->
<script type="text/javascript" src="../colors.js"></script>
<script type="text/javascript" src="../colorPicker.data.js"></script>

18
javascript_implementation/jsColor.js
Unescape Escape View File

@ -90,7 +90,7 @@
};
for (var n in config) {
initConfig[n] = config[n];
initConfig[n] = config[n];
}
return new initConfig.klass(initConfig);
},
@ -109,11 +109,13 @@
atrect = isStatic ? {left: 0, top: 0} : appendTo.getBoundingClientRect(),
waitTimer = 0;
options.color = extractValue(elm); // brings color to default on reset
colorPickerUI.style.cssText =
// top = (top+);
colorPickerUI.style.cssText =
'position: absolute;' + (!colorPickers[index].cssIsReady ? 'display: none;' : '') +
'left:' + (position.left + options.margin.left - atrect.left) + 'px;' +
'top:' + (position.top + +input.offsetHeight + options.margin.top - atrect.top) + 'px;';
'top:' + (position.top + input.offsetHeight + options.margin.top - atrect.top) + 'px;';
if (!multiple) {
options.input = elm;
@ -127,6 +129,14 @@
if (colorPickers.current.cssIsReady) {
waitTimer = clearInterval(waitTimer);
colorPickerUI.style.display = 'block';
// Color picker is out of screen
if(colorPickerUI.offsetHeight + colorPickerUI.offsetTop - window.scrollY > window.innerHeight) {
colorPickerUI.style.top = (window.scrollY + window.innerHeight - colorPickerUI.offsetHeight)+'px';
}
if(colorPickerUI.offsetWidth + colorPickerUI.offsetLeft - window.scrollX > window.innerWidth) {
colorPickerUI.style.left = (window.scrollX + window.innerWidth - colorPickerUI.offsetWidth)+'px';
}
}
}, 10);
},
@ -233,4 +243,4 @@
(options.secure ? '; secure' : '');
}
};
})(this);
})(this);

6
javascript_implementation/jsColorPicker.min.js vendored
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save