gitadmin
/
profile-studio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added feature for toggle of visibility of version switcher

This commit is contained in:
chris2fr 2020-10-31 11:18:22 +01:00
parent 2c6e2e3717
commit 9e1c35f016
7 changed files with 140 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/app.js
View File

@ -10,6 +10,7 @@
var router = new VueRouter({ var router = new VueRouter({
routes: [ routes: [
{ path: '/', component: homeComponent }, { path: '/', component: homeComponent },
{ path: '/settings', component: settingsComponent },
{ path: '/section/basics', component: sectionBasicsComponent }, { path: '/section/basics', component: sectionBasicsComponent },
{ path: '/section/work', component: sectionWorkComponent }, { path: '/section/work', component: sectionWorkComponent },
@ -64,12 +65,11 @@ var app = new Vue({
created() created()
{ {
this.sections = models.newDefaultSections(); this.sections = models.newDefaultSections();
this.settings = models.newDefaultSettings();
// this.versons = []; // this.versons = [];
this.versions = storage.getLocalStorage("versions"); this.versions = storage.getLocalStorage("versions");
this.currentVersion = ""; this.currentVersion = "";
// console.log("this.sections=", this.sections);
//-- Register all components //-- Register all components
pageComponents.registerComponents(); pageComponents.registerComponents();
@ -89,15 +89,11 @@ var app = new Vue({
{ {
this.loadCountryCodes(); this.loadCountryCodes();
this.loadFromStorage(); this.loadFromStorage();
this.currentVersion = this.$root.sections.meta.version this.currentVersion = this.$root.sections.meta.version;
// Quick Fix // Quick Fix
storage.setVersionedLocalStorage(this.currentVersion, "sections", this.$root.sections); storage.setVersionedLocalStorage(this.currentVersion, "sections", this.$root.sections);
// console.log([this.$root.sections.meta.version,this.$root.sections]);
//if (!this.availableVersions.hasKey(this.$root.sections.meta.version))
// this.availableVersions.push(this.$root.sections.meta.version);
// console.log([this.versions[0],storage.getVersionedLocalStorage(this.versions[0])]);
// this.availableVersions = this.$root.availableVersions; // this.$root.settings.versionswitcher = false; // storage.getLocalStorage("settings.versionswitcher")
// Set the "current" main navigation item based on the current route. // Set the "current" main navigation item based on the current route.
this.selectMenuItemForCurrentUrl(); this.selectMenuItemForCurrentUrl();
@ -173,8 +169,6 @@ var app = new Vue({
loadCountryCodes: function() loadCountryCodes: function()
{ {
// console.log("loadCountryCodes(): data", countryCodes);
this.countryCodes.push({ this.countryCodes.push({
"code": "", "code": "",
"name": "--Select a country--" "name": "--Select a country--"
@ -328,8 +322,6 @@ var app = new Vue({
var mySidebar = document.getElementById("mySidebar"); var mySidebar = document.getElementById("mySidebar");
var overlayBg = document.getElementById("myOverlay"); var overlayBg = document.getElementById("myOverlay");
console.log("mySidebar=", mySidebar);
if (mySidebar.style.display === 'block') if (mySidebar.style.display === 'block')
{ {
mySidebar.style.display = 'none'; mySidebar.style.display = 'none';
@ -390,7 +382,6 @@ var app = new Vue({
for (let i = 0; i < elements.length; i++) for (let i = 0; i < elements.length; i++)
{ {
var element = elements[i]; var element = elements[i];
//console.log("element[" + i + "]=", element);
// Get HREF from the element // Get HREF from the element
var linkHref = element.getAttribute("href"); var linkHref = element.getAttribute("href");

9
app/page_registration.js
View File

@ -81,6 +81,15 @@ var pageComponents = {
fontAwesomeIcon: "fas fa-home" fontAwesomeIcon: "fas fa-home"
}); });
this.registerComponent({
id: "settings",
path: "#/settings",
type: "page",
title: "Settings",
description: "",
fontAwesomeIcon: "fas fa-cog"
});
this.registerComponent({ this.registerComponent({
id: "basics", id: "basics",
path: "#/section/basics", path: "#/section/basics",

14
components/section_meta.js
View File

@ -40,11 +40,7 @@ var sectionMetaComponent = {
$data: { $data: {
handler: function(val, oldVal) handler: function(val, oldVal)
{ {
// Save the data to localStorage
//NOTE: I'm initially not concerned about performance here/
//storage.setLocalStorage("section.basics", val);
console.log([val, oldVal]);
//this.$root.sections.basics = val;
}, },
deep: true deep: true
} }
@ -66,14 +62,6 @@ var sectionMetaComponent = {
this.$root.currentVersion = this.$root.sections.meta.version; this.$root.currentVersion = this.$root.sections.meta.version;
storage.setLocalStorage("currentVersion",this.$root.currentVersion); storage.setLocalStorage("currentVersion",this.$root.currentVersion);
/*
var oldVersion = this.$root.currentVersion;
var newVersion = this.$root.sections.meta.version;
storage.setVersionedLocalStorage(newVersion,"sections",this.$root.sections);
storage.setVersionedLocalStorage(oldVersion,"sections",null);
this.$root.currentVersion = newVersion;
storage.setLocalStorage("currentVersion",newVersion);
*/
} }
} }

28
components/settings.js Normal file
View File

@ -0,0 +1,28 @@
var settingsComponent = {
template: '#settings-template',
mounted: function()
{
},
destroyed: function()
{
},
data: function()
{
return {
item: {}
};
},
watch: {
},
methods: {
}
};

41
components/version_switcher.js Normal file
View File

@ -0,0 +1,41 @@
Vue.component("version-switcher", {
template: '#version-switcher-template',
props: [
'forcevisible'
],
mounted: function()
{
this.displayFormat = (this.format ? this.format : "");
},
destroyed: function()
{
},
data: function()
{
return {
item: {}
};
},
methods: {
visible: function()
{
return this.forcevisible || this.$root.settings.versionswitcher;
}
}
});

112
index.html
View File

@ -47,14 +47,9 @@
<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar"> <nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar">
<div class="w3-bar-block"> <div class="w3-bar-block">
<a href="#/" class="w3-bar-item w3-button w3-padding w3-blue"><i class="fas fa-home"></i>&nbsp; Home</a> <a href="#/" class="w3-bar-item w3-button w3-padding w3-blue"><i class="fas fa-home"></i>&nbsp; Home</a>
<form> <version-switcher v-bind:forcevisible="true"></version-switcher>
<select name="currentVersion" v-model="$root.currentVersion" @change="$root.onVersionChange">
<option v-for="(version, v_index) in $root.versions">
{{ version }}
</option>
</select>
</form>
<a v-bind:href="this.sections.meta.canonical" v-if="this.sections.meta.canonical != ''" target="_new" class="w3-bar-item w3-button w3-padding "><i class="fas fa-link"></i> link ({{ this.sections.meta.lastModified}})</a> <a v-bind:href="this.sections.meta.canonical" v-if="this.sections.meta.canonical != ''" target="_new" class="w3-bar-item w3-button w3-padding "><i class="fas fa-link"></i> link ({{ this.sections.meta.lastModified}})</a>
<a href="#/settings" class="w3-bar-item w3-button w3-padding w3-blue"><i class="fas fa-cog"></i>&nbsp; Settings</a>
</div> </div>
<div class="w3-container w3-margin-top"> <div class="w3-container w3-margin-top">
<h5>Sections</h5> <h5>Sections</h5>
@ -107,22 +102,10 @@
<div class="w3-container"> <div class="w3-container">
<span class="w3-bar-item w3-button w3-padding" v-on:click="$root.saveResume"><i class="fas fa-save"></i>&nbsp; Save</span> <span class="w3-bar-item w3-button w3-padding" v-on:click="$root.saveResume"><i class="fas fa-save"></i>&nbsp; Save</span>
<form> <version-switcher></version-switcher>
<select name="currentVersion" v-model="$root.currentVersion" @change="$root.onVersionChange">
<option v-for="(version, v_index) in $root.versions">
{{ version }}
</option>
</select>
</form>
<router-view></router-view> <router-view></router-view>
<span class="w3-bar-item w3-button w3-padding" v-on:click="$root.saveResume"><i class="fas fa-save"></i>&nbsp; Save</span> <span class="w3-bar-item w3-button w3-padding" v-on:click="$root.saveResume"><i class="fas fa-save"></i>&nbsp; Save</span>
<form> <version-switcher></version-switcher>
<select name="currentVersion" v-model="$root.currentVersion" @change="$root.onVersionChange">
<option v-for="(version, v_index) in $root.versions">
{{ version }}
</option>
</select>
</form>
</div> </div>
</div> </div>
@ -316,10 +299,29 @@
</div> </div>
</template> </template>
<template type="text/x-template" id="settings-template" lang="html">
<div id="settings-root">
<form class="w3-container w3-card-4">
<p>
<label for="versionSwitcher" class="w3-text-blue"><b>Version-Switcher drop-down</b></label>
<input id="versionSwitcher" class="w3-input w3-border" type="checkbox" v-model="$root.settings.versionswitcher">
<small id="versionSwitcherHelp" class="form-help text-muted">Present a drop-down lisn of available versions.</small>
</p>
</form>
<!--
<div class="w3-row">
<div class="w3-col m12">
</div>
</div>
-->
</div>
</template>
<template type="text/x-template" id="section-meta-template" lang="html"> <template type="text/x-template" id="section-meta-template" lang="html">
<div id="section-meta-root"> <div id="section-meta-root">
<div class="w3-row"> <div class="w3-row">
<div class="w3-col m6"> <div class="w3-col m12">
<form class="w3-container w3-card-4"> <form class="w3-container w3-card-4">
<p> <p>
<label for="version" class="w3-text-blue"><b>Version</b></label> <label for="version" class="w3-text-blue"><b>Version</b></label>
@ -353,13 +355,7 @@
<card-header v-bind:label="work.company + ' - ' + work.position + ' (' + $root.dateMonthYear(work.startDate) + ')'" v-bind:id="w_index" v-on:delete-clicked="deleteClicked" v-on:move-up-clicked="moveUpClicked" v-on:move-down-clicked="moveDownClicked"></card-header> <card-header v-bind:label="work.company + ' - ' + work.position + ' (' + $root.dateMonthYear(work.startDate) + ')'" v-bind:id="w_index" v-on:delete-clicked="deleteClicked" v-on:move-up-clicked="moveUpClicked" v-on:move-down-clicked="moveDownClicked"></card-header>
<div class="w3-container w3-hide" v-bind:id="'content' + w_index"> <div class="w3-container w3-hide" v-bind:id="'content' + w_index">
<form> <version-switcher></version-switcher>
<select name="currentVersion" v-model="$root.currentVersion" @change="$root.onVersionChange">
<option v-for="(version, v_index) in $root.versions">
{{ version }}
</option>
</select>
</form>
<p> <p>
<label for="company" class="w3-text-blue required-field"><b>Company</b></label> <label for="company" class="w3-text-blue required-field"><b>Company</b></label>
<input id="company" class="w3-input w3-border" type="text" v-model="work.company" required> <input id="company" class="w3-input w3-border" type="text" v-model="work.company" required>
@ -440,11 +436,7 @@
<div class="w3-container w3-hide" v-bind:id="'content' + v_index"> <div class="w3-container w3-hide" v-bind:id="'content' + v_index">
<form> <form>
<select name="currentVersion" v-model="$root.currentVersion" @change="$root.onVersionChange"> <version-switcher></version-switcher>
<option v-for="(version, v_index) in $root.versions">
{{ version }}
</option>
</select>
</form> </form>
<p> <p>
<label for="organization" class="w3-text-blue required-field"><b>Organisation</b></label> <label for="organization" class="w3-text-blue required-field"><b>Organisation</b></label>
@ -524,11 +516,7 @@
<div class="w3-container w3-hide" v-bind:id="'content' + e_index"> <div class="w3-container w3-hide" v-bind:id="'content' + e_index">
<form> <form>
<select name="currentVersion" v-model="$root.currentVersion" @change="$root.onVersionChange"> <version-switcher></version-switcher>
<option v-for="(version, v_index) in $root.versions">
{{ version }}
</option>
</select>
</form> </form>
<p> <p>
<label for="institution" class="w3-text-blue required-field"><b>Institution</b></label> <label for="institution" class="w3-text-blue required-field"><b>Institution</b></label>
@ -658,11 +646,7 @@
<div class="w3-container w3-hide" v-bind:id="'content' + p_index"> <div class="w3-container w3-hide" v-bind:id="'content' + p_index">
<form> <form>
<select name="currentVersion" v-model="$root.currentVersion" @change="$root.onVersionChange"> <version-switcher></version-switcher>
<option v-for="(version, v_index) in $root.versions">
{{ version }}
</option>
</select>
</form> </form>
<p> <p>
<label for="name" class="w3-text-blue required-field"><b>Name</b></label> <label for="name" class="w3-text-blue required-field"><b>Name</b></label>
@ -723,11 +707,7 @@
<div class="w3-container w3-hide" v-bind:id="'content' + s_index"> <div class="w3-container w3-hide" v-bind:id="'content' + s_index">
<form> <form>
<select name="currentVersion" v-model="$root.currentVersion" @change="$root.onVersionChange"> <version-switcher></version-switcher>
<option v-for="(version, v_index) in $root.versions">
{{ version }}
</option>
</select>
</form> </form>
<p> <p>
@ -820,11 +800,7 @@
<div class="w3-container w3-hide" v-bind:id="'content' + i_index"> <div class="w3-container w3-hide" v-bind:id="'content' + i_index">
<form> <form>
<select name="currentVersion" v-model="$root.currentVersion" @change="$root.onVersionChange"> <version-switcher></version-switcher>
<option v-for="(version, v_index) in $root.versions">
{{ version }}
</option>
</select>
</form> </form>
<p> <p>
@ -878,13 +854,7 @@
<card-header v-bind:label="reference.name" v-bind:id="r_index" v-on:delete-clicked="deleteClicked" v-on:move-up-clicked="moveUpClicked" v-on:move-down-clicked="moveDownClicked"></card-header> <card-header v-bind:label="reference.name" v-bind:id="r_index" v-on:delete-clicked="deleteClicked" v-on:move-up-clicked="moveUpClicked" v-on:move-down-clicked="moveDownClicked"></card-header>
<div class="w3-container w3-hide" v-bind:id="'content' + r_index"> <div class="w3-container w3-hide" v-bind:id="'content' + r_index">
<form> <version-switcher></version-switcher>
<select name="currentVersion" v-model="$root.currentVersion" @change="$root.onVersionChange">
<option v-for="(version, v_index) in $root.versions">
{{ version }}
</option>
</select>
</form>
<p> <p>
<label for="name" class="w3-text-blue required-field"><b>Name</b></label> <label for="name" class="w3-text-blue required-field"><b>Name</b></label>
<input id="name" class="w3-input w3-border" type="text" v-model="reference.name" required> <input id="name" class="w3-input w3-border" type="text" v-model="reference.name" required>
@ -921,11 +891,7 @@
<div class="w3-container w3-hide" v-bind:id="'content' + p_index"> <div class="w3-container w3-hide" v-bind:id="'content' + p_index">
<form> <form>
<select name="currentVersion" v-model="$root.currentVersion" @change="$root.onVersionChange"> <version-switcher></version-switcher>
<option v-for="(version, v_index) in $root.versions">
{{ version }}
</option>
</select>
</form> </form>
<p> <p>
<label for="company" class="w3-text-blue required-field"><b>Name</b></label> <label for="company" class="w3-text-blue required-field"><b>Name</b></label>
@ -1383,6 +1349,18 @@
</div> </div>
</template> </template>
<template type="text/x-template" id="version-switcher-template" lang="html">
<div id="version-switcher-root">
<form v-if="visible()">
<select name="currentVersion" v-model="$root.currentVersion" @change="$root.onVersionChange">
<option v-for="(version, v_index) in $root.versions">
{{ version }}
</option>
</select>
</form>
</div>
</template>
<template type="text/x-template" id="import-template" lang="html"> <template type="text/x-template" id="import-template" lang="html">
<div id="import-root"> <div id="import-root">
<p> <p>
@ -1470,8 +1448,10 @@
<script type="text/javascript" src="components/section_projects.js"></script> <script type="text/javascript" src="components/section_projects.js"></script>
<script type="text/javascript" src="components/preview_resume.js"></script> <script type="text/javascript" src="components/preview_resume.js"></script>
<script type="text/javascript" src="components/preview_single_field.js"></script> <script type="text/javascript" src="components/preview_single_field.js"></script>
<script type="text/javascript" src="components/settings.js"></script>
<script type="text/javascript" src="components/card_header.js"></script> <script type="text/javascript" src="components/card_header.js"></script>
<script type="text/javascript" src="components/simple_list_item.js"></script> <script type="text/javascript" src="components/simple_list_item.js"></script>
<script type="text/javascript" src="components/version_switcher.js"></script>
<script type="text/javascript" src="components/import.js"></script> <script type="text/javascript" src="components/import.js"></script>
<script type="text/javascript" src="components/export.js"></script> <script type="text/javascript" src="components/export.js"></script>
<script type="text/javascript" src="components/about.js"></script> <script type="text/javascript" src="components/about.js"></script>

9
scripts/models.js
View File

@ -1,5 +1,14 @@
var models = { var models = {
newDefaultSettings: function()
{
var settings = {
versionswitcher: false
};
return settings;
},
// resume.json uses the ISO 8601 date standard e.g. 2014-06-29 // resume.json uses the ISO 8601 date standard e.g. 2014-06-29
newDefaultSections: function() newDefaultSections: function()