Started search interface, Added in vue and moved fonts

resources/assets/js/global.js

@@ -1,12 +1,5 @@
 "use strict";
 
-// AngularJS - Create application and load components
-import angular from "angular";
-import "angular-resource";
-import "angular-animate";
-import "angular-sanitize";
-import "angular-ui-sortable";
-
 // Url retrieval function
 window.baseUrl = function(path) {
     let basePath = document.querySelector('meta[name="base-url"]').getAttribute('content');
@@ -15,6 +8,28 @@ window.baseUrl = function(path) {
     return basePath + '/' + path;
 };
 
+// Vue and axios setup
+import vue from "vue/dist/vue.common";
+import axios from "axios";
+
+let axiosInstance = axios.create({
+    headers: {
+        'X-CSRF-TOKEN': document.querySelector('meta[name=token]').getAttribute('content'),
+        'baseURL': baseUrl('')
+    }
+});
+
+window.Vue = vue;
+window.axios = axiosInstance;
+Vue.prototype.$http = axiosInstance;
+
+// AngularJS - Create application and load components
+import angular from "angular";
+import "angular-resource";
+import "angular-animate";
+import "angular-sanitize";
+import "angular-ui-sortable";
+
 let ngApp = angular.module('bookStack', ['ngResource', 'ngAnimate', 'ngSanitize', 'ui.sortable']);
 
 // Translation setup
@@ -47,6 +62,7 @@ class EventManager {
 }
 
 window.Events = new EventManager();
+Vue.prototype.$events = window.Events;
 
 // Load in angular specific items
 import Services from './services';

resources/assets/js/vues/search.js

@@ -0,0 +1,66 @@
+
+let termString = document.querySelector('[name=searchTerm]').value;
+let terms = termString.split(' ');
+
+let data = {
+    terms: terms,
+        termString : termString,
+        search: {
+        type: {
+            page: true,
+            chapter: true,
+            book: true
+        }
+    }
+};
+
+let computed = {
+
+};
+
+let methods = {
+
+    appendTerm(term) {
+        if (this.termString.slice(-1) !== " ") this.termString += ' ';
+        this.termString += term;
+    },
+
+    typeParse(searchString) {
+        let typeFilter = /{\s?type:\s?(.*?)\s?}/;
+        let match = searchString.match(typeFilter);
+        let type = this.search.type;
+        if (!match) {
+            type.page = type.book = type.chapter = true;
+            return;
+        }
+        let splitTypes = match[1].replace(/ /g, '').split('|');
+        type.page = (splitTypes.indexOf('page') !== -1);
+        type.chapter = (splitTypes.indexOf('chapter') !== -1);
+        type.book = (splitTypes.indexOf('book') !== -1);
+    },
+
+    typeChange() {
+        let typeFilter = /{\s?type:\s?(.*?)\s?}/;
+        let type = this.search.type;
+        if (type.page === type.chapter && type.page === type.book) {
+            this.termString = this.termString.replace(typeFilter, '');
+            return;
+        }
+        let selectedTypes = Object.keys(type).filter(type => {return this.search.type[type];}).join('|');
+        let typeTerm = '{type:'+selectedTypes+'}';
+        if (this.termString.match(typeFilter)) {
+            this.termString = this.termString.replace(typeFilter, typeTerm);
+            return;
+        }
+        this.appendTerm(typeTerm);
+    }
+
+};
+
+function created() {
+    this.typeParse(this.termString);
+}
+
+module.exports = {
+    data, computed, methods, created
+};

resources/assets/js/vues/vues.js

@@ -0,0 +1,16 @@
+
+function exists(id) {
+    return document.getElementById(id) !== null;
+}
+
+let vueMapping = {
+    'search-system': require('./search')
+};
+
+Object.keys(vueMapping).forEach(id => {
+    if (exists(id)) {
+        let config = vueMapping[id];
+        config.el = '#' + id;
+        new Vue(config);
+    }
+});

resources/assets/sass/_fonts.scss

@@ -6,8 +6,8 @@
   font-style: normal;
   font-weight: 100;
   src: local('Roboto Thin'), local('Roboto-Thin'),
-  url('../fonts/roboto-v15-cyrillic_latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
-  url('../fonts/roboto-v15-cyrillic_latin-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  url('assets/fonts/roboto-v15-cyrillic_latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+  url('assets/fonts/roboto-v15-cyrillic_latin-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* roboto-100italic - cyrillic_latin */
 @font-face {
@@ -15,8 +15,8 @@
   font-style: italic;
   font-weight: 100;
   src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'),
-  url('../fonts/roboto-v15-cyrillic_latin-100italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
-  url('../fonts/roboto-v15-cyrillic_latin-100italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  url('assets/fonts/roboto-v15-cyrillic_latin-100italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+  url('assets/fonts/roboto-v15-cyrillic_latin-100italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* roboto-300 - cyrillic_latin */
 @font-face {
@@ -24,8 +24,8 @@
   font-style: normal;
   font-weight: 300;
   src: local('Roboto Light'), local('Roboto-Light'),
-  url('../fonts/roboto-v15-cyrillic_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
-  url('../fonts/roboto-v15-cyrillic_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  url('assets/fonts/roboto-v15-cyrillic_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+  url('assets/fonts/roboto-v15-cyrillic_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* roboto-300italic - cyrillic_latin */
 @font-face {
@@ -33,8 +33,8 @@
   font-style: italic;
   font-weight: 300;
   src: local('Roboto Light Italic'), local('Roboto-LightItalic'),
-  url('../fonts/roboto-v15-cyrillic_latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
-  url('../fonts/roboto-v15-cyrillic_latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  url('assets/fonts/roboto-v15-cyrillic_latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+  url('assets/fonts/roboto-v15-cyrillic_latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* roboto-regular - cyrillic_latin */
 @font-face {
@@ -42,8 +42,8 @@
   font-style: normal;
   font-weight: 400;
   src: local('Roboto'), local('Roboto-Regular'),
-  url('../fonts/roboto-v15-cyrillic_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
-  url('../fonts/roboto-v15-cyrillic_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  url('assets/fonts/roboto-v15-cyrillic_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+  url('assets/fonts/roboto-v15-cyrillic_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* roboto-italic - cyrillic_latin */
 @font-face {
@@ -51,8 +51,8 @@
   font-style: italic;
   font-weight: 400;
   src: local('Roboto Italic'), local('Roboto-Italic'),
-  url('../fonts/roboto-v15-cyrillic_latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
-  url('../fonts/roboto-v15-cyrillic_latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  url('assets/fonts/roboto-v15-cyrillic_latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+  url('assets/fonts/roboto-v15-cyrillic_latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* roboto-500 - cyrillic_latin */
 @font-face {
@@ -60,8 +60,8 @@
   font-style: normal;
   font-weight: 500;
   src: local('Roboto Medium'), local('Roboto-Medium'),
-  url('../fonts/roboto-v15-cyrillic_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
-  url('../fonts/roboto-v15-cyrillic_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  url('assets/fonts/roboto-v15-cyrillic_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+  url('assets/fonts/roboto-v15-cyrillic_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* roboto-500italic - cyrillic_latin */
 @font-face {
@@ -69,8 +69,8 @@
   font-style: italic;
   font-weight: 500;
   src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
-  url('../fonts/roboto-v15-cyrillic_latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
-  url('../fonts/roboto-v15-cyrillic_latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  url('assets/fonts/roboto-v15-cyrillic_latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+  url('assets/fonts/roboto-v15-cyrillic_latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* roboto-700 - cyrillic_latin */
 @font-face {
@@ -78,8 +78,8 @@
   font-style: normal;
   font-weight: 700;
   src: local('Roboto Bold'), local('Roboto-Bold'),
-  url('../fonts/roboto-v15-cyrillic_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
-  url('../fonts/roboto-v15-cyrillic_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  url('assets/fonts/roboto-v15-cyrillic_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+  url('assets/fonts/roboto-v15-cyrillic_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 /* roboto-700italic - cyrillic_latin */
 @font-face {
@@ -87,8 +87,8 @@
   font-style: italic;
   font-weight: 700;
   src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
-  url('../fonts/roboto-v15-cyrillic_latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
-  url('../fonts/roboto-v15-cyrillic_latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  url('assets/fonts/roboto-v15-cyrillic_latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+  url('assets/fonts/roboto-v15-cyrillic_latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
 /* roboto-mono-regular - latin */
@@ -97,6 +97,6 @@
   font-style: normal;
   font-weight: 400;
   src: local('Roboto Mono'), local('RobotoMono-Regular'),
-  url('../fonts/roboto-mono-v4-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
-  url('../fonts/roboto-mono-v4-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+  url('assets/fonts/roboto-mono-v4-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+  url('assets/fonts/roboto-mono-v4-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }

resources/views/base.blade.php

@@ -84,6 +84,7 @@
     </div>
 @yield('bottom')
 <script src="{{ versioned_asset('js/common.js') }}"></script>
+<script src="{{ versioned_asset('js/vues.js') }}"></script>
 @yield('scripts')
 </body>
 </html>

resources/views/search/all.blade.php

@@ -2,6 +2,9 @@
 
 @section('content')
 
+    <input type="hidden" name="searchTerm" value="{{$searchTerm}}">
+
+<div id="search-system">
     <div class="faded-small toolbar">
         <div class="container">
             <div class="row">
@@ -15,40 +18,41 @@
     </div>
 
 
-    <div class="container" ng-non-bindable>
+    <div class="container" ng-non-bindable id="searchSystem">
 
         <h1>{{ trans('entities.search_results') }}</h1>
 
-        <p>
-            {{--TODO - Remove these pages--}}
-            Remove these links (Commented out)
-            {{--@if(count($pages) > 0)--}}
-                {{--<a href="{{ baseUrl("/search/pages?term={$searchTerm}") }}" class="text-page"><i class="zmdi zmdi-file-text"></i>{{ trans('entities.search_view_pages') }}</a>--}}
-            {{--@endif--}}
-
-            {{--@if(count($chapters) > 0)--}}
-                {{--&nbsp; &nbsp;&nbsp;--}}
-                {{--<a href="{{ baseUrl("/search/chapters?term={$searchTerm}") }}" class="text-chapter"><i class="zmdi zmdi-collection-bookmark"></i>{{ trans('entities.search_view_chapters') }}</a>--}}
-            {{--@endif--}}
-
-            {{--@if(count($books) > 0)--}}
-                {{--&nbsp; &nbsp;&nbsp;--}}
-                {{--<a href="{{ baseUrl("/search/books?term={$searchTerm}") }}" class="text-book"><i class="zmdi zmdi-book"></i>{{ trans('entities.search_view_books') }}</a>--}}
-            {{--@endif--}}
-        </p>
+        <input type="text" v-model="termString">
 
         <div class="row">
+
             <div class="col-md-6">
-                <h3><a href="{{ baseUrl("/search/pages?term={$searchTerm}") }}" class="no-color">{{ trans('entities.pages') }}</a></h3>
-                @include('partials/entity-list', ['entities' => $entities, 'style' => 'detailed'])
+                @include('partials/entity-list', ['entities' => $entities])
             </div>
+
             <div class="col-md-5 col-md-offset-1">
-                Sidebar filter controls
+               <h3>Search Filters</h3>
+
+                <p><strong>Content Type</strong></p>
+                <div class="form-group">
+                    <label><input type="checkbox" v-on:change="typeChange" v-model="search.type.page" value="page"> Page</label>
+                    <label><input type="checkbox" v-on:change="typeChange" v-model="search.type.chapter" value="chapter"> Chapter</label>
+                    <label><input type="checkbox" v-on:change="typeChange" v-model="search.type.book" value="book"> Book</label>
+                </div>
+
             </div>
+
         </div>
 
 
     </div>
+</div>
+
+@stop
+
+@section('scripts')
+    <script>
 
 
+    </script>
 @stop