Зуев Егор / wiki.dev

Go to a project
Toggle navigation
Toggle navigation pinning
Dan Brown
3347b3b2 1 parent 445f9398

Started transfer to angularjs

Inline Side-by-side
Showing 6 changed files with 46 additions and 53 deletions
......@@ -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",
......
<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
<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
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
// 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);
}
\ No newline at end of file
// 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
......
......@@ -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')
......