Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-08-25 11:45:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Converted toggle switch into a blade/jquery template

Browse Source
This commit is contained in:
Dan Brown 2016-12-22 19:41:32 +00:00
parent 08c4b9ac7c
commit 242dc21876
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
5 changed files with 21 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
resources/assets/js/directives.js
View File

@ -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.
*/

12
resources/assets/js/global.js
View File

@ -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

5
resources/assets/sass/_forms.scss
View File

@ -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
View 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>

10
resources/views/settings/index.blade.php
View 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">