Showing
5 changed files
with
35 additions
and
38 deletions
| 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 | -}); | ||
| 7 | - | ||
| 8 | elixir(function(mix) { | 3 | elixir(function(mix) { |
| 9 | mix.sass('styles.scss') | 4 | mix.sass('styles.scss') |
| 10 | .sass('print-styles.scss') | 5 | .sass('print-styles.scss') | ... | ... |
| ... | @@ -2,16 +2,18 @@ | ... | @@ -2,16 +2,18 @@ |
| 2 | "private": true, | 2 | "private": true, |
| 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", | ||
| 7 | - "vueify": "^1.1.5" | ||
| 8 | }, | 6 | }, |
| 9 | "dependencies": { | 7 | "dependencies": { |
| 8 | + "babel-runtime": "^5.8.29", | ||
| 10 | "bootstrap-sass": "^3.0.0", | 9 | "bootstrap-sass": "^3.0.0", |
| 11 | "dropzone": "^4.0.1", | 10 | "dropzone": "^4.0.1", |
| 12 | - "laravel-elixir": "^3.3.1", | 11 | + "laravel-elixir": "^3.4.0", |
| 13 | - "vue": "^0.12.16", | 12 | + "vue": "^1.0.4", |
| 13 | + "vue-hot-reload-api": "^1.2.1", | ||
| 14 | "vue-resource": "^0.1.16", | 14 | "vue-resource": "^0.1.16", |
| 15 | + "vueify": "^5.0.1", | ||
| 16 | + "vueify-insert-css": "^1.0.0", | ||
| 15 | "zeroclipboard": "^2.2.0" | 17 | "zeroclipboard": "^2.2.0" |
| 16 | } | 18 | } |
| 17 | } | 19 | } | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <div id="image-manager"> | 2 | <div id="image-manager"> |
| 3 | - <div class="overlay" v-el="overlay" v-on="click: overlayClick"> | 3 | + <div class="overlay" v-el:overlay v-on:click="overlayClick"> |
| 4 | <div class="image-manager-body"> | 4 | <div class="image-manager-body"> |
| 5 | <div class="image-manager-content"> | 5 | <div class="image-manager-content"> |
| 6 | <div class="image-manager-list"> | 6 | <div class="image-manager-list"> |
| 7 | - <div v-repeat="image: images"> | 7 | + <div v-for="image in images"> |
| 8 | <img class="anim fadeIn" | 8 | <img class="anim fadeIn" |
| 9 | - v-class="selected: (image==selectedImage)" | 9 | + :class="{selected: (image==selectedImage)}" |
| 10 | - v-attr="src: image.thumbnail, alt: image.name, title: image.name" | 10 | + :src="image.thumbnail" :alt="image.title" :title="image.name" |
| 11 | - v-on="click: imageClick(image)" | 11 | + v-on:click="imageClick(image)" |
| 12 | - v-style="animation-delay: ($index > 26) ? '160ms' : ($index * 25) + 'ms'"> | 12 | + v-bind:style="{animationDelay: ($index > 26) ? '160ms' : ($index * 25) + 'ms'}"> |
| 13 | </div> | 13 | </div> |
| 14 | - <div class="load-more" v-show="hasMore" v-on="click: fetchData">Load More</div> | 14 | + <div class="load-more" v-show="hasMore" v-on:click="fetchData">Load More</div> |
| 15 | </div> | 15 | </div> |
| 16 | </div> | 16 | </div> |
| 17 | - <button class="neg button image-manager-close" v-on="click: hide()">x</button> | 17 | + <button class="neg button image-manager-close" v-on:click="hide">x</button> |
| 18 | <div class="image-manager-sidebar"> | 18 | <div class="image-manager-sidebar"> |
| 19 | - <h2 v-el="imageTitle">Images</h2> | 19 | + <h2 v-el:image-title>Images</h2> |
| 20 | <hr class="even"> | 20 | <hr class="even"> |
| 21 | - <div class="dropzone-container" v-el="dropZone"> | 21 | + <div class="dropzone-container" v-el:drop-zone> |
| 22 | <div class="dz-message">Drop files or click here to upload</div> | 22 | <div class="dz-message">Drop files or click here to upload</div> |
| 23 | </div> | 23 | </div> |
| 24 | <div class="image-manager-details anim fadeIn" v-show="selectedImage"> | 24 | <div class="image-manager-details anim fadeIn" v-show="selectedImage"> |
| 25 | <hr class="even"> | 25 | <hr class="even"> |
| 26 | - <form v-on="submit: saveImageDetails" v-el="imageForm"> | 26 | + <form v-on:submit="saveImageDetails" v-el:image-form> |
| 27 | <div class="form-group"> | 27 | <div class="form-group"> |
| 28 | <label for="name">Image Name</label> | 28 | <label for="name">Image Name</label> |
| 29 | <input type="text" id="name" name="name" v-model="selectedImage.name"> | 29 | <input type="text" id="name" name="name" v-model="selectedImage.name"> |
| ... | @@ -36,18 +36,18 @@ | ... | @@ -36,18 +36,18 @@ |
| 36 | this image. | 36 | this image. |
| 37 | </p> | 37 | </p> |
| 38 | <ul class="text-neg"> | 38 | <ul class="text-neg"> |
| 39 | - <li v-repeat="page: dependantPages"> | 39 | + <li v-for="page in dependantPages"> |
| 40 | - <a v-attr="href: page.url" target="_blank" class="text-neg">@{{ page.name }}</a> | 40 | + <a :href="page.url" target="_blank" class="text-neg">{{ page.name }}</a> |
| 41 | </li> | 41 | </li> |
| 42 | </ul> | 42 | </ul> |
| 43 | </div> | 43 | </div> |
| 44 | 44 | ||
| 45 | - <form v-on="submit: deleteImage" v-el="imageDeleteForm"> | 45 | + <form v-on:submit="deleteImage" v-el:image-delete-form> |
| 46 | <button class="button neg"><i class="zmdi zmdi-delete"></i>Delete Image</button> | 46 | <button class="button neg"><i class="zmdi zmdi-delete"></i>Delete Image</button> |
| 47 | </form> | 47 | </form> |
| 48 | </div> | 48 | </div> |
| 49 | <div class="image-manager-bottom"> | 49 | <div class="image-manager-bottom"> |
| 50 | - <button class="button pos anim fadeIn" v-show="selectedImage" v-on="click:selectButtonClick"><i | 50 | + <button class="button pos anim fadeIn" v-show="selectedImage" v-on:click="selectButtonClick"><i |
| 51 | class="zmdi zmdi-square-right"></i>Select Image | 51 | class="zmdi zmdi-square-right"></i>Select Image |
| 52 | </button> | 52 | </button> |
| 53 | </div> | 53 | </div> |
| ... | @@ -97,7 +97,7 @@ | ... | @@ -97,7 +97,7 @@ |
| 97 | 97 | ||
| 98 | setupDropZone: function () { | 98 | setupDropZone: function () { |
| 99 | var _this = this; | 99 | var _this = this; |
| 100 | - var dropZone = new Dropzone(_this.$$.dropZone, { | 100 | + var dropZone = new Dropzone(_this.$els.dropZone, { |
| 101 | url: '/upload/image', | 101 | url: '/upload/image', |
| 102 | init: function () { | 102 | init: function () { |
| 103 | var dz = this; | 103 | var dz = this; |
| ... | @@ -140,7 +140,7 @@ | ... | @@ -140,7 +140,7 @@ |
| 140 | 140 | ||
| 141 | show: function (callback) { | 141 | show: function (callback) { |
| 142 | this.callback = callback; | 142 | this.callback = callback; |
| 143 | - this.$$.overlay.style.display = 'block'; | 143 | + this.$els.overlay.style.display = 'block'; |
| 144 | // Get initial images if they have not yet been loaded in. | 144 | // Get initial images if they have not yet been loaded in. |
| 145 | if (!this.dataLoaded) { | 145 | if (!this.dataLoaded) { |
| 146 | this.fetchData(this.page); | 146 | this.fetchData(this.page); |
| ... | @@ -155,14 +155,14 @@ | ... | @@ -155,14 +155,14 @@ |
| 155 | }, | 155 | }, |
| 156 | 156 | ||
| 157 | hide: function () { | 157 | hide: function () { |
| 158 | - this.$$.overlay.style.display = 'none'; | 158 | + this.$els.overlay.style.display = 'none'; |
| 159 | }, | 159 | }, |
| 160 | 160 | ||
| 161 | saveImageDetails: function (e) { | 161 | saveImageDetails: function (e) { |
| 162 | e.preventDefault(); | 162 | e.preventDefault(); |
| 163 | var _this = this; | 163 | var _this = this; |
| 164 | _this.selectedImage._token = _this.token; | 164 | _this.selectedImage._token = _this.token; |
| 165 | - var form = $(_this.$$.imageForm); | 165 | + var form = $(_this.$els.imageForm); |
| 166 | $.ajax('/images/update/' + _this.selectedImage.id, { | 166 | $.ajax('/images/update/' + _this.selectedImage.id, { |
| 167 | method: 'PUT', | 167 | method: 'PUT', |
| 168 | data: _this.selectedImage | 168 | data: _this.selectedImage |
| ... | @@ -184,7 +184,7 @@ | ... | @@ -184,7 +184,7 @@ |
| 184 | }).done(function () { | 184 | }).done(function () { |
| 185 | _this.images.splice(_this.images.indexOf(_this.selectedImage), 1); | 185 | _this.images.splice(_this.images.indexOf(_this.selectedImage), 1); |
| 186 | _this.selectedImage = false; | 186 | _this.selectedImage = false; |
| 187 | - $(_this.$$.imageTitle).showSuccess('Image Deleted'); | 187 | + $(_this.$els.imageTitle).showSuccess('Image Deleted'); |
| 188 | }).fail(function (jqXHR, textStatus) { | 188 | }).fail(function (jqXHR, textStatus) { |
| 189 | // Pages failure | 189 | // Pages failure |
| 190 | if (jqXHR.status === 400) { | 190 | if (jqXHR.status === 400) { | ... | ... |
| ... | @@ -2,12 +2,12 @@ | ... | @@ -2,12 +2,12 @@ |
| 2 | <template> | 2 | <template> |
| 3 | <div class="image-picker"> | 3 | <div class="image-picker"> |
| 4 | <div> | 4 | <div> |
| 5 | - <img v-if="image && image !== 'none'" v-attr="src: image, class: imageClass" alt="Image Preview"> | 5 | + <img v-if="image && image !== 'none'" :src="image" :class="imageClass" alt="Image Preview"> |
| 6 | </div> | 6 | </div> |
| 7 | - <button class="button" type="button" v-on="click: showImageManager">Select Image</button> | 7 | + <button class="button" type="button" v-on:click="showImageManager">Select Image</button> |
| 8 | <br> | 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> | 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"> | 10 | + <input type="hidden" :name="name" :id="name" v-model="image"> |
| 11 | </div> | 11 | </div> |
| 12 | </template> | 12 | </template> |
| 13 | 13 | ||
| ... | @@ -33,5 +33,5 @@ | ... | @@ -33,5 +33,5 @@ |
| 33 | this.image = 'none'; | 33 | this.image = 'none'; |
| 34 | } | 34 | } |
| 35 | } | 35 | } |
| 36 | - } | 36 | + }; |
| 37 | </script> | 37 | </script> |
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| 1 | 1 | ||
| 2 | <template> | 2 | <template> |
| 3 | - <div class="toggle-switch" v-on="click: switch" v-class="active: isActive"> | 3 | + <div class="toggle-switch" v-on:click="switch" :class="{'active': isActive}"> |
| 4 | - <input type="hidden" v-attr="name: name, value: value"/> | 4 | + <input type="hidden" :name="name" :value="value"/> |
| 5 | <div class="switch-handle"></div> | 5 | <div class="switch-handle"></div> |
| 6 | </div> | 6 | </div> |
| 7 | </template> | 7 | </template> |
| ... | @@ -24,5 +24,5 @@ | ... | @@ -24,5 +24,5 @@ |
| 24 | this.value = this.isActive ? 'true' : 'false'; | 24 | this.value = this.isActive ? 'true' : 'false'; |
| 25 | } | 25 | } |
| 26 | } | 26 | } |
| 27 | - } | 27 | + }; |
| 28 | </script> | 28 | </script> |
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
-
Please register or sign in to post a comment