Added basic control, non functional beyond displaying options

configit · Aug 20, 2013 · 199a5ee · 199a5ee
1 parent 6c6d0ca
commit 199a5ee
Show file tree

Hide file tree

Showing 5 changed files with 180 additions and 0 deletions.
diff --git a/examples/css/multi-picker.css b/examples/css/multi-picker.css
@@ -0,0 +1,35 @@
+.select-container-overlay {
+  position:absolute;
+  background:red;
+  height:40px;
+  width:200px; 
+}
+
+input {
+  line-height:30px;
+  font-size:20px;
+}
+
+.ngyn-combo-selection {
+  padding-left: 4px;
+  padding-right:2px;
+  margin-right:5px;
+  border-radius:3px;
+  background-color: rgb(238, 238, 238);
+  float:left;
+}
+.ngyn-combo-remove-selection {
+  color:#888888;
+  cursor:pointer;
+}
+.ngyn-combo-remove-selection:hover {
+  color:#880000;
+}
+.ngyn-combo-add-selection {
+  width:auto;
+  outline:none;
+  min-width:40px;
+}
+.ngyn-combo-placeholder {
+  color:#aaaaaa;
+}
diff --git a/examples/images/anders.jpg b/examples/images/anders.jpg
diff --git a/examples/images/ballmer.jpg b/examples/images/ballmer.jpg
diff --git a/examples/multi-picker.html b/examples/multi-picker.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en" ng-app="app">
+<head>
+  <meta charset="UTF-8">
+  <title>Test</title>
+  <script src="../libs/angular.js"></script>
+  <script src="../src/ngyn-ui-multi-picker.js"></script>
+  <script type="text/javascript">
+    angular.module('app', ['ngyn-ui-multi-picker'])
+      .config(function() {
+
+      })
+      .controller('testController', function( $scope ) {
+        $scope.availablePeople = [ {
+          firstname: 'Anders',
+          surname: 'Hejlsberg',
+          title: 'Technical Fellow',
+          picture: 'images/Anders.jpg'
+        },
+        {
+          firstname: 'Steve',
+          surname: 'Ballmer',
+          title: 'Senior Crowd Entertainer',
+          picture: 'images/Ballmer.jpg'
+        } ];
+
+        $scope.selectedPeople = [];
+      })
+  </script>
+  <link rel="stylesheet" href="css/multi-picker.css">
+</head>
+<body>
+  <div ng-controller="testController">
+    <ngyn-multi-picker options="person in availablePeople" ng-model="selectedPeople">
+      <picker-selection>
+        {{ person.surname}}
+      </picker-selection>
+      <picker-option>
+        <img ng-src="{{person.picture}}" align="left">
+        <strong>{{person.firstname}} {{person.surname}}</strong>
+        <p>{{person.title}}</p>
+      </picker-option>
+    </ngyn-multi-picker>
+  </div>
+</body>
+
+</html>
diff --git a/src/ngyn-ui-multi-picker.js b/src/ngyn-ui-multi-picker.js
@@ -0,0 +1,98 @@
+angular.module( 'ngyn-ui-multi-picker', [] )
+  .directive('ngynMultiPicker', function($compile) {
+    setInitialStyles();
+
+    function dasherize(str) {
+      return str.replace(/([A-Z])/g, function(v) { return '-' + angular.lowercase(v) } );
+    }
+
+    function setInitialStyles() {
+      // create an initial input element and hide it to get the props from
+      var i = document.createElement('input');
+      i.style.position = 'absolute';
+      i.style.visibility = 'hidden';
+      document.documentElement.appendChild(i);
+      var iStyles = window.getComputedStyle(i);
+      // IE must read a property twice, the first is the default, the second is the real value. Awesome.
+      var discardedWidth = iStyles.width;
+
+      var propKeys = ['width', 'height', 
+        'marginLeft', 'marginRight', 'marginTop', 'marginBottom',
+        'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom',
+        'borderLeftWidth', 'borderRightWidth', 'borderTopWidth', 'borderBottomWidth',
+        'fontFamily', 'fontSize', 'lineHeight' ]
+
+        // it's impossible to get the same style that a firefox input has from computed styles
+        // the border it gives us is nearly white so we ignore it
+        var firefox = navigator.userAgent.indexOf('Firefox') >= 0;
+        if (!firefox) {
+          angular.forEach( [ 'borderBottomColor', 'borderTopColor', 'borderRightColor', 'borderLeftColor' ], function(propKey) {
+            propKeys.push(propKey);
+          } )
+        }
+
+      var classText = ".ngyn-combo { "+ 
+        "border-style: solid; "+ 
+        "border-color: #BBBBBB; "+
+        "display: inline-block; "+ 
+        "vertical-align: top; "+
+        "-moz-appearance:textfield; "+
+        "-webkit-appearance: textfield;";
+      angular.forEach(propKeys, function(propKey) {
+        var fromKey = propKey == 'height' ? 'min-height' : propKey;
+        classText += dasherize(fromKey) + ":" + iStyles[propKey] + ';';
+      });
+      classText += "}";
+
+      var styleTag = document.createElement('style');
+      styleTag.type = 'text/css';
+      styleTag.innerHTML = classText;
+      document.getElementsByTagName('head')[0].appendChild( styleTag )
+
+      document.documentElement.removeChild(i);
+    }
+
+    var myTemplate = '<span class="ngyn-combo">' +
+                '  <span class="ngyn-combo-selection">' +
+                '    <span class="ngyn-combo-remove-selection">&times;</span>' +
+                '  </span>' +
+                '  <span' +
+                '    class="ngyn-combo-add-selection ngyn-combo-placeholder"' +
+                '    contenteditable ' +
+                '    > ' +
+                '    Add... '+
+                '  </span>' +
+                '</span>';
+
+    return {
+      restrict: 'E',
+      require: 'ngModel',
+      replace: true,
+      compile: function(celm, cattrs, transclude) {
+        var match = cattrs.options.match(/([^\W]*) in ([^$]*)/);
+        var repeatableElement = match[1];
+        var repeatableCollection = match[2];
+        var selectionTemplate = celm.find('picker-selection');
+        var optionTemplate = celm.find('picker-option');
+
+        var template = angular.element( myTemplate );
+        var selection = template.children().eq( 0 );
+        selection.attr( 'ng-repeat', repeatableElement + ' in ' + repeatableCollection );
+        selection.prepend( selectionTemplate );
+
+        celm.replaceWith( template );
+
+        return function link( scope, elm, attrs, model ) {
+        }
+      }
+    }
+  })
+
+.directive('ngynComboSelected', function() {
+  return {
+    restrict: 'E',
+    require: '^ngynUiCombo',
+    template: '<span></span>'
+  }
+
+});