github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-11-23 02:00:26 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Started transfer to angularjs

Browse Source
This commit is contained in:
Dan Brown 2015-12-29 16:39:25 +00:00
parent 445f939822
commit 3347b3b2f5
6 changed files with 47 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -5,6 +5,8 @@
"insert-css": "^0.2.0"
},
"dependencies": {
"angular": "^1.5.0-rc.0",
"angular-resource": "^1.5.0-rc.0",
"babel-runtime": "^5.8.29",
"bootstrap-sass": "^3.0.0",
"dropzone": "^4.0.1",

4
resources/assets/js/components/toggle-switch.html Normal file
View 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>

28
resources/assets/js/components/toggle-switch.vue
View File

@ -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
View 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';
}
}
};
});
};

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

@ -1,8 +1,15 @@
// Configure ZeroClipboard
window.ZeroClipboard = require('zeroclipboard');
window.ZeroClipboard.config({
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
$(function () {
@ -23,32 +30,8 @@ $(function () {
});
function elemExists(selector) {
return document.querySelector(selector) !== null;
}
// TinyMCE editor
if(elemExists('#html-editor')) {
var tinyMceOptions = require('./pages/page-form');
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'
});
}

2
resources/views/base.blade.php
View File

@ -19,7 +19,7 @@
@yield('head')
</head>
<body class="@yield('body-class')" id="app">
<body class="@yield('body-class')" ng-app="bookStack">
@include('partials/notifications')