Converted toggle switch into a blade/jquery template

diff --git a/resources/assets/js/directives.js b/resources/assets/js/directives.js
index 28c4f6e17ed702cd50c26850ecea277fab4a68da..0ff7c0fcca8c3e920df87f8edcebb09ad73ad443 100644 (file)
--- a/resources/assets/js/directives.js
+++ b/resources/assets/js/directives.js
@@ -4,36 +4,6 @@ import markdown from "marked";
 
 export default function (ngApp, events) {
 
-    /**
-     * Toggle Switches
-     * Has basic on/off functionality.
-     * Use string values of 'true' & 'false' to dictate the current state.
-     */
-    ngApp.directive('toggleSwitch', function () {
-        return {
-            restrict: 'A',
-            template: `
-            <div class="toggle-switch" ng-click="switch()" ng-class="{'active': isActive}">
-                <input type="hidden" ng-attr-name="{{name}}" ng-attr-value="{{value}}"/>
-                <div class="switch-handle"></div>
-            </div>
-            `,
-            scope: true,
-            link: function (scope, element, attrs) {
-                scope.name = attrs.name;
-                scope.value = attrs.value;
-                scope.isActive = scope.value == true && scope.value != 'false';
-                scope.value = (scope.value == true && scope.value != 'false') ? 'true' : 'false';
-
-                scope.switch = function () {
-                    scope.isActive = !scope.isActive;
-                    scope.value = scope.isActive ? 'true' : 'false';
-                }
-
-            }
-        };
-    });
-
     /**
      * Common tab controls using simple jQuery functions.
      */

diff --git a/resources/assets/js/global.js b/resources/assets/js/global.js
index 0f2bbbf205e913102f85d5c7ff00c34f7439700a..537a43a4eff3a555f6cfafe4f24a26a276196e74 100644 (file)
--- a/resources/assets/js/global.js
+++ b/resources/assets/js/global.js
@@ -149,6 +149,18 @@ $(function () {
         window.open($(this).attr('href'));
     });
 
+    // Toggle Switches
+    let $switches = $('[toggle-switch]');
+    if ($switches.length > 0) {
+        $switches.click(event => {
+           let $switch = $(event.target);
+           let input = $switch.find('input').first()[0];
+           let checked = input.value !== 'true';
+           input.value = checked ? 'true' : 'false';
+           $switch.toggleClass('active', checked);
+        });
+    }
+
     // Detect IE for css
     if(navigator.userAgent.indexOf('MSIE')!==-1
         || navigator.appVersion.indexOf('Trident/') > 0

diff --git a/resources/assets/sass/_forms.scss b/resources/assets/sass/_forms.scss
index 4e643dcdaa5ab9de5ec6be9ec8ef4c6881d34c07..62a7b400122cc37cdc1adef0251d5e10b5ebb39c 100644 (file)
--- a/resources/assets/sass/_forms.scss
+++ b/resources/assets/sass/_forms.scss
@@ -267,9 +267,4 @@ input.outline {
 
 .image-picker img {
   background-color: #BBB;
-}
-
-div[toggle-switch] {
-  height: 18px;
-  width: 150px;
 }
\ No newline at end of file

diff --git a/resources/views/components/toggle-switch.blade.php b/resources/views/components/toggle-switch.blade.php
new file mode 100644 (file)
index 0000000..b20b74d
--- /dev/null
+++ b/resources/views/components/toggle-switch.blade.php
@@ -0,0 +1,4 @@
+<div toggle-switch class="toggle-switch @if($value) active @endif">
+    <input type="hidden" name="{{$name}}" value="{{$value?'true':'false'}}"/>
+    <div class="switch-handle"></div>
+</div>
\ No newline at end of file

diff --git a/resources/views/settings/index.blade.php b/resources/views/settings/index.blade.php
index 8ad2195072fe8b3473be901123dc5e7f5979b4c1..2e9d5ce8ce9da31d0586e184dd7216f2fec3a662 100644 (file)
--- a/resources/views/settings/index.blade.php
+++ b/resources/views/settings/index.blade.php
@@ -23,16 +23,16 @@
                 </div>
                 <div class="form-group">
                     <label>{{ trans('settings.app_name_header') }}</label>
-                    <div toggle-switch name="setting-app-name-header" value="{{ setting('app-name-header') }}"></div>
+                    @include('components.toggle-switch', ['name' => 'setting-app-name-header', 'value' => setting('app-name-header')])
                 </div>
                 <div class="form-group">
                     <label for="setting-app-public">{{ trans('settings.app_public_viewing') }}</label>
-                    <div toggle-switch name="setting-app-public" value="{{ setting('app-public') }}"></div>
+                    @include('components.toggle-switch', ['name' => 'setting-app-public', 'value' => setting('app-public')])
                 </div>
                 <div class="form-group">
                     <label>{{ trans('settings.app_secure_images') }}</label>
                     <p class="small">{{ trans('settings.app_secure_images_desc') }}</p>
-                    <div toggle-switch name="setting-app-secure-images" value="{{ setting('app-secure-images') }}"></div>
+                    @include('components.toggle-switch', ['name' => 'setting-app-secure-images', 'value' => setting('app-secure-images')])
                 </div>
                 <div class="form-group">
                     <label for="setting-app-editor">{{ trans('settings.app_editor') }}</label>
@@ -74,7 +74,7 @@
             <div class="col-md-6">
                 <div class="form-group">
                     <label for="setting-registration-enabled">{{ trans('settings.reg_allow') }}</label>
-                    <div toggle-switch name="setting-registration-enabled" value="{{ setting('registration-enabled') }}"></div>
+                    @include('components.toggle-switch', ['name' => 'setting-registration-enabled', 'value' => setting('registration-enabled')])
                 </div>
                 <div class="form-group">
                     <label for="setting-registration-role">{{ trans('settings.reg_default_role') }}</label>
@@ -91,7 +91,7 @@
                 <div class="form-group">
                     <label for="setting-registration-confirmation">{{ trans('settings.reg_confirm_email') }}</label>
                     <p class="small">{{ trans('settings.reg_confirm_email_desc') }}</p>
-                    <div toggle-switch name="setting-registration-confirmation" value="{{ setting('registration-confirmation') }}"></div>
+                    @include('components.toggle-switch', ['name' => 'setting-registration-confirmation', 'value' => setting('registration-confirmation')])
                 </div>
             </div>
             <div class="col-md-6">