try to fix #105

lordfriend · Jan 31, 2016 · 7d797fd · 7d797fd
1 parent 7e7d19b
commit 7d797fd
Show file tree

Hide file tree

Showing 9 changed files with 246 additions and 22 deletions.
diff --git a/bower.json b/bower.json
@@ -26,6 +26,7 @@
     "jquery": "~2.1.1",
     "bootstrap": "~3.3.0",
     "angular-mocks": "*",
-    "angular-ui-router": "~0.2.11"
+    "angular-ui-router": "~0.2.11",
+    "angular-translate": "^2.9.0"
   }
 }
diff --git a/dist/css/nya-bs-select.css b/dist/css/nya-bs-select.css
@@ -21,17 +21,29 @@
 .nya-bs-select.form-control:not([class*="col-"]) {
   width: 100%;
 }
-.nya-bs-select > .btn {
+.nya-bs-select .dropdown-toggle {
   width: 100%;
   padding-right: 25px;
 }
-.nya-bs-select > .btn .filter-option {
-  display: inline-block;
+.nya-bs-select .dropdown-toggle .filter-option,
+.nya-bs-select .dropdown-toggle .special-title {
   overflow: hidden;
   width: 100%;
   text-align: left;
 }
-.nya-bs-select > .btn .caret {
+.nya-bs-select .dropdown-toggle .filter-option {
+  display: inline-block;
+}
+.nya-bs-select .dropdown-toggle .special-title {
+  display: none;
+}
+.nya-bs-select .dropdown-toggle.show-special-title .filter-option {
+  display: none;
+}
+.nya-bs-select .dropdown-toggle.show-special-title .special-title {
+  display: inline-block;
+}
+.nya-bs-select .dropdown-toggle .caret {
   position: absolute;
   top: 50%;
   right: 12px;
@@ -197,7 +209,8 @@
   position: static;
   border-radius: 4px;
 }
-.nya-bs-select.fit-width .btn .filter-option {
+.nya-bs-select.fit-width .btn .filter-option,
+.nya-bs-select.fit-width .btn .special-title {
   position: static;
 }
 .nya-bs-select.fit-width .btn .caret {

diff --git a/examples/index.html b/examples/index.html
@@ -25,6 +25,9 @@
       <li>
         <a href="localization/manual.html">Localized Manual Examples</a>
       </li>
+      <li>
+        <a href="localization/angular-translate-filter.html">Angular Translate filter Example</a>
+      </li>
     </ul>
   </div>
 </nav>

diff --git a/examples/localization/angular-translate-filter.html b/examples/localization/angular-translate-filter.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf8">
+  <title>nya-bootstrap-select demo</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+  <link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.css" type="text/css">
+  <link rel="stylesheet" href="../../dist/css/nya-bs-select.css"/>
+  <link rel="stylesheet" href="../main.css"/>
+</head>
+<body ng-app="demoApp">
+<nav class="navbar navbar-default">
+  <div class="container">
+    <div class="navbar-header">
+      <a class="navbar-brand" href="/">nya-bootstrap-select</a>
+    </div>
+    <ul class="nav navbar-nav">
+      <li>
+        <a href="/">Basic Examples</a>
+      </li>
+      <li>
+        <a href="#">Localized Default Examples</a>
+      </li>
+      <li>
+        <a href="manual.html">Localized Manual Examples</a>
+      </li>
+      <li class="active">
+        <a href="angular-translate-filter.html">Angular Translate filter Example</a>
+      </li>
+    </ul>
+  </div>
+</nav>
+<div class="masthead">
+  <div class="container">
+    <h1>nya-bootstrap-select</h1>
+
+    <p>An angular wrapper for Bootstrap-select with dynamic loading options support</p>
+    <a class="btn btn-default btn-lg" href="#">View on Github</a>
+  </div>
+</div>
+<div class="container" ng-controller="MainCtrl">
+  <section>
+    <h1 id="bs-features" class="page-header">Bootstrap-select Features</h1>
+
+    <h3>Default Text</h3>
+
+    <p>Default Text using angular-translate</p>
+
+    <button class="btn btn-default" ng-click="changeLocale('en')">English</button>
+    <button class="btn btn-default" ng-click="changeLocale('jp')">Japanese</button>
+
+    <p>Current Locale: {{'LANG' | translate}}</p>
+    <form class="form-inline">
+      <ol class="nya-bs-select" ng-model="staticModel3" data-live-search="true" multiple title-tpl="<span>{{'NOTHING' | translate}}</spa>">
+        <li class="nya-bs-option" value="a"><a>Alpha<span class="glyphicon glyphicon-ok check-mark"></span></a></li>
+        <li class="nya-bs-option" value="b"><a>Bravo<span class="glyphicon glyphicon-ok check-mark"></span></a></li>
+        <li class="nya-bs-option" value="c"><a>Charlie<span class="glyphicon glyphicon-ok check-mark"></span></a></li>
+      </ol>
+    </form>
+
+
+    <h3>selection display format</h3>
+
+    <p>Using the <code>data-selected-text-format</code> attribute on an <code>multiple nya-bs-select</code> you can specify how the selection is displayed.</p>
+    <ul>
+      <li>
+        <p><code>values</code> A comma delimited list of selected values.(default)</p>
+
+        <form class="form-inline">
+          <ol id="values-example" class="nya-bs-select" ng-model="model1" data-selected-text-format="values" multiple>
+            <li nya-bs-option="option in options1">
+              <a>
+                {{option}}
+                <span class="glyphicon glyphicon-ok check-mark"></span>
+              </a>
+            </li>
+          </ol>
+        </form>
+      </li>
+      <li>
+        <p><code>count</code> If one item is selected, then the value is shown, if more than one is selected then the number of selected items is displayed.</p>
+        <form class="form-inline">
+          <ol id="count-example" class="nya-bs-select" ng-model="model1" data-selected-text-format="count" multiple>
+            <li nya-bs-option="option in options1">
+              <a>
+                {{option}}
+                <span class="glyphicon glyphicon-ok check-mark"></span>
+              </a>
+            </li>
+          </ol>
+        </form>
+      </li>
+      <li>
+        <p><code>count > x</code> Where X is the number of items selected when the display format changes from <code>values</code> to
+          <code>count</code></p>
+        <form class="form-inline">
+          <ol id="count-number-example" class="nya-bs-select" ng-model="model1" data-selected-text-format="count>3" multiple>
+            <li nya-bs-option="option in options1">
+              <a>
+                {{option}}
+                <span class="glyphicon glyphicon-ok check-mark"></span>
+              </a>
+            </li>
+          </ol>
+        </form>
+      </li>
+    </ul>
+
+
+  </section>
+</div>
+<footer class="footer">
+  <div class="container">
+    <p>Designed and built by <a href="http://nya.io">Nyasoft</a></p>
+
+    <p>Code licensed under MIT License</p>
+  </div>
+</footer>
+
+
+<script src="../../bower_components/angular/angular.js"></script>
+<script src="../../bower_components/angular-translate/angular-translate.js"></script>
+<script src="../../src/nya-bs-public.js"></script>
+<script src="../../src/nya-bs-config.js"></script>
+<script src="../../src/nya-bs-select-ctrl.js"></script>
+<script src="../../src/nya-bs-select.js"></script>
+<script src="../../src/nya-bs-option.js"></script>
+<script src="angular-translate-filter.js"></script>
+</body>
+</html>
diff --git a/examples/localization/angular-translate-filter.js b/examples/localization/angular-translate-filter.js
@@ -0,0 +1,33 @@
+'use strict';
+
+angular.module('demoApp', ['nya.bootstrap.select', 'pascalprecht.translate'])
+  .config(function($translateProvider, nyaBsConfigProvider) {
+    $translateProvider.translations('en', {
+      LANG: 'English',
+      NOTHING: 'Nothing Selected!'
+    });
+    $translateProvider.translations('jp', {
+      LANG: '日本語',
+      NOTHING: '未選択'
+    });
+  })
+  .controller('MainCtrl', function($scope, $translate){
+
+    $translate.use('en');
+
+    $scope.changeLocale = function(locale) {
+      $translate.use(locale);
+    };
+
+
+    $scope.options1 = [
+      'Alpha',
+      'Bravo',
+      'Charlie',
+      'Golf',
+      'Hotel',
+      'Juliet',
+      'Kilo',
+      'Lima'
+    ];
+  });
diff --git a/examples/localization/default.html b/examples/localization/default.html
@@ -25,6 +25,9 @@
       <li>
         <a href="manual.html">Localized Manual Examples</a>
       </li>
+      <li>
+        <a href="angular-translate-filter.html">Angular Translate filter Example</a>
+      </li>
     </ul>
   </div>
 </nav>

diff --git a/examples/localization/manual.html b/examples/localization/manual.html
@@ -25,6 +25,9 @@
       <li class="active">
         <a href="#">Localized Manual Examples</a>
       </li>
+      <li>
+        <a href="angular-translate-filter.html">Angular Translate filter Example</a>
+      </li>
     </ul>
   </div>
 </nav>

diff --git a/less/nya-bs-select.less b/less/nya-bs-select.less
@@ -32,17 +32,36 @@
     }
   }
 
-  & > .btn {
+  .dropdown-toggle {
     width: 100%;
     padding-right: 25px;
 
-    .filter-option {
-      display: inline-block;
+    .filter-option,
+    .special-title {
       overflow: hidden;
       width: 100%;
       text-align: left;
     }
 
+    .filter-option {
+      display: inline-block;
+    }
+
+    .special-title {
+      display: none;
+    }
+
+    &.show-special-title {
+      .filter-option {
+        display: none;
+      }
+
+      .special-title {
+        display: inline-block;
+      }
+    }
+
+
     .caret {
       position: absolute;
       top: 50%;
@@ -263,7 +282,8 @@
   }
 
   &.fit-width .btn {
-    .filter-option {
+    .filter-option,
+    .special-title {
       position: static;
     }