mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-07-07 20:02:40 +00:00
Started transfer to angularjs
This commit is contained in:
parent
445f939822
commit
3347b3b2f5
|
@ -5,6 +5,8 @@
|
||||||
"insert-css": "^0.2.0"
|
"insert-css": "^0.2.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"angular": "^1.5.0-rc.0",
|
||||||
|
"angular-resource": "^1.5.0-rc.0",
|
||||||
"babel-runtime": "^5.8.29",
|
"babel-runtime": "^5.8.29",
|
||||||
"bootstrap-sass": "^3.0.0",
|
"bootstrap-sass": "^3.0.0",
|
||||||
"dropzone": "^4.0.1",
|
"dropzone": "^4.0.1",
|
||||||
|
|
4
resources/assets/js/components/toggle-switch.html
Normal file
4
resources/assets/js/components/toggle-switch.html
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
<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>
|
|
@ -1,28 +0,0 @@
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="toggle-switch" @click="switch" :class="{'active': isActive}">
|
|
||||||
<input type="hidden" :name="name" :value="value"/>
|
|
||||||
<div class="switch-handle"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
module.exports = {
|
|
||||||
props: ['name', 'value'],
|
|
||||||
data: function() {
|
|
||||||
return {
|
|
||||||
isActive: this.value == true && this.value != 'false'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
ready: function() {
|
|
||||||
this.value = (this.value == true && this.value != 'false') ? 'true' : 'false';
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
switch: function() {
|
|
||||||
this.isActive = !this.isActive;
|
|
||||||
this.value = this.isActive ? 'true' : 'false';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
32
resources/assets/js/directives.js
Normal file
32
resources/assets/js/directives.js
Normal file
|
@ -0,0 +1,32 @@
|
||||||
|
|
||||||
|
var toggleSwitchTemplate = require('./components/toggle-switch.html');
|
||||||
|
|
||||||
|
module.exports = function(ngApp) {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggle Switches
|
||||||
|
* Have basic on/off functionality.
|
||||||
|
* Use string values of 'true' & 'false' to dictate the current state.
|
||||||
|
*/
|
||||||
|
ngApp.directive('toggleSwitch', function() {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
template: toggleSwitchTemplate,
|
||||||
|
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';
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
};
|
|
@ -1,8 +1,15 @@
|
||||||
|
// Configure ZeroClipboard
|
||||||
window.ZeroClipboard = require('zeroclipboard');
|
window.ZeroClipboard = require('zeroclipboard');
|
||||||
window.ZeroClipboard.config({
|
window.ZeroClipboard.config({
|
||||||
swfPath: '/ZeroClipboard.swf'
|
swfPath: '/ZeroClipboard.swf'
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// AngularJS - Create application and load components
|
||||||
|
var angular = require('angular');
|
||||||
|
var angularResource = require('angular-resource');
|
||||||
|
var app = angular.module('bookStack', ['ngResource']);
|
||||||
|
var directives = require('./directives')(app);
|
||||||
|
|
||||||
// Global jQuery Elements
|
// Global jQuery Elements
|
||||||
$(function () {
|
$(function () {
|
||||||
|
|
||||||
|
@ -23,32 +30,8 @@ $(function () {
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
function elemExists(selector) {
|
|
||||||
return document.querySelector(selector) !== null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// TinyMCE editor
|
// TinyMCE editor
|
||||||
if(elemExists('#html-editor')) {
|
if(elemExists('#html-editor')) {
|
||||||
var tinyMceOptions = require('./pages/page-form');
|
var tinyMceOptions = require('./pages/page-form');
|
||||||
tinymce.init(tinyMceOptions);
|
tinymce.init(tinyMceOptions);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Vue JS elements
|
|
||||||
var Vue = require('vue');
|
|
||||||
Vue.use(require('vue-resource'));
|
|
||||||
|
|
||||||
// Vue Components
|
|
||||||
Vue.component('image-manager', require('./components/image-manager.vue'));
|
|
||||||
Vue.component('image-picker', require('./components/image-picker.vue'));
|
|
||||||
Vue.component('toggle-switch', require('./components/toggle-switch.vue'));
|
|
||||||
|
|
||||||
// Vue Controllers
|
|
||||||
if(elemExists('#book-dashboard')) {
|
|
||||||
new Vue(require('./pages/book-show'));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Global Vue Instance
|
|
||||||
// Needs to be loaded after all components we want to use.
|
|
||||||
var app = new Vue({
|
|
||||||
el: '#app'
|
|
||||||
});
|
|
|
@ -19,7 +19,7 @@
|
||||||
|
|
||||||
@yield('head')
|
@yield('head')
|
||||||
</head>
|
</head>
|
||||||
<body class="@yield('body-class')" id="app">
|
<body class="@yield('body-class')" ng-app="bookStack">
|
||||||
|
|
||||||
@include('partials/notifications')
|
@include('partials/notifications')
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user