Create User Journeys MVP (#4630)
* Create User Journeys Squashed commits: [9a360e8] add page link functionality (+1 squashed commit) Squashed commits: [1cbefa4] Rework App Dev "I want to..." (+1 squashed commit) Squashed commits: [0013eb1] Create User Journeys * structure 2nd page * prepare docs/home for user journey portal * Create sample.html * Update sample.html * Update index.md * Create index.html * Update index.html * Update index.html * Update index.html * Delete index.html * add custom js mechanism * bug fix * put in docsContent div * add docsportal layout * move title from layout into page * move user-journeys/ into /docs/ * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update index.md * Update style_user_journeys.css * add initial draft for app dev user journey * add links, rough outline * fix a few things before demo/discussion * rework intro section * Update index.md * Update style_user_journeys.css * Update index.md * Update index.md * Update style_user_journeys.css * Update index.md * Update index.md * Update style_user_journeys.css * Update index.md * Update index.md * Update style_user_journeys.css * Update style_user_journeys.css * Update index.md * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update index.md * Update index.md * Update index.md * Update style_user_journeys.css * Update index.md * Update index.md * Update index.md * Update style_user_journeys.css * Update style_user_journeys.css * Update index.md * Update index.md * Update index.md * Update user-journeys.js * Update index.md * Update docsportal.html * Update style_user_journeys.css * Update docsportal.html * add and reorganize content for review * edit mostly minikube install * Updates squashed (+51 squashed commits) Squashed commits: [2e18ea8] Update application_developer-foundational.html [78fd490] autogenerate home index from toc [42e89f6] Update application_developer-foundational.html [a77d7d6] Update application_developer-foundational.html [0a489be] Update application_developer-foundational.html [5b4702f] Update style_user_journeys.css [90035a6] Update application_developer-foundational.html [db4fb19] Update application_developer-foundational.html [4188ebc] Update style_user_journeys.css [aec303b] Update application_developer-foundational.html [679d7f6] Update style_user_journeys.css [e8019bf] Update application_developer-foundational.html [2d91bf6] Update style_user_journeys.css [56a49a9] Update application_developer-foundational.html [79cfb6e] Update application_developer-foundational.html [f3ec0c5] Update application_developer-foundational.html [756a42e] Update style_user_journeys.css [208cde1] Update index.md [66241e4] Update index.md [ea8df7f] Update style_user_journeys.css [0778054] Update style.css [dcd0863] Update user-journeys.js [4a99502] Update user-journeys.js [ddf3820] Update user-journeys.js [9650dfd] Update user-journeys.js [6773597] Update user-journeys.js [0e7849e] Update user-journeys.js [8c99ba7] Update style_user_journeys.css [68d5a8a] Update user-journeys.js [45c85fe] Update user-journeys.js [7bd4a5d] Update index.md [c53c6cd] Update index.md [281e4d3] Update style.css [8e5efae] Update application_developer-foundational.html [787f78e] add newline to custom js list [eea0d10] Update style_user_journeys.css [295b4d3] Update docsportal.html [49f7130] Update index.md [0125bc6] Update style_user_journeys.css [a803584] Update style_user_journeys.css [5b97319] Update index.md [0aa34b2] update kubernetes.github.io links [62c9981] hide "Edit this Page" button for portal [1fd0226] Update style_user_journeys.css [bd35646] Update style_user_journeys.css [d7a8b81] Update style_user_journeys.css [0c1e459] Update user-journeys.js [9eb237d] Update style_user_journeys.css [99685cd] Update index.md [516079a] Update index.md [1386033] Update style_user_journeys.css * add, edit app dev content, links * move user persona data to yaml * add links * edit, reorganize for navigation * Update style_user_journeys.css * Update application_developer-foundational.html * Update application_developer-foundational.html * add configmaps * move links * edits before merge * union with #5913 * revert and overwrite for clean #5913 merge * merge in #5913 changes * fix Travis error * Refactor JS for User Journeys portal (#6473) * comment code * add arbitrary number of info links * copy file to correct directory, clean up HTML * add back in current stylesheet refs * Set default message when no persona selected (#6495) * comment code * add arbitrary number of info links * Set default message when no persona selected * copy file to correct directory, clean up HTML (#6502) * copy file to correct directory, clean up HTML * add back in current stylesheet refs * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update application_developer-foundational.html * Update application_developer-foundational.html * Update application_developer-foundational.html * Update application_developer-foundational.html * Update application_developer-foundational.html * Update style_user_journeys.css * Update style_user_journeys.css * Update application_developer-foundational.html * [User Journeys] Add content template (#6523) * remove deprecated directories * add user journey content template * Convert app dev - foundational to md * support general, non-hard-coded formatting for user journey content pages * Update application_developer-foundational.html * Update application_developer-foundational.html * Update application_developer-foundational.html * Update application_developer-foundational.html * Update application_developer-foundational.html * Chenopis uj sprint 20171222 (#6748) * move section banners out of docsection1 divs * revert * liquid hack * modify js hack * add intermediate and advanced app developer with scroll * clean up app dev foundational content * fix formatting * remove html pages * add new pages to toc * Add Docs Contributor persona links * rebalance docs contributor links * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update foundational.md * Update foundational.md * Update style_user_journeys.css * resetting cluster ops content into updated format (#6783) * resetting cluster ops content into updated format * stage interstitial pages from app_developer user journey * adding cluster ops user journey interstitial pages to ToC _data * cluster op overview and initial segment * move working text into a comment * initial foundational content for cluster ops * restructuring * roughing out intermediate resource content * add notes/detail from user-journey google doc reference details on what to cover in foundation/intermediate/adv sections * imperative language in "I want to..." content * update entry page yaml strings * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Remove personas and buttons not in MVP * Update home.js * normalize strings for 'I want to' entries * Reorder Contributor buttons * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update app-developer.yaml * Sort buttons by index value (#6925) * Sort buttons by index * fix bug * Update app-developer.yaml * Update app-developer.yaml * Update app-developer.yaml * Update intermediate.md * Update advanced.md * Add community-contributor links * change foundational/intermediate/advance topics icons * update app-developer icons * add code-contributor links * remove ecosystem-contributor, renumber contributor indexes * update links, add KEP link * reorder contributor personas * change icon for release process * stub out cluster operator intermediate UJ * Set up URL state for user journey combinations of path, persona, level * add path for about kubernetes, fix formatting and javascript appropriately * add definition for personas and fix ui spacing * interim edits to intermediate cluster op user journey * Update links in Browse Docs portion of home page. * more intermediate cluster ops content * adding in logging and monitoring content, as well as additional resource listings * button - keep words together * Move about blurb to top of docs/home page (#7000) * Move about blurb to top of docs/home page * fix conflict * retire binary_release.md * fix blurb formatting (+1 squashed commit) Squashed commits: [e2e5032] Add links to blurb * fix docsportal (+1 squashed commit) Squashed commits: [f687e71] add noedit flag * Fix home ToC * tweak blurb styling * reorg docs-home links * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Update style_user_journeys.css * Add some links for Cluster Ops - Advanced Topics (#7130) * Add some links for Cluster Ops - Advanced Topics * add back pick right solution * app developer content * minor edits * Choose icons for cluster operator links * swap logos
This commit is contained in:
Andrew Chen
committed by
k8s-ci-robot
k8s-ci-robot
parent
731b87f3e2
commit
1e5bb1f8de
@@ -0,0 +1,312 @@
|
||||
$( document ).ready(function() {
|
||||
// UI defaults, used if page is loaded without other params
|
||||
var defaults = {
|
||||
path: 'users',
|
||||
persona: 'app-developer',
|
||||
level: 'foundational'
|
||||
};
|
||||
// Top-level path types
|
||||
var pathTypes = [
|
||||
'users',
|
||||
'contributors',
|
||||
'migrators',
|
||||
'browse',
|
||||
'about'
|
||||
];
|
||||
// Paths that do not adhere to the actual user journey UI
|
||||
var specialJourneyPaths = [
|
||||
'browse',
|
||||
'about',
|
||||
];
|
||||
// Load persona JSON data structure
|
||||
var info = JSON.parse($('#user-persona-data').html());
|
||||
|
||||
var containerDivs = [
|
||||
'.applicationDeveloperContainer',
|
||||
'.infobarWrapper',
|
||||
'#cardWrapper',
|
||||
'#browsedocsWrapper',
|
||||
'#aboutWrapper'
|
||||
];
|
||||
|
||||
// Stateful wrapper for a regular hash. Stores parameters AND keeps them in
|
||||
// sync with the URL state.
|
||||
var urlParamHash = function() {
|
||||
var paramHash = {};
|
||||
|
||||
// Initialize internal params based on URL state
|
||||
function init() {
|
||||
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
|
||||
sURLVariables = sPageURL.split('&'),
|
||||
sParameterName,
|
||||
i;
|
||||
|
||||
paramHash = {};
|
||||
for (i = 0; i < sURLVariables.length; i++) {
|
||||
sParameterName = sURLVariables[i].split('=');
|
||||
if (sParameterName[0] != "" && sParameterName[1] != "")
|
||||
paramHash[sParameterName[0]] = sParameterName[1];
|
||||
}
|
||||
return paramHash; // for visibility
|
||||
}
|
||||
|
||||
// Update both internal params and URL state
|
||||
function set(key, value) {
|
||||
if (value == null) {
|
||||
delete paramHash[key];
|
||||
} else {
|
||||
paramHash[key] = value;
|
||||
}
|
||||
|
||||
var urlWithoutQuery = window.location.href.split('?')[0];
|
||||
var urlHash = window.location.hash;
|
||||
window.history.pushState(null,null, urlWithoutQuery + "?" + $.param(paramHash) + window.location.hash);
|
||||
return paramHash; // for visibility
|
||||
}
|
||||
|
||||
// Get value from hash based on key
|
||||
function get(key) {
|
||||
return paramHash[key];
|
||||
}
|
||||
|
||||
// Return number of elements in hash
|
||||
function numElts() {
|
||||
return Object.keys(paramHash).length;
|
||||
}
|
||||
|
||||
return {
|
||||
init: init,
|
||||
set: set,
|
||||
get: get,
|
||||
numElts: numElts,
|
||||
};
|
||||
}();
|
||||
|
||||
// Create persona buttons in "I am..." section, e.g. Application Developer
|
||||
function buildCards() {
|
||||
for (var c in info) {
|
||||
var card = document.createElement('div');
|
||||
card.className += "card_" + c;
|
||||
|
||||
for (var i in info[c]) {
|
||||
var button = document.createElement('div');
|
||||
button.className += 'buttons';
|
||||
button.setAttribute('data-button', i);
|
||||
button.innerText = info[c][i]["name"];
|
||||
card.appendChild(button);
|
||||
}
|
||||
$('.cards').append(card);
|
||||
}
|
||||
}
|
||||
|
||||
// Generate HTML for info links
|
||||
function getInfoLinkHtml(
|
||||
i = 1 //enumeration index for link id
|
||||
, linkLabel = "Missing link label." //info link text
|
||||
, linkUrl = "/docs/home/" //link to content
|
||||
, linkIcon = "fa-ellipsis-h" //icon preceding info link text
|
||||
) {
|
||||
var html = '';
|
||||
|
||||
/*
|
||||
html template:
|
||||
<a id="infolink1" href="docs.html"><div class="whitebar" >
|
||||
<div class="infoicon">
|
||||
<i class="fa fa-ellipsis-h" aria-hidden="true" style="padding:%;float:left;color:#3399ff"></i>
|
||||
</div>
|
||||
<div id="info1" class='data'>Missing link label.</div>
|
||||
</div></a>
|
||||
|
||||
defaults:
|
||||
label: "Missing link label."
|
||||
icon: "fa-ellipsis-h"
|
||||
url: "docs.html"
|
||||
*/
|
||||
|
||||
html = '<a id="infolink'+i+'" href="'+linkUrl+'"><div class="whitebar">' +
|
||||
'<div class="infoicon">' +
|
||||
'<i class="fa '+linkIcon+'" aria-hidden="true" style="padding:%;float:left;color:#3399ff"></i>' +
|
||||
'</div>' +
|
||||
'<div id="info'+i+'" class="data">'+linkLabel+'</div>' +
|
||||
'</div></a>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
// Set links in the "I want to..." section, e.g. Setup a development environment
|
||||
function setInfoData() {
|
||||
var path = urlParamHash.get("path");
|
||||
var persona = urlParamHash.get("persona");
|
||||
var level = urlParamHash.get("level");
|
||||
|
||||
// info links specific to type/button/level
|
||||
var contentArray = (typeof info[path][persona] !== 'undefined')
|
||||
? info[path][persona][level]
|
||||
: [{
|
||||
label: 'Please select a role or persona in the "I AM..." section above.',
|
||||
url: '#cardWrapper',
|
||||
icon: 'fa-exclamation'
|
||||
}];
|
||||
|
||||
//clear contents of #infobarLinks div
|
||||
$('#infobarLinks').empty();
|
||||
//process and add each info link
|
||||
for(i = 1; i <= contentArray.length; i++) {
|
||||
var content = contentArray[i-1];
|
||||
|
||||
//append link to the end of the div
|
||||
$('#infobarLinks').append(getInfoLinkHtml(i,content.label,content.url,content.icon));
|
||||
}
|
||||
$('.infobarWrapper').css('visibility', 'visible');
|
||||
}
|
||||
|
||||
// Hide persona wizard section if Browse Docs button is clicked
|
||||
function toggleSections(path){
|
||||
for (i in containerDivs) {
|
||||
if (!isSpecialJourney(path)) {
|
||||
$(containerDivs[i]).show();
|
||||
} else {
|
||||
$(containerDivs[i]).hide();
|
||||
}
|
||||
}
|
||||
|
||||
if (!isSpecialJourney(path)) {
|
||||
$('.card_' + path).show();
|
||||
// TBD: Add code to set button to default to first in path list?
|
||||
} else if (path == "browse") {
|
||||
$('#browsedocsWrapper').show();
|
||||
} else if (path == "about") {
|
||||
$('#aboutWrapper').show();
|
||||
}
|
||||
}
|
||||
|
||||
function isSpecialJourney(path) {
|
||||
return (specialJourneyPaths.indexOf(path) != -1);
|
||||
}
|
||||
|
||||
// Click handler for high-level user journey paths ("Users", "Contributors", etc)
|
||||
function handlePathClick(targetElt, fromPageload) {
|
||||
// (1) Update stored state if necessary
|
||||
var type = urlParamHash.get("path");
|
||||
if (!fromPageload) {
|
||||
for (var i in pathTypes) {
|
||||
var pathType = pathTypes[i];
|
||||
if (RegExp(pathType).test(targetElt.className)) {
|
||||
type = pathType;
|
||||
}
|
||||
}
|
||||
urlParamHash.set("path", type);
|
||||
urlParamHash.set("persona", null);
|
||||
urlParamHash.set("level", null);
|
||||
}
|
||||
|
||||
// (2) HTML behavior
|
||||
$('.navButton').removeClass("keepShow");
|
||||
$(targetElt).addClass("keepShow");
|
||||
$('.cards > div').hide();
|
||||
// Hide or show user journeys if "Browse Docs is selected"
|
||||
toggleSections(type);
|
||||
}
|
||||
|
||||
// Click handler + scroll for persona buttons in "I am..." section
|
||||
// NOTE: ALL persona clicks also set a level.
|
||||
function handlePersonaClick(targetElt, fromPageload, noScroll) {
|
||||
// (1) Update stored state if necessary
|
||||
if (!fromPageload) {
|
||||
var persona = targetElt.getAttribute('data-button');
|
||||
urlParamHash.set('persona', persona);
|
||||
}
|
||||
// Use default level if not specified, in order to display the proper
|
||||
// path-persona-level content
|
||||
if (urlParamHash.get('level') == null) {
|
||||
urlParamHash.set('level', defaults.level);
|
||||
}
|
||||
|
||||
// (2) HTML behavior
|
||||
$('.buttons').removeClass('selected');
|
||||
$(targetElt).addClass('selected');
|
||||
// Update header to display new persona and level
|
||||
var cardText = targetElt.innerText;
|
||||
$('#subTitle').text(cardText);
|
||||
handleLevelClick($('.level[data-name="' + urlParamHash.get('level') + '"]')[0], fromPageload);
|
||||
// Scroll to user journey content
|
||||
if (!noScroll) {
|
||||
$('html,body').animate({ scrollTop: $("#subTitle").offset().top },'slow');
|
||||
}
|
||||
}
|
||||
|
||||
function handleLevelClick(targetElt, fromPageload) {
|
||||
// (1) Update stored state if necessary
|
||||
var level = targetElt.getAttribute('data-name');
|
||||
if (!fromPageload) {
|
||||
urlParamHash.set('level', level);
|
||||
}
|
||||
|
||||
// (2) HTML behavior
|
||||
$('.level').removeClass('selected');
|
||||
$(targetElt).addClass('selected');
|
||||
// Data loading to display the right content
|
||||
setInfoData();
|
||||
}
|
||||
|
||||
function showPersonaDefinition(targetElt) {
|
||||
var persona = targetElt.getAttribute('data-button');
|
||||
|
||||
console.log($('.persona-def-data[data-name="' + persona + '"]')[0].innerHTML);
|
||||
$("#persona-definition").html($('.persona-def-data[data-name="' + persona + '"]')[0].innerHTML);
|
||||
$("#persona-definition").css("visibility", "visible");
|
||||
}
|
||||
|
||||
function attachCardEvents() {
|
||||
// Set up click handling for all paths ("Users", "Contributors", etc)
|
||||
$('.paths .navButton').on('click', function(e) {
|
||||
handlePathClick(e.currentTarget);
|
||||
});
|
||||
// Set up click handling for personas ("Application Developer", etc)
|
||||
$('.cards .buttons').on('click', function(e) {
|
||||
handlePersonaClick(e.currentTarget);
|
||||
});
|
||||
// Show persona definitions when hovering over card
|
||||
$('.cards .buttons').hover( function(e) {
|
||||
showPersonaDefinition(e.currentTarget);
|
||||
}, function(e) {
|
||||
$("#persona-definition").css("visibility", "hidden");
|
||||
$("#persona-definition").html(".");
|
||||
});
|
||||
// Set up click handling for levels ("Foundational", "Intermediate", etc)
|
||||
$('.level').on('click', function(e) {
|
||||
handleLevelClick(e.currentTarget);
|
||||
});
|
||||
}
|
||||
|
||||
// Set up state based on URL query parameters or defaults
|
||||
function setupCardState() {
|
||||
// Initialize stored state
|
||||
urlParamHash.init();
|
||||
var noScroll = urlParamHash.numElts() == 0;
|
||||
for (key in defaults) {
|
||||
if (!isSpecialJourney(urlParamHash.get('path')) && urlParamHash.get(key) == undefined) {
|
||||
urlParamHash.set(key, defaults[key]);
|
||||
}
|
||||
}
|
||||
// Update UI
|
||||
handlePathClick($('.paths .' + urlParamHash.get('path'))[0], true);
|
||||
if (!isSpecialJourney(urlParamHash.get('path'))) {
|
||||
setTimeout(function() {
|
||||
var elt = $('div[data-button="' + urlParamHash.get('persona') + '"]')[0];
|
||||
handlePersonaClick(elt, true, noScroll);
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
|
||||
function main() {
|
||||
// Set up UI
|
||||
buildCards();
|
||||
attachCardEvents();
|
||||
// Set up and display user journey state
|
||||
setupCardState();
|
||||
}
|
||||
|
||||
// What actually executes on page load
|
||||
main();
|
||||
});
|
||||
@@ -0,0 +1,30 @@
|
||||
$( document ).ready(function() {
|
||||
function scrollToHash(hash) {
|
||||
if (hash.length > 0) {
|
||||
$('html, body').animate({
|
||||
scrollTop: $(`#${hash}`).offset().top
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
|
||||
$('#content h2').each(function(index) {
|
||||
var title = $(this).text();
|
||||
var id = $(this).attr("id");
|
||||
|
||||
// inject headers into user journeys table-of-contents (buttons)
|
||||
$("#user-journeys-toc").append(`<a href="#section-${index + 1}"><div class="docButton">${index + 1}. ${title}</div></a>`)
|
||||
|
||||
// replace content headers with styled banners
|
||||
$(this).replaceWith(`<div class="anchor" id="section-${index + 1}"></div><div class="docssectionheaders" id="${id}"><span class="numberCircle"><span><br><br>${index + 1}</span></span> ${title}</div>`)
|
||||
});
|
||||
|
||||
$('div#user-journeys-toc a').each(function() {
|
||||
$(this).click(function() {
|
||||
var target = $(this).attr("href").replace("#", "");
|
||||
scrollToHash(target);
|
||||
});
|
||||
});
|
||||
|
||||
// jump to section in URL now that anchors are created
|
||||
scrollToHash(window.location.hash.substr(1));
|
||||
});
|
||||
Reference in New Issue
Block a user