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

WIPing all the way

This commit is contained in:
Jason Snelders 2019-11-12 21:09:05 +11:00
parent 9e58fcdaee
commit 3eef8dbb61
12 changed files with 254 additions and 294 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

207
app/app.js
View File

@ -102,10 +102,10 @@ var app = new Vue({
//this.loadFromStorage(); //this.loadFromStorage();
// Set the "current" main navigation item based on the current route. // Set the "current" main navigation item based on the current route.
helpers.selectMenuItemForCurrentUrl(); this.selectMenuItemForCurrentUrl();
// Once the app is fully displayed, hide the overlay. // Once the app is fully displayed, hide the overlay.
helpers.hideFullPageOverlay(); this.hideFullPageOverlay();
this.status = "loaded"; // Now we can start watching for changes in 'sections' data. this.status = "loaded"; // Now we can start watching for changes in 'sections' data.
}, },
@ -185,92 +185,120 @@ var app = new Vue({
/**
* Open the sidebar on smaller screens.
*/
w3_open: function()
{
var mySidebar = document.getElementById("mySidebar");
var overlayBg = document.getElementById("myOverlay");
console.log("mySidebar=", mySidebar);
if (mySidebar.style.display === 'block')
{
mySidebar.style.display = 'none';
overlayBg.style.display = "none";
}
else
{
mySidebar.style.display = 'block';
overlayBg.style.display = "block";
}
},
/**
* Open the sidebar on smaller screens.
*/
w3_close: function()
{
var mySidebar = document.getElementById("mySidebar");
var overlayBg = document.getElementById("myOverlay");
mySidebar.style.display = "none";
overlayBg.style.display = "none";
},
/**
* Show the full-page loading overlay.
*/
showFullPageOverlay: function()
{
document.getElementById("full-page-overlay").style.display = "block";
},
/**
* Hide the full-page loading overlay.
*/
hideFullPageOverlay: function()
{
document.getElementById("full-page-overlay").style.display = "none";
},
/**
* Find and mark the main navigation item for the selected "current" page/route
*/
selectMenuItemForCurrentUrl: function()
{
// Get domain root URL of the current page.
var domainUrl = window.location.origin;
// Get components of the URL for the current page.
var pageBasePathName = window.location.pathname;
var pageHash = window.location.hash;
var pagePathName = window.location.pathname;
var pageBaseUrl = domainUrl + pageBasePathName + pageHash;
// Get all main navigation links
var elements = document.querySelectorAll(".w3-bar-item");
for (let i = 0; i < elements.length; i++)
{
var element = elements[i];
//console.log("element[" + i + "]=", element);
// Get HREF from the element
var linkHref = element.getAttribute("href");
// Build a full URL the element's href (hash) so we can compare to the current URL.
var linkFullHref = domainUrl + pagePathName + linkHref;
// Remove the "current page" indicator from the element.
element.classList.remove("w3-blue");
// Ensure trailing slashes are added for comparison equivalence
var urlLast = linkFullHref[linkFullHref.length - 1];
if (urlLast != "/")
{
linkFullHref = linkFullHref + "/";
}
urlLast = pageBaseUrl[pageBaseUrl.length - 1];
if (urlLast != "/")
{
pageBaseUrl = pageBaseUrl + "/";
}
// Check if element is for the current page.
if (linkFullHref == pageBaseUrl)
{
// Add the "current page" indicator to the element.
element.classList.add("w3-blue");
}
}
},
getDefaultSections: function() getDefaultSections: function()
{ {
// return {
// basics: {
// name: "",
// label: "",
// picture: "",
// email: "",
// phone: "",
// website: "",
// summary: "",
// location: {
// address: "",
// postalCode: "",
// city: "",
// countryCode: "",
// region: "",
// },
// profiles: [
// {
// network: "",
// username: "",
// url: "",
// }
// ]
// },
// work: [{
// company: "",
// position: "",
// website: "",
// startDate: "",
// endDate: "",
// summary: "",
// highlights: [""]
// }],
// volunteer: [{
// organization: "",
// position: "",
// website: "",
// startDate: "",
// endDate: "",
// summary: "",
// highlights: []
// }],
// education: [{
// institution: "",
// area: "",
// studyType: "",
// startDate: "",
// endDate: "",
// gpa: "",
// courses: []
// }],
// awards: [{
// title: "",
// date: "",
// awarder: "",
// summary: ""
// }],
// publications: [{
// name: "",
// publisher: "",
// releaseDate: "",
// website: "",
// summary: ""
// }],
// skills: [{
// name: "",
// level: "",
// keywords: []
// }],
// languages: [{
// language: "",
// fluency: ""
// }],
// interests: [{
// name: "",
// keywords: [
// ]
// }],
// references: [{
// name: "",
// reference: ""
// }]
// };
var structure = { var structure = {
basics: {}, basics: {},
work: [], work: [],
@ -299,7 +327,6 @@ var app = new Vue({
return structure; return structure;
}, },
getDefaultBasic: function() getDefaultBasic: function()
{ {
return { return {
@ -469,10 +496,8 @@ var app = new Vue({
*/ */
$route: function (to, from) $route: function (to, from)
{ {
//console.log("Route change: ", from, " --> ", to);
// Set the "current" main navigation item based on the current route. // Set the "current" main navigation item based on the current route.
helpers.selectMenuItemForCurrentUrl(); this.selectMenuItemForCurrentUrl();
// Set the current page details based on the component mapped to the active route. // Set the current page details based on the component mapped to the active route.
var component = components.getComponentByPath(to.fullPath); var component = components.getComponentByPath(to.fullPath);
@ -492,5 +517,5 @@ var app = new Vue({
}, },
deep: true deep: true
} }
}, }
}); });

6
components/section_awards.js
View File

@ -27,6 +27,10 @@ var sectionAwardsComponent = {
methods: { methods: {
addAward: function()
{
var item = this.$root.getDefaultAward();
this.$root.sections.awards.push(item);
}
} }
}; };

7
components/section_education.js
View File

@ -27,10 +27,15 @@ var sectionEducationComponent = {
methods: { methods: {
addEducation: function()
{
var item = this.$root.getDefaultEducation();
this.$root.sections.education.push(item);
},
addCourse: function(index) addCourse: function(index)
{ {
var item = this.$root.getDefaultEducationCourse(); var item = this.$root.getDefaultEducationCourse();
//console.log("addHighlight(" + index + ")", this.$root.sections.volunteer[index]);
this.$root.sections.education[index].courses.push(item); this.$root.sections.education[index].courses.push(item);
} }
} }

6
components/section_interests.js
View File

@ -27,6 +27,12 @@ var sectionInterestsComponent = {
methods: { methods: {
addInterest: function()
{
var item = this.$root.getDefaultInterest();
this.$root.sections.interests.push(item);
},
addKeyword: function(index) addKeyword: function(index)
{ {
var item = this.$root.getDefaultInterestKeywoard(); var item = this.$root.getDefaultInterestKeywoard();

6
components/section_languages.js
View File

@ -27,6 +27,10 @@ var sectionLanguagesComponent = {
methods: { methods: {
addLanguage: function()
{
var item = this.$root.getDefaultInterest();
this.$root.sections.languages.push(item);
}
} }
}; };

6
components/section_publications.js
View File

@ -27,6 +27,10 @@ var sectionPublicationsComponent = {
methods: { methods: {
addPublication: function()
{
var item = this.$root.getDefaultWork();
this.$root.sections.publications.push(item);
}
} }
}; };

6
components/section_references.js
View File

@ -27,6 +27,10 @@ var sectionReferencesComponent = {
methods: { methods: {
addReference: function()
{
var item = this.$root.getDefaultReference();
this.$root.sections.references.push(item);
}
} }
}; };

6
components/section_skills.js
View File

@ -27,6 +27,12 @@ var sectionSkillsComponent = {
methods: { methods: {
addSkill: function()
{
var item = this.$root.getDefaultSkill();
this.$root.sections.skills.push(item);
},
addKeyword: function(index) addKeyword: function(index)
{ {
var item = this.$root.getDefaultSkillKeywoard(); var item = this.$root.getDefaultSkillKeywoard();

6
components/section_volunteer.js
View File

@ -27,6 +27,12 @@ var sectionVolunteerComponent = {
methods: { methods: {
addPosition: function()
{
var item = this.$root.getDefaultVolunteer();
this.$root.sections.volunteer.push(item);
},
addHighlight: function(index) addHighlight: function(index)
{ {
var item = this.$root.getDefaulVolunteerHighlight(); var item = this.$root.getDefaulVolunteerHighlight();

7
components/section_work.js
View File

@ -27,10 +27,15 @@ var sectionWorkComponent = {
methods: { methods: {
addPosition: function()
{
var item = this.$root.getDefaultWork();
this.$root.sections.work.push(item);
},
addHighlight: function(index) addHighlight: function(index)
{ {
var item = this.$root.getDefaultWorkHighlight(); var item = this.$root.getDefaultWorkHighlight();
console.log("addHighlight(" + index + ")", this.$root.sections.work[index]);
this.$root.sections.work[index].highlights.push(item); this.$root.sections.work[index].highlights.push(item);
} }
} }

87
index.html
View File

@ -16,7 +16,7 @@
<!-- Top container --> <!-- Top container -->
<div class="w3-bar w3-top w3-black w3-large" style="z-index:4"> <div class="w3-bar w3-top w3-black w3-large" style="z-index:4">
<button class="w3-bar-item w3-button w3-hide-large w3-hover-none w3-hover-text-light-grey" onclick="helpers.w3_open();"><i class="fa fa-bars"></i> &nbsp;Menu</button> <button class="w3-bar-item w3-button w3-hide-large w3-hover-none w3-hover-text-light-grey" v-on:click="w3_open"><i class="fa fa-bars"></i> &nbsp;Menu</button>
<span class="w3-bar-item w3-right">JSON Resume Editor</span> <span class="w3-bar-item w3-right">JSON Resume Editor</span>
</div> </div>
@ -41,7 +41,7 @@
<h5>Resume Sections</h5> <h5>Resume Sections</h5>
</div> </div>
<div class="w3-bar-block"> <div class="w3-bar-block">
<a href="#/" class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" onclick="helpers.w3_close()" title="close menu"><i class="fas fa-times"></i>&nbsp; Close Menu</a> <a href="#/" class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" v-on:click="w3_close" title="close menu"><i class="fas fa-times"></i>&nbsp; Close Menu</a>
<a href="#/section/basics" class="w3-bar-item w3-button w3-padding"><i class="far fa-address-card"></i>&nbsp; Basics</a> <a href="#/section/basics" class="w3-bar-item w3-button w3-padding"><i class="far fa-address-card"></i>&nbsp; Basics</a>
<a href="#/section/work" class="w3-bar-item w3-button w3-padding"><i class="fas fa-building"></i>&nbsp; Work</a> <a href="#/section/work" class="w3-bar-item w3-button w3-padding"><i class="fas fa-building"></i>&nbsp; Work</a>
<a href="#/section/volunteer" class="w3-bar-item w3-button w3-padding"><i class="fas fa-hands-helping"></i>&nbsp; Volunteer</a> <a href="#/section/volunteer" class="w3-bar-item w3-button w3-padding"><i class="fas fa-hands-helping"></i>&nbsp; Volunteer</a>
@ -69,13 +69,12 @@
<!-- Overlay effect when opening sidebar on small screens --> <!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="helpers.w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div> <div class="w3-overlay w3-hide-large w3-animate-opacity" v-on:click="w3_close" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- End Page Content --> <!-- End Page Content -->
<div class="w3-main w3-padding-16"> <div class="w3-main w3-padding-16">
<div id="full-page-overlay"> <div id="full-page-overlay">
<div id="full-page-overlay-text">Please wait while we load the goodness.</div> <div id="full-page-overlay-text">Please wait while we load the goodness.</div>
</div> </div>
@ -267,9 +266,11 @@
<template type="text/x-template" id="section-work-template" lang="html"> <template type="text/x-template" id="section-work-template" lang="html">
<div id="section-work-root"> <div id="section-work-root">
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addPosition">+ Add Position</button>
<div class="w3-row"> <div class="w3-row">
<div class="w3-col m6"> <div class="w3-col m6">
<form class="w3-container w3-card-4" v-for="(work, w_index) in $root.sections.work"> <form class="w3-container w3-card-4 margin-top-32" v-for="(work, w_index) in $root.sections.work">
<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>
@ -314,7 +315,7 @@
</form> </form>
</div> </div>
<div class="w3-col m6"> <div class="w3-col m6">
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left" v-for="(work, w_index) in $root.sections.work"> <div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left margin-top-32" v-for="(work, w_index) in $root.sections.work">
<preview-field label="Company" v-bind:value="work.company"></preview-field> <preview-field label="Company" v-bind:value="work.company"></preview-field>
<preview-field label="Position" v-bind:value="work.position"></preview-field> <preview-field label="Position" v-bind:value="work.position"></preview-field>
<preview-field label="Website" v-bind:value="work.website" format="url"></preview-field> <preview-field label="Website" v-bind:value="work.website" format="url"></preview-field>
@ -338,9 +339,11 @@
<template type="text/x-template" id="section-volunteer-template" lang="html"> <template type="text/x-template" id="section-volunteer-template" lang="html">
<div id="section-volunteer-root"> <div id="section-volunteer-root">
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addPosition">+ Add Position</button>
<div class="w3-row"> <div class="w3-row">
<div class="w3-col m6"> <div class="w3-col m6">
<form class="w3-container w3-card-4" v-for="(vol, v_index) in $root.sections.volunteer"> <form class="w3-container w3-card-4 margin-top-32" v-for="(vol, v_index) in $root.sections.volunteer">
<div> <div>
<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>
@ -387,8 +390,7 @@
</form> </form>
</div> </div>
<div class="w3-col m6"> <div class="w3-col m6">
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left"> <div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left margin-top-32" v-for="(vol, v_index) in $root.sections.volunteer">
<div v-for="(vol, v_index) in $root.sections.volunteer">
<preview-field label="Organisation" v-bind:value="vol.organization"></preview-field> <preview-field label="Organisation" v-bind:value="vol.organization"></preview-field>
<preview-field label="Position" v-bind:value="vol.position"></preview-field> <preview-field label="Position" v-bind:value="vol.position"></preview-field>
<preview-field label="Website" v-bind:value="vol.website" format="url"></preview-field> <preview-field label="Website" v-bind:value="vol.website" format="url"></preview-field>
@ -406,16 +408,17 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<template type="text/x-template" id="section-education-template" lang="html"> <template type="text/x-template" id="section-education-template" lang="html">
<div id="section-education-root"> <div id="section-education-root">
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addEducation">+ Add Education</button>
<div class="w3-row"> <div class="w3-row">
<div class="w3-col m6"> <div class="w3-col m6">
<form class="w3-container w3-card-4" v-for="(edu, e_index) in $root.sections.education"> <form class="w3-container w3-card-4 margin-top-32" v-for="(edu, e_index) in $root.sections.education">
<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>
<input id="institution" class="w3-input w3-border" type="text" v-model="edu.institution" required> <input id="institution" class="w3-input w3-border" type="text" v-model="edu.institution" required>
@ -459,7 +462,7 @@
</form> </form>
</div> </div>
<div class="w3-col m6"> <div class="w3-col m6">
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left" v-for="(edu, e_index) in $root.sections.education"> <div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left margin-top-32" v-for="(edu, e_index) in $root.sections.education">
<preview-field label="Institution" v-bind:value="edu.institution"></preview-field> <preview-field label="Institution" v-bind:value="edu.institution"></preview-field>
<preview-field label="Area" v-bind:value="edu.area"></preview-field> <preview-field label="Area" v-bind:value="edu.area"></preview-field>
<preview-field label="Study Type" v-bind:value="edu.studyType"></preview-field> <preview-field label="Study Type" v-bind:value="edu.studyType"></preview-field>
@ -483,9 +486,11 @@
<template type="text/x-template" id="section-awards-template" lang="html"> <template type="text/x-template" id="section-awards-template" lang="html">
<div id="section-awards-root"> <div id="section-awards-root">
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addAward">+ Add Award</button>
<div class="w3-row"> <div class="w3-row">
<div class="w3-col m6"> <div class="w3-col m6">
<form class="w3-container w3-card-4" v-for="(award, a_index) in $root.sections.awards"> <form class="w3-container w3-card-4 margin-top-32" v-for="(award, a_index) in $root.sections.awards">
<p> <p>
<label for="title" class="w3-text-blue required-field"><b>Title</b></label> <label for="title" class="w3-text-blue required-field"><b>Title</b></label>
<input id="title" class="w3-input w3-border" type="text" v-model="award.title" required> <input id="title" class="w3-input w3-border" type="text" v-model="award.title" required>
@ -509,7 +514,7 @@
</form> </form>
</div> </div>
<div class="w3-col m6"> <div class="w3-col m6">
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left" v-for="(award, a_index) in $root.sections.awards"> <div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left margin-top-32" v-for="(award, a_index) in $root.sections.awards">
<preview-field label="Title" v-bind:value="award.title"></preview-field> <preview-field label="Title" v-bind:value="award.title"></preview-field>
<preview-field label="Date" v-bind:value="award.date"></preview-field> <preview-field label="Date" v-bind:value="award.date"></preview-field>
<preview-field label="Awarder" v-bind:value="award.awarder"></preview-field> <preview-field label="Awarder" v-bind:value="award.awarder"></preview-field>
@ -524,9 +529,11 @@
<template type="text/x-template" id="section-publications-template" lang="html"> <template type="text/x-template" id="section-publications-template" lang="html">
<div id="section-publications-root"> <div id="section-publications-root">
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addPublication">+ Add Publication</button>
<div class="w3-row"> <div class="w3-row">
<div class="w3-col m6"> <div class="w3-col m6">
<form class="w3-container w3-card-4" v-for="(publication, p_index) in $root.sections.publications"> <form class="w3-container w3-card-4 margin-top-32" v-for="(publication, p_index) in $root.sections.publications">
<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="publication.name" required> <input id="name" class="w3-input w3-border" type="text" v-model="publication.name" required>
@ -555,7 +562,7 @@
</form> </form>
</div> </div>
<div class="w3-col m6"> <div class="w3-col m6">
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left" v-for="(publication, p_index) in $root.sections.publications"> <div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left margin-top-32" v-for="(publication, p_index) in $root.sections.publications">
<preview-field label="Name" v-bind:value="publication.name"></preview-field> <preview-field label="Name" v-bind:value="publication.name"></preview-field>
<preview-field label="Publisher" v-bind:value="publication.publisher"></preview-field> <preview-field label="Publisher" v-bind:value="publication.publisher"></preview-field>
<preview-field label="Release Date" v-bind:value="publication.releaseDate"></preview-field> <preview-field label="Release Date" v-bind:value="publication.releaseDate"></preview-field>
@ -571,9 +578,11 @@
<template type="text/x-template" id="section-skills-template" lang="html"> <template type="text/x-template" id="section-skills-template" lang="html">
<div id="section-skills-root"> <div id="section-skills-root">
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addSkill">+ Add Skill</button>
<div class="w3-row"> <div class="w3-row">
<div class="w3-col m6"> <div class="w3-col m6">
<form class="w3-container w3-card-4" v-for="(skill, s_index) in $root.sections.skills"> <form class="w3-container w3-card-4 margin-top-32" v-for="(skill, s_index) in $root.sections.skills">
<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="skill.name" required> <input id="name" class="w3-input w3-border" type="text" v-model="skill.name" required>
@ -597,7 +606,7 @@
</form> </form>
</div> </div>
<div class="w3-col m6"> <div class="w3-col m6">
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left" v-for="(skill, s_index) in $root.sections.skills"> <div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left margin-top-32" v-for="(skill, s_index) in $root.sections.skills">
<preview-field label="Name" v-bind:value="skill.name"></preview-field> <preview-field label="Name" v-bind:value="skill.name"></preview-field>
<preview-field label="Level" v-bind:value="skill.level"></preview-field> <preview-field label="Level" v-bind:value="skill.level"></preview-field>
@ -617,29 +626,27 @@
<template type="text/x-template" id="section-languages-template" lang="html"> <template type="text/x-template" id="section-languages-template" lang="html">
<div id="section-languages-root"> <div id="section-languages-root">
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addLanguage">+ Add Language</button>
<div class="w3-row"> <div class="w3-row">
<div class="w3-col m6"> <div class="w3-col m6">
<form class="w3-container w3-card-4"> <form class="w3-container w3-card-4 margin-top-32" v-for="language in $root.sections.languages">
<div>
<p> <p>
<label for="language" class="w3-text-blue required-field"><b>Language</b></label> <label for="language" class="w3-text-blue required-field"><b>Language</b></label>
<input id="language" class="w3-input w3-border" type="text" v-model="$root.sections.languages[0].language" required> <input id="language" class="w3-input w3-border" type="text" v-model="language.language" required>
<small id="languageHelp" class="form-help text-muted">Name of the language.</small> <small id="languageHelp" class="form-help text-muted">Name of the language.</small>
</p> </p>
<p> <p>
<label for="fluency" class="w3-text-blue required-field"><b>Fluency</b></label> <label for="fluency" class="w3-text-blue required-field"><b>Fluency</b></label>
<input id="fluency" class="w3-input w3-border" type="text" v-model="$root.sections.languages[0].fluency" required> <input id="fluency" class="w3-input w3-border" type="text" v-model="language.fluency" required>
<small id="fluencyHelp" class="form-help text-muted">Fluency in the language.</small> <small id="fluencyHelp" class="form-help text-muted">Fluency in the language.</small>
</p> </p>
</div>
</form> </form>
</div> </div>
<div class="w3-col m6"> <div class="w3-col m6">
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left"> <div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left margin-top-32" v-for="language in $root.sections.languages">
<div> <preview-field label="Language" v-bind:value="language.language"></preview-field>
<preview-field label="Language" v-bind:value="$root.sections.languages[0].language"></preview-field> <preview-field label="Fluency" v-bind:value="language.fluency"></preview-field>
<preview-field label="Fluency" v-bind:value="$root.sections.languages[0].fluency"></preview-field>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -650,9 +657,11 @@
<template type="text/x-template" id="section-interests-template" lang="html"> <template type="text/x-template" id="section-interests-template" lang="html">
<div id="section-interests-root"> <div id="section-interests-root">
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addInterest">+ Add Interest</button>
<div class="w3-row"> <div class="w3-row">
<div class="w3-col m6"> <div class="w3-col m6">
<form class="w3-container w3-card-4" v-for="(interest, i_index) in $root.sections.interests"> <form class="w3-container w3-card-4 margin-top-32" v-for="(interest, i_index) in $root.sections.interests">
<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="interest.name" required> <input id="name" class="w3-input w3-border" type="text" v-model="interest.name" required>
@ -672,7 +681,7 @@
</form> </form>
</div> </div>
<div class="w3-col m6"> <div class="w3-col m6">
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left" v-for="(interest, i_index) in $root.sections.interests"> <div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left margin-top-32" v-for="(interest, i_index) in $root.sections.interests">
<preview-field label="Name" v-bind:value="interest.name"></preview-field> <preview-field label="Name" v-bind:value="interest.name"></preview-field>
<h5 class="margin-top-32">Keywords</h5> <h5 class="margin-top-32">Keywords</h5>
@ -691,29 +700,27 @@
<template type="text/x-template" id="section-references-template" lang="html"> <template type="text/x-template" id="section-references-template" lang="html">
<div id="section-references-root"> <div id="section-references-root">
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addReference">+ Add Reference</button>
<div class="w3-row"> <div class="w3-row">
<div class="w3-col m6"> <div class="w3-col m6">
<form class="w3-container w3-card-4"> <form class="w3-container w3-card-4 margin-top-32" v-for="reference in $root.sections.references">
<div>
<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="$root.sections.references[0].name" required> <input id="name" class="w3-input w3-border" type="text" v-model="reference.name" required>
<small id="nameHelp" class="form-help text-muted">Name of the person.</small> <small id="nameHelp" class="form-help text-muted">Name of the person.</small>
</p> </p>
<p> <p>
<label for="reference" class="w3-text-blue required-field"><b>Reference</b></label> <label for="reference" class="w3-text-blue required-field"><b>Reference</b></label>
<textarea id="reference" rows="8" class="w3-input w3-border" type="text" v-model="$root.sections.references[0].reference"></textarea> <textarea id="reference" rows="8" class="w3-input w3-border" type="text" v-model="reference.reference"></textarea>
<small id="referenceHelp" class="form-help text-muted">The reference given by the person.</small> <small id="referenceHelp" class="form-help text-muted">The reference given by the person.</small>
</p> </p>
</div>
</form> </form>
</div> </div>
<div class="w3-col m6"> <div class="w3-col m6">
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left"> <div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left margin-top-32" v-for="reference in $root.sections.references">
<div> <preview-field label="Name" v-bind:value="reference.name"></preview-field>
<preview-field label="Name" v-bind:value="$root.sections.references[0].name"></preview-field> <preview-field label="Reference" v-bind:value="reference.reference" format="multi-line"></preview-field>
<preview-field label="Reference" v-bind:value="$root.sections.references[0].reference" format="multi-line"></preview-field>
</div>
</div> </div>
</div> </div>
</div> </div>

116
scripts.js
View File

@ -2,122 +2,6 @@
* Create a Helpers object to keep functions out of the global namespace space. * Create a Helpers object to keep functions out of the global namespace space.
*/ */
var helpers = { var helpers = {
/********************************************************************************
* Open and close the sidebar on smaller screens
********************************************************************************/
/**
* Get the Sidebar element.
*/
mySidebar: document.getElementById("mySidebar"),
/**
* Get the DIV with overlay effect.
*/
overlayBg: document.getElementById("myOverlay"),
/**
* Toggle between showing and hiding the sidebar, and add overlay effect.
*/
w3_open: function()
{
if (this.mySidebar.style.display === 'block')
{
this.mySidebar.style.display = 'none';
this.overlayBg.style.display = "none";
}
else
{
this.mySidebar.style.display = 'block';
this.overlayBg.style.display = "block";
}
},
/**
* Close the sidebar with the close button.
*/
w3_close: function()
{
this.mySidebar.style.display = "none";
this.overlayBg.style.display = "none";
},
/********************************************************************************
* Show and hide the full-page loading overlay.
********************************************************************************/
showFullPageOverlay: function()
{
document.getElementById("full-page-overlay").style.display = "block";
},
hideFullPageOverlay: function()
{
document.getElementById("full-page-overlay").style.display = "none";
},
/**
* Find and mark the main navigation item for the selected "current" page/route
*/
selectMenuItemForCurrentUrl: function()
{
// Get domain root URL of the current page.
var domainUrl = window.location.origin;
// Get components of the URL for the current page.
var pageBasePathName = window.location.pathname;
var pageHash = window.location.hash;
var pagePathName = window.location.pathname;
var pageBaseUrl = domainUrl + pageBasePathName + pageHash;
// Get all main navigation links
var elements = document.querySelectorAll(".w3-bar-item");
for (let i = 0; i < elements.length; i++)
{
var element = elements[i];
//console.log("element[" + i + "]=", element);
// Get HREF from the element
var linkHref = element.getAttribute("href");
// Build a full URL the element's href (hash) so we can compare to the current URL.
var linkFullHref = domainUrl + pagePathName + linkHref;
// Remove the "current page" indicator from the element.
element.classList.remove("w3-blue");
// Ensure trailing slashes are added for comparison equivalence
var urlLast = linkFullHref[linkFullHref.length - 1];
if (urlLast != "/")
{
linkFullHref = linkFullHref + "/";
}
urlLast = pageBaseUrl[pageBaseUrl.length - 1];
if (urlLast != "/")
{
pageBaseUrl = pageBaseUrl + "/";
}
// Check if element is for the current page.
if (linkFullHref == pageBaseUrl)
{
// Add the "current page" indicator to the element.
element.classList.add("w3-blue");
}
}
},
setLocalStorage: function(key, value) setLocalStorage: function(key, value)
{ {