Merge pull request #480 from openclassify/dia

Make openclassify compatible with VueJS

addons/default/visiosoft/advs-module/resources/views/ad-detail/partials/map.twig

@@ -8,7 +8,7 @@
     $(document).ready(function () {
         var no_image_text = "{{ trans('visiosoft.module.streetview::field.no_location') }}";
 
-
+        if (typeof coord !== 'undefined') {
             var ifAnyImg = "https://maps.googleapis.com/maps/api/streetview/metadata?size=600x300&location=" + coord[0] + "," + coord[1] +
                 "&fov=90&heading=235&pitch=10&key=" + google_map_key;
             $.getJSON(ifAnyImg, function (data) {
@@ -22,6 +22,7 @@
                     }
                 }
             )
+        }
     });
 </script>
 <script>

addons/default/visiosoft/base-theme/resources/views/partials/assets.twig

@@ -2,6 +2,9 @@
     Main CSS can be found in metadata.twig
 #}
 
+<!-- VueJS Requirements -->
+<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
+
 {# Core Theme Components #}
 {{ asset_add("theme.js", "visiosoft.theme.base::js/popper.min.js") }}
 {{ asset_add("theme.js", "visiosoft.theme.base::js/bootstrap.min.js") }}

addons/default/visiosoft/base-theme/resources/views/partials/metadata.twig

@@ -1,6 +1,9 @@
 <!-- Locale -->
 <meta http-equiv="Content-Language" content="{{ config('app.locale') }}">
 
+<!-- VueJS Requirements -->
+<meta name="csrf-token" content="{{ csrf_token() }}" />
+
 <!-- To the Future! -->
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 

package.json

@@ -20,6 +20,7 @@
         "resolve-url-loader": "^2.3.1",
         "sass": "^1.15.2",
         "sass-loader": "^7.1.0",
-        "vue": "^2.5.17"
+        "vue": "^2.5.17",
+        "vue-template-compiler": "^2.6.11"
     }
-}
+}

resources/assets/js/app.js

@@ -13,8 +13,10 @@ require('./bootstrap');
  * or customize the JavaScript scaffolding to fit your unique needs.
  */
 
-Vue.component('example', require('./components/Example.vue'));
+window.Vue = require('vue');
 
-const app = new Vue({
-    el: '#app'
-});
+// Vue.component('example', require('./components/Example.vue').default);
+//
+// const app = new Vue({
+//     el: '#app'
+// });

resources/assets/sass/variables.scss

@@ -18,7 +18,7 @@ $brand-danger:  #bf5329;
 
 // Typography
 $font-family-sans-serif: "Raleway", sans-serif;
-$font-size-base: 14px;
+$font-size-base: 0.875rem;
 $line-height-base: 1.6;
 $text-color: #636b6f;
 

webpack.mix.js

@@ -11,5 +11,7 @@ let mix = require('laravel-mix');
  |
  */
 
-mix.js('resources/assets/js/app.js', 'public/js')
-   .sass('resources/assets/sass/app.scss', 'public/css');
+mix
+    .js('resources/assets/js/app.js', 'public/js')
+    .js('addons/default/visiosoft/*/resources/js/vue/app.js', 'public/js')
+    .sass('resources/assets/sass/app.scss', 'public/css');