-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Just needs some final tweaking before merging. Gruntfile modified to include html templates from the components folder
- Loading branch information
Showing
9 changed files
with
331 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,177 @@ | ||
| $on-color-indicator: $brand-success; | ||
| $off-color-indicator: $gray-light; | ||
| $background: $btn-default-bg; | ||
| $border: $btn-default-border; | ||
| $color: $btn-default-color; | ||
| $toggle-switch-height: $line-height-computed + 2px; | ||
| $led-size: 0.5em; | ||
|
|
||
| @mixin toggle-transition($props...) { | ||
| @include vendor-prefix(transition-property, $props); | ||
| @include vendor-prefix(transition-duration, 0.5s); | ||
| @include vendor-prefix(transition-timing-function, easeInOutCubic); | ||
| } | ||
|
|
||
| @mixin small-size { | ||
| padding: 2px 5px; | ||
| line-height: $line-height-small; | ||
| font-size: $font-size-small; | ||
| } | ||
|
|
||
| @mixin height-hide { | ||
| //display: table-row; | ||
| height: 0; | ||
| overflow-y: hidden; | ||
| line-height: 0; | ||
| visibility: hidden; | ||
| padding-top: 0; | ||
| padding-bottom: 0; | ||
| &.active { | ||
| height: auto; | ||
| visibility: visible; | ||
|
|
||
| @include small-size; | ||
| } | ||
| } | ||
|
|
||
| @mixin switch-width { | ||
| display: inline-block; | ||
| width: 50%; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| toggle-switch { | ||
| @include small-size; | ||
|
|
||
| & .toggle-switch-wrapper { | ||
| @extend .btn; | ||
|
|
||
| color: $color; | ||
| background-color: $background; | ||
| border-color: $border; | ||
| padding: 0; | ||
| margin: 0; | ||
| height: $toggle-switch-height; | ||
| overflow: hidden; | ||
| @include toggle-transition(border-color); | ||
|
|
||
| &.on { | ||
| border-color: $btn-success-border; | ||
| @include toggle-transition(border-color); | ||
| } | ||
|
|
||
| .toggle-switch-knob, .toggle-switch-on, .toggle-switch-off, .toggle-switch-status { | ||
| @include small-size; | ||
| } | ||
|
|
||
| &[disabled] { | ||
| @include vendor-prefix(user-select, none); | ||
| cursor: not-allowed; | ||
| background-color: $background; | ||
| border-color: $border; | ||
| } | ||
|
|
||
| &:hover, | ||
| &:focus, | ||
| &:active, | ||
| &.active { | ||
| color: $color; | ||
| background-color: darken($background, 8%); | ||
| border-color: darken($border, 12%); | ||
| } | ||
|
|
||
| // switch group | ||
| & > div { | ||
| display: inline-block; | ||
| font-size: 0; | ||
| margin: 0; | ||
| padding: 0; | ||
| vertical-align: middle; | ||
|
|
||
| } | ||
|
|
||
| // led indicator | ||
| & .toggle-switch-status { | ||
| display: inline-block; | ||
| line-height: 1.0; | ||
|
|
||
| //margin-top: -0.1em; | ||
|
|
||
| & .toggle-switch-status-led { | ||
| border-radius: $led-size / 2.0; | ||
| width: $led-size; | ||
| height: $led-size; | ||
| padding: 0; | ||
| margin: auto 0; | ||
| } | ||
| &.on .toggle-switch-status-led { | ||
| background-color: $on-color-indicator; | ||
| @include vendor-prefix(box-shadow, 0 0 5px $brand-success); | ||
| @include toggle-transition(box-shadow, background-color); | ||
| } | ||
|
|
||
| &.off .toggle-switch-status-led { | ||
| background-color: $off-color-indicator; | ||
| @include toggle-transition(box-shadow, background-color); | ||
| } | ||
|
|
||
| } | ||
|
|
||
| // push mode | ||
| &[mode='push-toggle'] { | ||
| .toggle-switch-knob { | ||
| display: none; | ||
| } | ||
|
|
||
| .toggle-switch-on { | ||
| @include height-hide; | ||
| } | ||
|
|
||
| .toggle-switch-off { | ||
| @include height-hide; | ||
| } | ||
| } | ||
|
|
||
| // slide mode | ||
| &[mode='slide-toggle'] { | ||
| .toggle-switch-status { | ||
| display: none; | ||
| } | ||
|
|
||
| & > div.off { | ||
| @include vendor-prefix(transform, translateX(calc(-50% - 1px))); | ||
| @include toggle-transition(transform); | ||
| } | ||
|
|
||
| & > div.on { | ||
| @include toggle-transition(transform); | ||
| } | ||
|
|
||
| .toggle-switch-knob { | ||
| @include switch-width; | ||
| border: 1px solid $border; | ||
| border-radius: $border-radius-small; | ||
| height: $toggle-switch-height; | ||
| top: -1px; | ||
| position: relative; | ||
| padding-top: 2px; | ||
| width: calc(50% + 1px) | ||
| } | ||
|
|
||
| .toggle-switch-on { | ||
| @include switch-width; | ||
| background-color: rgba(#dff0d8, 0.6); | ||
|
|
||
| } | ||
|
|
||
| .toggle-switch-off { | ||
| @include switch-width; | ||
| } | ||
| } | ||
|
|
||
| } | ||
|
|
||
| & .active { | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| /** | ||
| * A toggle switch control based off | ||
| * https://github.com/cgarvis/angular-toggle-switch/blob/master/angular-toggle-switch.js | ||
| */ | ||
| angular.module("bawApp.directives.toggleSwitch", ["ng"]) | ||
| .directive("toggleSwitchState", function() { | ||
| return { | ||
| restrict: "EAC", | ||
| link: function($scope, element, attributes, controller) { | ||
| console.debug("switch state:link function:", $scope.$id, arguments); | ||
| } | ||
| }; | ||
| }) | ||
| .directive("toggleSwitch", function () { | ||
|
|
||
| return { | ||
| restrict: "E", | ||
| scope: { | ||
| model: "=", | ||
| disabled: "=disabled", | ||
| mode: "@?" | ||
| }, | ||
| templateUrl: "components/directives/baw-toggle/bawToggleTemplate.tpl.html", | ||
| transclude: true, | ||
| link: function linkFunction($scope, $element, attributes, controller, transcludeFunction) { | ||
|
|
||
| console.debug("link function:", $scope.$id); | ||
|
|
||
| var element = $element[0], | ||
| onDiv = element.querySelector(".toggle-switch-on"), | ||
| offDiv = element.querySelector(".toggle-switch-off"), | ||
| knobDiv = element.querySelector(".toggle-switch-knob"); | ||
|
|
||
| transcludeFunction($scope, function (clone) { | ||
| console.debug("transclude function:", arguments); | ||
|
|
||
| // we could filter for elements that are toggle-switch-state | ||
| // but it is easier to just detect the attribute - it's really the only | ||
| // information that is needed. | ||
| clone.toArray().forEach(function (value, index) { | ||
|
|
||
| if (value.nodeType !== (Node.ELEMENT_NODE || 1)) { | ||
| return; | ||
| } | ||
|
|
||
| var switchState; | ||
| if (value.hasAttribute("switch-state")) { | ||
| switchState = value.getAttribute("switch-state"); | ||
| } | ||
| else if (value.hasAttribute("toggle-switch-state")) { | ||
| switchState = value.getAttribute("toggle-switch-state"); | ||
| } | ||
|
|
||
| if (switchState === "on") { | ||
| onDiv.appendChild(value); | ||
| } | ||
| else if (switchState === "off") { | ||
| offDiv.appendChild(value); | ||
| } | ||
| else if (switchState === "knob") { | ||
| knobDiv.appendChild(value); | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
|
|
||
| if (onDiv.innerText === "") { | ||
| onDiv.innerText = "On"; | ||
| } | ||
| if (offDiv.innerText === "") { | ||
| offDiv.innerText = "Off"; | ||
| } | ||
| if (knobDiv.innerText === "") { | ||
| knobDiv.innerText = " "; | ||
| } | ||
| }, | ||
| controller: function($scope, $element, $attrs) { | ||
|
|
||
| console.debug("controller function", $scope.$id); | ||
|
|
||
| $scope.disabled = $scope.disabled || false; | ||
| $scope.modeNormalized = $scope.mode == "push-toggle" ? "push-toggle" : "slide-toggle"; | ||
|
|
||
| $scope.toggle = function toggle() { | ||
| if (!$scope.disabled) { | ||
| $scope.model = !$scope.model; | ||
| } | ||
| }; | ||
| } | ||
| }; | ||
| }); |
Empty file.
16 changes: 16 additions & 0 deletions
16
src/components/directives/baw-toggle/bawToggleTemplate.tpl.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <div class="toggle-switch-wrapper " ng-disabled="disabled" mode="{{modeNormalized}}" ng-click="toggle()" ng-class="{'on': model, 'off': !model}"> | ||
| <div ng-class="{'on': model, 'off': !model}"> | ||
| <div class="toggle-switch-on" ng-class="{'active': model}" > | ||
|
|
||
| </div> | ||
| <div class="toggle-switch-knob" ng-class="{'on': model, 'off': !model}" > | ||
|
|
||
| </div> | ||
| <div class="toggle-switch-off" ng-class="{'active': !model}"> | ||
|
|
||
| </div> | ||
| </div> | ||
| <div class="toggle-switch-status" ng-class="{'on': model, 'off': !model}" > | ||
| <div class="toggle-switch-status-led"></div> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters