diff --git a/findyourway/index.html b/findyourway/index.html index dd28126..25f587f 100644 --- a/findyourway/index.html +++ b/findyourway/index.html @@ -1,73 +1,58 @@ Find your way in Plasma Mobile
- + + + + - - - - + + diff --git a/findyourway/media/js/displayRender.js b/findyourway/media/js/displayRender.js index bf78e3d..13e624b 100644 --- a/findyourway/media/js/displayRender.js +++ b/findyourway/media/js/displayRender.js @@ -1,277 +1,284 @@ /* displayRender.js * * Copyright (C) 2018 Dimitris Kardarakos , KDE. * * Authors: * Dimitris Kardarakos * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation; either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program; if not, see . */ -var DisplayRender = { - language: 'en', +(function() { - addHelpers: function () { - Handlebars.registerHelper('choice_info', function() { + var DisplayRender = { + language: 'en', - var choiceType= Handlebars.escapeExpression(this.type); - if(choiceType === "node") { - var nextGroup= Handlebars.escapeExpression(this.nextGroup); - var choiceText = Handlebars.escapeExpression(this.choiceText); - return new Handlebars.SafeString("next-group='"+nextGroup+ "'>"+ choiceText); - } - else if(choiceType === "leaf") { - var target= Handlebars.escapeExpression(this.target); - var choiceId= Handlebars.escapeExpression(this.choiceId); - var description= Handlebars.escapeExpression(this.description); - var extraInfo= Handlebars.escapeExpression(this.extraInfo); - var choiceHeader = "target='"+target+"' data-choice-id='"+ choiceId + "'>"+description; - var choiceExtraInfo = ""; - if (extraInfo) { - choiceExtraInfo = "
" + extraInfo + "
"; + addHelpers: function () { + Handlebars.registerHelper('choice_info', function() { + + var choiceType= Handlebars.escapeExpression(this.type); + if(choiceType === "node") { + var nextGroup= Handlebars.escapeExpression(this.nextGroup); + var choiceText = Handlebars.escapeExpression(this.choiceText); + return new Handlebars.SafeString("next-group='"+nextGroup+ "'>"+ choiceText); } - - return new Handlebars.SafeString(choiceHeader+choiceExtraInfo); - } - }); - - Handlebars.registerHelper('group_info', function() { - var groupid= Handlebars.escapeExpression(this.groupid); - var groupquestion = Handlebars.escapeExpression(this.groupquestion); - return new Handlebars.SafeString("id='"+groupid+ "'>"+groupquestion+""); - }); - } - , - renderTemplate: function() { - var source = document.getElementById("group-template").innerHTML; - var template = Handlebars.compile(source); - var targetLang = DisplayRender.language; - var context = DisplayRender.questionFlow[targetLang]; - var html = template(context); - //DEBUG console.log(html); - $('#wrapper').prepend(html); - } - , - questionFlow: { - en: { - groups: [ - { - groupid: "rootgroup", - groupquestion: "What are the contribution areas you are the most interested in?", - choices: [ - { - type: "node", - nextGroup: "system-dev" , - choiceText: "System Development" - }, - { - type: "node", - nextGroup: "design" , - choiceText: "Design" - }, - { - type: "node", - nextGroup: "outreach" , - choiceText: "Outreach" - }, - { - type: "node", - nextGroup: "app-dev" , - choiceText: "Application development" - }, - ] - }, - { - groupid: "design", - groupquestion: "I am mostly interested in ", - choices: [ - { - type: "leaf", - target: "https://hig.kde.org/resources/contribute.html", - choiceId: "target-kirigami-design", - description: "Kirigami application design", - extraInfo: "joining KDE Visual Design Group and desigining applications following the Kirigami Human Interface Guidelines" - }, - { - type: "leaf", - target: "https://community.kde.org/Plasma/Mobile/Design", - choiceId: "target-shell-design", - description: "Shell and user interface design", - extraInfo: "designing core Plasma Mobile user interface" - }, - ] - }, - { - groupid: "app-dev", - groupquestion: "So, let's pick a task to get started. What about", - choices: [ - { - type: "leaf", - target: "https://phabricator.kde.org/T6945", - choiceId: "target-camera", - description: "Camera application", - extraInfo: "working on the camera application with support for taking picture and recording videos?" - }, - { - type: "leaf", - target: "https://phabricator.kde.org/T6942", - choiceId: "target-calendar", - description: "Calendar application", - extraInfo: "working on a calendar application, offering reminders and agenda functionalities?" - }, - { - type: "leaf", - target: "https://phabricator.kde.org/T6935", - choiceId: "target-dialer", - description: "Dialer application", - extraInfo: "working on the dialer application, providing an interface for managing phone calls?" - }, - { - type: "leaf", - target: "https://phabricator.kde.org/T6936", - choiceId: "target-sms", - description: "SMS application", - extraInfo: "working on the SMS application, offering functionalities like reading, sending and receiving of SMS?" - }, - { - type: "leaf", - target: "https://phabricator.kde.org/T6937", - choiceId: "target-contact-book", - description: "Contact book application", - extraInfo: "working on the contact book application, integrating Plasma Mobile with contacts of the KPeople backends?" - }, - { - type: "leaf", - target: "https://phabricator.kde.org/T8900", - choiceId: "target-calculator", - description: "Calculator application", - extraInfo: "working on the calculator application, providing simple arithmetic operations and scientific calculations to Plasma Mobile users?" - }, - { - type: "leaf", - target: "https://phabricator.kde.org/T8901", - choiceId: "target-weather", - description: "Weather application", - extraInfo: "working on the utility that allows the users to monitor the current weather in their location and offers them detailed forecasts?" - }, - { - type: "leaf", - target: "https://phabricator.kde.org/T8902", - choiceId: "target-browser", - description: "Web Browser", - extraInfo: "developing a lightweight browser that is optimized for usage in mobile devices?" - }, - { - type: "leaf", - target: "https://phabricator.kde.org/T8904", - choiceId: "target-clock", - description: "Clock", - extraInfo: "working on the standalone clock, alarm, stopwatch and timer application?" - }, + else if(choiceType === "leaf") { + var target= Handlebars.escapeExpression(this.target); + var choiceId= Handlebars.escapeExpression(this.choiceId); + var description= Handlebars.escapeExpression(this.description); + var extraInfo= Handlebars.escapeExpression(this.extraInfo); + var choiceHeader = "target='"+target+"' data-choice-id='"+ choiceId + "'>"+description; + var choiceExtraInfo = ""; + if (extraInfo) { + choiceExtraInfo = "
" + extraInfo + "
"; + } + + return new Handlebars.SafeString(choiceHeader+choiceExtraInfo); + } + }); + + Handlebars.registerHelper('group_info', function() { + var groupid= Handlebars.escapeExpression(this.groupid); + var groupquestion = Handlebars.escapeExpression(this.groupquestion); + return new Handlebars.SafeString("id='"+groupid+ "'>"+groupquestion+""); + }); + } + , + renderTemplate: function() { + // NON-PRECOMPILED DEPLOYMENT: var source = document.getElementById("group-template").innerHTML; + // NON-PRECOMPILED DEPLOYMENT: var template = Handlebars.compile(source); + var targetLang = DisplayRender.language; + var context = DisplayRender.questionFlow[targetLang]; + // NON-PRECOMPILED DEPLOYMENT: var html = template(context); + var html = Handlebars.templates.way(context); + //DEBUG console.log(html); + $('#wrapper').prepend(html); + } + , + questionFlow: { + en: { + groups: [ + { + groupid: "rootgroup", + groupquestion: "What are the contribution areas you are the most interested in?", + choices: [ + { + type: "node", + nextGroup: "system-dev" , + choiceText: "System Development" + }, + { + type: "node", + nextGroup: "design" , + choiceText: "Design" + }, + { + type: "node", + nextGroup: "outreach" , + choiceText: "Outreach" + }, + { + type: "node", + nextGroup: "app-dev" , + choiceText: "Application development" + }, + ] + }, + { + groupid: "design", + groupquestion: "I am mostly interested in ", + choices: [ + { + type: "leaf", + target: "https://hig.kde.org/resources/contribute.html", + choiceId: "target-kirigami-design", + description: "Kirigami application design", + extraInfo: "joining KDE Visual Design Group and desigining applications following the Kirigami Human Interface Guidelines" + }, + { + type: "leaf", + target: "https://community.kde.org/Plasma/Mobile/Design", + choiceId: "target-shell-design", + description: "Shell and user interface design", + extraInfo: "designing core Plasma Mobile user interface" + }, + ] + }, + { + groupid: "app-dev", + groupquestion: "So, let's pick a task to get started. What about", + choices: [ + { + type: "leaf", + target: "https://phabricator.kde.org/T6945", + choiceId: "target-camera", + description: "Camera application", + extraInfo: "working on the camera application with support for taking picture and recording videos?" + }, + { + type: "leaf", + target: "https://phabricator.kde.org/T6942", + choiceId: "target-calendar", + description: "Calendar application", + extraInfo: "working on a calendar application, offering reminders and agenda functionalities?" + }, + { + type: "leaf", + target: "https://phabricator.kde.org/T6935", + choiceId: "target-dialer", + description: "Dialer application", + extraInfo: "working on the dialer application, providing an interface for managing phone calls?" + }, + { + type: "leaf", + target: "https://phabricator.kde.org/T6936", + choiceId: "target-sms", + description: "SMS application", + extraInfo: "working on the SMS application, offering functionalities like reading, sending and receiving of SMS?" + }, + { + type: "leaf", + target: "https://phabricator.kde.org/T6937", + choiceId: "target-contact-book", + description: "Contact book application", + extraInfo: "working on the contact book application, integrating Plasma Mobile with contacts of the KPeople backends?" + }, + { + type: "leaf", + target: "https://phabricator.kde.org/T8900", + choiceId: "target-calculator", + description: "Calculator application", + extraInfo: "working on the calculator application, providing simple arithmetic operations and scientific calculations to Plasma Mobile users?" + }, + { + type: "leaf", + target: "https://phabricator.kde.org/T8901", + choiceId: "target-weather", + description: "Weather application", + extraInfo: "working on the utility that allows the users to monitor the current weather in their location and offers them detailed forecasts?" + }, + { + type: "leaf", + target: "https://phabricator.kde.org/T8902", + choiceId: "target-browser", + description: "Web Browser", + extraInfo: "developing a lightweight browser that is optimized for usage in mobile devices?" + }, + { + type: "leaf", + target: "https://phabricator.kde.org/T8904", + choiceId: "target-clock", + description: "Clock", + extraInfo: "working on the standalone clock, alarm, stopwatch and timer application?" + }, + { + type: "leaf", + target: "https://phabricator.kde.org/T8906", + choiceId: "target-qr-scanner", + description: "QR code scanner", + extraInfo: "working on the application that enables the users to scan QR codes?" + }, { - type: "leaf", - target: "https://phabricator.kde.org/T8906", - choiceId: "target-qr-scanner", - description: "QR code scanner", - extraInfo: "working on the application that enables the users to scan QR codes?" - }, - { - type: "leaf", - target: "https://phabricator.kde.org/T8903", - choiceId: "target-audio-recorder", - description: "Audio Recorder", - extraInfo: "creating a simple application with a clean interface to offer fast and easy sound recording?" - }, + type: "leaf", + target: "https://phabricator.kde.org/T8903", + choiceId: "target-audio-recorder", + description: "Audio Recorder", + extraInfo: "creating a simple application with a clean interface to offer fast and easy sound recording?" + }, + { + type: "leaf", + target: "https://phabricator.kde.org/T8905", + choiceId: "target-compass", + description: "Compass", + extraInfo: "working on the compass application that will use the GPS and the sensors of the mobile device?" + } + ] + }, + + { + groupid: "system-dev", + groupquestion: "So, let's pick a task to get started. What about", + choices: [ + { + type: "leaf", + target: "https://phabricator.kde.org/T6940", + choiceId: "target-ringtone", + description: "Ringtone and Notifications", + extraInfo: "working on controls and options for ringtones and call and message notifications?" + }, + { + type: "leaf", + target: "https://phabricator.kde.org/T6946", + choiceId: "target-usb-mtp", + description: "USB-MTP storage support", + extraInfo: "providing USB/MTP storage support to Plasma Mobile devices?" + }, + { + type: "leaf", + target: "https://phabricator.kde.org/T8907", + choiceId: "target-bluetooth", + description: "Bluetooth", + extraInfo: "porting Plasma bluetooth capabilities to Plasma Mobile?" + }, + { + type: "leaf", + target: "https://phabricator.kde.org/T8908", + choiceId: "target-battery", + description: "Battery", + extraInfo: "providing battery usage schemes per application as well as battery condition and energy consumption reporting?" + }, + { + type: "leaf", + target: "https://phabricator.kde.org/T8909", + choiceId: "target-cell-buttons", + description: "Cell Buttons", + extraInfo: "enabling the user to configure the action of each device button?" + }, { - type: "leaf", - target: "https://phabricator.kde.org/T8905", - choiceId: "target-compass", - description: "Compass", - extraInfo: "working on the compass application that will use the GPS and the sensors of the mobile device?" - } - ] - }, - + type: "leaf", + target: "https://phabricator.kde.org/T8910", + choiceId: "target-gestures", + description: "Gestures", + extraInfo: "creating the configuration infrastructure that will enable the users to match actions against gestures?" + } + ] + }, { - groupid: "system-dev", - groupquestion: "So, let's pick a task to get started. What about", - choices: [ - { - type: "leaf", - target: "https://phabricator.kde.org/T6940", - choiceId: "target-ringtone", - description: "Ringtone and Notifications", - extraInfo: "working on controls and options for ringtones and call and message notifications?" - }, - { - type: "leaf", - target: "https://phabricator.kde.org/T6946", - choiceId: "target-usb-mtp", - description: "USB-MTP storage support", - extraInfo: "providing USB/MTP storage support to Plasma Mobile devices?" - }, - { - type: "leaf", - target: "https://phabricator.kde.org/T8907", - choiceId: "target-bluetooth", - description: "Bluetooth", - extraInfo: "porting Plasma bluetooth capabilities to Plasma Mobile?" - }, - { - type: "leaf", - target: "https://phabricator.kde.org/T8908", - choiceId: "target-battery", - description: "Battery", - extraInfo: "providing battery usage schemes per application as well as battery condition and energy consumption reporting?" - }, - { - type: "leaf", - target: "https://phabricator.kde.org/T8909", - choiceId: "target-cell-buttons", - description: "Cell Buttons", - extraInfo: "enabling the user to configure the action of each device button?" - }, - { - type: "leaf", - target: "https://phabricator.kde.org/T8910", - choiceId: "target-gestures", - description: "Gestures", - extraInfo: "creating the configuration infrastructure that will enable the users to match actions against gestures?" - } - ] - }, - { - groupid: "outreach", - groupquestion: "I am mostly interested in", - choices: [ - { - type: "leaf", - choiceId: "target-doc", - target: "https://phabricator.kde.org/T4946", - description: "Writting documentation", - extraInfo: "documenting Plasma Mobile architecture, installation process, applications, etc." - }, - { - type: "leaf", - choiceId: "target-promo", - target: "https://community.kde.org/Promo", - description: "Promotion", - extraInfo: "joining KDE Promo team and promoting Plasma Mobile" - } - ] - } - ] - } + groupid: "outreach", + groupquestion: "I am mostly interested in", + choices: [ + { + type: "leaf", + choiceId: "target-doc", + target: "https://phabricator.kde.org/T4946", + description: "Writting documentation", + extraInfo: "documenting Plasma Mobile architecture, installation process, applications, etc." + }, + { + type: "leaf", + choiceId: "target-promo", + target: "https://community.kde.org/Promo", + description: "Promotion", + extraInfo: "joining KDE Promo team and promoting Plasma Mobile" + } + ] + } + ] + } + } } -} + DisplayRender.addHelpers(); + DisplayRender.renderTemplate(); + $('#responses div').show(); +})(); diff --git a/findyourway/media/js/foopy.js b/findyourway/media/js/foopy.js index 5e973c5..c7dd479 100644 --- a/findyourway/media/js/foopy.js +++ b/findyourway/media/js/foopy.js @@ -1,306 +1,306 @@ (function($) { var groupNode; var choiceIndex = []; var choices = []; var stack = []; var currentLang = "en"; // Default lang var rtlLangs = {"ar": "","fa": ""}; function detectRtl(value) { if (value in rtlLangs) { document.documentElement.dir = "rtl"; } else { document.documentElement.dir = "ltr"; } } function chooseNegativeResponse() { var responses = $('.negative').not('.visible'); return responses[Math.floor(Math.random() * responses.length)]; } function updateNegativeResponse() { var negative = chooseNegativeResponse(); $($('.negative.visible')[0]).removeClass('visible'); $(negative).addClass('visible'); } function incrementAndWrap(curr, max) { if(max === undefined) { max = $('.choices li', groupNode).length; } curr++; if (curr === max) { curr = 0; } return curr; } function updateCurrentChoice(lastIndex) { setLocationHashSuffix(getUIDAttribute(displayChoice(lastIndex))); } function displayChoice(lastIndex) { var lastChoice = $('.choices li', groupNode)[choices[choices.length - 1][lastIndex]]; var choice = $('.choices li', groupNode)[choices[choices.length - 1][choiceIndex[choiceIndex.length - 1]]]; var nextChoice = $('.choices li', groupNode)[choices[choices.length - 1][incrementAndWrap(choiceIndex[choiceIndex.length - 1])]]; updateNegativeResponse(); lastChoice.style.display = 'none'; choice.style.display = 'inline'; var button = $('#ok')[0]; var isExternal = choice.hasAttribute('target'); button.firstChild.href = !isExternal ? '#!/' + stack.join('/') + '/' + getUIDAttribute(choice) + '/' : choice.getAttribute('target'); $('#next a:first').attr('href', '#!/' + stack.join('/') + '/' + getUIDAttribute(nextChoice)); $('#back a:first').attr('href', '#!/' + stack.join('/', stack.slice(stack.length - 1, 1))); return choice; } function nextChoice(ev) { if(ev.which === 2) { return; } ev.preventDefault(); var lastIndex = choiceIndex[choiceIndex.length - 1]; choiceIndex[choiceIndex.length - 1] = incrementAndWrap(lastIndex); updateCurrentChoice(lastIndex); } function switchGroup(group, choiceId) { displayGroup(group, choiceId); updateCurrentChoice(choiceIndex[choiceIndex.length - 1]); } function displayGroup(group, choiceId) { groupNode = document.getElementById(group); if (!stack.length || stack[stack.length - 1] !== group || choiceId) { if ( $.inArray(group, stack) < 0 ) { stack.push(group); } if ( ! choiceId ) { choiceIndex.push(0); } setGroupChoices(group, choiceId); } var firstChoice = $('#wrapper > div')[0].id; $('#back')[0].style.display = group === firstChoice ? 'none' : 'block'; $('#next')[0].style.display = group !== firstChoice && choices[choices.length - 1].length == 1 ? 'none' : 'block'; $('.question', groupNode)[0].style.display = 'block'; } function cleanUpCurrent() { if (!groupNode) { return; } $('.question', groupNode)[0].style.display = 'none'; var lastChoice = $('.choices li', groupNode)[choices[choices.length - 1][choiceIndex[choiceIndex.length - 1]]]; lastChoice.style.display = 'none'; } function investigate(ev) { if(ev.which === 2) { return; } ev.preventDefault(); var choice = $('.choices li', groupNode)[choices[choices.length - 1][choiceIndex[choiceIndex.length - 1]]]; if (choice.hasAttribute('next-group')) { cleanUpCurrent(); switchGroup(choice.getAttribute('next-group')); } else { window.open(choice.getAttribute('target')); } } function takeBack(ev) { if(ev.which === 2) { return; } cleanUpCurrent(); setLocationHashSuffix(""); stack.splice(stack.length - 1, 1); choiceIndex.splice(choiceIndex.length - 1, 1); choices.splice(choices.length - 1, 1); switchGroup(stack[stack.length - 1]); } function onLangChange() { document.webL10n.setLanguage(this.value); detectRtl(this.value); setLangQueryString(this.value) } function setLocationHashSuffix(value) { var midValue = stack.join("/"), hash = "#!/" + midValue + "/" + value; if (supportsPushState()) { history.pushState({midValue: midValue, index: choiceIndex[choiceIndex.length-1]}, null, window.location.pathname + window.location.search + hash); } else { window.location.hash = hash; } } // Uses HTML5 pushState with fallback to window.location function setLangQueryString(value) { var urlPart = "?lang=" + value + window.location.hash; currentLang = value; if (supportsPushState()) { history.pushState({ lang: value, location: window.location.hash }, "", urlPart); } else { window.location = urlPart; } } function setGroupChoices(group, choiceId) { //+ Jonas Raoni Soares Silva //@ http://jsfromhell.com/array/shuffle [rev. #1] function shuffle(v) { for (var j, x, i = v.length; i; j = parseInt(Math.random() * i, 10), x = v[--i], v[i] = v[j], v[j] = x){} return v; } var collector = [], elements = $('.choices li', groupNode), memo = 0; for (var i = 0; i < elements.length; i++) { if (choiceId && getUIDAttribute(elements[i]) == choiceId) { memo = i; } collector.push(i); } collector = shuffle(collector) if (choiceId) { choiceIndex.push( $.inArray(memo, collector) ); } choices.push(collector); } function getUIDAttribute(choice) { return choice.getAttribute("next-group") || choice.getAttribute("data-choice-id"); } function supportsPushState() { return !! (window.history && history.pushState); } function supportsLang(value) { console.log('supportsLang'); console.log($('#lang option[value=' + value + ']').text()); return !! $('#lang option[value=' + value + ']').length; } function changeLang(value) { var option = $('#lang option[value=' + value + ']'); if (option.length) { // If the browser language is supported, select the good option document.webL10n.setLanguage(value); detectRtl(value); option.prop('selected', 'selected'); currentLang = value; return currentLang; } else { return false; } } window.onpopstate = function(event) { if (event.state) { if (event.state.midValue === stack.join("/")) { // navigate through items on same level var lastIndex = choiceIndex[choiceIndex.length - 1]; choiceIndex[choiceIndex.length - 1] = event.state.index; displayChoice(lastIndex); } else { // navigate through levels cleanUpCurrent(); stack.splice(stack.length - 1, 1); choiceIndex.splice(choiceIndex.length - 1, 1); choices.splice(choices.length - 1, 1); var groups = event.state.midValue.split("/"); displayGroup(groups[groups.length - 1]); displayChoice(choiceIndex[choiceIndex.length - 1]); } } } - $(window).load(function() { + $(window).on('load',function() { $('#ok a:first').on('click', investigate); $('#next a:first').on('click', nextChoice); $('#back a:first').on('click', takeBack); $('#lang select').on('change', onLangChange); var languageRegexp = /[&?]lang=([^&?]+)/; var defaultGroup = "rootgroup"; // Check for language part in URL if (languageRegexp.test(document.location.search)) { var testLang = document.location.search.match(languageRegexp), langCode = testLang[1]; if (supportsLang(langCode)) { changeLang(langCode); } } else { // Using browser language if found // Detected browser language var browserLang = document.webL10n.getLanguage(); // Default language (value of the selected