add option for inline dropdown on desktop. fixes #45.

lauren · Apr 25, 2014 · eac88ab · eac88ab
1 parent 35d1ce6
commit eac88ab
Show file tree

Hide file tree

Showing 10 changed files with 175 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -51,21 +51,21 @@ OK! Let's do this color picking thing!
 
 1) Download the required files: https://github.com/lauren/pick-a-color/archive/master.zip. Add the CSS and JS from the latest release in /build to your CSS and JS folders and include them in your document as follows:
 
-#### For Bootstrap 3, use Pick-a-Color 1.2.2:
+#### For Bootstrap 3, use Pick-a-Color 1.2.3:
 
 **In the `<head>`:**
 
 ```html
 <link rel="stylesheet" href="css/bootstrap-3.0.0.min.css">
-<link rel="stylesheet" href="css/pick-a-color-1.2.0.min.css">
+<link rel="stylesheet" href="css/pick-a-color-1.2.3.min.css">
 ```
 
 **Before the ending `</body>`:**
 
 ```html
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 <script src="js/tinycolor-0.9.14.min.js"></script>
-<script src="js/pick-a-color-1.2.2.min.js"></script>
+<script src="js/pick-a-color-1.2.3.min.js"></script>
 ```
 
 #### For Bootstrap 2, use Pick-a-Color 1.1.8:

diff --git a/build/1.2.3/css/pick-a-color-1.2.3.min.css b/build/1.2.3/css/pick-a-color-1.2.3.min.css
diff --git a/build/1.2.3/js/pick-a-color-1.2.3.min.js b/build/1.2.3/js/pick-a-color-1.2.3.min.js
diff --git a/build/1.2.3/sample.html b/build/1.2.3/sample.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html>
+
+	<head>
+
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	  <meta http-equiv="x-ua-compatible" content="IE=10">	  
+
+		<link rel="stylesheet" href="build/dependencies/bootstrap-3.0.0.min.css">
+		<link rel="stylesheet" href="build/1.2.3/css/pick-a-color-1.2.3.min.css">	  
+
+		<style type="text/css">
+
+			.pick-a-color-markup {
+				margin:20px 0px;
+			}
+
+			.container {
+				margin: 0px 5px;
+				width: 50%;
+			}
+
+		</style>	
+
+	</head>
+
+	<body>
+
+		<div class="container">
+			<input type="text" value="222" name="border-color" class="pick-a-color form-control">
+			<input type="text" value="aaa" name="font-color" class="pick-a-color form-control">
+			<input type="text" value="a1beef" name="backgound-color" class="pick-a-color form-control">
+			<input type="text" value="551033" name="highlight-color" class="pick-a-color form-control">
+			<input type="text" value="eee" name="contrast-color" class="pick-a-color form-control">
+			<input type="text" class="pick-a-color form-control" disabled>
+			<input type="text" class="pick-a-color form-control">
+		</div>
+
+	<script src="build/dependencies/jquery-1.9.1.min.js"></script>
+	<script src="build/dependencies/tinycolor-0.9.15.min.js"></script>
+	<script src="build/1.2.3/js/pick-a-color-1.2.3.min.js"></script>	
+
+	<script type="text/javascript">
+
+		$(document).ready(function () {
+
+			$(".pick-a-color").pickAColor({
+			  showSpectrum            : true,
+				showSavedColors         : true,
+				saveColorsPerElement    : true,
+				fadeMenuToggle          : true,
+				showAdvanced						: true,
+				showBasicColors         : true,
+				showHexInput            : true,
+				allowBlank							: true,
+				inlineDropdown					: true
+			});
+
+		});
+
+		</script>
+
+	</body>
+
+</html>
diff --git a/docs b/docs
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pick-a-color",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "devDependencies": {
     "grunt": "~0.4.1",
     "grunt-contrib-jshint": "~0.6.1",

diff --git a/pick-a-color.jquery.json b/pick-a-color.jquery.json
@@ -7,7 +7,7 @@
 				"input",
 				"bootstrap"
     ],
-    "version": "1.2.2",
+    "version": "1.2.3",
     "author": {
         "name": "Lauren Sperber",
         "url": "http://lauren.github.com/pick-a-color/"

diff --git a/sample.html b/sample.html
@@ -7,7 +7,7 @@
 	  <meta http-equiv="x-ua-compatible" content="IE=10">	  
 
 		<link rel="stylesheet" href="build/dependencies/bootstrap-3.0.0.min.css">
-		<link rel="stylesheet" href="build/1.2.0/css/pick-a-color-1.2.0.min.css">	  
+		<link rel="stylesheet" href="build/1.2.3/css/pick-a-color-1.2.3.min.css">	  
 
 		<style type="text/css">
 
@@ -38,7 +38,7 @@
 
 	<script src="build/dependencies/jquery-1.9.1.min.js"></script>
 	<script src="build/dependencies/tinycolor-0.9.15.min.js"></script>
-	<script src="build/1.2.2/js/pick-a-color-1.2.2.min.js"></script>	
+	<script src="build/1.2.3/js/pick-a-color-1.2.3.min.js"></script>	
 
 	<script type="text/javascript">
 
@@ -52,7 +52,8 @@
 				showAdvanced						: true,
 				showBasicColors         : true,
 				showHexInput            : true,
-				allowBlank							: true
+				allowBlank							: true,
+				inlineDropdown					: true
 			});
 
 		});

diff --git a/src/js/pick-a-color.js b/src/js/pick-a-color.js
@@ -1,5 +1,5 @@
 /*
-* Pick-a-Color JS v1.1.8
+* Pick-a-Color JS v1.2.3
 * Copyright 2013 Lauren Sperber and Broadstreet Ads
 * https://github.com/lauren/pick-a-color/blob/master/LICENSE
 */
@@ -34,6 +34,7 @@
         showBasicColors       : true,
         showHexInput          : true,
         allowBlank            : false,
+        inlineDropdown        : false,
         basicColors           : {
           white     : 'fff',
           red       : 'f00',
@@ -63,6 +64,9 @@
             $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");

diff --git a/src/less/pick-a-color.less b/src/less/pick-a-color.less
@@ -182,6 +182,13 @@
     font-size: 14px;
     left: auto;
 
+    &.color-menu--inline {
+      left: -285px;
+      @media screen and (max-width: (@screen-md - 1px)) {
+        left:-242px;
+      }
+    }
+
     @media screen and (max-width: (@screen-md - 1px)) {
       left:-242px;
       width:293px;