diff --git a/index.html b/index.html index 517f5fc..610c2ae 100644 --- a/index.html +++ b/index.html @@ -2,12 +2,7 @@ - skillid - + ESCO badge builder
diff --git a/src/App.vue b/src/App.vue index 812b6d0..58654fb 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,14 +1,30 @@ + + - + \ No newline at end of file diff --git a/src/assets/svg/arrow-grey.svg b/src/assets/svg/arrow-grey.svg new file mode 100644 index 0000000..82fb150 --- /dev/null +++ b/src/assets/svg/arrow-grey.svg @@ -0,0 +1 @@ +arrow-grey \ No newline at end of file diff --git a/src/assets/svg/arrow.svg b/src/assets/svg/arrow.svg new file mode 100644 index 0000000..925bb8e --- /dev/null +++ b/src/assets/svg/arrow.svg @@ -0,0 +1 @@ +arrow \ No newline at end of file diff --git a/src/assets/svg/background.svg b/src/assets/svg/background.svg new file mode 100644 index 0000000..76738ea --- /dev/null +++ b/src/assets/svg/background.svg @@ -0,0 +1 @@ +Artboard 52 \ No newline at end of file diff --git a/src/assets/svg/logo.svg b/src/assets/svg/logo.svg new file mode 100644 index 0000000..bc4481f --- /dev/null +++ b/src/assets/svg/logo.svg @@ -0,0 +1,26 @@ + + + Created with Sketch. + + + diff --git a/src/components/app-badge.vue b/src/components/app-badge.vue index 0f0eec3..1dfdcdd 100644 --- a/src/components/app-badge.vue +++ b/src/components/app-badge.vue @@ -50,7 +50,7 @@ diff --git a/src/components/app-nav.vue b/src/components/app-nav.vue new file mode 100644 index 0000000..bb50c54 --- /dev/null +++ b/src/components/app-nav.vue @@ -0,0 +1,52 @@ + + + + + diff --git a/src/css/app-badge.css b/src/css/app-badge.css index 24dd8f1..53c5af3 100644 --- a/src/css/app-badge.css +++ b/src/css/app-badge.css @@ -1,15 +1,25 @@ #app-badge-container { - font-family: 'Avenir', Helvetica, Arial, sans-serif; + font-family: 'Open Sans', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - text-align: center; - color: #2c3e50; - margin-top: 60px; - width: 40%; + text-align: right; + width: 30%; + background-color: rgba(143, 190, 100, .3); +} + +#app-badge-container h1 { + color: #6FA53D; + padding-right: 1rem; + font-weight: normal; } #svgFile { - width: 33rem; - height: 33rem; - margin-top: 10rem; + width: 46rem; + height: 46rem; + -ms-transform: rotate(-7deg); /* IE 9 */ + -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */ + transform: rotate(-7deg); + margin-left: -5rem; + margin-top: 4rem; + margin-bottom: 4rem; } diff --git a/src/css/app-form.css b/src/css/app-form.css index dc9dfc9..ad55fec 100644 --- a/src/css/app-form.css +++ b/src/css/app-form.css @@ -1,164 +1,143 @@ -#form { - font-family: 'Aller', Helvetica, Arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-align: center; - color: #2c3e50; - margin-top: 60px; - width: 55%; +#app-form { + width: 70%; + font-family: 'Open Sans', Helvetica, Arial, sans-serif; + font-size: 12px; } -#app-form { - display: flex; - flex-direction: column; - margin-left:auto; - margin-right: auto; - text-align: left; +#app-form h2 { + color: #838DA5; + font-size: 18px; } -#app-form label { - margin-bottom: 1rem; - color: #0059de; - font-weight: bold; +#app-form .buttons { + text-align: right; + margin-top: 1rem; } -#app-form input, #app-form textarea { - margin-bottom: 3rem; - height: 5rem; - width: 50rem; - box-shadow: 2px 2px 5px rgba(195, 207, 223, 0.85); +#app-form .buttons .save-to-library { + background-color: transparent; border-style: none; - border-radius: 2px; - border: 1px solid white; + color: #838DA5; + background-color: #F3F6F8; + padding: 1.5rem; + border: 1.5px solid #838DA5; + border-radius: 10px; + font-size: 12px; } -#app-form .description { - height: 17rem; +#app-form .buttons .save-and-award, #app-form .buttons .next-button{ + background-color: #41b7fe; + border-style: none; + padding: 1.5rem; + color: white; + border: 1px solid #41b7fe; + border-radius: 10px; + font-size: 14px; } -.meta-data-form-particle { - border-bottom: .2rem solid #f7f9fa; - display: flex; - margin-bottom: 4rem; - justify-content: space-between; - margin-right: 2rem; -} -.meta-data-form-particle h2 { - font-size: 1.6rem; - color: #c4c5c5; - text-transform: uppercase; - font-weight: bold; - align-self: center; +/* SEARCH CSS*/ + +#search { + margin-left: auto; + margin-right: auto; + width: 620px; + margin-top: 4rem; } -.meta-data-form-particle-input { - display: flex; - flex-direction: column; +#search .search-input { + height: 6rem; + width: 48rem; + border: 2px solid #dbdee4; + border-radius: 10px; + padding-left: 1.5rem; } -#app-form button { - margin-top: 1.5rem; - margin-bottom: 1.5rem; - box-shadow: 2px 2px 5px rgba(195, 207, 223, 0.85); - background-color: #0059de; - color: white; +#search .search-button { + background-color: #41b7fe; + color: #ffffff; + text-transform: uppercase; border-style: none; - height: 5rem; - width: 15rem; - font-size: 1.4rem; font-weight: bold; - text-transform: uppercase; - border-radius: 2px; - border: 1px solid #0059de; + width: 13.5rem; + height: 6rem; + border: 1px solid #41b7fe; + border-radius: 10px; } -.form-title { - padding-bottom: 5rem; +#search .seach-results { + padding-top: 4rem; } -#navigation { - margin-bottom: 10rem; - border-bottom: .2rem solid #f7f9fa; - font-weight: bold; +#search .seach-results .search-result { + padding: .3rem 0; + font-size: 1.2rem; } - -.nav-list { - display: flex; - justify-content: space-around; - list-style: none; +#search .seach-results .search-result a { + text-decoration: none; + text-transform: capitalize; + color: #a7aebf; } -.active { - border-bottom: .2rem solid #0059de; - padding-bottom: 3rem; - padding-right: 3rem; - padding-left: 3rem; +#search .seach-results .search-result a:hover { + color: #41b7fe; } -.meta-data-content { - display: flex; - flex-direction: column; -} -.search-content { - display: flex; - flex-direction: column; -} +/* COMPANY INPUT + RECEIVER INPUT*/ -.personalize-content-labels { - display: flex; - justify-content: space-around; +#details-sender, #details-receiver, #overview { + margin-left: auto; + margin-right: auto; + width: 50%; + margin-top: 5%; } -.personalize-content-labels label { - width: 23%; - display: block; - box-shadow: 2px 2px 5px rgba(195, 207, 223, 0.85); - border-style: none; - border-radius: 2px; - border: 1px solid white; - text-align: center; - padding: 3rem 0 3rem; +#details-sender input, #details-receiver input { + height: 6rem; + border: 1px solid #dbdee4; + border-radius: 10px; + margin-bottom: 1rem; + padding-left: 1.5rem; } -#app-form .hiddenInput { - display: none; +#details-receiver textarea { + border: 1px solid #dbdee4; + border-radius: 10px; + margin-bottom: 1rem; + padding-left: 1.5rem; + padding-top: 1rem; } -.input-field { - display: flex; - flex-direction: column; - margin-top: 3rem; +#details-sender label, #details-receiver label { + color: #454B5A; + padding-bottom: 2rem; + padding-top: 2rem; } -.buttons { - display: flex; - justify-content: space-between; - padding-right: 3rem; -} +/* CUSTOMIZATION */ -#app-form .back-button { - color: #c4c5c5; - background-color: transparent; - text-align: left; - border-style: none; - box-shadow: none; - cursor: pointer; +#personalize { + margin-left: auto; + margin-right: auto; + width: 50%; + margin-top: 5%; } -.label-icon { - width: 50px; - height: 50px; - margin-top: 2rem; +#personalize label { + color: #454B5A; + padding-bottom: 2rem; + padding-top: 2rem; } -.list a { - text-decoration: none; - color: black; +#personalize .logo-input { + height: 165px; + background-color: #F8FCFF; + border: 1.5px solid #ABB3C4; + border-radius: 10px; } -.list .actifLink { - color: #0059de; +#personalize .logo-input #image-input { + padding: 1rem; } diff --git a/src/css/app-nav.css b/src/css/app-nav.css new file mode 100644 index 0000000..c0234c8 --- /dev/null +++ b/src/css/app-nav.css @@ -0,0 +1,77 @@ +/* NAVIGATION */ + +.line { + height:60px; + width:100%; + margin:auto; + border:1px solid #c3c3c3; + position:relative; + justify-content: space-between; +} + +.btn { + justify-content: space-between; + height:100%; + width: 20%; + cursor:pointer; + position:relative; + background-color: #F5F6F6; +} + +.text { + display:inline-block; + height:100%; + padding:0 5px; + box-sizing:border-box; + line-height:21px; +} + +.arrow { + display:inline-block; + height:100%; + width:25px; + vertical-align:top; + overflow:hidden; + position:relative; +} + +.arrow:before, .arrow:after { + content:''; + position:absolute; + top:50%;right:0; + width:200%; + height:100%; + box-sizing:border-box; + border-right:1px solid #c3c3c3; + -ms-transform-origin:top right; + -ms-transform:rotate(35deg); + -webkit-transform-origin:top right; + -webkit-transform:rotateZ(35deg); + transform-origin:top right; + transform:rotateZ(35deg); +} + +.arrow:after { + top:auto;bottom:50%; + -ms-transform-origin:bottom right; + -ms-transform:rotate(325deg); + -webkit-transform-origin:bottom right; + -webkit-transform:rotateZ(325deg); + transform-origin:bottom right; + transform:rotateZ(325deg); +} + +#navigation .active-step .nav-item .step, #navigation .active-step .nav-item .step-number { + color: #5aa0ed; +} + +#navigation .nav-item .step-number { + text-transform: uppercase; + color: #D8D8D8; +} + +#navigation .nav-item .step { + color: #98a0a1; + font-weight: 600; + font-size: 16px; +} diff --git a/src/css/app.css b/src/css/app.css index a77e54a..be97a76 100644 --- a/src/css/app.css +++ b/src/css/app.css @@ -1,20 +1,78 @@ -#app { - font-family: 'Aller', Helvetica, Arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-align: center; - color: #2c3e50; - margin-top: 60px; - font-size: 1.5rem; +/*GENREAL CSS*/ +@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800'); +body{ + width: 100%; + background: url(../assets/svg/background.svg); + background-size: 100%; + font-family: 'Open Sans', 'sans-serif'; } -h1, h2 { - font-size: 5rem; - font-family: 'Aller'; - font-weight: lighter; +.hide { + display:none; } -.content-container { - display: flex; - width: 100%; +.row{ + display: flex; +} +.column{ + display: flex; + flex-direction: column; +} + +.space-between { + justify-content: space-between; +} + +/* GENERAL TEXT CSS*/ + +h1{ + font-size: 30px; + color: #fff; + font-weight: 200; + padding-top: 7px; +} + + +/* GENERAL APP CSS*/ +#container{ + width: 80%; + margin-right: auto; + margin-left: auto; +} + +/* APP HEADER CSS*/ + +#container header{ + justify-content: center; + margin-top: 30px; +} + +#container header .logo{ + margin-right: auto; + margin-left: auto; +} + +#container header .up-left-info{ + margin-left: 30px; +} + +#container header .up-left-info a{ + color: #fff; + text-decoration: none; + font-weight: 600; + letter-spacing: 0.05rem; + font-size: 12px; +} + +#container header .up-left-info .fa-chevron-left{ + padding-right: 6px; +} + +/* APP MAIN CSS*/ + +#container main .content-container{ + margin: 12px auto; + position:absolute; + width: 80%; + background-color: #F9F9F9; } diff --git a/src/js/app-form.js b/src/js/app-form.js index e18f205..6522fa0 100644 --- a/src/js/app-form.js +++ b/src/js/app-form.js @@ -1,506 +1,426 @@ - export default { name: 'app-form', - data() { + props: ['formControlElements'], + data() { return { - formControlElements: { - searchActive: true, - metaDataActive: false, - personalizeActive: false, - imageInputActive: true, - companyNameInput: true, - urlInput: true, - colorInput: true, - formHasErrors: false + formContentValues: { + websiteValue: "", + issuerNameValue: "", + receiverNameValue: "", + emailValue: "", + searchValue: "", + pickedSkill: "", + pickedSkillHref: "", + descriptionValue: "", + errors: "" }, - formContentElements:{ - titles : ["Search", "Metadata", "Personalize"], - currentTitle: "Search", - buttonText: ["next", "next", "generate"], - currentButtonText: "Next" - }, - formContentValues: { - websiteValue: "", - issuerNameValue: "", - receiverNameValue: "", - emailValue: "", - searchValue: "", - pickedSkill: "", - descriptionValue: "", - errors: "" - }, clicks: 0, searchResults: [], + searchResultsHref: [], badge: {}, nameBadge: "round_language", firstHref: "", - count: 0, + count: 0, locale: "en" } }, + methods: { - isValidEmail: function(email) { - //https://stackoverflow.com/questions/46155/how-to-validate-email-address-in-javascript - let re = new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?"); - return re.test(email); - }, - isValidWebsite: function(website){ - //https://stackoverflow.com/questions/34488170/regular-expression-in-javascript-for-valid-domain-name - let re = new RegExp("^[a-zA-Z0-9][a-zA-Z0-9-]{0,61}[a-zA-Z0-9](?:\.[a-zA-Z]{2,})+$"); - console.log(website); - return re.test(website); - }, - validateEmail: function(el){ - if (!this.isValidEmail(this.formContentValues.emailValue)) { - el.srcElement.focus(); - this.setError(true, "This is not a valid e-mailaddress"); - } else { - this.setError(false, ""); - } + submitSearch: function () { + this.$emit('next-step'); + }, + isValidEmail: function(email) { + //https://stackoverflow.com/questions/46155/how-to-validate-email-address-in-javascript + let re = new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?"); + return re.test(email); + }, + isValidWebsite: function(website){ + //https://stackoverflow.com/questions/34488170/regular-expression-in-javascript-for-valid-domain-name + let re = new RegExp("^[a-zA-Z0-9][a-zA-Z0-9-]{0,61}[a-zA-Z0-9](?:\.[a-zA-Z]{2,})+$"); + console.log(website); + return re.test(website); + }, + validateEmail: function(el){ + if (!this.isValidEmail(this.formContentValues.emailValue)) { + el.srcElement.focus(); + this.setError(true, "This is not a valid e-mailaddress"); + } else { + this.setError(false, ""); + } + }, + validateWebsite: function(el){ + if (!this.isValidWebsite(this.formContentValues.websiteValue)) { + this.setError(true, "This is not a valid website url"); + el.srcElement.focus(); + } else { + this.setError(false, ""); + } + }, + hasContent: function(el){ + if (! el.srcElement.value.trim() ){ + el.srcElement.focus(); + this.setError(true, "This field is mandatory"); + } else { + this.setError(false, ""); + } + }, + setError: function(hasError, errortext){ + this.formControlElements.formHasErrors = hasError; + this.formContentValues.errors = errortext; + }, + /** + * todo change isValidForm into a valid function + * @returns {boolean} + */ + isValidForm: function(){ + return true; }, - validateWebsite: function(el){ - if (!this.isValidWebsite(this.formContentValues.websiteValue)) { - this.setError(true, "This is not a valid website url"); - el.srcElement.focus(); - } else { - this.setError(false, ""); - } - }, - hasContent: function(el){ - if (! el.srcElement.value.trim() ){ - el.srcElement.focus(); - this.setError(true, "This field is mandatory"); - } else { - this.setError(false, ""); - } - }, - setError: function(hasError, errortext){ - this.formControlElements.formHasErrors = hasError; - this.formContentValues.errors = errortext; - }, - /** - * todo change isValidForm into a valid function - * @returns {boolean} - */ - isValidForm: function(){ - return true; - }, getCorrectTag: function(href, nameChange){ - function broadestConcept(href, changeName){ - fetch(href, { - method: "get" - }) - .then(r => r.json()) - .then(result => { - if(result){ - let res=result.title; - console.log(res); - if(res==="social interaction"){ - changeName("decagon_social"); - } - else if(res==="language"){ - changeName("decagon_language"); - } - else if(res==="thinking"){ - changeName("decagon_thinking"); - } - else if(res==="attitudes and values"){ - changeName("decagon_attitudes"); - } - else if(res==="application of knowledge"){ - changeName("decagon_applications"); - } - else if (result._links.broaderSkillGroup){ - broadestConcept(result._links.broaderSkillGroup[0].href, changeName); - } - else if (result._links.broaderSkill){ - broadestConcept(result._links.broaderSkill[0].href, changeName); - } - else if (result._links.broaderConcept){ - broadestConcept(result._links.broaderConcept[0].href, changeName); - } - else { - console.log(result._links.self.href); - changeName("round_language"); - } - } - }) - } - broadestConcept(href, nameChange); - }, + function broadestConcept(href, changeName){ + fetch(href, { + method: "get" + }) + .then(r => r.json()) + .then(result => { + if(result){ + let res=result.title; + console.log(res); + if(res==="social interaction"){ + changeName("decagon_social"); + } + else if(res==="language"){ + changeName("decagon_language"); + } + else if(res==="thinking"){ + changeName("decagon_thinking"); + } + else if(res==="attitudes and values"){ + changeName("decagon_attitudes"); + } + else if(res==="application of knowledge"){ + changeName("decagon_applications"); + } + else if (result._links.broaderSkillGroup){ + broadestConcept(result._links.broaderSkillGroup[0].href, changeName); + } + else if (result._links.broaderSkill){ + broadestConcept(result._links.broaderSkill[0].href, changeName); + } + else if (result._links.broaderConcept){ + broadestConcept(result._links.broaderConcept[0].href, changeName); + } + else { + console.log(result._links.self.href); + changeName("round_language"); + } + } + }) + } + broadestConcept(href, nameChange); + }, + setPickedValue: function (event) { + console.log("setting"); + this.formContentValues.pickedSkill = event.currentTarget.innerHTML; + console.log(this.formContentValues.pickedSkill) + let position; + for (var i=0; i3){ - this.toggleSearchActive(); - this.toggleMetaDataActive(); - - let href=this.firstHref; - this.getCorrectTag(href, function (x){ - this.nameBadge=x; - - document.getElementById("svgFile").style.visibility="visible"; - document.getElementById(this.nameBadge).style.visibility="visible"; - }.bind(this) - ); - // todo let startpoint have focus - // this.$refs.startpoint.focus(); - } - else{ - this.clicks-=1; - } - break; - case 2: - if(this.isValidForm()){ - this.toggleMetaDataActive(); - this.togglePersonalizeActive(); - } else { - this.clicks-=1; - } - break; - default: - this.clicks-=1; - console.log("generation call"); - this.generation().bind(this); - break; - } - } else { - console.log("error in next"); - } + let href=this.formContentValues.pickedSkillHref; + console.log(href); + this.getCorrectTag(href, function (x){ + this.nameBadge=x; + document.getElementById("svgFile").style.visibility="visible"; + document.getElementById(this.nameBadge).style.visibility="visible"; + let resultStr= this.formContentValues.pickedSkill.split(" "); + console.log(this.formContentValues.pickedSkill) + let offset = resultStr.length % 3; + let string1 = ""; + let string2 = ""; + let string3 = ""; + if (offset===1){ + for (let i=0; i<(resultStr.length-offset)/3; i++){ + string1+=resultStr[i]+" "; + } + for (let i=0; i<((resultStr.length-offset)/3)+1; i++){ + string2+=resultStr[i+((resultStr.length-offset)/3)]+" "; + } + for (let i=0; i<(resultStr.length-offset)/3; i++){ + if (resultStr.length>3){ + string3+=resultStr[i+1+(2*(resultStr.length-offset)/3)]+" "; + } + } + }else if(offset===2){ + for (let i=0; i<(1+((resultStr.length-offset)/3)); i++){ + string1+=resultStr[i]+" "; + } + for (let i=0; i<(1+((resultStr.length-offset)/3)); i++){ + string2+=resultStr[i+1+((resultStr.length-offset)/3)]+" "; + } + for (let i=0; i<((resultStr.length-offset)/3); i++){ + if (resultStr.length>3){ + string3+=resultStr[i+2+(2*(resultStr.length-offset)/3)]+" "; + } + } + }else { + for (let i=0; i<(resultStr.length-offset)/3; i++){ + string1+=resultStr[i]+" "; + } + for (let i=0; i<((resultStr.length-offset)/3); i++){ + string2+=resultStr[i+((resultStr.length-offset)/3)]+" "; + } + for (let i=0; i<(resultStr.length-offset)/3; i++){ + string3+=resultStr[i+(2*(resultStr.length-offset)/3)]+" "; + } + } + document.getElementById("text1").textContent = string1; + document.getElementById("text2").textContent = string2; + document.getElementById("text3").textContent = string3; + this.submitSearch(); + }.bind(this)); + }, - document.getElementById("text1").textContent = string1; - let resultStr= this.formContentValues.pickedSkill.split(" "); - let offset = resultStr.length % 3; - let string1 = ""; - let string2 = ""; - let string3 = ""; - if (offset===1){ - for (let i=0; i<(resultStr.length-offset)/3; i++){ - string1+=resultStr[i]+" "; - } - for (let i=0; i<((resultStr.length-offset)/3)+1; i++){ - string2+=resultStr[i+((resultStr.length-offset)/3)]+" "; - } - for (let i=0; i<(resultStr.length-offset)/3; i++){ - if (resultStr.length>3){ - string3+=resultStr[i+1+(2*(resultStr.length-offset)/3)]+" "; - } - } - } - else if(offset===2){ - for (let i=0; i<(1+((resultStr.length-offset)/3)); i++){ - string1+=resultStr[i]+" "; - } - for (let i=0; i<(1+((resultStr.length-offset)/3)); i++){ - string2+=resultStr[i+1+((resultStr.length-offset)/3)]+" "; - } - for (let i=0; i<((resultStr.length-offset)/3); i++){ - if (resultStr.length>3){ - string3+=resultStr[i+2+(2*(resultStr.length-offset)/3)]+" "; - } - } - } - else { - for (let i=0; i<(resultStr.length-offset)/3; i++){ - string1+=resultStr[i]+" "; - } - for (let i=0; i<((resultStr.length-offset)/3); i++){ - string2+=resultStr[i+((resultStr.length-offset)/3)]+" "; - } - for (let i=0; i<(resultStr.length-offset)/3; i++){ - string3+=resultStr[i+(2*(resultStr.length-offset)/3)]+" "; - } - } - document.getElementById("text2").textContent = string2; - document.getElementById("text3").textContent = string3; - }, - back: function () { - if(this.clicks < 3 && this.clicks > 0) { - this.clicks -= 1; - this.formContentElements.currentTitle = this.formContentElements.titles[this.clicks]; - this.formContentElements.currentButtonText = this.formContentElements.buttonText[this.clicks]; - this.toggleMetaDataActive(); - switch (this.clicks){ - case 0: - this.toggleSearchActive(); - break; - case 1: - case 2: - this.togglePersonalizeActive(); - break - } - } - }, - toggleSearchActive: function(){ - this.formControlElements.searchActive = !this.formControlElements.searchActive; - }, - toggleMetaDataActive: function () { - this.formControlElements.metaDataActive = !this.formControlElements.metaDataActive; - }, - togglePersonalizeActive: function() { - this.formControlElements.personalizeActive = !this.formControlElements.personalizeActive; - }, - toggleImageInputActive: function () { - this.formControlElements.imageInputActif = !this.formControlElements.imageInputActif - }, - toggleCompanyNameInput: function () { - this.formControlElements.companyNameInput = !this.formControlElements.companyNameInput - }, - toggleUrlInput: function () { - this.formControlElements.urlInput = !this.formControlElements.urlInput - }, - toggleColorInput: function () { - this.formControlElements.colorInput = !this.formControlElements.colorInput; - }, + toggleImageInputActive: function () { + this.formControlElements.imageInputActif = !this.formControlElements.imageInputActif + }, + toggleCompanyNameInput: function () { + this.formControlElements.companyNameInput = !this.formControlElements.companyNameInput + }, + toggleUrlInput: function () { + this.formControlElements.urlInput = !this.formControlElements.urlInput + }, + toggleColorInput: function () { + this.formControlElements.colorInput = !this.formControlElements.colorInput; + }, - changeStateInputField: function (input) { - switch (input){ - case 'imageInputActive': - this.toggleImageInputActive(); - break; - case 'companyNameInput': - this.toggleCompanyNameInput(); - break; - case 'urlInput': - this.toggleUrlInput(); - break; - default: - this.toggleColorInput(); - } - }, - generation: function (event){ - console.log("generation"); - function signingComplete(){ - let encoder = new TextEncoder('utf-8'); - function keyGeneration(resolve, reject){ - let algorithmKeyGen = { - name: "RSASSA-PKCS1-v1_5", - // RsaHashedKeyGenParams - modulusLength: 2048, - publicExponent: new Uint8Array([0x01, 0x00, 0x01]), // Equivalent to 65537 - hash: { - name: "SHA-256" - } - }; - window.crypto.subtle.generateKey(algorithmKeyGen, false, ["sign"]).then(function(newKey){ - console.log("created new key"); - resolve(newKey); - }) - } - let algorithmSign = { - name: "RSASSA-PKCS1-v1_5" - }; - function signing(dataToEncode){ - if(this.key== undefined){ - let promise = new Promise (keyGeneration); - promise.then( - function (key){ - let dataPart1 = encoder.encode(dataToEncode); - this.key=key; - return window.crypto.subtle.sign(algorithmSign, this.key.privateKey, dataPart1) - }.bind(this), - console.error.bind(console, "Unable to generate a key") - ); - } else { - let dataPart1 = encoder.encode(dataToEncode); - return window.crypto.subtle.sign(algorithmSign, this.key.privateKey, dataPart1); - } - } - console.log.bind(signing.call(this, "data")); - } - function uuidv4() { - //https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript - return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => - (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)) - } + generation: function (event){ + console.log("generation"); + function signingComplete(){ + let encoder = new TextEncoder('utf-8'); + function keyGeneration(resolve, reject){ + let algorithmKeyGen = { + name: "RSASSA-PKCS1-v1_5", + // RsaHashedKeyGenParams + modulusLength: 2048, + publicExponent: new Uint8Array([0x01, 0x00, 0x01]), // Equivalent to 65537 + hash: { + name: "SHA-256" + } + }; + window.crypto.subtle.generateKey(algorithmKeyGen, false, ["sign"]).then(function(newKey){ + console.log("created new key"); + resolve(newKey); + }) + } + let algorithmSign = { + name: "RSASSA-PKCS1-v1_5" + }; + function signing(dataToEncode){ + if(this.key== undefined){ + let promise = new Promise (keyGeneration); + promise.then( + function (key){ + let dataPart1 = encoder.encode(dataToEncode); + this.key=key; + return window.crypto.subtle.sign(algorithmSign, this.key.privateKey, dataPart1) + }.bind(this), + console.error.bind(console, "Unable to generate a key") + ); + } else { + let dataPart1 = encoder.encode(dataToEncode); + return window.crypto.subtle.sign(algorithmSign, this.key.privateKey, dataPart1); + } + } + console.log.bind(signing.call(this, "data")); + } + function uuidv4() { + //https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript + return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => + (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)) + } - //signingComplete.call(this); - let href= "http://esp-api-dev-0.10.0.cogni.zone/resource/skill?uri=http://data.europa.eu/esco/skill/3233330f-bb93-47ea-93b4-ed903d05d9f1&language=fr"; - let assertionVar = uuidv4(); - let d = new Date(); - let date = d.toISOString(); - let s = new XMLSerializer().serializeToString(document.getElementById("svgFile")) - let encodedData = window.btoa(unescape(encodeURIComponent(s))); - let imageURI = "data:image/svg+xml;base64,"+encodedData; + //signingComplete.call(this); + let href= "http://esp-api-dev-0.10.0.cogni.zone/resource/skill?uri=http://data.europa.eu/esco/skill/3233330f-bb93-47ea-93b4-ed903d05d9f1&language=fr"; + let assertionVar = uuidv4(); + let d = new Date(); + let date = d.toISOString(); + let s = new XMLSerializer().serializeToString(document.getElementById("svgFile")) + let encodedData = window.btoa(unescape(encodeURIComponent(s))); + let imageURI = "data:image/svg+xml;base64,"+encodedData; - function ab2str(buf) { - return String.fromCharCode.apply(null, new Uint16Array(buf)); - } + function ab2str(buf) { + return String.fromCharCode.apply(null, new Uint16Array(buf)); + } - function str2ab(str) { - //https://stackoverflow.com/questions/6965107/converting-between-strings-and-arraybuffers - let buf = new ArrayBuffer(str.length*2); // 2 bytes for each char - let bufView = new Uint16Array(buf); - for (let i=0, strLen=str.length; i r.json()) - .then(result => { - if(result){ - let referenceURI = (''+href.match("uri=.*?&")); - let descriptionSkill = result.description.en.literal; - let title = result.title; - this.badge = {id : assertionVar, - type : "Assertion", - recipient : { - type : "email", - identity : resHash - }, - issuedOn : date, - verification : { - type : "signed" - }, - badge: { - id : this.formContentValues.websiteValue + " " + title, - type : "BadgeClass", - name : title, - description : descriptionSkill+" ESCO database URI : "+referenceURI.substring(4, referenceURI.length-1), - image : imageURI, - criteria : { - narrative : this.formContentValues.descriptionValue - }, - issuer : { - id : this.formContentValues.websiteValue, - type : "Issuer", - name : this.formContentValues.websiteValue, - url : this.formContentValues.websiteValue, - email : this.formContentValues.websiteValue - } - } - }; - let fileSave = require('./FilaSaver.js'); - let data = "data:json;charset=utf-8,"; - let blob = new Blob([JSON.stringify(this.badge)], {type: data}); - fileSave.saveAs(blob, "badge.json"); - } - } - ); - }.bind(this)) - }, - setPickedValue: function (event) { - this.formContentValues.pickedSkill = event.currentTarget.innerHTML; - event.currentTarget.classList.toggle("actifLink"); - }, - onChangeSearch: function () { - document.getElementById("svgFile").style.visibility="hidden"; - document.getElementById(this.nameBadge).style.visibility="hidden"; - let list = document.querySelector('.list'); - while (list.firstChild) { - list.removeChild(list.firstChild); - } + let buf =str2ab(this.formContentValues.emailValue); + crypto.subtle.digest("SHA-256", buf).then(function(resultHash){ + let resHash=ab2str(resultHash); + fetch(href, { + method: "get" + }) + .then(r => r.json()) + .then(result => { + if(result){ + let referenceURI = (''+href.match("uri=.*?&")); + let descriptionSkill = result.description.en.literal; + let title = result.title; + this.badge = {id : assertionVar, + type : "Assertion", + recipient : { + type : "email", + identity : resHash + }, + issuedOn : date, + verification : { + type : "signed" + }, + badge: { + id : this.formContentValues.websiteValue + " " + title, + type : "BadgeClass", + name : title, + description : descriptionSkill+" ESCO database URI : "+referenceURI.substring(4, referenceURI.length-1), + image : imageURI, + criteria : { + narrative : this.formContentValues.descriptionValue + }, + issuer : { + id : this.formContentValues.websiteValue, + type : "Issuer", + name : this.formContentValues.websiteValue, + url : this.formContentValues.websiteValue, + email : this.formContentValues.websiteValue + } + } + }; + let fileSave = require('./FilaSaver.js'); + let data = "data:json;charset=utf-8,"; + let blob = new Blob([JSON.stringify(this.badge)], {type: data}); + fileSave.saveAs(blob, "badge.json"); + } + } + ); + }.bind(this)) + }, + onChangeSearch: function () { + document.getElementById("svgFile").style.visibility="hidden"; + document.getElementById(this.nameBadge).style.visibility="hidden"; + let list = document.querySelector('.list'); + while (list.firstChild) { + list.removeChild(list.firstChild); + } - let fetched = fetch(`http://esp-api-dev-0.10.0.cogni.zone/search?text=${this.formContentValues.searchValue}&language=`+this.locale+`&type=skill&facet=type&facet=isInScheme`, { - method: 'get' - }); + let fetched = fetch(`http://esp-api-dev-0.10.0.cogni.zone/search?text=${this.formContentValues.searchValue}&language=`+this.locale+`&type=skill&facet=type&facet=isInScheme`, { + method: 'get' + }); - let promis = fetched.then(r => r.json()); + let promis = fetched.then(r => r.json()); - let resultsObject = promis.then(result => { - if(result){ - this.count=0; - result._embedded.results.forEach(r => this.addNewElement(r)); - } - }); - }, - addNewElement: function (r) { - if (this.count===0){ - this.firstHref=r._links.self.href; - this.count++; - } - this.searchResults.push(r.title); - }, - handleImage: function () { - function getAverageColourAsRGB (img) { - //https://gist.github.com/olvado/1048628 - //some modification to be up to date and make the color less agressives. - let canvas = document.createElement('canvas'), - context = canvas.getContext("2d"), - rgb = {r:102,g:102,b:102}, // Set a base colour as a fallback for non-compliant browsers - pixelInterval = 5, // Rather than inspect every single pixel in the image inspect every 5th pixel - count = 0, - i = -4, - data, length; - // return the base colour for non-compliant browsers - if (!context) { return rgb; } - // set the height and width of the canvas element to that of the image - let height = canvas.height = img.naturalHeight || img.offsetHeight || img.height, - width = canvas.width = img.naturalWidth || img.offsetWidth || img.width; - context.drawImage(img, 0, 0); + let resultsObject = promis.then(result => { + if(result){ + this.count=0; + result._embedded.results.forEach(r => this.addNewElement(r)); + } + }); + }, + addNewElement: function (r) { + this.searchResultsHref.push(r._links.self.href); + this.searchResults.push(r.title); + }, + handleImage: function () { + function getAverageColourAsRGB (img) { + //https://gist.github.com/olvado/1048628 + //some modification to be up to date and make the color less agressives. + let canvas = document.createElement('canvas'), + context = canvas.getContext("2d"), + rgb = {r:102,g:102,b:102}, // Set a base colour as a fallback for non-compliant browsers + pixelInterval = 5, // Rather than inspect every single pixel in the image inspect every 5th pixel + count = 0, + i = -4, + data, length; + // return the base colour for non-compliant browsers + if (!context) { return rgb; } + // set the height and width of the canvas element to that of the image + let height = canvas.height = img.naturalHeight || img.offsetHeight || img.height, + width = canvas.width = img.naturalWidth || img.offsetWidth || img.width; + context.drawImage(img, 0, 0); - try { - data = context.getImageData(0, 0, width, height); - } catch(e) { - // catch errors - usually due to cross domain security issues - alert(e); - return rgb; - } + try { + data = context.getImageData(0, 0, width, height); + } catch(e) { + // catch errors - usually due to cross domain security issues + alert(e); + return rgb; + } - data = data.data; - length = data.length; - while ((i += pixelInterval * 4) < length) { - count++; - rgb.r += data[i]; - rgb.g += data[i+1]; - rgb.b += data[i+2]; - } + data = data.data; + length = data.length; + while ((i += pixelInterval * 4) < length) { + count++; + rgb.r += data[i]; + rgb.g += data[i+1]; + rgb.b += data[i+2]; + } - // floor the average values to give correct rgb values (ie: round number values) - rgb.r = rgb.r/count; - rgb.g = rgb.g/count; - rgb.b = rgb.b/count; - let res = (rgb.r+rgb.g+rgb.b - 127*3)/6; - rgb.r=Math.floor(rgb.r-res); - rgb.b=Math.floor(rgb.b-res); - rgb.g=Math.floor(rgb.g-res); - return rgb; - } - let input = document.getElementById('image-input'); - let file = input.files[0]; - let img = new Image(); + // floor the average values to give correct rgb values (ie: round number values) + rgb.r = rgb.r/count; + rgb.g = rgb.g/count; + rgb.b = rgb.b/count; + let res = (rgb.r+rgb.g+rgb.b - 127*3)/6; + rgb.r=Math.floor(rgb.r-res); + rgb.b=Math.floor(rgb.b-res); + rgb.g=Math.floor(rgb.g-res); + return rgb; + } + let input = document.getElementById('image-input'); + let file = input.files[0]; + let img = new Image(); - img.src = URL.createObjectURL(file); + img.src = URL.createObjectURL(file); - img.onload = () => { - let sizes = { - width:img.width, - height: img.height - }; - if(sizes.width < 480 && sizes.height < 150){ - let confirmBox = confirm("Are you sure you want to continue?") - if(confirmBox !== true) { - console.log("todo"); - } - } - img.height=150; - let stuff=document.getElementById("logo"); - let reader = new FileReader(); - reader.onload = (function(aImg) { - return function(e) { - document.getElementById("logo").setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', e.target.result); - document.getElementById("logo").style.visibility="visible"; - let rgb=getAverageColourAsRGB(img); - let rgbString="rgb("+rgb.r+", "+rgb.g+", "+rgb.b+")"; - let x= document.getElementsByClassName("st0"); - for(let i=0; i { + let sizes = { + width:img.width, + height: img.height + }; + if(sizes.width < 480 && sizes.height < 150){ + let confirmBox = confirm("Are you sure you want to continue?") + if(confirmBox !== true) { + console.log("todo"); + } + } + img.height=150; + let stuff=document.getElementById("logo"); + let reader = new FileReader(); + reader.onload = (function(aImg) { + return function(e) { + document.getElementById("logo").setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', e.target.result); + document.getElementById("logo").style.visibility="visible"; + let rgb=getAverageColourAsRGB(img); + let rgbString="rgb("+rgb.r+", "+rgb.g+", "+rgb.b+")"; + let x= document.getElementsByClassName("st0"); + for(let i=0; i