/**
* NOOP Bind module.
* @memberof noop
* @namespace bind
* @author cisco211
* @copyright © 2019 by "cisco211"
* @version 0.100
*/
(function(noop, undefined)
{
'use strict';
// #region Private
/**
* @summary Default CSS selectors.
* @typedef {object.<string, string>} noop.bind.Defaults
* @memberof noop.bind
* @property {string} [linkable='.linkable'] - Default CSS selector for linkable.
* @property {string} [restrictable='.restrictable'] - Default CSS selector for restrictable.
* @property {string} [selectable='.selectable'] - Default CSS selector for selectable.
*/
class Defaults
{
constructor()
{
this.linkable = '.linkable';
this.restrictable = '.restrictable';
this.selectable = '.selectable';
} // constructor()
}; // class Defaults
/**
* @summary Register linkable for given CSS selector.
* @private
* @function linkableRegister_
* @memberof noop.bind
* @param {string|null} q - A value CSS selector.
*/
var linkableRegister_ = function(q = null)
{
if (!noop.isString(q))
q = Defaults.linkable;
var l = document.querySelectorAll(q);
if (l)
{
l.forEach(function(e)
{
e.addEventListener('click', function()
{
noop.bind.linkable(e);
}, false);
});
}
}; // var linkableRegister_ = function(q = null)
/**
* @summary Register restrictable for given CSS selector.
* @private
* @function restrictableRegister_
* @memberof noop.bind
* @param {string|null} q - A value CSS selector.
*/
var restrictableRegister_ = function(q = null)
{
if (typeof restrictable == 'undefined')
return;
if (!noop.isString(q))
q = Defaults.restrictable;
var l = document.querySelectorAll(q);
if (l)
{
l.forEach(function(e)
{
noop.bind.restrictable(e);
});
}
}; // var selectableRegister_ = function(q = null)
/**
* @summary Register selectable for given CSS selector.
* @private
* @function selectableRegister_
* @memberof noop.bind
* @param {string|null} q - A value CSS selector.
*/
var selectableRegister_ = function(q = null)
{
if (!noop.isString(q))
q = Defaults.selectable;
var l = document.querySelectorAll(q);
if (l)
{
l.forEach(function(e)
{
e.addEventListener('click', function()
{
noop.bind.selectable(this);
}, false);
});
}
}; // var selectableRegister_ = function(q = null)
// #endregion Private
// #region Public
noop.bind = new class Bind
{
constructor()
{
/**
* @summary Return default CSS selectors.
* @function defaults
* @memberof noop.bind
* @return {noop.bind.Defaults} - An object containing the default CSS selectors.
* @example var defaults = noop.bind.defaults();
*/
this.defaults = function()
{
return new Defaults();
}; // defaults = function()
/**
* @summary Make given element linkable.
* @function linkable
* @memberof noop.bind
* @param {Element} e - A valid DOM element.
* @description
* A linkable will allow you to make hyperlinks working on any element.
* The attribute "data-linkable-href" will allow you to specify the address.
* The attribute "data-linkable-target" will allow you to control the window target.
*/
this.linkable = function(e)
{
var href = e.dataset.linkableHref;
var target = e.dataset.linkableTarget;
if (typeof href === 'undefined' || href === '')
return;
if (typeof target === 'undefined' || target === '')
target = '_self';
window.open(href, target);
}; // linkable = function(e)
/**
* @summary Register bindings.
* @function register
* @memberof noop.bind
* @param {object.<string, string|null>} o - An object with CSS selectors.
*/
this.register = function(o = noop.bind.defaults())
{
var l = Object.entries(o);
for (const [k, v] of l)
{
switch (k)
{
case 'linkable': linkableRegister_(v); break;
case 'restrictable': restrictableRegister_(v); break;
case 'selectable': selectableRegister_(v); break;
}
}
}; // register = function(o)
/**
* @summary Make given element restrictable.
* @function restrictable
* @memberof noop.bind
* @param {Element} e - A valid DOM element.
*/
this.restrictable = function(e)
{
if (typeof restrictable == 'undefined')
return;
var test;
if (test = e.dataset.restrictableRole)
e.style.display = test == restrictable.role ? 'initial' : 'none';
}; // restrictable = function(e)
/**
* @summary Make given element selectable.
* @function selectable
* @memberof noop.bind
* @param {Element} e - A valid DOM element.
* @description
* A selectable will mark the innerHTML on click, to have it easier copying the contents into clipboard.
*/
this.selectable = function(e)
{
if (!e)
return;
if (e.nodeName == 'INPUT' || e.nodeName == 'TEXTAREA')
e.setSelectionRange(0, e.value.length);
else
{
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(e);
selection.removeAllRanges();
selection.addRange(range);
}
}; // selectable = function(e)
} // constructor()
}; // noop.bind = new class Bind
// #endregion Public
} // (function(noop, undefined)
(window.noop = window.noop || new class NOOP{}));
// EOF