diff --git a/app/app.js b/app/app.js index 20dfd9c..f24ef96 100644 --- a/app/app.js +++ b/app/app.js @@ -102,10 +102,10 @@ var app = new Vue({ //this.loadFromStorage(); // Set the "current" main navigation item based on the current route. - helpers.selectMenuItemForCurrentUrl(); + this.selectMenuItemForCurrentUrl(); // 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. }, @@ -184,93 +184,121 @@ 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() { - // 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 = { basics: {}, work: [], @@ -299,7 +327,6 @@ var app = new Vue({ return structure; }, - getDefaultBasic: function() { return { @@ -469,10 +496,8 @@ var app = new Vue({ */ $route: function (to, from) { - //console.log("Route change: ", from, " --> ", to); - // 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. var component = components.getComponentByPath(to.fullPath); @@ -492,5 +517,5 @@ var app = new Vue({ }, deep: true } - }, + } }); \ No newline at end of file diff --git a/components/section_awards.js b/components/section_awards.js index f6f3400..68e1835 100644 --- a/components/section_awards.js +++ b/components/section_awards.js @@ -27,6 +27,10 @@ var sectionAwardsComponent = { methods: { - + addAward: function() + { + var item = this.$root.getDefaultAward(); + this.$root.sections.awards.push(item); + } } }; \ No newline at end of file diff --git a/components/section_education.js b/components/section_education.js index e083789..0c9b77a 100644 --- a/components/section_education.js +++ b/components/section_education.js @@ -27,10 +27,15 @@ var sectionEducationComponent = { methods: { + addEducation: function() + { + var item = this.$root.getDefaultEducation(); + this.$root.sections.education.push(item); + }, + addCourse: function(index) { var item = this.$root.getDefaultEducationCourse(); - //console.log("addHighlight(" + index + ")", this.$root.sections.volunteer[index]); this.$root.sections.education[index].courses.push(item); } } diff --git a/components/section_interests.js b/components/section_interests.js index 7d06365..f5a906d 100644 --- a/components/section_interests.js +++ b/components/section_interests.js @@ -27,6 +27,12 @@ var sectionInterestsComponent = { methods: { + addInterest: function() + { + var item = this.$root.getDefaultInterest(); + this.$root.sections.interests.push(item); + }, + addKeyword: function(index) { var item = this.$root.getDefaultInterestKeywoard(); diff --git a/components/section_languages.js b/components/section_languages.js index 09ef404..b6ef4da 100644 --- a/components/section_languages.js +++ b/components/section_languages.js @@ -27,6 +27,10 @@ var sectionLanguagesComponent = { methods: { - + addLanguage: function() + { + var item = this.$root.getDefaultInterest(); + this.$root.sections.languages.push(item); + } } }; \ No newline at end of file diff --git a/components/section_publications.js b/components/section_publications.js index 1c14e4f..5f52069 100644 --- a/components/section_publications.js +++ b/components/section_publications.js @@ -27,6 +27,10 @@ var sectionPublicationsComponent = { methods: { - + addPublication: function() + { + var item = this.$root.getDefaultWork(); + this.$root.sections.publications.push(item); + } } }; \ No newline at end of file diff --git a/components/section_references.js b/components/section_references.js index 97eb582..80fe497 100644 --- a/components/section_references.js +++ b/components/section_references.js @@ -27,6 +27,10 @@ var sectionReferencesComponent = { methods: { - + addReference: function() + { + var item = this.$root.getDefaultReference(); + this.$root.sections.references.push(item); + } } }; \ No newline at end of file diff --git a/components/section_skills.js b/components/section_skills.js index 91b69d7..99a5eb8 100644 --- a/components/section_skills.js +++ b/components/section_skills.js @@ -27,6 +27,12 @@ var sectionSkillsComponent = { methods: { + addSkill: function() + { + var item = this.$root.getDefaultSkill(); + this.$root.sections.skills.push(item); + }, + addKeyword: function(index) { var item = this.$root.getDefaultSkillKeywoard(); diff --git a/components/section_volunteer.js b/components/section_volunteer.js index 43e752a..195f5b4 100644 --- a/components/section_volunteer.js +++ b/components/section_volunteer.js @@ -27,6 +27,12 @@ var sectionVolunteerComponent = { methods: { + addPosition: function() + { + var item = this.$root.getDefaultVolunteer(); + this.$root.sections.volunteer.push(item); + }, + addHighlight: function(index) { var item = this.$root.getDefaulVolunteerHighlight(); diff --git a/components/section_work.js b/components/section_work.js index e5b7633..8e92c87 100644 --- a/components/section_work.js +++ b/components/section_work.js @@ -27,10 +27,15 @@ var sectionWorkComponent = { methods: { + addPosition: function() + { + var item = this.$root.getDefaultWork(); + this.$root.sections.work.push(item); + }, + addHighlight: function(index) { var item = this.$root.getDefaultWorkHighlight(); - console.log("addHighlight(" + index + ")", this.$root.sections.work[index]); this.$root.sections.work[index].highlights.push(item); } } diff --git a/index.html b/index.html index cf03cdf..31a6c24 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@
- + JSON Resume Editor
@@ -41,7 +41,7 @@
Resume Sections
-   Close Menu +   Close Menu   Basics   Work   Volunteer @@ -69,26 +69,25 @@ -
+
+ +
+
Please wait while we load the goodness.
+
- -
-
Please wait while we load the goodness.
-
+ +
+
{{activePage.title}}
+
- -
-
{{activePage.title}}
-
- -
- Loading... -
- +
+ Loading... +
+ @@ -267,9 +266,11 @@