v3.0.0

Author: isteven

CHANGELOG.md

@@ -1,3 +1,23 @@
+### v3.0.0
+##### Added / Updated
+- Customized text on helper elements
+- 5 new callbacks
+- You can now set minimum characters required to trigger the search functionality
+- You can now define which input-model properties to search from (previously, all input-model properties are searched)
+- On close, parent button will now receive focus.
+- Using proper semantics (well at least better than previous version).
+- Various small optimizations.
+
+##### Deprecated / Breaking Changes
+- File name and the directive name have been changed. I am really sorry for this, but this is the only workaround to prevent wrong language statistic in Github (they don''t count files whose name starts with "angular"). The repository name stays the same.
+- output-model is now required.
+- input-model is now static (not dynamically updated), hence why we need output-model. On the plus side, you now can re-use the input model where necessary.
+- default-label is deprecated. Custom text and translations can be done using the translation attribute.
+
+### v2.0.2
+##### Added / Updated
+- Bring back CSS into bower.json.
+
 ### v2.0.1
 ##### Added / Updated
 - <a href="https://github.com/isteven/angular-multi-select/issues/52">#52</a> Form tag is now properly closed
@@ -13,7 +33,7 @@
 - on-open and on-close callbacks will now pass the multi-select element (HTML) to the callback function.
 - max-height attribute. You can define the height of the selection items container.
 
-##### Removed / Deprecated:
+##### Deprecated / Breaking Changes
 - on-focus attribute is deprecated.
 - on-blur attribute is deprecated. Use on-close instead, as it will be triggered when user close a directive by clicking outside the directive.
 - IE8 will no longer be supported.

LICENSE.txt

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014 Ignatius Steven (https://github.com/isteven)
+Copyright (c) 2014-2015 Ignatius Steven (https://github.com/isteven)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,35 +1,34 @@
 # AngularJS MultiSelect
 Pure AngularJS directive which creates a dropdown button with multiple or single selections. 
 Doesn't require jQuery and works well with other Javascript libraries. 
-Fully configurable through element attributes and CSS. 
 
 ![Screenshot](https://raw.githubusercontent.com/isteven/angular-multi-select/master/screenshot.png)
 
 ### Demo & How To 
 Go to http://isteven.github.io/angular-multi-select
 
 ### Current Version
-2.0.1
+3.0.0
 
 ### Change Log
-See <a href="https://github.com/isteven/angular-multi-select/blob/master/CHANGELOG.md">CHANGELOG.md</a>
+See <a href="https://github.com/isteven/angular-multi-select/blob/master/CHANGELOG.md">CHANGELOG.md</a>. 
+For those who's upgrading from version 2.x.x, do note that this version is not backward-compatible. Please read the manual
+thoroughly and update your code accordingly. 
 
 ### Bug Reporting
-- Search in the issue section first. Somebody might have reported the same bug and/or asked similar question. If there's none, then please create a new issue.
-- Try to reproduce the problem in JSFiddle or Plunker (or any other online JS collaboration tool), and include the URL in the issue you are creating.
-
-
-### Note
-- This directive is a practical solution, not a performance champion. It will not win any code efficiency competition.
-- As for the moment, developments are on going, so I am not accepting pull requests. I will choose &  add them manually instead.
-- If you like / use this directive in your awesome projects, star this repo. It's a huge motivation for me. Would also love to hear from you if you use it in an open source project. Thanks!
+Please follow these steps:
+1. READ THE MANUAL AGAIN. You might have missed something. This includes the MINIMUM ANGULARJS VERSION and the SUPPORTED BROWSERS.
+2. The next step is to search in Github's issue section first. There might already be an answer for similar issue. Do check both open and closed issues.
+3. If there's no previous issue found, then please create a new issue in https://github.com/isteven/angular-multi-select/issues.
+4. Please replicate the problem in JSFiddle or Plunker (or any other online JS collaboration tool), and include the URL in the issue you are creating.
+5. When you're done, please close the issue you've created.
 
 ### Licence
 Released under the MIT license:
 
 The MIT License (MIT)
 
-Copyright (c) 2014 Ignatius Steven (https://github.com/isteven)
+Copyright (c) 2014-2015 Ignatius Steven (https://github.com/isteven)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

bower.json

@@ -1,14 +1,16 @@
 {
     "name"      : "isteven-angular-multiselect",
-    "version"   : "v2.0.1",
+    "version"   : "v3.0.0",
     "main"      : [
-        "angular-multi-select.js"
+        "isteven-multi-select.js",
+        "isteven-multi-select.css",
     ],
     "ignore"    : [
         ".git",
         ".gitignore",
         "bower.json",
         "README.md",        
-        "screenshot.png"
+        "screenshot.png",
+        "/doc"
     ]
 }

angular-multi-select.css renamed to isteven-multi-select.css

@@ -4,7 +4,7 @@
 
 /* ! vertical layout */
 .multiSelect .vertical {
-    float: none;
+    float: none;        
 }
 
 /* ! horizontal layout */
@@ -14,8 +14,10 @@
 
 /* ! create a "row" */
 .multiSelect .line {
-    max-height: 34px;   
+    padding:  2px 0px 4px 0px;
+    max-height: 30px;   
     overflow: hidden;
+    box-sizing: content-box;
 }
 
 /* ! create a "column" */
@@ -30,8 +32,8 @@
 }
 
 /* the multiselect button */
-.multiSelect .button {
-    display: block;
+.multiSelect > button {
+    display: inline-block;
     position: relative;
     text-align: center;    
     cursor: pointer;
@@ -52,7 +54,7 @@
 }
 
 /* button: hover */
-.multiSelect .button:hover {    
+.multiSelect > button:hover {    
     background-image: linear-gradient(#fff, #e9e9e9);    
 }
 
@@ -90,14 +92,13 @@
     -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);    
     min-width:278px;
-    display: none !important;
-    margin-right: 30px;
+    display: none !important;    
 }
 
 /* container of helper elements */
 .multiSelect .helperContainer {
     border-bottom: 1px solid #ddd;
-    padding: 8px 8px 0px 8px;
+    padding: 8px 8px 0px 8px;    
 }
 
 /* helper buttons (select all, none, reset); */
@@ -115,6 +116,14 @@
     margin: 0px 0px 8px 0px;
 }
 
+.multiSelect .helperButton.reset{
+    float: right;
+}
+
+.multiSelect .helperButton:not( .reset ) {
+    margin-right: 4px;    
+}
+
 /* clear button */
 .multiSelect .clearButton {
     position: absolute;
@@ -130,7 +139,7 @@
     background-color: #f1f1f1;
     line-height: 1.4;
     right : 2px;
-    top: 2px;
+    top: 4px;
 }
 
 /* filter */
@@ -146,6 +155,8 @@
     box-sizing: border-box;         /* Opera/IE 8+ */    
     color: #888;
     margin: 0px 0px 8px 0px;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 }
 
 /* helper elements on hover & focus */
@@ -160,13 +171,16 @@
 .multiSelect .helperButton:focus,
 .multiSelect .inputFilter:focus {
     border: 1px solid #66AFE9 !important;
-    box-shadow: inset 0 0px 1px rgba(0,0,0,.035), 0 0 5px rgba(82,168,236,.7) !important;
+    outline: 0;
+    -webkit-box-shadow: box-shadow: inset 0 0 1px rgba(0,0,0,.065), 0 0 5px rgba(102, 175, 233, .6) !important;
+            box-shadow: inset 0 0 1px rgba(0,0,0,.065), 0 0 5px rgba(102, 175, 233, .6) !important;
 }
 
 /* container of multi select items */
 .multiSelect .checkBoxContainer {
-    display: inline-block;
+    display: block;
     padding: 8px;   
+    overflow: hidden;
 }
 
 /* ! to show / hide the checkbox layer above */
@@ -187,10 +201,11 @@
     user-select: none;      
     border: 1px solid transparent;
     position: relative;
-    min-width:278px;
+    min-width:278px;    
+    min-height: 32px;    
 }
 
-/* Item labels: selected - Enable this if you want to apply styling on selected items */
+/* Styling on selected items */
 .multiSelect .multiSelectItem:not(.multiSelectGroup).selected
 {
     background-image: linear-gradient( #e9e9e9, #f1f1f1 );    
@@ -201,6 +216,14 @@
     border-right: 1px solid #d9d9d9;            
 }
 
+.multiSelect .multiSelectItem .acol label {
+    display: inline-block;
+    padding-right: 30px;    
+    margin: 0px;
+    font-weight: normal;    
+    line-height: normal;
+}
+
 /* item labels focus on mouse hover */
 .multiSelect .multiSelectItem:hover, 
 .multiSelect .multiSelectGroup:hover {
@@ -260,6 +283,6 @@
 .multiSelect img {
     vertical-align: middle;
     margin-bottom:0px;
-    height: 22px;
-    width:22px;
+    max-height: 22px;
+    max-width:22px;
 }