diff --git a/package.json b/package.json
index 2797cf0c8..acbb6f8fa 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/resources/assets/js/components/toggle-switch.html b/resources/assets/js/components/toggle-switch.html
new file mode 100644
index 000000000..455969a84
--- /dev/null
+++ b/resources/assets/js/components/toggle-switch.html
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/resources/assets/js/components/toggle-switch.vue b/resources/assets/js/components/toggle-switch.vue
deleted file mode 100644
index 082428bac..000000000
--- a/resources/assets/js/components/toggle-switch.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/resources/assets/js/directives.js b/resources/assets/js/directives.js
new file mode 100644
index 000000000..a5f45b589
--- /dev/null
+++ b/resources/assets/js/directives.js
@@ -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';
+ }
+
+ }
+ };
+ });
+
+
+};
\ No newline at end of file
diff --git a/resources/assets/js/global.js b/resources/assets/js/global.js
index a3a2acf3b..1dfc2b6bb 100644
--- a/resources/assets/js/global.js
+++ b/resources/assets/js/global.js
@@ -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'
-});
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/resources/views/base.blade.php b/resources/views/base.blade.php
index 553c634cb..e8958f629 100644
--- a/resources/views/base.blade.php
+++ b/resources/views/base.blade.php
@@ -19,7 +19,7 @@
@yield('head')
-
+
@include('partials/notifications')