Зуев Егор / wiki.dev

Go to a project
Toggle navigation
Toggle navigation pinning
Dan Brown
242dc218 1 parent 08c4b9ac

Converted toggle switch into a blade/jquery template

Inline Side-by-side
Showing 5 changed files with 21 additions and 40 deletions
...@@ -5,36 +5,6 @@ import markdown from "marked"; ...@@ -5,36 +5,6 @@ import markdown from "marked";
5 export default function (ngApp, events) { 5 export default function (ngApp, events) {
6 6
7 /** 7 /**
8 - * Toggle Switches
9 - * Has basic on/off functionality.
10 - * Use string values of 'true' & 'false' to dictate the current state.
11 - */
12 - ngApp.directive('toggleSwitch', function () {
13 - return {
14 - restrict: 'A',
15 - template: `
16 - <div class="toggle-switch" ng-click="switch()" ng-class="{'active': isActive}">
17 - <input type="hidden" ng-attr-name="{{name}}" ng-attr-value="{{value}}"/>
18 - <div class="switch-handle"></div>
19 - </div>
20 - `,
21 - scope: true,
22 - link: function (scope, element, attrs) {
23 - scope.name = attrs.name;
24 - scope.value = attrs.value;
25 - scope.isActive = scope.value == true && scope.value != 'false';
26 - scope.value = (scope.value == true && scope.value != 'false') ? 'true' : 'false';
27 -
28 - scope.switch = function () {
29 - scope.isActive = !scope.isActive;
30 - scope.value = scope.isActive ? 'true' : 'false';
31 - }
32 -
33 - }
34 - };
35 - });
36 -
37 - /**
38 * Common tab controls using simple jQuery functions. 8 * Common tab controls using simple jQuery functions.
39 */ 9 */
40 ngApp.directive('tabContainer', function() { 10 ngApp.directive('tabContainer', function() {
......
...@@ -149,6 +149,18 @@ $(function () { ...@@ -149,6 +149,18 @@ $(function () {
149 window.open($(this).attr('href')); 149 window.open($(this).attr('href'));
150 }); 150 });
151 151
152 + // Toggle Switches
153 + let $switches = $('[toggle-switch]');
154 + if ($switches.length > 0) {
155 + $switches.click(event => {
156 + let $switch = $(event.target);
157 + let input = $switch.find('input').first()[0];
158 + let checked = input.value !== 'true';
159 + input.value = checked ? 'true' : 'false';
160 + $switch.toggleClass('active', checked);
161 + });
162 + }
163 +
152 // Detect IE for css 164 // Detect IE for css
153 if(navigator.userAgent.indexOf('MSIE')!==-1 165 if(navigator.userAgent.indexOf('MSIE')!==-1
154 || navigator.appVersion.indexOf('Trident/') > 0 166 || navigator.appVersion.indexOf('Trident/') > 0
......
...@@ -267,9 +267,4 @@ input.outline { ...@@ -267,9 +267,4 @@ input.outline {
267 267
268 .image-picker img { 268 .image-picker img {
269 background-color: #BBB; 269 background-color: #BBB;
270 -}
271 -
272 -div[toggle-switch] {
273 - height: 18px;
274 - width: 150px;
275 } 270 }
...\ No newline at end of file ...\ No newline at end of file
......
1 +<div toggle-switch class="toggle-switch @if($value) active @endif">
2 + <input type="hidden" name="{{$name}}" value="{{$value?'true':'false'}}"/>
3 + <div class="switch-handle"></div>
4 +</div>
...\ No newline at end of file ...\ No newline at end of file
...@@ -23,16 +23,16 @@ ...@@ -23,16 +23,16 @@
23 </div> 23 </div>
24 <div class="form-group"> 24 <div class="form-group">
25 <label>{{ trans('settings.app_name_header') }}</label> 25 <label>{{ trans('settings.app_name_header') }}</label>
26 - <div toggle-switch name="setting-app-name-header" value="{{ setting('app-name-header') }}"></div> 26 + @include('components.toggle-switch', ['name' => 'setting-app-name-header', 'value' => setting('app-name-header')])
27 </div> 27 </div>
28 <div class="form-group"> 28 <div class="form-group">
29 <label for="setting-app-public">{{ trans('settings.app_public_viewing') }}</label> 29 <label for="setting-app-public">{{ trans('settings.app_public_viewing') }}</label>
30 - <div toggle-switch name="setting-app-public" value="{{ setting('app-public') }}"></div> 30 + @include('components.toggle-switch', ['name' => 'setting-app-public', 'value' => setting('app-public')])
31 </div> 31 </div>
32 <div class="form-group"> 32 <div class="form-group">
33 <label>{{ trans('settings.app_secure_images') }}</label> 33 <label>{{ trans('settings.app_secure_images') }}</label>
34 <p class="small">{{ trans('settings.app_secure_images_desc') }}</p> 34 <p class="small">{{ trans('settings.app_secure_images_desc') }}</p>
35 - <div toggle-switch name="setting-app-secure-images" value="{{ setting('app-secure-images') }}"></div> 35 + @include('components.toggle-switch', ['name' => 'setting-app-secure-images', 'value' => setting('app-secure-images')])
36 </div> 36 </div>
37 <div class="form-group"> 37 <div class="form-group">
38 <label for="setting-app-editor">{{ trans('settings.app_editor') }}</label> 38 <label for="setting-app-editor">{{ trans('settings.app_editor') }}</label>
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
74 <div class="col-md-6"> 74 <div class="col-md-6">
75 <div class="form-group"> 75 <div class="form-group">
76 <label for="setting-registration-enabled">{{ trans('settings.reg_allow') }}</label> 76 <label for="setting-registration-enabled">{{ trans('settings.reg_allow') }}</label>
77 - <div toggle-switch name="setting-registration-enabled" value="{{ setting('registration-enabled') }}"></div> 77 + @include('components.toggle-switch', ['name' => 'setting-registration-enabled', 'value' => setting('registration-enabled')])
78 </div> 78 </div>
79 <div class="form-group"> 79 <div class="form-group">
80 <label for="setting-registration-role">{{ trans('settings.reg_default_role') }}</label> 80 <label for="setting-registration-role">{{ trans('settings.reg_default_role') }}</label>
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
91 <div class="form-group"> 91 <div class="form-group">
92 <label for="setting-registration-confirmation">{{ trans('settings.reg_confirm_email') }}</label> 92 <label for="setting-registration-confirmation">{{ trans('settings.reg_confirm_email') }}</label>
93 <p class="small">{{ trans('settings.reg_confirm_email_desc') }}</p> 93 <p class="small">{{ trans('settings.reg_confirm_email_desc') }}</p>
94 - <div toggle-switch name="setting-registration-confirmation" value="{{ setting('registration-confirmation') }}"></div> 94 + @include('components.toggle-switch', ['name' => 'setting-registration-confirmation', 'value' => setting('registration-confirmation')])
95 </div> 95 </div>
96 </div> 96 </div>
97 <div class="col-md-6"> 97 <div class="col-md-6">
......