mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-25 11:45:58 +00:00
Converted toggle switch into a blade/jquery template
This commit is contained in:
parent
08c4b9ac7c
commit
242dc21876
@ -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.
|
||||
*/
|
||||
|
@ -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
|
||||
|
@ -267,9 +267,4 @@ input.outline {
|
||||
|
||||
.image-picker img {
|
||||
background-color: #BBB;
|
||||
}
|
||||
|
||||
div[toggle-switch] {
|
||||
height: 18px;
|
||||
width: 150px;
|
||||
}
|
4
resources/views/components/toggle-switch.blade.php
Normal file
4
resources/views/components/toggle-switch.blade.php
Normal file
@ -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>
|
@ -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">
|
||||
|
Loading…
Reference in New Issue
Block a user