diff --git a/bower.json b/bower.json index 08f765c..d9dba24 100755 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "angular-bootstrap-toggle", "description": "AngularJS version of Bootstrap Toggle", - "version": "0.1.2", + "version": "0.4.0", "keywords": [ "angular", "toggle", @@ -25,13 +25,13 @@ "**/.*" ], "dependencies": { - "angular": ">=1.3.0", + "angular": ">=1.7.0", "bootstrap": ">=3.2.0" }, "devDependencies": { - "angular-mocks": ">=1.3.0", - "angular-scenario": ">=1.3.0", - "angular": ">=1.3.0" + "angular-mocks": ">=1.7.0", + "angular-scenario": ">=1.7.0", + "angular": ">=1.7.0" }, "license": "MIT" } diff --git a/css/stylesheet.css b/css/stylesheet.css new file mode 100644 index 0000000..1343d90 --- /dev/null +++ b/css/stylesheet.css @@ -0,0 +1,112 @@ +header, footer { + padding: 20px; + background-image: url('../img/header.png'); + background-size: 256px 256px; +} +footer { + color: #fff; + text-align: center; +} +.nyt-logo { + max-height: 40px; + margin-top: 5px; + margin-right: 5px; +} + +nav.navbar { + margin-bottom: 10px; + background-color: #fff; + border: 0px; + border-radius: 2px; +} +#navbar { + margin: 0px; +} +#navbar .navbar-nav li iframe { + margin-top: 15px; +} +#navbar .navbar-nav li:last-child iframe { + margin-right: 15px; +} + +@media screen and (max-width: 767px) { + #navbar .navbar-nav li iframe { + display: none; + } +} + +.mast-head { + margin: 10px 0; +} +.mast-head h1 { + margin-bottom: 15px; + color: #fff; +} +.mast-head p { + color: #fff; +} + +.mast-links { + padding-top: 10px; +} + +.mast-links > * { + vertical-align: middle; + margin-bottom: 10px; +} + +.mast-links > .btn { + margin-right: 30px; +} +main { + margin: 10px 20px; +} +main .container { + margin-bottom: 40px; +} + +code.hljs { + border: 1px solid #ccc; + padding: 1em; + white-space: pre; + margin-bottom: 10px; +} + +.example { + position: relative; + border: 1px solid #ccc; + padding: 1em 1em 0.5em 1em; + border-radius: 4px 4px 0 0; +} + +.example:after { + content: "Example"; + position: absolute; + top: 0px; + right: 0px; + padding: 3px 7px; + font-size: 12px; + font-weight: bold; + background-color: #f5f5f5; + border: 1px solid #ccc; + color: #9da0a4; + border-radius: 0px 4px 0px 4px; + border-width: 0px 0px 1px 1px; +} + +.example + code.hljs { + border-top: 0; + border-radius: 0px 0px 4px 4px; +} + +.example > * { + margin-bottom: 10px; +} + +.example > div.toggle { + margin-right: 10px; +} + +.table-striped code { + background-color: inherit; +} \ No newline at end of file diff --git a/dist/angular-bootstrap-toggle.css b/dist/angular-bootstrap-toggle.css index 7e485aa..c66e3b4 100644 --- a/dist/angular-bootstrap-toggle.css +++ b/dist/angular-bootstrap-toggle.css @@ -4,7 +4,6 @@ margin-right: 5px; } .toggle { - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; position: relative; overflow: hidden; } @@ -51,46 +50,27 @@ width: 0px; border-width: 0 1px; } -.toggle.btn { - min-width: 59px; - min-height: 34px; +.toggle-on-pad.btn.btn-lg { + padding-right: 32px; } -.toggle-on.btn { +.toggle-off-pad.btn.btn-lg { + padding-left: 32px; +} +.toggle-on-pad.btn { padding-right: 24px; } -.toggle-off.btn { +.toggle-off-pad.btn { padding-left: 24px; } -.toggle.btn-lg { - min-width: 79px; - min-height: 45px; -} -.toggle-on.btn-lg { - padding-right: 31px; -} -.toggle-off.btn-lg { - padding-left: 31px; -} -.toggle-handle.btn-lg { - width: 40px; -} -.toggle.btn-sm { - min-width: 50px; - min-height: 30px; -} -.toggle-on.btn-sm { +.toggle-on-pad.btn.btn-sm { padding-right: 20px; } -.toggle-off.btn-sm { +.toggle-off-pad.btn.btn-sm { padding-left: 20px; } -.toggle.btn-xs { - min-width: 35px; - min-height: 22px; -} -.toggle-on.btn-xs { - padding-right: 12px; +.toggle-on-pad.btn.btn-xs { + padding-right: 9px; } -.toggle-off.btn-xs { - padding-left: 12px; +.toggle-off-pad.btn.btn-xs { + padding-left: 9px; } diff --git a/dist/angular-bootstrap-toggle.js b/dist/angular-bootstrap-toggle.js index 20ef38f..b5ea46e 100644 --- a/dist/angular-bootstrap-toggle.js +++ b/dist/angular-bootstrap-toggle.js @@ -1,177 +1,289 @@ (function () { - 'use strict'; - - angular.module('ui.toggle', []) - - .value('$toggleSuppressError', false) - - .constant('toggleConfig', { - /** - * Type: string/html - * Default: "On" - * Description: Text of the on toggle - */ - on: 'On', - /** - * Type: string/html - * Default: "Off" - * Description: Text of the off toggle - */ - off: 'Off', - /** - * Type: string - * Default: '' - * Description: Size of the toggle. - * Possible values are btn-lg, btn-sm, btn-xs. - */ - size: '', - /** - * Type: string - * Default: "btn-primary" - * Description: Style of the on toggle. - * Possible values are btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger - */ - onstyle: 'btn-primary', - /** - * Type: string - * Default: "btn-default" - * Description: Style of the off toggle. - * Possible values are btn-default, btn-primary,btn- success, btn-info, btn-warning, btn-danger - */ - offstyle: 'btn-default', - /** - * Type: string - * Default: '' - * Description: Appends the value to the class attribute of the toggle. - * This can be used to apply custom styles. Refer to Custom Styles for reference. - */ - style: '' - }) - - .controller('ToggleController', - ['$scope', '$attrs', '$interpolate', '$log', 'toggleConfig', '$toggleSuppressError', - function ($scope, $attrs, $interpolate, $log, toggleConfig, $toggleSuppressError) { - var self = this, - ngModelCtrl = {$setViewValue: angular.noop}; - - // Configuration attributes - angular.forEach(['on', 'off', 'size', 'onstyle', 'offstyle', 'style'], function (key, index) { - self[key] = angular.isDefined($attrs[key]) ? - (index < 6 ? $interpolate($attrs[key])($scope.$parent) : $scope.$parent.$eval($attrs[key])) : - toggleConfig[key]; - }); - - this.init = function (ngModelCtrl_) { - ngModelCtrl = ngModelCtrl_; - - self.computeStyle(); - - ngModelCtrl.$render = function () { - self.toggle(); - }; - - ngModelCtrl.$viewChangeListeners.push(function () { - $scope.$eval($attrs.ngChange); - }); - }; - - this.computeStyle = function () { - var labels = self.element.find('label'); - angular.element(labels[0]).html(self.on); - angular.element(labels[1]).html(self.off); - var spans = self.element.find('span'); - var wrapperComputedWidth = self.width || Math.max(labels[0].offsetWidth, labels[1].offsetWidth) + - (spans[0].offsetWidth / 2); - var wrapperComputedHeight = self.height || Math.max(labels[0].offsetHeight, labels[1].offsetHeight); - - var divs = self.element.find('div'); - var wrapperWidth = divs[0].offsetWidth; - var wrapperHeight = divs[1].offsetHeight; - - $scope.wrapperStyle = {}; - if (wrapperWidth < wrapperComputedWidth) { - $scope.wrapperStyle.width = wrapperComputedWidth + 'px'; - } else { - $scope.wrapperStyle.width = wrapperWidth + 'px'; - } + 'use strict'; - if (wrapperHeight < wrapperComputedHeight && self.size !== 'btn-xs' && self.size !== 'btn-sm') { - $scope.wrapperStyle.height = wrapperComputedHeight + 'px'; - } else { - $scope.wrapperStyle.height = wrapperHeight + 'px'; - } + angular.module('ui.toggle', []) - $scope.onClass = [self.onstyle, self.size, 'toggle-on']; - $scope.offClass = [self.offstyle, self.size, 'toggle-off']; - $scope.handleClass = [self.size, 'toggle-handle']; - }; + .value('$toggleSuppressError', false) - this.toggle = function () { - if (angular.isDefined(ngModelCtrl.$viewValue)) { - this.isOn = ngModelCtrl.$viewValue; - } else { - this.isOn = false; - } - if (this.isOn) { - $scope.wrapperClass = [self.onstyle, self.size, self.style]; - } else { - $scope.wrapperClass = [self.offstyle, 'off ', self.size, self.style]; - } - }; - - $scope.onSwitch = function (evt) { - ngModelCtrl.$setViewValue(!ngModelCtrl.$viewValue); - ngModelCtrl.$render(); - }; - - // Watchable date attributes - angular.forEach(['ngModel'], function (key) { - var watch = $scope.$parent.$watch($attrs[key], function (value) { - ngModelCtrl.$render(); - }); - $scope.$parent.$on('$destroy', function () { - watch(); - }); - }); - - angular.forEach(['on', 'off', 'size', 'onstyle', 'offstyle', 'style'], function (key) { - $attrs.$observe(key, function (val) { - if (self[key] !== val) { - self[key] = val; - self.computeStyle(); - } - }); - }); - }]) - - .directive('toggle', function () { - return { - restrict: 'E', - transclude: true, - template: '
' + - '
' + - '' + - '' + - '' + - '
' + - '
', - scope: { - bindModel: '=ngModel' - }, - require: ['toggle', 'ngModel'], - controller: 'ToggleController', - controllerAs: 'toggle', - compile: function (element, attrs, transclude) { - return { - pre: function (scope, element, attrs, ctrls) { - var toggleCtrl = ctrls[0], ngModelCtrl = ctrls[1]; - toggleCtrl.element = element; - toggleCtrl.init(ngModelCtrl); - }, - post: function () {} + .constant('toggleConfig', { + /** + * This object defines supported toggle widget attributes and their default values. + * Angular's ngClick and ngDisabled are handled separately. Search code below. + */ + /** + * This version simulates checkbox functionality which can have either true or false value. + * User-defined values are not supported. + */ + 'btnCheckboxFalse': false, + 'btnCheckboxTrue' : true, + /** + * Type: string/html + * Default: "On" + * Description: Text of the on toggle + */ + on: 'On', + /** + * Type: string/html + * Default: "Off" + * Description: Text of the off toggle + */ + off: 'Off', + /** + * Type: string + * Default: '' + * Description: Allows to specify one of the standarg bootstrap's button sizes (class). + * Possible values are btn-lg, btn-sm, btn-xs. + */ + size: '', + /** + * Type: string + * Default: "btn-primary" + * Description: Class for "on" state from one of standard bootstrap button types. + * Possible values: btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger + */ + onClass: 'btn-primary', + onstyle: '', /* for backward compatibility only */ + /** + * Type: string + * Default: "btn-default" + * Description: Class for "off" state from one of standard bootstrap button types. + * Possible values: btn-default, btn-primary,btn- success, btn-info, btn-warning, btn-danger + */ + offClass: 'btn-default', + offstyle: '', /* for some backward compatibility only */ + /** + * Type: JSON string + * Default: '' + * Description: Allows to pass user-defined style to the toggle's first immediate child (first DIV inside + * which is what you actually see as widget's outer container). + * This can be used to alter widget's appearance. Use with caution! Note that "width" and "height" values + * will be overwritten by either auto-calculated values or used-specified values from "width" and "height" + * attributes. + * Example: + */ + toggleStyle: '', + /** + * Type: string + * Default: '' + * Description: Passes a class to the toggle's first immediate child + **/ + toggleClass: '', + style: '', + /** + * Type: string + * Default: '' + * Description: Allows to force width and height to specified value. Use css notation such as 50px, 1%. etc. + * This is useful when you have a group of toggles with different text in the lables and, therefore, + * would never line-up to the same width. + * Example: + */ + width : '', + height: '', + /** + * Type: boolean + * Default: false + * Description: Defines "disabled" attribute for the directive itself. The ng-disabled dirrective + * manipulates this attribute, plus there is additional code that propagates its value to child elements. + * Applying "disabled" to itself apparently does nothing, but when its value is propagated to + * two child