diff --git a/bower.json b/bower.json
index 5d991b0f2..06bed0478 100644
--- a/bower.json
+++ b/bower.json
@@ -14,12 +14,9 @@
"tests"
],
"dependencies": {
- "dropzone": "~4.0.1",
"tinymce-dist": "~4.2.1",
"bootstrap": "~3.3.5",
"jquery-sortable": "~0.9.13",
- "material-design-iconic-font": "~2.1.1",
- "vue": "~0.12.10",
- "vue-resource": "~0.1.15"
+ "material-design-iconic-font": "~2.1.1"
}
}
diff --git a/gulpfile.js b/gulpfile.js
index 7974350d1..b7f680a83 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,8 +1,11 @@
var elixir = require('laravel-elixir');
+elixir.config.js.browserify.transformers.push({
+ name: 'vueify',
+ options: {}
+});
elixir(function(mix) {
mix.sass('styles.scss');
- mix.scripts('image-manager.js', 'public/js/image-manager.js');
- mix.browserify(['jquery-extensions.js', 'pages/book-show.js' ,'global.js'], 'public/js/common.js');
+ mix.browserify(['jquery-extensions.js', 'global.js'], 'public/js/common.js');
});
diff --git a/package.json b/package.json
index 5106741e3..af40e256f 100644
--- a/package.json
+++ b/package.json
@@ -3,11 +3,14 @@
"devDependencies": {
"gulp": "^3.8.8",
"insert-css": "^0.2.0",
- "laravel-elixir-livereload": "1.1.3"
+ "laravel-elixir-livereload": "1.1.3",
+ "vueify": "^1.1.5"
},
"dependencies": {
"bootstrap-sass": "^3.0.0",
+ "dropzone": "^4.0.1",
"laravel-elixir": "^3.3.1",
- "vue": "^0.12.16"
+ "vue": "^0.12.16",
+ "vue-resource": "^0.1.16"
}
}
diff --git a/resources/assets/js/components/image-manager.vue b/resources/assets/js/components/image-manager.vue
new file mode 100644
index 000000000..d489768bf
--- /dev/null
+++ b/resources/assets/js/components/image-manager.vue
@@ -0,0 +1,192 @@
+
+
+
+
+
+
+
+
![]()
+
+
Load More
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/resources/assets/js/components/image-picker.vue b/resources/assets/js/components/image-picker.vue
new file mode 100644
index 000000000..fe2b1f323
--- /dev/null
+++ b/resources/assets/js/components/image-picker.vue
@@ -0,0 +1,37 @@
+
+
+
+
+
![Image Preview]()
+
+
+
+
|
+
+
+
+
+
\ No newline at end of file
diff --git a/resources/assets/js/global.js b/resources/assets/js/global.js
index 66326da23..519ce7412 100644
--- a/resources/assets/js/global.js
+++ b/resources/assets/js/global.js
@@ -1,9 +1,10 @@
+
+// Global jQuery Elements
$(function () {
// Notification hiding
$('.notification').click(function () {
$(this).fadeOut(100);
-
});
// Dropdown toggles
@@ -18,34 +19,25 @@ $(function () {
});
+function elemExists(selector) {
+ return document.querySelector(selector) !== null;
+}
+
+// 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('image-picker', {
- template: require('./templates/image-picker.html'),
- props: ['currentImage', 'name', 'imageClass'],
- data: function() {
- return {
- image: this.currentImage
- }
- },
- methods: {
- showImageManager: function(e) {
- var _this = this;
- ImageManager.show(function(image) {
- _this.image = image.url;
- });
- },
- reset: function() {
- this.image = '';
- },
- remove: function() {
- this.image = 'none';
- }
- }
-});
+// 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
diff --git a/resources/assets/js/image-manager.js b/resources/assets/js/image-manager.js
deleted file mode 100644
index 4433a9598..000000000
--- a/resources/assets/js/image-manager.js
+++ /dev/null
@@ -1,130 +0,0 @@
-
-
-window.ImageManager = new Vue({
-
- el: '#image-manager',
-
- data: {
- images: [],
- hasMore: false,
- page: 0,
- cClickTime: 0,
- selectedImage: false,
- dependantPages: false,
- deleteForm: {}
- },
-
- created: function () {
- // Get initial images
- this.fetchData(this.page);
- },
-
- ready: function () {
- // Create dropzone
- this.setupDropZone();
- },
-
- methods: {
- fetchData: function () {
- var _this = this;
- this.$http.get('/images/all/' + _this.page, function (data) {
- _this.images = _this.images.concat(data.images);
- _this.hasMore = data.hasMore;
- _this.page++;
- });
- },
-
- setupDropZone: function () {
- var _this = this;
- var dropZone = new Dropzone(_this.$$.dropZone, {
- url: '/upload/image',
- init: function () {
- var dz = this;
- this.on("sending", function (file, xhr, data) {
- data.append("_token", document.querySelector('meta[name=token]').getAttribute('content'));
- });
- this.on("success", function (file, data) {
- _this.images.unshift(data);
- $(file.previewElement).fadeOut(400, function () {
- dz.removeFile(file);
- });
- });
- }
- });
- },
-
- imageClick: function (image) {
- var dblClickTime = 380;
- var cTime = (new Date()).getTime();
- var timeDiff = cTime - this.cClickTime;
- if (this.cClickTime !== 0 && timeDiff < dblClickTime && this.selectedImage === image) {
- // DoubleClick
- if (this.callback) {
- this.callback(image);
- }
- this.hide();
- } else {
- this.selectedImage = (this.selectedImage === image) ? false : image;
- this.dependantPages = false;
- }
- this.cClickTime = cTime;
- },
-
- selectButtonClick: function () {
- if (this.callback) {
- this.callback(this.selectedImage);
- }
- this.hide();
- },
-
- show: function (callback) {
- this.callback = callback;
- this.$$.overlay.style.display = 'block';
- },
-
- overlayClick: function (e) {
- if (e.target.className === 'overlay') {
- this.hide();
- }
- },
-
- hide: function () {
- this.$$.overlay.style.display = 'none';
- },
-
- saveImageDetails: function (e) {
- e.preventDefault();
- var _this = this;
- var form = $(_this.$$.imageForm);
- $.ajax('/images/update/' + _this.selectedImage.id, {
- method: 'PUT',
- data: form.serialize()
- }).done(function () {
- form.showSuccess('Image name updated');
- }).fail(function (jqXHR) {
- form.showFailure(jqXHR.responseJSON);
- })
- },
-
- deleteImage: function (e) {
- e.preventDefault();
- var _this = this;
- _this.deleteForm.force = _this.dependantPages !== false;
- $.ajax('/images/' + _this.selectedImage.id, {
- method: 'DELETE',
- data: _this.deleteForm
- }).done(function () {
- _this.images.splice(_this.images.indexOf(_this.selectedImage), 1);
- _this.selectedImage = false;
- $(_this.$$.imageTitle).showSuccess('Image Deleted');
- }).fail(function(jqXHR, textStatus) {
- // Pages failure
- if(jqXHR.status === 400) {
- _this.dependantPages = jqXHR.responseJSON;
- }
- });
- }
-
- }
-
-});
diff --git a/resources/assets/js/jquery-extensions.js b/resources/assets/js/jquery-extensions.js
index bda36f5e6..c41a721e4 100644
--- a/resources/assets/js/jquery-extensions.js
+++ b/resources/assets/js/jquery-extensions.js
@@ -56,7 +56,7 @@ jQuery.fn.submitForm = function() {
jQuery.fn.dropDown = function() {
var container = $(this),
menu = container.find('ul');
- container.find('[data-dropdown-toggle]').on('click', function() {
+ container.find('[data-dropdown-toggle]').on('click', function() {
menu.show().addClass('anim menuIn');
container.mouseleave(function() {
menu.hide();
diff --git a/resources/assets/js/pages/book-show.js b/resources/assets/js/pages/book-show.js
index 3d5d35255..7388cced1 100644
--- a/resources/assets/js/pages/book-show.js
+++ b/resources/assets/js/pages/book-show.js
@@ -1,5 +1,5 @@
-new Vue({
+module.exports = {
el: '#book-dashboard',
data: {
searching: false,
@@ -29,4 +29,4 @@ new Vue({
this.searchTerm = '';
}
}
-});
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/resources/assets/js/templates/image-picker.html b/resources/assets/js/templates/image-picker.html
deleted file mode 100644
index 82f0ef7f3..000000000
--- a/resources/assets/js/templates/image-picker.html
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
-
![Image Preview]()
-
-
-
-
|
-
-
\ No newline at end of file
diff --git a/resources/assets/sass/_header.scss b/resources/assets/sass/_header.scss
index 60a14fde8..72026887a 100644
--- a/resources/assets/sass/_header.scss
+++ b/resources/assets/sass/_header.scss
@@ -110,7 +110,6 @@ form.search-box {
right: 0;
margin: $-m 0;
background-color: #FFFFFF;
- list-style: none;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
border-radius: 1px;
border: 1px solid #EEE;
diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss
index beea1c1b4..d652fbedc 100644
--- a/resources/assets/sass/styles.scss
+++ b/resources/assets/sass/styles.scss
@@ -15,6 +15,8 @@
@import "lists";
@import "pages";
+[v-cloak] {display: none;}
+
// Jquery Sortable Styles
.dragged {
position: absolute;
diff --git a/resources/views/base.blade.php b/resources/views/base.blade.php
index de774042a..6a9da2099 100644
--- a/resources/views/base.blade.php
+++ b/resources/views/base.blade.php
@@ -8,16 +8,13 @@
-
+
-
-
-
@yield('head')
diff --git a/resources/views/books/delete.blade.php b/resources/views/books/delete.blade.php
index ebd870234..f4cf1d8d7 100644
--- a/resources/views/books/delete.blade.php
+++ b/resources/views/books/delete.blade.php
@@ -15,8 +15,4 @@
-@stop
-
-@section('bottom')
- @include('pages/image-manager')
@stop
\ No newline at end of file
diff --git a/resources/views/chapters/delete.blade.php b/resources/views/chapters/delete.blade.php
index 3fc3ae1dc..940404323 100644
--- a/resources/views/chapters/delete.blade.php
+++ b/resources/views/chapters/delete.blade.php
@@ -16,8 +16,4 @@
-@stop
-
-@section('bottom')
- @include('pages/image-manager')
@stop
\ No newline at end of file
diff --git a/resources/views/pages/create.blade.php b/resources/views/pages/create.blade.php
index 619eadfa6..ad635b291 100644
--- a/resources/views/pages/create.blade.php
+++ b/resources/views/pages/create.blade.php
@@ -16,9 +16,4 @@
@endif
-@stop
-
-@section('bottom')
- @include('pages/image-manager')
-
@stop
\ No newline at end of file
diff --git a/resources/views/pages/delete.blade.php b/resources/views/pages/delete.blade.php
index 4b44424c7..eb9327122 100644
--- a/resources/views/pages/delete.blade.php
+++ b/resources/views/pages/delete.blade.php
@@ -14,8 +14,4 @@
-@stop
-
-@section('bottom')
- @include('pages/image-manager')
@stop
\ No newline at end of file
diff --git a/resources/views/pages/edit.blade.php b/resources/views/pages/edit.blade.php
index c69df7d02..bf56a1495 100644
--- a/resources/views/pages/edit.blade.php
+++ b/resources/views/pages/edit.blade.php
@@ -15,9 +15,4 @@
-@stop
-
-@section('bottom')
- @include('pages/image-manager')
-
@stop
\ No newline at end of file
diff --git a/resources/views/pages/form.blade.php b/resources/views/pages/form.blade.php
index a35aa5abe..44e396c84 100644
--- a/resources/views/pages/form.blade.php
+++ b/resources/views/pages/form.blade.php
@@ -98,4 +98,6 @@
});
-
\ No newline at end of file
+
+
+
\ No newline at end of file
diff --git a/resources/views/pages/image-manager.blade.php b/resources/views/pages/image-manager.blade.php
deleted file mode 100644
index 4e822941c..000000000
--- a/resources/views/pages/image-manager.blade.php
+++ /dev/null
@@ -1,56 +0,0 @@
-
-
-
-
-
-
-
-
![]()
-
-
Load More
-
-
-
-
-
-
-
diff --git a/resources/views/settings/index.blade.php b/resources/views/settings/index.blade.php
index f6ecadce0..47cfe1f30 100644
--- a/resources/views/settings/index.blade.php
+++ b/resources/views/settings/index.blade.php
@@ -84,9 +84,6 @@
-@stop
+
-@section('bottom')
- @include('pages/image-manager')
-
-@stop
\ No newline at end of file
+@stop