mashery/portal-theme-starter-kit

portal-theme-starter-kit's Issues

Fix skinny nav search icon styles

Remove Smooth Scroll as default item

Keep base theme focused on the core features people typically request (counter argument: it fits in nicely with Enhanced docs)

Fix WYSIWYG generated tables

/**
 * addTableHeaders.js
 * Copyright (c) 2017. TIBCO Software Inc. All Rights Reserved.
 * @description Add table headers that are missing from the GUI generated tables
 * @version  1.0.0
 * @author Chris Ferdinandi
 *
 */
var addTableHeaders = function () {

	'use strict';

	// Feature test
	var supports = 'querySelector' in document;
	if ( !supports ) return;

	// Variables
	var tables = document.querySelectorAll( 'table' );


	/**
	 * Get the closest matching element up the DOM tree.
	 * @param  {Element} elem     Starting element
	 * @param  {String}  selector Selector to match against (class, ID, data attribute, or tag)
	 * @return {Boolean|Element}  Returns null if not match found
	 */
	var getTbody = function ( elem ) {
		for ( ; elem && elem !== document && elem.nodeType === 1; elem = elem.parentNode ) {
			if ( elem.tagName.toLowerCase() === 'tbody' ) {
				return elem;
			}
		}
		return null;
	};


	for (var i = 0; i < tables.length; i++) {

		// Check if a table head already exists
		var thead = tables[i].querySelector( 'thead' );
		if ( thead ) continue;

		// Get the first table row and conver it to a thead
		var row = tables[i].querySelector('tr');
		var tbody = getTbody( row );
		if ( !row || !tbody ) continue;
		thead = document.createElement('thead');
		thead.innerHTML = '<tr>' + row.innerHTML + '</tr>';
		console.log(tbody.parentNode);
		tbody.parentNode.insertBefore( thead, tbody );
		row.parentNode.removeChild( row );
	}

};

Add sticky footer

Add toggleIODocs as standard issue

var toggleIODocs = function () {

	'use strict';


	//
	// Variable
	//

	var select = document.querySelector('#apiId');


	//
	// Methods
	//

	/**
	 * Get the URL parameters
	 * source: https://css-tricks.com/snippets/javascript/get-url-variables/
	 * @param  {String} url The URL
	 * @return {Object}     The URL parameters
	 */
	var getParams = function (url) {
		var params = {};
		var parser = document.createElement('a');
		parser.href = url;
		var query = parser.search.substring(1);
		var vars = query.split('&');
		for (var i=0; i < vars.length; i++) {
			var pair = vars[i].split("=");
			params[pair[0]] = decodeURIComponent(pair[1]);
		}
		return params;
	};

	/**
	 * Get an element's distance from the top of the Document.
	 * @param  {Node} elem The element
	 * @return {Number}    Distance from the top in pixels
	 */
	var getOffsetTop = function (elem) {
		var location = 0;
		if (elem.offsetParent) {
			do {
				location += elem.offsetTop;
				elem = elem.offsetParent;
			} while (elem);
		}
		return location >= 0 ? location : 0;
	};

	/**
	 * Toggle a specific API
	 * @param  {Array} params The query string parameters
	 * @return {String}       The ID of the selected API
	 */
	var toggleAPI = function (params) {

		// Only run if there's an API parameter
		if (!params['api']) return;

		// Get the option to toggle
		var selected = Array.from(select.options).filter(function (api) {
			return api.textContent.trim() === decodeURIComponent(params['api']);
		});
		if (selected.length < 1) return;

		// Update the toggle and API
		select.value = selected[0].value;
		ioDocs.selectAPI(selected[0].value);

		return selected[0].value;

	};

	/**
	 * Toggle a specific method or endpoint
	 * @param  {Array}  params The query string parameters
	 * @param  {String} id     The ID of the selected API
	 */
	var toggleMethod = function (params, id) {

		// Only run if there are API and method parameters
		if (!params['api'] || !params['method']) return;

		// Get all methods
		var methods = document.querySelectorAll('#api' + id + ' .methods .title .name');
		if (methods.length < 1) return;

		// Get the selected method
		var selected = Array.from(methods).filter(function (method) {
			return method.textContent.trim() === decodeURIComponent(params['method']);
		});
		if (selected.length < 1) return;

		// Get the endpoint
		var endpoint = selected[0].closest('.method');
		if (!endpoint) return;

		// Show the selected method
		ioDocs.hideAllMethods();
		ioDocs.toggleMethod(endpoint);

		// Scroll to method
		var offset = getOffsetTop(endpoint);
		window.scrollTo(0, offset);

	};

	/**
	 * Run the script
	 */
	var run = function () {

		// Get the query string parameters
		var params = getParams(window.location.href);

		// Toggle the selected API
		var id = toggleAPI(params);

		// Toggle the selected method
		toggleMethod(params, id);

	};


	//
	// Inits & Event Listeners
	//

	// Only run on IO Docs page
	if (!select) return;

	// Run the script
	run();

};

// Toggle IO Docs APIs and endpoints with query strings
window.addEventListener('portalIODocsReady', function () {
	toggleIODocs();
}, false);

Add right height

Add styling for errors on forms

.error class

Add expand-and-collapse documentation navigation

Component Library nav doesn't show up if visiting from another page

Add toggle tabs

Run DOM updating scripts before portal render to help with repaint performance

manipulate the data in the mashery.content object instead of the DOM window.

• Better Docs
• prismForTinyMCE
• tablesForTinyMCE

Add dropdown tweak

/*!
 * addDropdown.js v1.0.0
 * Add dropdown menus to the primary nav
 * (c) 2019 TIBCO Software Inc.
 * Written by Chris Ferdinandi
 * All Rights Reserved
 */
var addDropdown = function (url, data, home) {

	'use strict';

	//
	// Variables
	//

	var nav = document.querySelector('#nav-primary-list');


	//
	// Methods
	//

	var addDropdown = function () {

		// Get the target element
		var target = nav.querySelector('a[href*="' + url + '"]');
		if (!target) return;
		var li = target.closest('li');
		if (!li) return;

		// Replace original link
		var original = '';
		if (home) {
			original = '<li><a href="' + target.href + '">' + home + '</a></li>';
		}

		// Inject the new DOM
		li.innerHTML = '<details class="nav-dropdown"><summary>' + target.textContent + '</summary><ul>' + original + data.map(function (item) {
			return '<li><a href="' + item.url + '">' + item.title + '</a></li>';
		}).join('') + '</ul></details>';

	};

	var closeOthers = function (current) {
		var details = nav.querySelectorAll('.nav-dropdown[open]');
		Array.prototype.forEach.call(details, function (detail) {
			if (detail === current) return;
			detail.removeAttribute('open');
		});
	};

	var toggleHandler = function (event) {
		if (!event.target.open) return;
		closeOthers(event.target);
	};

	var addEvent = function () {

		// If already setup, bail
		if (m$.dropdown) return;

		// Add event listener
		nav.addEventListener('toggle', toggleHandler, true);
		m$.dropdown = true;

	};


	//
	// Inits & Event Listeners
	//

	// Make sure there's data
	if (!data || Object.prototype.toString.call(data) !== '[object Array]' || data.length < 1) return;

	// Add the dropdown
	addDropdown();

	// Setup event listener
	addEvent();

};

Add automatic responsive tables via JS

/**
 * Responsive tables
 * Copyright (c) 2017. TIBCO Software Inc. All Rights Reserved.
 * @description Automatically make tables on documentation page responsive
 * @version     1.0.0
 * @author      Chris Ferdinandi
 */

(function (root, factory) {
	if ( typeof define === 'function' && define.amd ) {
		define('responsiveTables', factory(root));
	} else if ( typeof exports === 'object' ) {
		module.exports = factory(root);
	} else {
		root.responsiveTables = factory(root);
	}
})(window || this, function (root) {

	'use strict';

	//
	// Variables
	//

	var responsiveTables = {}; // Object for public APIs
	var supports = !!document.querySelector; // Feature test
	var settings, tables;

	// Default settings
	var defaults = {
		selector: 'table',
		responsiveClass: 'table-responsive',
		initClass: 'js-responsive-tables',
		callback: function () {},
	};


	//
	// Methods
	//

	/**
	 * Merge two or more objects. Returns a new object.
	 * Set the first argument to `true` for a deep or recursive merge
	 * @param {Boolean}  deep     If true, do a deep (or recursive) merge [optional]
	 * @param {Object}   objects  The objects to merge together
	 * @returns {Object}          Merged values of defaults and options
	 */
	var extend = function () {

		// Variables
		var extended = {};
		var deep = false;
		var i = 0;
		var length = arguments.length;

		// Check if a deep merge
		if ( Object.prototype.toString.call( arguments[0] ) === '[object Boolean]' ) {
			deep = arguments[0];
			i++;
		}

		// Merge the object into the extended object
		var merge = function ( obj ) {
			for ( var prop in obj ) {
				if ( Object.prototype.hasOwnProperty.call( obj, prop ) ) {
					// If deep merge and property is an object, merge properties
					if ( deep && Object.prototype.toString.call(obj[prop]) === '[object Object]' ) {
						extended[prop] = extend( true, extended[prop], obj[prop] );
					} else {
						extended[prop] = obj[prop];
					}
				}
			}
		};

		// Loop through each object and conduct a merge
		for ( ; i < length; i++ ) {
			var obj = arguments[i];
			merge(obj);
		}

		return extended;

	};

	/**
	 * Add data-label attributes
	 * @param {node} table The table to add data-label attributes to
	 */
	var addLabels = function ( table ) {

		// Variables
		var labels = table.querySelectorAll( 'th' );
		var rows = table.querySelectorAll( 'tr' );

		// Sanity check
		if ( labels.length === 0 || rows.length === 0 ) return;

		// Loop through each row
		for ( var i = 0, len = rows.length; i < len; i++ ) {

			// Get cells within the row
			var cells = rows[i].querySelectorAll( 'td' );

			// For each cell, add a data-label
			for ( var n = 0, len2 = cells.length; n < len2; n++ ) {
				if ( !labels[n] ) continue;
				cells[n].setAttribute( 'data-label', labels[n].innerHTML );
			}
		}

	};

	/**
	 * Add attributes to the tables
	 * @param {NodeList} tables The tables
	 */
	var addAttributes = function ( tables ) {
		for ( var i = 0, len = tables.length; i < len; i++ ) {
			tables[i].classList.add( settings.responsiveClass );
			addLabels( tables[i] );
		}
	};


	/**
	 * Destroy the current initialization.
	 * @public
	 */
	responsiveTables.destroy = function () {

		// If plugin isn't already initialized, stop
		if ( !settings ) return;

		// Remove responsive class
		for ( var i = 0, len = tables.length; i < len; i++ ) {
			tables[i].classList.remove( settings.responsiveClass );
		}

		// Reset variables
		settings = null;
		tables = null;

	};

	/**
	 * Initialize Responsive Tables
	 * @public
	 * @param {Object} options User settings
	 */
	responsiveTables.init = function ( options ) {

		// feature test
		if ( !supports ) return;

		// Destroy any existing inits
		responsiveTables.destroy();

		// Merge user options with defaults
		settings = extend( true, defaults, options || {} );

		// Only run on documentation and custom pages
		if ( !document.body.classList.contains( 'page-docs' ) && !document.body.classList.contains( 'page-page' ) ) return;

		// Add class to HTML element to activate conditional CSS
		document.documentElement.classList.add( settings.initClass );

		// Get all responsive tables
		tables = document.querySelectorAll( settings.selector );

		// Make them responsive
		addAttributes( tables );

		// Run callback
		settings.callback();

	};


	//
	// Public APIs
	//

	return responsiveTables;

});

Add fix for WYSIWYG syntax highlighting

/**
 * addPrismHooks.js
 * Copyright (c) 2017. TIBCO Software Inc. All Rights Reserved.
 * @description  Adds class="lang-*" to TinyMCE-generated code snippets
 * @version  1.0.0
 * @author  Chris Ferdinandi
 */
portalReady(function () {

	// Get all code snippets
	var codes = document.querySelectorAll( 'pre' );

	var getLangClass = function ( lang ) {

		var langClass = '';

		if ( lang === 'bash' ) { langClass = 'lang-bash'; }
		if ( lang === 'csharp' ) { langClass = 'lang-clike'; }
		if ( lang === 'cpp' ) { langClass = 'lang-clike'; }
		if ( lang === 'css' ) { langClass = 'lang-css'; }
		if ( lang === 'java' ) { langClass = 'lang-java'; }
		if ( lang === 'jscript' ) { langClass = 'lang-javascript'; }
		if ( lang === 'php' ) { langClass = 'lang-php'; }
		if ( lang === 'python' ) { langClass = 'lang-python'; }
		if ( lang === 'ruby' ) { langClass = 'lang-ruby'; }
		if ( lang === 'xml' ) { langClass = 'lang-markup'; }

		return langClass;

	};

	for (var i = 0; i < codes.length; i++) {
		var lang = /brush: (.*?);/.exec( codes[i].className );
		if ( !lang || Object.prototype.toString.call( lang ) !== '[object Array]' || lang.length < 2 ) return;
		var langClass = getLangClass( lang[1] );
		codes[i].classList.add( langClass );
	}

});

Add documentation for new plugins

• Better Docs
• Astro
• Latest blog posts
• Translate
• GitHub-hosted Docs (add script, too)

Add houdini

Add dropdown menus

Add top border to footer area in default themes

Sticky footer not working on load, only resize

// Sticky footer
stickyFooter('#footer');
window.setTimeout(function () {
	stickyFooter('#footer');
}, 250);

Add CSS breakpoint variables

https://gomakethings.com/the-easy-way-to-manage-css-breakpoints-in-javascript/

Fix portal layout docs

Missing // to comment out descriptions

Events stack up

• Setup all plugins to remove event listeners on reload
• Remove removal event in itself