Merge pull request #102 from sheibeck/develop

Develop @ 2.4.1
sheibeck · Dec 2, 2020 · 9513fc0 · 9513fc0
2 parents f3e3446 + 85c6ce7
commit 9513fc0
Show file tree

Hide file tree

Showing 6 changed files with 136 additions and 81 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fatecharactersheet",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "Website for managing all things for Fate-based roleplaying games.",
   "main": "index.js",
   "scripts": {
@@ -51,6 +51,7 @@
     "bootstrap": "^4.5.2",
     "bootstrap-vue": "^2.17.0",
     "draggable-vue-directive": "^2.1.0",
+    "font-picker-vue": "^1.0.3",
     "interactjs": "^1.9.22",
     "jquery": "^3.5.1",
     "jquery-serializeobject": "^1.0.0",

diff --git a/src/components/characterprops.vue b/src/components/characterprops.vue
@@ -1,5 +1,6 @@
 <template>
-    <div v-if="characterData && isAuthenticated && isOwner">
+<div>
+    <div v-if="characterData && isAuthenticated && isOwner">      
         <ul class="nav nav-tabs" id="propertyTabs" role="tablist">
             <li class="nav-item">
                 <a class="nav-link active" id="character-tab" data-toggle="tab" href="#characterProperties" role="tab" aria-controls="character" aria-selected="true">Character Properties</a>
@@ -42,40 +43,45 @@
 
           <div v-if="isCustomizable" class="tab-pane fade" id="sheetProperties" role="tabpanel" aria-labelledby="profile-tab">
             <div class="d-flex flex-column flex-md-row">               
-              <div class="form-group flex-fill mr-2" v-if="characterData.template_id && selectedTemplate">
+              <div class="form-group col-12 col-md-6" v-if="characterData.template_id && appliedTemplate">
                 <label>Applied Template:</label>
                 <div>
                   {{GetTemplateName}}
                   <div class="small">
                     {{GetTemplateDescription}}
                   </div>
                   <div class="small text-muted" v-if="SheetModifiedAfterTemplate">
-                    Changes have been made to this sheet after applying this template.
+                    Changes have been made to this sheet or the applied template has changed.
                   </div>
                 </div>
               </div>
-              <div class="form-group flex-fill">
+              <div class="form-group col-12 col-md 6 d-flex flex-column">
                 <label class='' for='template'>Find a Template:</label>
-                <autocomplete ref="templateAutocomplete"
-                    :search="searchTemplates"
-                    :debounce-time="500"
-                    placeholder="Find a template"
-                    aria-label="Find a template"       
-                    :get-result-value="getTemplateResultValue"
-                    @submit="selectTemplateResult"
-                    class="mr-1">
-                  <template #result="{ result, props }">
-                    <li v-bind="props">
-                        <div class="p-0 m-0 h6">
-                        {{result.name}}
-                        </div>
-                        <div class="small">
-                        {{result.description}}
-                        </div>
-                    </li>
-                  </template>
-                </autocomplete>
-                <input type="checkbox" class="mr-1 input-sm" ref="templateSearchMine" /><span>Search only my templates?</span>
+                <div class="d-flex">                  
+                  <autocomplete ref="templateAutocomplete"
+                      :search="searchTemplates"
+                      :debounce-time="500"
+                      placeholder="Find a template"
+                      aria-label="Find a template"       
+                      :get-result-value="getTemplateResultValue"
+                      @submit="selectTemplateResult"
+                      class="mr-1 flex-fill">
+                    <template #result="{ result, props }">
+                      <li v-bind="props">
+                          <div class="p-0 m-0 h6">
+                          {{result.name}}
+                          </div>
+                          <div class="small">
+                          {{result.description}}
+                          </div>
+                      </li>                    
+                    </template>                  
+                  </autocomplete>                
+                  <button type="button" class="btn btn-link" @click="clearTemplateSelection()"><i class="far fa-times-circle"></i></button>
+                </div>
+                <div>
+                  <input type="checkbox" class="mr-1 input-sm" ref="templateSearchMine" /><span>Search only my templates?</span>
+                </div>
                 <div class="d-flex">
                     <button type="button" class="btn btn-success btn-sm mr-1" data-toggle='modal' data-target='#modalSaveTemplate'>Save Template</button>
                     <button type="button" class="btn btn-primary btn-sm mr-1" v-if="template.id" @click="applyTemplate">Apply Template</button>
@@ -92,7 +98,12 @@
             <div class='form-group'>
                 <label class='' for='sheet_logo'>Template Logo Url:</label> <a :href="getImageSearchUrl('tv show logos')" target="_blank">[search]</a>
                 <input class='form-control' ref="sheet_logo" id='sheet_logo' name='sheet_logo' @change="updateTemplateLogo($event.target.value)" :value="exists(characterData.template, 'logo')" />
-            </div>    
+            </div>   
+
+            <div class='form-group'>
+                <label class='' for='sheet_logo'>Template Font:</label>
+                <font-picker :api-key="'AIzaSyBPXSM04gZ5XajTtMnXr_z83loTBJ7qgDA'" :options="fontPickerOptions" :active-font="GetFont" @change="applyFont"></font-picker> 
+            </div>              
 
             <!-- delete template confirmation modal-->
             <div class="modal fade" id="modalSaveTemplate" tabindex="-1" role="dialog" aria-labelledby="deleteLabel" aria-hidden="true">
@@ -129,9 +140,13 @@
                 </div>
             </div>           
           </div>
-
         </div>       
     </div>
+    <div v-else style="visibility:hidden">
+      <!-- need this to properly render selected fonts -->      
+      <font-picker :api-key="'AIzaSyBPXSM04gZ5XajTtMnXr_z83loTBJ7qgDA'" :options="fontPickerOptions" :active-font="GetFont" @change="applyFont"></font-picker>
+    </div>
+</div>
 </template>
 
 <script>
@@ -142,6 +157,7 @@ import Autocomplete from '@trevoreyre/autocomplete-vue';
 import bootbox from 'bootbox';
 import CommonService from "./../assets/js/commonService";
 import DbService from '../assets/js/dbService';
+import FontPicker from 'font-picker-vue';
 
 let commonSvc = null;
 let dbSvc = null;
@@ -160,6 +176,7 @@ export default {
     'swatches-picker': Compact,
     VueTagsInput,
     Autocomplete,
+    'font-picker': FontPicker
   },
   data() {
       return {
@@ -168,28 +185,40 @@ export default {
             name: "",
             description: "",
         },
-        selectedTemplate: null,
+        appliedTemplate: null,
+        fontPickerOptions: {
+          name: "main",  
+          variants: ['regular', '700'],
+          //categories: ['sans-serif', 'serif', 'display'],
+          limit: 200,          
+        }
       }
   },
   computed: {
     ...mapGetters([
       'isAuthenticated',
       'userId',
     ]),
-    async GetSelectedTemplate() {      
-      if (this.characterData.template_id) {
+    async GetAppliedTemplate() {      
+      if (this.characterData.template_id && !this.appliedTemplate) {       
         let template = await dbSvc.GetObject(this.characterData.template_id);
         if (template) {
-          this.selectedTemplate = template;
-          return;
+          this.appliedTemplate = template;           
         }
       }
-      this.selectedTemplate = null;
     },
-    SheetModifiedAfterTemplate() {      
-      return JSON.stringify(this.selectedTemplate.template) !== JSON.stringify(this.characterData.template);
+    GetFont() {
+      if (this.characterData.template && this.characterData.template.fontFamily) {
+        return this.characterData.template.fontFamily;
+      }
+      else {
+        return "Open Sans";
+      }      
+    },
+    SheetModifiedAfterTemplate() {
+      return JSON.stringify(this.appliedTemplate.template) !== JSON.stringify(this.characterData.template);
     },
-    GetHighConcept() {        
+    GetHighConcept() {
         let concept = "character portraits";
 
         if (this.characterData.aspects)
@@ -210,10 +239,10 @@ export default {
       return this.template && this.template.owner_id == this.userId;
     }, 
     GetTemplateName() {      
-      return this.selectedTemplate ? this.selectedTemplate.name : 'None';
+      return this.appliedTemplate ? this.appliedTemplate.name : 'None';
     },
     GetTemplateDescription() {
-      return this.selectedTemplate ? this.selectedTemplate.description : '';
+      return this.characterData.template ? this.characterData.template.description : '';
     },
     getTemplateColor() {
       if (this.characterData.template) {        
@@ -229,7 +258,7 @@ export default {
         commonSvc = new CommonService(this.$root);
         dbSvc = new DbService(this.$root); 
 
-        await this.GetSelectedTemplate;
+        await this.GetAppliedTemplate;
 
         $('#modalSaveTemplate').on('hidden.bs.modal', function (e) {
             let form = document.getElementById('formTemplate');
@@ -249,12 +278,7 @@ export default {
       this.characterData.tags = newTags;     
     }, 
      /* template search */
-    async searchTemplates(query) {
-      this.template = {
-        name: "",
-        description: "",
-      }
-
+    async searchTemplates(query) {     
       return new Promise( async (resolve) => {                       
         let ownerId = null;
         if (this.$refs.templateSearchMine.checked) {
@@ -290,11 +314,7 @@ export default {
     },
     applyTemplate() {
       bootbox.confirm("Are you sure you want to use this template? This will reset any custom labels.", async (result) => {        
-        if (result) {      
-          //clear out the old template
-          //this.characterData.template_id = null;
-          //this.characterData.template = null;
-
+        if (result) {               
           //remove any existing labels so the new template labels/placeholder take effect
           const removeLabels = (obj) => {
             if (!obj) return;
@@ -312,7 +332,7 @@ export default {
           //assign the new template to this character
           this.$set(this.characterData, "template_id", this.template.id);
           this.$set(this.characterData, "template", this.template.template);
-          this.selectedTemplate = this.template;
+          this.appliedTemplate = this.template;
         }
       })
     },
@@ -355,26 +375,40 @@ export default {
 
         //convert the placeholder values to the custom label names
         let charTemplate = commonSvc.DeepCopy(this.characterData.template);
-        for (const [key, value] of Object.entries(charTemplate)) {
-          console.log(`${key}: ${value}`);
-          if (Array.isArray(value)) {
-            value.forEach( (item) => {
-              let labelVal = commonSvc.getVal(this.characterData, item.label, "");
-              item.placeholder = labelVal ? labelVal : item.placeholder;
-            });
+
+        let parseTemplate = (thingToParse) => {
+          if (typeof(thingToParse) == "object")
+          {
+            for (const [key, value] of Object.entries(thingToParse)) {
+              if (Array.isArray(value)) {
+                value.forEach( (item) => {
+                  let labelVal = commonSvc.getVal(this.characterData, item.label, "");
+                  item.placeholder = labelVal ? labelVal : item.placeholder;
+
+                  parseTemplate(item);
+                });              
+              }
+            }
           }
         }
+        parseTemplate(charTemplate);
+
+        //we are copying the template from the existing character 
+        //changes so we need to pickup the updated name/description
+        charTemplate.name = this.template.name;
+        charTemplate.description = this.template.description;
         template.template = charTemplate;
        
-        let response = await dbSvc.SaveObject(template);            
-        if (response) {              
+        let response = await dbSvc.SaveObject(template);
+        if (response) {
           commonSvc.Notify('Template saved.', 'success');
           $('#modalSaveTemplate').modal('hide');
 
           //apply the template to this character
           this.$set(this.characterData, "template_id", template.id);
-          this.selectedTemplate = template;
-          this.$emit('save-character');
+          this.$set(this.characterData, "template", charTemplate);
+          this.appliedTemplate = template;
+          this.$emit('save-character');          
         }            
       }
     },
@@ -394,7 +428,17 @@ export default {
         if (query == "concept") {
             query = this.GetHighConcept;
         }
-        return commonSvc.GetImageSearchUrl(query);       
+        return commonSvc.GetImageSearchUrl(query);
+    },
+    applyFont(font) {      
+      this.$set(this.characterData.template, "fontFamily", font.family);
+    },
+    clearTemplateSelection() {
+      this.$refs.templateAutocomplete.value = '';
+      this.template = {
+            name: "",
+            description: "",
+        }
     }
   }
 }

diff --git a/src/components/input-stuntextra.vue b/src/components/input-stuntextra.vue
@@ -12,7 +12,7 @@
       </div>
     </div>
 
-    <div class="form-group">    
+    <div class="form-group stuntText">    
       <textarea v-if="stuntEdit || isNewCharacter" class="form-control" :id="item" :name="item" :rows="rows" :placeholder="header" @change="$parent.setVal(item,  $event.target.value)" :value="$parent.getVal(item)"></textarea>
       <VueShowdown v-if="!stuntEdit && !isNewCharacter" class="h-auto p-2" :class="{border: border}" :options="vueShowdownOpts" :style="{ 'min-height': minHeight + 'px' }" :markdown="getMarkupVal(item)" />
     </div>  

diff --git a/src/index.js b/src/index.js
@@ -11,6 +11,7 @@ import 'vue-datetime/dist/vue-datetime.css'
 import VueShowdown, { showdown } from 'vue-showdown'
 import App from './App'
 import router from './router'
+
 import 'whatwg-fetch'
 import './assets/site.scss'