Started transfer to angularjs

diff --git a/package.json b/package.json
index 2797cf0c842627dc9c249ce9b7c877eb552ec5ab..acbb6f8facabdecdf8c40f89f305bae9512b8af5 100644 (file)
--- 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 (file)
index 0000000..455969a
--- /dev/null
+++ b/resources/assets/js/components/toggle-switch.html
@@ -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>
\ 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 (file)
index 082428b..0000000
--- a/resources/assets/js/components/toggle-switch.vue
+++ /dev/null
@@ -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>
\ No newline at end of file

diff --git a/resources/assets/js/directives.js b/resources/assets/js/directives.js
new file mode 100644 (file)
index 0000000..a5f45b5
--- /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 a3a2acf3b32e8c7dec5038f4fdfef204890f9b22..1dfc2b6bb21608474e21979cf09b2c6266039e7a 100644 (file)
--- 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 553c634cbeee4ee6097f403f918a59d1161a1d6e..e8958f6296725185eb65f8289e3b860d668cfdb6 100644 (file)
--- a/resources/views/base.blade.php
+++ b/resources/views/base.blade.php
@@ -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')