Зуев Егор / 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";
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.
*/
ngApp.directive('tabContainer', function() {
......
......@@ -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
......
......@@ -268,8 +268,3 @@ input.outline {
.image-picker img {
background-color: #BBB;
}
\ No newline at end of file
div[toggle-switch] {
height: 18px;
width: 150px;
}
\ No newline at end of file
......
<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
......@@ -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">
......