version updated

narsenico · Oct 11, 2018 · ee5a03d · ee5a03d
1 parent d9220e9
commit ee5a03d
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 21 deletions.
diff --git a/dist/acolorpicker.js b/dist/acolorpicker.js
diff --git a/docs/docs.js b/docs/docs.js
diff --git a/docs/docs.js.map b/docs/docs.js.map
diff --git a/docs/index.html b/docs/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="theme-gray">
 
 <head>
 	<meta charset="utf-8">
@@ -13,21 +13,22 @@
 
 <body>
 	<!-- <div class="picker" acp-show-alpha acp-palette="red|yellow" acp-palette-editable></div> -->
+	<div class="logo upper-right">&nbsp;</div>
 	<header class="shadow darken flexrow">
 		<div class="flexcol-1">
 			<a href="https://github.com/narsenico" title="narsenico github repositories">
 				<img alt="avatar" class="avatar" src="https://www.gravatar.com/avatar/5e6f1401ca340dee16dc70107619b400">
 			</a>
 		</div>
 		<div class="title flexcol-2">
-			<h1 class="logo">
+			<h1 class="">
 				a-color-picker | for web app
 			</h1>
 			<div class="badges">
 				<a href="https://badge.fury.io/js/a-color-picker">
 					<img src="https://badge.fury.io/js/a-color-picker.svg" alt="npm version" height="18">
 				</a>
-				<a href="https://codepen.io/narsenico/pen/xPxNeE">
+				<a href="https://codepen.io/collection/XprWjO/">
 					<img src="https://img.shields.io/badge/demo-codepen-0ebeff.svg" alt="codepen" height="18">
 				</a>
 				<iframe src="https://ghbtns.com/github-btn.html?user=narsenico&repo=a-color-picker&type=star&count=true" frameborder="0"
@@ -84,10 +85,10 @@ <h1 class="logo">
 				<h3>Install</h3>
 				<ul>
 					<li>
-						<code>npm install a-color-picker</code>
+						<code>npm install a-color-picker --save</code>
 					</li>
 					<li>
-						<code>bower install --save a-color-picker</code>
+						<code>bower install a-color-picker --save</code>
 					</li>
 					<li>a-color-picker is available on
 						<a href="https://www.jsdelivr.com/package/npm/a-color-picker">jsdelivr</a>
@@ -128,7 +129,7 @@ <h3>Choose which controls to show</h3>
 				<h3>Palette</h3>
 				<p>Show a palette of colors using the
 					<code>acp-palette</code> attribute.
-					<br> Set a list of colors (named color, hex rgb, rgb(), rgba(), hsl(), hsla()) pipe separated or a predefined palette (PALETTE_MATERIAL_500,
+					<br> Set a list of colors - named color, hex rgb, rgb(), rgba(), hsl(), hsla() - pipe separated or a predefined palette (PALETTE_MATERIAL_500,
 					PALETTE_MATERIAL_CHROME).
 					<br> The
 					<code>acp-palette-editable</code> attribute can be set to allow the user to change the palette.</p>
@@ -147,7 +148,7 @@ <h3>Events</h3>
 					<code>off</code> to detach it.
 					<pre class="eg"><code>AColorPicker.<span class="prop">from</span>(<span class="par">selector</span>)
     .on(<span class="par">eventName</span>, <span class="par">callback</span>)
-    .off(<span class="par">eventName</span>)</code></pre>
+    .off(<span class="par">eventName</span>, <span class="par">callback</span>)</code></pre>
 					<table class="detail hover-on-body">
 						<thead>
 							<tr>
@@ -586,12 +587,21 @@ <h3>API</h3>
 								<td class="explanation">Boolean</td>
 								<td class="explanation">false</td>
 							</tr>
+							<tr>
+								<td>useAlphaInPalette</td>
+								<td class="explanation">If truly enable alpha channel in palette colors,<br>if 'auto' depends on the value of 'showAlpha'</td>
+								<td class="explanation">String|Boolean</td>
+								<td class="explanation">auto</td>
+							</tr>
 						</tbody>
 					</table>
 				</section>
 			</section>
 		</div>
 	</div>
+	<footer>
+		by <a href="https://github.com/narsenico" title="narsenico github repositories">narsenico</a>
+	</footer>
 	<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 <script type="text/javascript" src="docs.js"></script></body>
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "a-color-picker",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "a color pikcer for web app",
   "main": "./dist/acolorpicker.js",
   "types": "./dist/acolorpicker.d.ts",

diff --git a/src/acolorpicker.js b/src/acolorpicker.js
@@ -33,7 +33,7 @@ import {
 } from './utils.js';
 import isPlainObject from 'is-plain-object';
 
-const VERSION = '1.1.2';
+const VERSION = '1.1.3';
 
 const IS_EDGE = typeof window !== 'undefined' && window.navigator.userAgent.indexOf('Edge') > -1,
     IS_IE11 = typeof window !== 'undefined' && window.navigator.userAgent.indexOf('rv:') > -1;

diff --git a/src/docs/docs.css b/src/docs/docs.css
@@ -14,16 +14,32 @@ html {
 
 body {
 	margin: 0;
-	background-color: #9a8297;
 	background-color: #697b82;
 }
 
+footer {
+	font-size: .8em;
+	text-align: center;
+	padding: 8px;
+}
+
 .logo {
 	background-image: url('../../screenshots/favicon.svg');
 	background-size: contain;
     background-repeat: no-repeat;
 }
 
+.logo.upper-right {
+	position: fixed;
+	top: 16px;
+	right: 8px;
+	width: 50px;
+	height: 50px;
+	opacity: .5;
+	pointer-events: none;
+	z-index: 3;
+}
+
 code {
 	color: #bc8f49;
 }
@@ -59,6 +75,13 @@ code .comment {
 	flex-basis: 20em;
 }
 
+.flexcol-3 {
+	flex-grow: 1;
+	flex-basis: 9em;
+    margin: 16px 8px;
+    max-width: 1024px;	
+}
+
 .shadow {
 	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(3, 1, 1, 0.08);
 }
@@ -205,4 +228,16 @@ table.detail.hover-on-body tbody:hover {
 	.content>nav>ul {
 		position: relative;
 	}	
+}
+
+.theme-gray {
+	--color-light: #697b82;
+}
+
+.theme-gray body {
+	background-color: #f5f5f5;
+}
+
+.theme-gray .avatar {
+	opacity: .6;
 }
diff --git a/src/docs/index.html b/src/docs/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="theme-gray">
 
 <head>
 	<meta charset="utf-8">
@@ -13,21 +13,22 @@
 
 <body>
 	<!-- <div class="picker" acp-show-alpha acp-palette="red|yellow" acp-palette-editable></div> -->
+	<div class="logo upper-right">&nbsp;</div>
 	<header class="shadow darken flexrow">
 		<div class="flexcol-1">
 			<a href="https://github.com/narsenico" title="narsenico github repositories">
 				<img alt="avatar" class="avatar" src="https://www.gravatar.com/avatar/5e6f1401ca340dee16dc70107619b400">
 			</a>
 		</div>
 		<div class="title flexcol-2">
-			<h1 class="logo">
+			<h1 class="">
 				a-color-picker | for web app
 			</h1>
 			<div class="badges">
 				<a href="https://badge.fury.io/js/a-color-picker">
 					<img src="https://badge.fury.io/js/a-color-picker.svg" alt="npm version" height="18">
 				</a>
-				<a href="https://codepen.io/narsenico/pen/xPxNeE">
+				<a href="https://codepen.io/collection/XprWjO/">
 					<img src="https://img.shields.io/badge/demo-codepen-0ebeff.svg" alt="codepen" height="18">
 				</a>
 				<iframe src="https://ghbtns.com/github-btn.html?user=narsenico&repo=a-color-picker&type=star&count=true" frameborder="0"
@@ -84,10 +85,10 @@ <h1 class="logo">
 				<h3>Install</h3>
 				<ul>
 					<li>
-						<code>npm install a-color-picker</code>
+						<code>npm install a-color-picker --save</code>
 					</li>
 					<li>
-						<code>bower install --save a-color-picker</code>
+						<code>bower install a-color-picker --save</code>
 					</li>
 					<li>a-color-picker is available on
 						<a href="https://www.jsdelivr.com/package/npm/a-color-picker">jsdelivr</a>
@@ -128,7 +129,7 @@ <h3>Choose which controls to show</h3>
 				<h3>Palette</h3>
 				<p>Show a palette of colors using the
 					<code>acp-palette</code> attribute.
-					<br> Set a list of colors (named color, hex rgb, rgb(), rgba(), hsl(), hsla()) pipe separated or a predefined palette (PALETTE_MATERIAL_500,
+					<br> Set a list of colors - named color, hex rgb, rgb(), rgba(), hsl(), hsla() - pipe separated or a predefined palette (PALETTE_MATERIAL_500,
 					PALETTE_MATERIAL_CHROME).
 					<br> The
 					<code>acp-palette-editable</code> attribute can be set to allow the user to change the palette.</p>
@@ -147,7 +148,7 @@ <h3>Events</h3>
 					<code>off</code> to detach it.
 					<pre class="eg"><code>AColorPicker.<span class="prop">from</span>(<span class="par">selector</span>)
     .on(<span class="par">eventName</span>, <span class="par">callback</span>)
-    .off(<span class="par">eventName</span>)</code></pre>
+    .off(<span class="par">eventName</span>, <span class="par">callback</span>)</code></pre>
 					<table class="detail hover-on-body">
 						<thead>
 							<tr>
@@ -586,12 +587,21 @@ <h3>API</h3>
 								<td class="explanation">Boolean</td>
 								<td class="explanation">false</td>
 							</tr>
+							<tr>
+								<td>useAlphaInPalette</td>
+								<td class="explanation">If truly enable alpha channel in palette colors,<br>if 'auto' depends on the value of 'showAlpha'</td>
+								<td class="explanation">String|Boolean</td>
+								<td class="explanation">auto</td>
+							</tr>
 						</tbody>
 					</table>
 				</section>
 			</section>
 		</div>
 	</div>
+	<footer>
+		by <a href="https://github.com/narsenico" title="narsenico github repositories">narsenico</a>
+	</footer>
 	<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 </body>