From 7d797fd751d495d2427c4b215db054c16e2c0180 Mon Sep 17 00:00:00 2001 From: lordfriend Date: Sun, 31 Jan 2016 11:03:30 +0800 Subject: [PATCH] try to fix #105 --- bower.json | 3 +- dist/css/nya-bs-select.css | 23 ++- examples/index.html | 3 + .../angular-translate-filter.html | 131 ++++++++++++++++++ .../localization/angular-translate-filter.js | 33 +++++ examples/localization/default.html | 3 + examples/localization/manual.html | 3 + less/nya-bs-select.less | 28 +++- src/nya-bs-select.js | 41 ++++-- 9 files changed, 246 insertions(+), 22 deletions(-) create mode 100644 examples/localization/angular-translate-filter.html create mode 100644 examples/localization/angular-translate-filter.js diff --git a/bower.json b/bower.json index a1af978..ddd8bd1 100644 --- 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 index 82ec84f..82e4848 100644 --- 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 index 7e37621..39cdb62 100644 --- a/examples/index.html +++ b/examples/index.html @@ -25,6 +25,9 @@
  • Localized Manual Examples
    • +
  • + Angular Translate filter Example +
    • diff --git a/examples/localization/angular-translate-filter.html b/examples/localization/angular-translate-filter.html new file mode 100644 index 0000000..60eb9cd --- /dev/null +++ b/examples/localization/angular-translate-filter.html @@ -0,0 +1,131 @@ + + + + + nya-bootstrap-select demo + + + + + + + + +
    +
    +

    nya-bootstrap-select

    + +

    An angular wrapper for Bootstrap-select with dynamic loading options support

    + View on Github +
    +
    +
    +
    +

    Bootstrap-select Features

    + +

    Default Text

    + +

    Default Text using angular-translate

    + + + + +

    Current Locale: {{'LANG' | translate}}

    +
    +
      +
    1. Alpha
      2. +
    2. Bravo
      3. +
    3. Charlie
      4. +
    +
    + + +

    selection display format

    + +

    Using the data-selected-text-format attribute on an multiple nya-bs-select you can specify how the selection is displayed.

    +
      +
    • +

      values A comma delimited list of selected values.(default)

      + +
      +
        +
      1. + + {{option}} + + +
        2. +
      +
      +
      • +
    • +

      count If one item is selected, then the value is shown, if more than one is selected then the number of selected items is displayed.

      +
      +
        +
      1. + + {{option}} + + +
        2. +
      +
      +
      • +
    • +

      count > x Where X is the number of items selected when the display format changes from values to + count

      +
      +
        +
      1. + + {{option}} + + +
        2. +
      +
      +
      • +
    + + +
    +
    + + + + + + + + + + + + + diff --git a/examples/localization/angular-translate-filter.js b/examples/localization/angular-translate-filter.js new file mode 100644 index 0000000..729c077 --- /dev/null +++ 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 index dc397ee..38045c5 100644 --- a/examples/localization/default.html +++ b/examples/localization/default.html @@ -25,6 +25,9 @@
  • Localized Manual Examples
    • +
  • + Angular Translate filter Example +
    • diff --git a/examples/localization/manual.html b/examples/localization/manual.html index 0ed7f30..d75095e 100644 --- a/examples/localization/manual.html +++ b/examples/localization/manual.html @@ -25,6 +25,9 @@
  • Localized Manual Examples
    • +
  • + Angular Translate filter Example +
    • diff --git a/less/nya-bs-select.less b/less/nya-bs-select.less index 569d445..74d1688 100644 --- 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; } diff --git a/src/nya-bs-select.js b/src/nya-bs-select.js index cda1df3..de166a3 100644 --- a/src/nya-bs-select.js +++ b/src/nya-bs-select.js @@ -1,9 +1,10 @@ -nyaBsSelect.directive('nyaBsSelect', ['$parse', '$document', '$timeout', 'nyaBsConfig', function ($parse, $document, $timeout, nyaBsConfig) { +nyaBsSelect.directive('nyaBsSelect', ['$parse', '$document', '$timeout', '$compile', 'nyaBsConfig', function ($parse, $document, $timeout, $compile, nyaBsConfig) { var DEFAULT_NONE_SELECTION = 'Nothing selected'; var DROPDOWN_TOGGLE = ''; @@ -34,7 +35,13 @@ nyaBsSelect.directive('nyaBsSelect', ['$parse', '$document', '$timeout', 'nyaBsC tElement.addClass('btn-group'); - var getDefaultNoneSelectionContent = function() { + + /** + * get the default text when nothing is selected. can be template + * @param scope, if provided, will try to compile template with given scope, will not attempt to compile the pure text. + * @returns {*} + */ + var getDefaultNoneSelectionContent = function(scope) { // text node or jqLite element. var content; @@ -54,6 +61,12 @@ nyaBsSelect.directive('nyaBsSelect', ['$parse', '$document', '$timeout', 'nyaBsC // use default. content = document.createTextNode(DEFAULT_NONE_SELECTION); } + + if(scope && (tAttrs.titleTpl || localizedText.defaultNoneSelectionTpl)) { + console.log('compiled'); + return $compile(content)(scope); + } + return content; }; @@ -149,7 +162,7 @@ nyaBsSelect.directive('nyaBsSelect', ['$parse', '$document', '$timeout', 'nyaBsC } // set default none selection text - dropdownToggle.children().eq(0).append(getDefaultNoneSelectionContent()); + jqLite(dropdownToggle[0].querySelector('.special-title')).append(getDefaultNoneSelectionContent()); dropdownContainer.append(dropdownMenu); @@ -168,12 +181,12 @@ nyaBsSelect.directive('nyaBsSelect', ['$parse', '$document', '$timeout', 'nyaBsC isMultiple = typeof $attrs.multiple !== 'undefined'; // find element from current $element root. because the compiled element may be detached from DOM tree by ng-if or ng-switch. - var dropdownToggle = queryChildren($element, ['dropdown-toggle']), + var dropdownToggle = jqLite($element[0].querySelector('.dropdown-toggle')), dropdownContainer = dropdownToggle.next(), - dropdownMenu = queryChildren(dropdownContainer, ['dropdown-menu', 'inner']), - searchBox = queryChildren(dropdownContainer, ['bs-searchbox']), - noSearchResult = queryChildren(dropdownMenu, ['no-search-result']), - actionsBox = queryChildren(dropdownContainer, ['bs-actionsbox']); + dropdownMenu = jqLite(dropdownContainer[0].querySelector('.dropdown-menu.inner')), + searchBox = jqLite(dropdownContainer[0].querySelector('.bs-searchbox')), + noSearchResult = jqLite(dropdownMenu[0].querySelector('.no-search-result')), + actionsBox = jqLite(dropdownContainer[0].querySelector('.bs-actionsbox')); if(nyaBsSelectCtrl.valueExp) { valueExpFn = function(scope, locals) { @@ -830,19 +843,21 @@ nyaBsSelect.directive('nyaBsSelect', ['$parse', '$document', '$timeout', 'nyaBsC var viewValue = ngCtrl.$viewValue; $element.triggerHandler('change'); - var filterOption = dropdownToggle.children().eq(0); + var filterOption = jqLite(dropdownToggle[0].querySelector('.filter-option')); + var specialTitle = jqLite(dropdownToggle[0].querySelector('.special-title')); if(typeof viewValue === 'undefined') { /** * Select empty option when model is undefined. */ + dropdownToggle.addClass('show-special-title'); filterOption.empty(); - filterOption.append(getDefaultNoneSelectionContent()); return; } if(isMultiple && viewValue.length === 0) { + dropdownToggle.addClass('show-special-title'); filterOption.empty(); - filterOption.append(getDefaultNoneSelectionContent()); } else { + dropdownToggle.removeClass('show-special-title'); $timeout(function() { var bsOptionElements = dropdownMenu.children(), @@ -909,12 +924,14 @@ nyaBsSelect.directive('nyaBsSelect', ['$parse', '$document', '$timeout', 'nyaBsC if(selection.length === 0) { filterOption.empty(); - filterOption.append(getDefaultNoneSelectionContent()); + dropdownToggle.addClass('show-special-title'); } else if(selection.length === 1) { + dropdownToggle.removeClass('show-special-title'); // either single or multiple selection will show the only selected content. filterOption.empty(); filterOption.append(selection[0]); } else { + dropdownToggle.removeClass('show-special-title'); filterOption.empty(); for(index = 0; index < selection.length; index++) { filterOption.append(selection[index]);