Merge pull request #247 from douglasdeodato/master

grunt, npm, scss, css minified , samples

11 files changed, 445 insertions, 2 deletions

diff --git a/.gitignore b/.gitignore
index 496ee2c..c2d3ab2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,3 @@
-.DS_Store
\ No newline at end of file
+.DS_Store
+node_modules/
+.sass-cache/
\ No newline at end of file
diff --git a/Gruntfile.js b/Gruntfile.js
new file mode 100644
index 0000000..1672a0d
--- /dev/null
+++ b/Gruntfile.js
@@ -0,0 +1,69 @@
+    module.exports = function  (grunt) {
+    var config = {};
+
+
+                //src ===============================
+                var src;
+                config.src = src = {
+                     sassMain        : 'scss/multi-select.scss',
+                     distFolder      : 'css/multi-select.dist.css',
+                     devFolder       : 'css/multi-select.dev.css',
+                     sassFolder      : 'scss/**/*.scss',
+                
+                };
+
+
+                //Watch ===============================
+                config.watch = {
+                     scripts: {
+                        files: ["<%= src.libFolder %>", "<%= src.sassFolder %>"]
+                        ,tasks: ["dev", "sass:dist"]
+                        //,tasks: ["dev",'sass:dist']
+                     }
+                }
+
+
+                //Sass ===============================
+                var sass;
+                config.sass = sass = {};
+
+                    //distribution
+                        sass.dist = {
+                            options: { 
+                                style: "compressed",
+                                noCache: true, 
+                                sourcemap: 'none', 
+                                update:true
+                            }
+                            , files: {
+                                "<%= src.distFolder %>" : "<%= src.sassMain %>"
+                            }
+                        };
+
+                    //development env.
+                        sass.dev = {
+                            options: { 
+                                style: "expanded", 
+                                lineNumber: true,
+                            }
+                            , files: {
+                                "<%= src.devFolder %>" : "<%= src.sassMain %>"
+                            }
+                        };
+
+
+            
+    //Register custom tasks ===============================
+    grunt.registerTask('default',['dev']);
+    grunt.registerTask('dev', ['sass:dev']);
+    grunt.registerTask('dist',['sass:dist']);
+    require('time-grunt')(grunt);
+    require('load-grunt-tasks')(grunt, {
+        scope: 'devDependencies'
+    });
+
+
+    //General setup ===============================
+    grunt.initConfig(config);
+
+};
diff --git a/README.markdown b/README.markdown
index 8b42672..7f188db 100644
--- a/README.markdown
+++ b/README.markdown
@@ -1,4 +1,17 @@
-# jquery.multi-select.js
+# [jquery multi-select.js](http://loudev.com/)
+
+## Summary 
+
+- [About](#about)
+- [Creator](#creator)
+- [Usage and demos](#usage)
+- [License](#license)
+
+## About
+I'm a user-friendlier drop-in replacement for the standard select with multiple attribute activated.
+
+## Creator
+@lou
 
 ### Usage and demos
 [http://loudev.com](http://loudev.com "jquery.multi-select.js")
diff --git a/css/multi-select.dev.css b/css/multi-select.dev.css
new file mode 100644
index 0000000..fbd8066
--- /dev/null
+++ b/css/multi-select.dev.css
@@ -0,0 +1,108 @@
+/* line 1, ../scss/multi-select.scss */
+.ms-container {
+  background: transparent url("../img/switch.png") no-repeat 50% 50%;
+  width: 370px;
+}
+
+/* line 6, ../scss/multi-select.scss */
+.ms-container:after {
+  content: ".";
+  display: block;
+  height: 0;
+  line-height: 0;
+  font-size: 0;
+  clear: both;
+  min-height: 0;
+  visibility: hidden;
+}
+
+/* line 17, ../scss/multi-select.scss */
+.ms-container .ms-selectable, .ms-container .ms-selection {
+  background: #fff;
+  color: #555555;
+  float: left;
+  width: 45%;
+}
+
+/* line 23, ../scss/multi-select.scss */
+.ms-container .ms-selection {
+  float: right;
+}
+
+/* line 27, ../scss/multi-select.scss */
+.ms-container .ms-list {
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+  -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
+  -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
+  -o-transition: border linear 0.2s, box-shadow linear 0.2s;
+  transition: border linear 0.2s, box-shadow linear 0.2s;
+  border: 1px solid #ccc;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  position: relative;
+  height: 200px;
+  padding: 0;
+  overflow-y: auto;
+}
+
+/* line 46, ../scss/multi-select.scss */
+.ms-container .ms-list.ms-focus {
+  border-color: rgba(82, 168, 236, 0.8);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+  outline: 0;
+  outline: thin dotted \9;
+}
+
+/* line 55, ../scss/multi-select.scss */
+.ms-container ul {
+  margin: 0;
+  list-style-type: none;
+  padding: 0;
+}
+
+/* line 61, ../scss/multi-select.scss */
+.ms-container .ms-optgroup-container {
+  width: 100%;
+}
+
+/* line 65, ../scss/multi-select.scss */
+.ms-container .ms-optgroup-label {
+  margin: 0;
+  padding: 5px 0px 0px 5px;
+  cursor: pointer;
+  color: #999;
+}
+
+/* line 72, ../scss/multi-select.scss */
+.ms-container .ms-selectable li.ms-elem-selectable,
+.ms-container .ms-selection li.ms-elem-selection {
+  border-bottom: 1px #eee solid;
+  padding: 2px 10px;
+  color: #555;
+  font-size: 14px;
+}
+
+/* line 80, ../scss/multi-select.scss */
+.ms-container .ms-selectable li.ms-hover,
+.ms-container .ms-selection li.ms-hover {
+  cursor: pointer;
+  color: #fff;
+  text-decoration: none;
+  background-color: #08c;
+}
+
+/* line 88, ../scss/multi-select.scss */
+.ms-container .ms-selectable li.disabled,
+.ms-container .ms-selection li.disabled {
+  background-color: #eee;
+  color: #aaa;
+  cursor: text;
+}
+
+/*# sourceMappingURL=multi-select.dev.css.map */
diff --git a/css/multi-select.dev.css.map b/css/multi-select.dev.css.map
new file mode 100644
index 0000000..09b7ffd
--- /dev/null
+++ b/css/multi-select.dev.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": ";AAAA,aAAa;EACX,UAAU,EAAE,sDAAsD;EAClE,KAAK,EAAE,KAAK;;;;AAGd,mBAAmB;EACjB,OAAO,EAAE,GAAG;EACZ,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,CAAC;EACT,WAAW,EAAE,CAAC;EACd,SAAS,EAAE,CAAC;EACZ,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,CAAC;EACb,UAAU,EAAE,MAAM;;;;AAGpB,yDAAyD;EACvD,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,OAAO;EACd,KAAK,EAAE,IAAI;EACX,KAAK,EAAE,GAAG;;;;AAEZ,2BAA2B;EACzB,KAAK,EAAE,KAAK;;;;AAGd,sBAAsB;EACpB,kBAAkB,EAAE,oCAAoC;EACxD,eAAe,EAAE,oCAAoC;EACrD,UAAU,EAAE,oCAAoC;EAChD,kBAAkB,EAAE,0CAA0C;EAC9D,eAAe,EAAE,0CAA0C;EAC3D,cAAc,EAAE,0CAA0C;EAC1D,aAAa,EAAE,0CAA0C;EACzD,UAAU,EAAE,0CAA0C;EACtD,MAAM,EAAE,cAAc;EACtB,qBAAqB,EAAE,GAAG;EAC1B,kBAAkB,EAAE,GAAG;EACvB,aAAa,EAAE,GAAG;EAClB,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,KAAK;EACb,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,IAAI;;;;AAGlB,+BAA+B;EAC7B,YAAY,EAAE,uBAAuB;EACrC,kBAAkB,EAAE,qEAAqE;EACzF,eAAe,EAAE,qEAAqE;EACtF,UAAU,EAAE,qEAAqE;EACjF,OAAO,EAAE,CAAC;EACV,OAAO,EAAE,cAAc;;;;AAGzB,gBAAgB;EACd,MAAM,EAAE,CAAC;EACT,eAAe,EAAE,IAAI;EACrB,OAAO,EAAE,CAAC;;;;AAGZ,oCAAoC;EAClC,KAAK,EAAE,IAAI;;;;AAGb,gCAAgC;EAC9B,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,eAAe;EACxB,MAAM,EAAE,OAAO;EACf,KAAK,EAAE,IAAI;;;;AAGb;gDACgD;EAC9C,aAAa,EAAE,cAAc;EAC7B,OAAO,EAAE,QAAQ;EACjB,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,IAAI;;;;AAGjB;uCACuC;EACrC,MAAM,EAAE,OAAO;EACf,KAAK,EAAE,IAAI;EACX,eAAe,EAAE,IAAI;EACrB,gBAAgB,EAAE,IAAI;;;;AAGxB;uCACuC;EACrC,gBAAgB,EAAE,IAAI;EACtB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI",
+"sources": ["../scss/multi-select.scss"],
+"names": [],
+"file": "multi-select.dev.css"
+}
diff --git a/css/multi-select.dist.css b/css/multi-select.dist.css
new file mode 100644
index 0000000..68b0921
--- /dev/null
+++ b/css/multi-select.dist.css
@@ -0,0 +1 @@
+.ms-container{background:transparent url("../img/switch.png") no-repeat 50% 50%;width:370px}.ms-container:after{content:".";display:block;height:0;line-height:0;font-size:0;clear:both;min-height:0;visibility:hidden}.ms-container .ms-selectable,.ms-container .ms-selection{background:#fff;color:#555555;float:left;width:45%}.ms-container .ms-selection{float:right}.ms-container .ms-list{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border linear 0.2s, box-shadow linear 0.2s;-moz-transition:border linear 0.2s, box-shadow linear 0.2s;-ms-transition:border linear 0.2s, box-shadow linear 0.2s;-o-transition:border linear 0.2s, box-shadow linear 0.2s;transition:border linear 0.2s, box-shadow linear 0.2s;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;position:relative;height:200px;padding:0;overflow-y:auto}.ms-container .ms-list.ms-focus{border-color:rgba(82,168,236,0.8);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);outline:0;outline:thin dotted \9}.ms-container ul{margin:0;list-style-type:none;padding:0}.ms-container .ms-optgroup-container{width:100%}.ms-container .ms-optgroup-label{margin:0;padding:5px 0px 0px 5px;cursor:pointer;color:#999}.ms-container .ms-selectable li.ms-elem-selectable,.ms-container .ms-selection li.ms-elem-selection{border-bottom:1px #eee solid;padding:2px 10px;color:#555;font-size:14px}.ms-container .ms-selectable li.ms-hover,.ms-container .ms-selection li.ms-hover{cursor:pointer;color:#fff;text-decoration:none;background-color:#08c}.ms-container .ms-selectable li.disabled,.ms-container .ms-selection li.disabled{background-color:#eee;color:#aaa;cursor:text}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..987cf8c
--- /dev/null
+++ b/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "multiselect",
+  "version": "0.9.12",
+  "description": "A user-friendlier drop-in replacement for the standard select with multiple attribute activated.",
+  "main": "Gruntfile.js",
+  "directories": {
+    "test": "test"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/douglasdeodato/multi-select.git"
+  },
+  "author": "",
+  "license": "WTFPL",
+  "bugs": {
+    "url": "https://github.com/lou/multi-select/issues"
+  },
+  "devDependencies": {
+    "grunt": "*",
+    "load-grunt-tasks": "^3.5.0",
+    "time-grunt": "^1.3.0",
+    "grunt-contrib-sass": "*",
+    "grunt-contrib-watch": "*"
+  },
+  "homepage": "https://github.com/douglasdeodato/multi-select#readme"
+}
diff --git a/samples/Pre-selected-options.html b/samples/Pre-selected-options.html
new file mode 100644
index 0000000..c39b7f9
--- /dev/null
+++ b/samples/Pre-selected-options.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="">
+  <meta name="author" content="">
+  <title>Title Page</title>
+  <!-- Bootstrap CSS -->
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
+  <link rel="stylesheet" type="text/css" href="../css/multi-select.css">
+</head>
+<body>
+  <!-- start -->
+  <h1>Pre-selected-options</h1>
+  <select id='pre-selected-options' multiple='multiple'>
+    <option value='elem_1' selected>elem 1</option>
+    <option value='elem_2'>elem 2</option>
+    <option value='elem_3'>elem 3</option>
+    <option value='elem_4' selected>elem 4</option>
+    ...
+    <option value='elem_100'>elem 100</option>
+  </select>
+  <!-- ends -->
+  <!-- jQuery -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
+  <!-- Bootstrap JavaScript -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
+  <script src="../js/jquery.multi-select.js"></script>
+  <script type="text/javascript">
+  // run pre selected options
+  $('#pre-selected-options').multiSelect();
+  </script>
+</body>
+
+</html>
diff --git a/samples/callbacks.html b/samples/callbacks.html
new file mode 100644
index 0000000..55879a6
--- /dev/null
+++ b/samples/callbacks.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="">
+  <meta name="author" content="">
+  <title>Title Page</title>
+  <!-- Bootstrap CSS -->
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
+  <link rel="stylesheet" type="text/css" href="../css/multi-select.css">
+</head>
+<body>
+  <!-- start -->
+  <h1>Callbaks</h1>
+  <select id='callbacks' multiple='multiple'>
+  <option value='elem_1'>elem 1</option>
+  <option value='elem_2'>elem 2</option>
+  <option value='elem_3'>elem 3</option>
+  <option value='elem_4'>elem 4</option>
+  ...
+  <option value='elem_100'>elem 100</option>
+</select>
+  <!-- ends -->
+  <!-- jQuery -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
+  <!-- Bootstrap JavaScript -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
+  <script src="../js/jquery.multi-select.js"></script>
+  <script type="text/javascript">
+  // run callbacks
+      $('#callbacks').multiSelect({
+      afterSelect: function(values){
+        alert("Select value: "+values);
+      },
+      afterDeselect: function(values){
+        alert("Deselect value: "+values);
+      }
+    });
+  </script>
+</body>
+
+</html>
diff --git a/samples/index.html b/samples/index.html
new file mode 100644
index 0000000..88b4718
--- /dev/null
+++ b/samples/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+        <meta name="author" content="">
+    <title>Title Page</title>
+    <!-- Bootstrap CSS -->
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
+    <!-- font awesome -->
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">  
+    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+    <![endif]-->
+    <!-- Angular 1.5.7-->
+   
+  </head>
+  <body>
+    <h1 class="text-center">Multi Select Samples Page</h1>
+
+<div class="container">
+<div class="page-header" id="demos">
+        <h2>Demos</h2>
+      </div>
+
+   <a href="Pre-selected-options.html"> <h3>Pre-selected options</h3></a>
+   <a href="callbacks.html"> <h3>Callbacks</h3></a>
+</div>
+
+    <!-- jQuery -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
+    <!-- Bootstrap JavaScript -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/scss/multi-select.scss b/scss/multi-select.scss
new file mode 100644
index 0000000..290fc37
--- /dev/null
+++ b/scss/multi-select.scss
@@ -0,0 +1,93 @@
+.ms-container{
+  background: transparent url('../img/switch.png') no-repeat 50% 50%;
+  width: 370px;
+}
+
+.ms-container:after{
+  content: ".";
+  display: block;
+  height: 0;
+  line-height: 0;
+  font-size: 0;
+  clear: both;
+  min-height: 0;
+  visibility: hidden;
+}
+
+.ms-container .ms-selectable, .ms-container .ms-selection{
+  background: #fff;
+  color: #555555;
+  float: left;
+  width: 45%;
+}
+.ms-container .ms-selection{
+  float: right;
+}
+
+.ms-container .ms-list{
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+  -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
+  -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
+  -o-transition: border linear 0.2s, box-shadow linear 0.2s;
+  transition: border linear 0.2s, box-shadow linear 0.2s;
+  border: 1px solid #ccc;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  position: relative;
+  height: 200px;
+  padding: 0;
+  overflow-y: auto;
+}
+
+.ms-container .ms-list.ms-focus{
+  border-color: rgba(82, 168, 236, 0.8);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+  outline: 0;
+  outline: thin dotted \9;
+}
+
+.ms-container ul{
+  margin: 0;
+  list-style-type: none;
+  padding: 0;
+}
+
+.ms-container .ms-optgroup-container{
+  width: 100%;
+}
+
+.ms-container .ms-optgroup-label{
+  margin: 0;
+  padding: 5px 0px 0px 5px;
+  cursor: pointer;
+  color: #999;
+}
+
+.ms-container .ms-selectable li.ms-elem-selectable,
+.ms-container .ms-selection li.ms-elem-selection{
+  border-bottom: 1px #eee solid;
+  padding: 2px 10px;
+  color: #555;
+  font-size: 14px;
+}
+
+.ms-container .ms-selectable li.ms-hover,
+.ms-container .ms-selection li.ms-hover{
+  cursor: pointer;
+  color: #fff;
+  text-decoration: none;
+  background-color: #08c;
+}
+
+.ms-container .ms-selectable li.disabled,
+.ms-container .ms-selection li.disabled{
+  background-color: #eee;
+  color: #aaa;
+  cursor: text;
+}
\ No newline at end of file