From 40f1d88b0b8c299b82dfe95d2764ffbb49fb1f87 Mon Sep 17 00:00:00 2001 From: Anthony Truskinger Date: Sat, 12 Jul 2014 00:50:09 +1000 Subject: [PATCH] Created a toggle switch component. Just needs some final tweaking before merging. Gruntfile modified to include html templates from the components folder --- Gruntfile.js | 10 +- build.config.js | 2 +- src/app/app.js | 1 + src/app/home/home.tpl.html | 41 ++++ .../directives/baw-toggle/_bawToggle.scss | 177 ++++++++++++++++++ .../directives/baw-toggle/bawToggle.js | 91 +++++++++ .../directives/baw-toggle/bawToggle.spec.js | 0 .../baw-toggle/bawToggleTemplate.tpl.html | 16 ++ src/sass/application.tpl.scss | 2 +- 9 files changed, 331 insertions(+), 9 deletions(-) create mode 100644 src/components/directives/baw-toggle/_bawToggle.scss create mode 100644 src/components/directives/baw-toggle/bawToggle.js create mode 100644 src/components/directives/baw-toggle/bawToggle.spec.js create mode 100644 src/components/directives/baw-toggle/bawToggleTemplate.tpl.html diff --git a/Gruntfile.js b/Gruntfile.js index 9ab6ac02..a16dbcc1 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -434,11 +434,11 @@ module.exports = function (grunt) { }, /** - * These are the templates from `src/common`. + * These are the templates from `src/common` or `src/components`. */ common: { options: { - base: 'src/common' + base: 'src' }, src: [ '<%= app_files.ctpl %>' ], dest: '<%= build_dir %>/templates-common.js' @@ -648,10 +648,6 @@ module.exports = function (grunt) { /** * When the CSS files change, we need to compile and minify them. */ - // less: { - // files: [ 'src/**/*.less' ], - // tasks: [ 'recess:build' ] - // }, sass: { files: [ 'src/**/*.scss' ], tasks: ['sass:build', 'concat:build_css'] @@ -768,7 +764,7 @@ module.exports = function (grunt) { grunt.renameTask('sass', 'sassReal'); grunt.registerTask('sassTemplate', 'Transforming sass file', function () { var mainScss = grunt.config('app_files.sass'); - var processedScss = path.join(path.dirname(mainScss), path.basename(mainScss, ".tpl.scss")) + ".processed.scss"; + var processedScss = path.join(path.dirname(mainScss), path.basename(mainScss, ".tpl.scss")) + ".scss.processed"; grunt.config.set('app_files.processedSass', processedScss); grunt.log.write("Temp file: " + processedScss); diff --git a/build.config.js b/build.config.js index 85d60ae7..a634ffb8 100644 --- a/build.config.js +++ b/build.config.js @@ -51,7 +51,7 @@ module.exports = { jsunit: [ 'src/**/*.spec.js' ], atpl: [ 'src/app/**/*.tpl.html' ], - ctpl: [ 'src/common/**/*.tpl.html' ], + ctpl: [ 'src/common/**/*.tpl.html', 'src/components/**/*.tpl.html' ], html: [ 'src/index.html'], sass: [ 'src/sass/application.tpl.scss' ] diff --git a/src/app/app.js b/src/app/app.js index 54b75518..07b899ce 100644 --- a/src/app/app.js +++ b/src/app/app.js @@ -69,6 +69,7 @@ var app = angular.module('baw', 'bawApp.directives', /* our directives.js */ 'bawApp.directives.ngAudio', /* our directives.js */ + 'bawApp.directives.toggleSwitch', 'bawApp.filters', /* our filters.js */ 'bawApp.services', /* our services.js */ 'bawApp.services.unitConverter', diff --git a/src/app/home/home.tpl.html b/src/app/home/home.tpl.html index 68b4d058..c0d27471 100644 --- a/src/app/home/home.tpl.html +++ b/src/app/home/home.tpl.html @@ -43,5 +43,46 @@

Experiments

Download annotations

+ + +
+ + + on + + + off + + + knobbbbbb + + +
+ + + + on + + + offfffff + + + knob + + + +
+ +
+ +
+ + + +
diff --git a/src/components/directives/baw-toggle/_bawToggle.scss b/src/components/directives/baw-toggle/_bawToggle.scss new file mode 100644 index 00000000..d40da21b --- /dev/null +++ b/src/components/directives/baw-toggle/_bawToggle.scss @@ -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 { + } + +} \ No newline at end of file diff --git a/src/components/directives/baw-toggle/bawToggle.js b/src/components/directives/baw-toggle/bawToggle.js new file mode 100644 index 00000000..c68b4432 --- /dev/null +++ b/src/components/directives/baw-toggle/bawToggle.js @@ -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; + } + }; + } + }; + }); \ No newline at end of file diff --git a/src/components/directives/baw-toggle/bawToggle.spec.js b/src/components/directives/baw-toggle/bawToggle.spec.js new file mode 100644 index 00000000..e69de29b diff --git a/src/components/directives/baw-toggle/bawToggleTemplate.tpl.html b/src/components/directives/baw-toggle/bawToggleTemplate.tpl.html new file mode 100644 index 00000000..a9ddddcd --- /dev/null +++ b/src/components/directives/baw-toggle/bawToggleTemplate.tpl.html @@ -0,0 +1,16 @@ +
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
diff --git a/src/sass/application.tpl.scss b/src/sass/application.tpl.scss index cdc5b086..9e4bf78f 100644 --- a/src/sass/application.tpl.scss +++ b/src/sass/application.tpl.scss @@ -45,7 +45,7 @@ $DEBUG: '<%= build_configs.current.key === "development" %>' == 'true'; @import "../app/sites/sites"; @import "../app/tags/tags"; @import "../app/birdWalks/birdWalks"; - +@import "../components/directives/baw-toggle/_bawToggle.scss";