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

Go to a project
Toggle navigation
Toggle navigation pinning
Dan Brown
8b951403 1 parent 6b4ec65b

Modularised/bundled js and made image-manager a proper component

Inline Side-by-side
Showing 19 changed files with 249 additions and 246 deletions
...@@ -14,12 +14,9 @@ ...@@ -14,12 +14,9 @@
14 "tests" 14 "tests"
15 ], 15 ],
16 "dependencies": { 16 "dependencies": {
17 - "dropzone": "~4.0.1",
18 "tinymce-dist": "~4.2.1", 17 "tinymce-dist": "~4.2.1",
19 "bootstrap": "~3.3.5", 18 "bootstrap": "~3.3.5",
20 "jquery-sortable": "~0.9.13", 19 "jquery-sortable": "~0.9.13",
21 - "material-design-iconic-font": "~2.1.1", 20 + "material-design-iconic-font": "~2.1.1"
22 - "vue": "~0.12.10",
23 - "vue-resource": "~0.1.15"
24 } 21 }
25 } 22 }
......
1 var elixir = require('laravel-elixir'); 1 var elixir = require('laravel-elixir');
2 2
3 +elixir.config.js.browserify.transformers.push({
4 + name: 'vueify',
5 + options: {}
6 +});
3 7
4 elixir(function(mix) { 8 elixir(function(mix) {
5 mix.sass('styles.scss'); 9 mix.sass('styles.scss');
6 - mix.scripts('image-manager.js', 'public/js/image-manager.js'); 10 + mix.browserify(['jquery-extensions.js', 'global.js'], 'public/js/common.js');
7 - mix.browserify(['jquery-extensions.js', 'pages/book-show.js' ,'global.js'], 'public/js/common.js');
8 }); 11 });
......
...@@ -3,11 +3,14 @@ ...@@ -3,11 +3,14 @@
3 "devDependencies": { 3 "devDependencies": {
4 "gulp": "^3.8.8", 4 "gulp": "^3.8.8",
5 "insert-css": "^0.2.0", 5 "insert-css": "^0.2.0",
6 - "laravel-elixir-livereload": "1.1.3" 6 + "laravel-elixir-livereload": "1.1.3",
7 + "vueify": "^1.1.5"
7 }, 8 },
8 "dependencies": { 9 "dependencies": {
9 "bootstrap-sass": "^3.0.0", 10 "bootstrap-sass": "^3.0.0",
11 + "dropzone": "^4.0.1",
10 "laravel-elixir": "^3.3.1", 12 "laravel-elixir": "^3.3.1",
11 - "vue": "^0.12.16" 13 + "vue": "^0.12.16",
14 + "vue-resource": "^0.1.16"
12 } 15 }
13 } 16 }
......
1 +<template>
2 + <div id="image-manager">
3 + <div class="overlay" v-el="overlay" v-on="click: overlayClick" >
4 + <div class="image-manager-body">
5 + <div class="image-manager-content">
6 + <div class="image-manager-list">
7 + <div v-repeat="image: images">
8 + <img class="anim fadeIn"
9 + v-class="selected: (image==selectedImage)"
10 + v-attr="src: image.thumbnail, alt: image.name, title: image.name"
11 + v-on="click: imageClick(image)"
12 + v-style="animation-delay: ($index > 26) ? '160ms' : ($index * 25) + 'ms'">
13 + </div>
14 + <div class="load-more" v-show="hasMore" v-on="click: fetchData">Load More</div>
15 + </div>
16 + </div>
17 + <button class="neg button image-manager-close" v-on="click: hide()">x</button>
18 + <div class="image-manager-sidebar">
19 + <h2 v-el="imageTitle">Images</h2>
20 + <hr class="even">
21 + <div class="dropzone-container" v-el="dropZone">
22 + <div class="dz-message">Drop files or click here to upload</div>
23 + </div>
24 + <div class="image-manager-details anim fadeIn" v-show="selectedImage">
25 + <hr class="even">
26 + <form v-on="submit: saveImageDetails" v-el="imageForm">
27 + <div class="form-group">
28 + <label for="name">Image Name</label>
29 + <input type="text" id="name" name="name" v-model="selectedImage.name">
30 + </div>
31 + </form>
32 + <hr class="even">
33 + <div v-show="dependantPages">
34 + <p class="text-neg text-small">
35 + This image is used in the pages below, Click delete again to confirm you want to delete this image.
36 + </p>
37 + <ul class="text-neg">
38 + <li v-repeat="page: dependantPages">
39 + <a v-attr="href: page.url" target="_blank" class="text-neg">@{{ page.name }}</a>
40 + </li>
41 + </ul>
42 + </div>
43 +
44 + <form v-on="submit: deleteImage" v-el="imageDeleteForm">
45 + <button class="button neg"><i class="zmdi zmdi-delete"></i>Delete Image</button>
46 + </form>
47 + </div>
48 + <div class="image-manager-bottom">
49 + <button class="button pos anim fadeIn" v-show="selectedImage" v-on="click:selectButtonClick"><i class="zmdi zmdi-square-right"></i>Select Image</button>
50 + </div>
51 + </div>
52 + </div>
53 + </div>
54 + </div>
55 +</template>
56 +
57 +<script>
58 +
59 + var Dropzone = require('dropzone');
60 +
61 + module.exports = {
62 + data: function(){
63 + return {
64 + images: [],
65 + hasMore: false,
66 + page: 0,
67 + cClickTime: 0,
68 + selectedImage: false,
69 + dependantPages: false,
70 + deleteForm: {},
71 + token: document.querySelector('meta[name=token]').getAttribute('content')
72 + }
73 + },
1 74
75 + created: function () {
76 + // Get initial images
77 + this.fetchData(this.page);
78 + window.ImageManager = this;
79 + },
2 80
3 -window.ImageManager = new Vue({ 81 + ready: function () {
4 - 82 + // Create dropzone
5 - el: '#image-manager', 83 + this.setupDropZone();
6 -
7 - data: {
8 - images: [],
9 - hasMore: false,
10 - page: 0,
11 - cClickTime: 0,
12 - selectedImage: false,
13 - dependantPages: false,
14 - deleteForm: {}
15 - },
16 -
17 - created: function () {
18 - // Get initial images
19 - this.fetchData(this.page);
20 - },
21 -
22 - ready: function () {
23 - // Create dropzone
24 - this.setupDropZone();
25 - },
26 -
27 - methods: {
28 - fetchData: function () {
29 - var _this = this;
30 - this.$http.get('/images/all/' + _this.page, function (data) {
31 - _this.images = _this.images.concat(data.images);
32 - _this.hasMore = data.hasMore;
33 - _this.page++;
34 - });
35 }, 84 },
36 85
37 - setupDropZone: function () { 86 + methods: {
38 - var _this = this; 87 + fetchData: function () {
39 - var dropZone = new Dropzone(_this.$$.dropZone, { 88 + var _this = this;
40 - url: '/upload/image', 89 + this.$http.get('/images/all/' + _this.page, function (data) {
41 - init: function () { 90 + _this.images = _this.images.concat(data.images);
42 - var dz = this; 91 + _this.hasMore = data.hasMore;
43 - this.on("sending", function (file, xhr, data) { 92 + _this.page++;
44 - data.append("_token", document.querySelector('meta[name=token]').getAttribute('content')); 93 + });
45 - }); 94 + },
46 - this.on("success", function (file, data) { 95 +
47 - _this.images.unshift(data); 96 + setupDropZone: function () {
48 - $(file.previewElement).fadeOut(400, function () { 97 + var _this = this;
49 - dz.removeFile(file); 98 + var dropZone = new Dropzone(_this.$$.dropZone, {
99 + url: '/upload/image',
100 + init: function () {
101 + var dz = this;
102 + this.on("sending", function (file, xhr, data) {
103 + data.append("_token", _this.token);
50 }); 104 });
51 - }); 105 + this.on("success", function (file, data) {
106 + _this.images.unshift(data);
107 + $(file.previewElement).fadeOut(400, function () {
108 + dz.removeFile(file);
109 + });
110 + });
111 + }
112 + });
113 + },
114 +
115 + imageClick: function (image) {
116 + var dblClickTime = 380;
117 + var cTime = (new Date()).getTime();
118 + var timeDiff = cTime - this.cClickTime;
119 + if (this.cClickTime !== 0 && timeDiff < dblClickTime && this.selectedImage === image) {
120 + // DoubleClick
121 + if (this.callback) {
122 + this.callback(image);
123 + }
124 + this.hide();
125 + } else {
126 + this.selectedImage = (this.selectedImage === image) ? false : image;
127 + this.dependantPages = false;
52 } 128 }
53 - }); 129 + this.cClickTime = cTime;
54 - }, 130 + },
55 131
56 - imageClick: function (image) { 132 + selectButtonClick: function () {
57 - var dblClickTime = 380;
58 - var cTime = (new Date()).getTime();
59 - var timeDiff = cTime - this.cClickTime;
60 - if (this.cClickTime !== 0 && timeDiff < dblClickTime && this.selectedImage === image) {
61 - // DoubleClick
62 if (this.callback) { 133 if (this.callback) {
63 - this.callback(image); 134 + this.callback(this.selectedImage);
64 } 135 }
65 this.hide(); 136 this.hide();
66 - } else { 137 + },
67 - this.selectedImage = (this.selectedImage === image) ? false : image;
68 - this.dependantPages = false;
69 - }
70 - this.cClickTime = cTime;
71 - },
72 -
73 - selectButtonClick: function () {
74 - if (this.callback) {
75 - this.callback(this.selectedImage);
76 - }
77 - this.hide();
78 - },
79 138
80 - show: function (callback) { 139 + show: function (callback) {
81 - this.callback = callback; 140 + this.callback = callback;
82 - this.$$.overlay.style.display = 'block'; 141 + this.$$.overlay.style.display = 'block';
83 - }, 142 + },
84 143
85 - overlayClick: function (e) { 144 + overlayClick: function (e) {
86 - if (e.target.className === 'overlay') { 145 + if (e.target.className === 'overlay') {
87 - this.hide(); 146 + this.hide();
147 + }
148 + },
149 +
150 + hide: function () {
151 + this.$$.overlay.style.display = 'none';
152 + },
153 +
154 + saveImageDetails: function (e) {
155 + e.preventDefault();
156 + var _this = this;
157 + _this.selectedImage._token = _this.token;
158 + var form = $(_this.$$.imageForm);
159 + $.ajax('/images/update/' + _this.selectedImage.id, {
160 + method: 'PUT',
161 + data: _this.selectedImage
162 + }).done(function () {
163 + form.showSuccess('Image name updated');
164 + }).fail(function (jqXHR) {
165 + form.showFailure(jqXHR.responseJSON);
166 + })
167 + },
168 +
169 + deleteImage: function (e) {
170 + e.preventDefault();
171 + var _this = this;
172 + _this.deleteForm.force = _this.dependantPages !== false;
173 + _this.deleteForm._token = _this.token;
174 + $.ajax('/images/' + _this.selectedImage.id, {
175 + method: 'DELETE',
176 + data: _this.deleteForm
177 + }).done(function () {
178 + _this.images.splice(_this.images.indexOf(_this.selectedImage), 1);
179 + _this.selectedImage = false;
180 + $(_this.$$.imageTitle).showSuccess('Image Deleted');
181 + }).fail(function(jqXHR, textStatus) {
182 + // Pages failure
183 + if(jqXHR.status === 400) {
184 + _this.dependantPages = jqXHR.responseJSON;
185 + }
186 + });
88 } 187 }
89 - },
90 -
91 - hide: function () {
92 - this.$$.overlay.style.display = 'none';
93 - },
94 -
95 - saveImageDetails: function (e) {
96 - e.preventDefault();
97 - var _this = this;
98 - var form = $(_this.$$.imageForm);
99 - $.ajax('/images/update/' + _this.selectedImage.id, {
100 - method: 'PUT',
101 - data: form.serialize()
102 - }).done(function () {
103 - form.showSuccess('Image name updated');
104 - }).fail(function (jqXHR) {
105 - form.showFailure(jqXHR.responseJSON);
106 - })
107 - },
108 188
109 - deleteImage: function (e) {
110 - e.preventDefault();
111 - var _this = this;
112 - _this.deleteForm.force = _this.dependantPages !== false;
113 - $.ajax('/images/' + _this.selectedImage.id, {
114 - method: 'DELETE',
115 - data: _this.deleteForm
116 - }).done(function () {
117 - _this.images.splice(_this.images.indexOf(_this.selectedImage), 1);
118 - _this.selectedImage = false;
119 - $(_this.$$.imageTitle).showSuccess('Image Deleted');
120 - }).fail(function(jqXHR, textStatus) {
121 - // Pages failure
122 - if(jqXHR.status === 400) {
123 - _this.dependantPages = jqXHR.responseJSON;
124 - }
125 - });
126 } 189 }
127 190
128 - } 191 + };
129 - 192 +</script>
130 -});
...\ No newline at end of file ...\ No newline at end of file
......
1 1
2 -<div class="image-picker"> 2 +<template>
3 - <div> 3 + <div class="image-picker">
4 - <img v-if="image && image !== 'none'" v-attr="src: image, class: imageClass" alt="Image Preview"> 4 + <div>
5 + <img v-if="image && image !== 'none'" v-attr="src: image, class: imageClass" alt="Image Preview">
6 + </div>
7 + <button class="button" type="button" v-on="click: showImageManager">Select Image</button>
8 + <br>
9 + <button class="text-button" v-on="click: reset" type="button">Reset</button> <span class="sep">|</span> <button class="text-button neg" v-on="click: remove" type="button">Remove</button>
10 + <input type="hidden" v-attr="name: name, id: name" v-model="image">
5 </div> 11 </div>
6 - <button class="button" type="button" v-on="click: showImageManager">Select Image</button>
7 - <br>
8 - <button class="text-button" v-on="click: reset" type="button">Reset</button> <span class="sep">|</span> <button class="text-button neg" v-on="click: remove" type="button">Remove</button>
9 - <input type="hidden" v-attr="name: name, id: name" v-model="image">
10 -</div>
...\ No newline at end of file ...\ No newline at end of file
12 +</template>
13 +
14 +<script>
15 + module.exports = {
16 + props: ['currentImage', 'name', 'imageClass'],
17 + data: function() {
18 + return {
19 + image: this.currentImage
20 + }
21 + },
22 + methods: {
23 + showImageManager: function(e) {
24 + var _this = this;
25 + ImageManager.show(function(image) {
26 + _this.image = image.url;
27 + });
28 + },
29 + reset: function() {
30 + this.image = '';
31 + },
32 + remove: function() {
33 + this.image = 'none';
34 + }
35 + }
36 + }
37 +</script>
...\ No newline at end of file ...\ No newline at end of file
......
1 +
2 +// Global jQuery Elements
1 $(function () { 3 $(function () {
2 4
3 // Notification hiding 5 // Notification hiding
4 $('.notification').click(function () { 6 $('.notification').click(function () {
5 $(this).fadeOut(100); 7 $(this).fadeOut(100);
6 -
7 }); 8 });
8 9
9 // Dropdown toggles 10 // Dropdown toggles
...@@ -18,34 +19,25 @@ $(function () { ...@@ -18,34 +19,25 @@ $(function () {
18 19
19 }); 20 });
20 21
22 +function elemExists(selector) {
23 + return document.querySelector(selector) !== null;
24 +}
25 +
26 +// Vue JS elements
27 +var Vue = require('vue');
28 +Vue.use(require('vue-resource'));
21 29
22 // Vue Components 30 // Vue Components
31 +Vue.component('image-manager', require('./components/image-manager.vue'));
32 +Vue.component('image-picker', require('./components/image-picker.vue'));
23 33
24 -Vue.component('image-picker', { 34 +// Vue Controllers
25 - template: require('./templates/image-picker.html'), 35 +if(elemExists('#book-dashboard')) {
26 - props: ['currentImage', 'name', 'imageClass'], 36 + new Vue(require('./pages/book-show'));
27 - data: function() { 37 +}
28 - return {
29 - image: this.currentImage
30 - }
31 - },
32 - methods: {
33 - showImageManager: function(e) {
34 - var _this = this;
35 - ImageManager.show(function(image) {
36 - _this.image = image.url;
37 - });
38 - },
39 - reset: function() {
40 - this.image = '';
41 - },
42 - remove: function() {
43 - this.image = 'none';
44 - }
45 - }
46 -});
47 38
48 // Global Vue Instance 39 // Global Vue Instance
40 +// Needs to be loaded after all components we want to use.
49 var app = new Vue({ 41 var app = new Vue({
50 el: '#app' 42 el: '#app'
51 }); 43 });
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -56,7 +56,7 @@ jQuery.fn.submitForm = function() { ...@@ -56,7 +56,7 @@ jQuery.fn.submitForm = function() {
56 jQuery.fn.dropDown = function() { 56 jQuery.fn.dropDown = function() {
57 var container = $(this), 57 var container = $(this),
58 menu = container.find('ul'); 58 menu = container.find('ul');
59 - container.find('[data-dropdown-toggle]').on('click', function() { 59 + container.find('[data-dropdown-toggle]').on('click', function() {
60 menu.show().addClass('anim menuIn'); 60 menu.show().addClass('anim menuIn');
61 container.mouseleave(function() { 61 container.mouseleave(function() {
62 menu.hide(); 62 menu.hide();
......
1 1
2 -new Vue({ 2 +module.exports = {
3 el: '#book-dashboard', 3 el: '#book-dashboard',
4 data: { 4 data: {
5 searching: false, 5 searching: false,
...@@ -29,4 +29,4 @@ new Vue({ ...@@ -29,4 +29,4 @@ new Vue({
29 this.searchTerm = ''; 29 this.searchTerm = '';
30 } 30 }
31 } 31 }
32 -});
...\ No newline at end of file ...\ No newline at end of file
32 +};
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -110,7 +110,6 @@ form.search-box { ...@@ -110,7 +110,6 @@ form.search-box {
110 right: 0; 110 right: 0;
111 margin: $-m 0; 111 margin: $-m 0;
112 background-color: #FFFFFF; 112 background-color: #FFFFFF;
113 - list-style: none;
114 box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1); 113 box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
115 border-radius: 1px; 114 border-radius: 1px;
116 border: 1px solid #EEE; 115 border: 1px solid #EEE;
......
...@@ -15,6 +15,8 @@ ...@@ -15,6 +15,8 @@
15 @import "lists"; 15 @import "lists";
16 @import "pages"; 16 @import "pages";
17 17
18 +[v-cloak] {display: none;}
19 +
18 // Jquery Sortable Styles 20 // Jquery Sortable Styles
19 .dragged { 21 .dragged {
20 position: absolute; 22 position: absolute;
......
...@@ -8,16 +8,13 @@ ...@@ -8,16 +8,13 @@
8 <meta name="token" content="{{ csrf_token() }}"> 8 <meta name="token" content="{{ csrf_token() }}">
9 9
10 <!-- Styles and Fonts --> 10 <!-- Styles and Fonts -->
11 - <link rel="stylesheet" href="/css/app.css"> 11 + <link rel="stylesheet" href="/css/styles.css">
12 <link href='//fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,300italic,100,300' rel='stylesheet' type='text/css'> 12 <link href='//fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,300italic,100,300' rel='stylesheet' type='text/css'>
13 <link rel="stylesheet" href="/bower/material-design-iconic-font/dist/css/material-design-iconic-font.min.css"> 13 <link rel="stylesheet" href="/bower/material-design-iconic-font/dist/css/material-design-iconic-font.min.css">
14 14
15 <!-- Scripts --> 15 <!-- Scripts -->
16 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 16 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
17 <script src="/bower/jquery-sortable/source/js/jquery-sortable.js"></script> 17 <script src="/bower/jquery-sortable/source/js/jquery-sortable.js"></script>
18 - <script src="/bower/dropzone/dist/min/dropzone.min.js"></script>
19 - <script src="/bower/vue/dist/vue.min.js"></script>
20 - <script src="/bower/vue-resource/dist/vue-resource.min.js"></script>
21 18
22 @yield('head') 19 @yield('head')
23 </head> 20 </head>
......
...@@ -15,8 +15,4 @@ ...@@ -15,8 +15,4 @@
15 </form> 15 </form>
16 </div> 16 </div>
17 17
18 -@stop
19 -
20 -@section('bottom')
21 - @include('pages/image-manager')
22 @stop 18 @stop
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -16,8 +16,4 @@ ...@@ -16,8 +16,4 @@
16 </form> 16 </form>
17 </div> 17 </div>
18 18
19 -@stop
20 -
21 -@section('bottom')
22 - @include('pages/image-manager')
23 @stop 19 @stop
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -16,9 +16,4 @@ ...@@ -16,9 +16,4 @@
16 @endif 16 @endif
17 </form> 17 </form>
18 </div> 18 </div>
19 -@stop
20 -
21 -@section('bottom')
22 - @include('pages/image-manager')
23 - <script src="/js/image-manager.js"></script>
24 @stop 19 @stop
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -14,8 +14,4 @@ ...@@ -14,8 +14,4 @@
14 </form> 14 </form>
15 </div> 15 </div>
16 16
17 -@stop
18 -
19 -@section('bottom')
20 - @include('pages/image-manager')
21 @stop 17 @stop
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -15,9 +15,4 @@ ...@@ -15,9 +15,4 @@
15 </form> 15 </form>
16 </div> 16 </div>
17 17
18 -@stop
19 -
20 -@section('bottom')
21 - @include('pages/image-manager')
22 - <script src="/js/image-manager.js"></script>
23 @stop 18 @stop
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -98,4 +98,6 @@ ...@@ -98,4 +98,6 @@
98 98
99 99
100 }); 100 });
101 -</script>
...\ No newline at end of file ...\ No newline at end of file
101 +</script>
102 +
103 +<image-manager></image-manager>
...\ No newline at end of file ...\ No newline at end of file
......
1 -
2 -<div id="image-manager">
3 - <div class="overlay" v-el="overlay" v-on="click: overlayClick" >
4 - <div class="image-manager-body">
5 - <div class="image-manager-content">
6 - <div class="image-manager-list">
7 - <div v-repeat="image: images">
8 - <img class="anim fadeIn"
9 - v-class="selected: (image==selectedImage)"
10 - v-attr="src: image.thumbnail, alt: image.name, title: image.name"
11 - v-on="click: imageClick(image)"
12 - v-style="animation-delay: ($index > 26) ? '160ms' : ($index * 25) + 'ms'">
13 - </div>
14 - <div class="load-more" v-show="hasMore" v-on="click: fetchData">Load More</div>
15 - </div>
16 - </div>
17 - <button class="neg button image-manager-close" v-on="click: hide()">x</button>
18 - <div class="image-manager-sidebar">
19 - <h2 v-el="imageTitle">Images</h2>
20 - <hr class="even">
21 - <div class="dropzone-container" v-el="dropZone">
22 - <div class="dz-message">Drop files or click here to upload</div>
23 - </div>
24 - <div class="image-manager-details anim fadeIn" v-show="selectedImage">
25 - <hr class="even">
26 - <form v-on="submit: saveImageDetails" v-el="imageForm">
27 - {{ csrf_field() }}
28 - <div class="form-group">
29 - <label for="name">Image Name</label>
30 - <input type="text" id="name" name="name" v-model="selectedImage.name">
31 - </div>
32 - </form>
33 - <hr class="even">
34 - <div v-show="dependantPages">
35 - <p class="text-neg text-small">
36 - This image is used in the pages below, Click delete again to confirm you want to delete this image.
37 - </p>
38 - <ul class="text-neg">
39 - <li v-repeat="page: dependantPages">
40 - <a v-attr="href: page.url" target="_blank" class="text-neg">@{{ page.name }}</a>
41 - </li>
42 - </ul>
43 - </div>
44 -
45 - <form v-on="submit: deleteImage" v-el="imageDeleteForm">
46 - <input type="hidden" v-model="deleteForm._token" value="{{ csrf_token() }}">
47 - <button class="button neg"><i class="zmdi zmdi-delete"></i>Delete Image</button>
48 - </form>
49 - </div>
50 - <div class="image-manager-bottom">
51 - <button class="button pos anim fadeIn" v-show="selectedImage" v-on="click:selectButtonClick"><i class="zmdi zmdi-square-right"></i>Select Image</button>
52 - </div>
53 - </div>
54 - </div>
55 - </div>
56 -</div>
...@@ -84,9 +84,6 @@ ...@@ -84,9 +84,6 @@
84 84
85 </div> 85 </div>
86 86
87 -@stop 87 +<image-manager></image-manager>
88 88
89 -@section('bottom')
90 - @include('pages/image-manager')
91 - <script src="/js/image-manager.js"></script>
92 -@stop
...\ No newline at end of file ...\ No newline at end of file
89 +@stop
......