Pogo map
How do I make an pogo map?
What is a pogo map? How do you make a pogo map? This script and codes were developed by Dave on 12 December 2022, Monday.
Pogo map - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pogo map</title>
</head>
<body> <div id="hawk"> <div id="wysi_text" class="pogo-wysiwyg"> Hellow wysiwyg - immediate function </div> <button id="first_button" type="button" class="pogo-dialog">Click event binding</button>
</div>
<button id="second_button" type="button" class="pogo-dialog pogo-wysiwyg pogo-hawk-eye"> Test with multiple classes
</button>
<br><br>
<button type="button" class="" onclick="simulateReload('hawk')" type="button">Simulate Reload</button> <script src="js/index.js"></script>
</body>
</html>
Pogo map - Script Codes JS Codes
'use strict';
// Utils
var hyphenToCamelCase = function hyphenToCamelCase(str) { return str.replace(/\b-([a-z])/g, function (all, char) { return char.toUpperCase(); });
};
var findAll = function findAll(selector) { var context = arguments.length <= 1 || arguments[1] === undefined ? document : arguments[1]; return context.querySelectorAll(selector);
};
var each = function each(array, func) { for (var i = 0; i < array.length; i++) { func(array[i], i); }
};
// Map file
var pogoMap = {};
function register() { for (var _len = arguments.length, params = Array(_len), _key = 0; _key < _len; _key++) { params[_key] = arguments[_key]; } params.map(function (item) { var hook = item.hook; var type = item.type; var func = item.func; if (pogoMap[hook]) console.warn('Warning! ' + hook + ' is already registered :S'); pogoMap[hook] = Object.assign({}, { func: func, type: type }); });
}
// TinyMCE file
var renderTinyMCE = function renderTinyMCE(context, el) { return console.log('attach the editor to: ' + el.id);
};
var runTheHawk = function runTheHawk(context, el) { return console.log('hawkers - multi hyphen class works: ' + el.id);
};
register({ hook: 'wysiwyg', func: renderTinyMCE, type: 'immediate'
}, { hook: 'hawkEye', func: runTheHawk, type: 'immediate'
});
// Dialog file
var triggerDialog = function triggerDialog(e) { return console.log('dialog open: ' + e.target.id);
};
register({ hook: 'dialog', func: triggerDialog, type: 'click'
});
/** * Gets all `pogo-` classes and either binds events or triggers their initialisation functions by * checking them against the function map. * @param {Node} context [document] - The element to check for `pogo-` classes. */
function pogoBind() { var context = arguments.length <= 0 || arguments[0] === undefined ? document : arguments[0]; var pogoEls = findAll('[class*="pogo-"]', context); var onloadFuncs = []; each(pogoEls, function (el) { var hooks = el.className.match(/pogo-[a-z\d-_]+/ig); hooks.map(function (hook) { var key = hyphenToCamelCase(hook.slice(5)); // removes `pogo-` if (pogoMap[key]) { var _pogoMap$key = pogoMap[key]; var type = _pogoMap$key.type; var func = _pogoMap$key.func; if (type === 'immediate') { onloadFuncs = [].concat(onloadFuncs, [func.bind(null, context, el)]); } else { el.addEventListener(type, func); } } }); }); // Remove and execute all functions that are supposed to trigger immediately onload // not just event bindings while (onloadFuncs.length > 0) { onloadFuncs.shift()(); }
}
pogoBind();
function simulateReload(id) { console.log('reloading contents of:' + id); pogoBind(document.getElementById(id));
}
Developer | Dave |
Username | DaveOrDead |
Uploaded | December 12, 2022 |
Rating | 3 |
Size | 3,772 Kb |
Views | 16,192 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Flexbox Grid | 3,946 Kb |
Cors | 1,831 Kb |
Validation fun | 3,893 Kb |
Closures | 2,218 Kb |
Character Gen - React | 37,586 Kb |
Javascript Binding | 3,718 Kb |
Colour Swatches | 3,409 Kb |
Dice roller | 4,109 Kb |
Password validation | 3,866 Kb |
React Tic Tac Toe | 28,062 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Knockout Lists | Marinru | 2,531 Kb |
CSS3 Fullscreen Background Slideshow | Leetech | 3,435 Kb |
Filter inputs | Rowinf | 1,721 Kb |
Perspective Origin Demo | Agelber | 3,614 Kb |
Toggle menu | Seyedi | 2,279 Kb |
Web Spiral - p5.js | TWAIN | 2,183 Kb |
Responsive Table-less Shopping Cart | Alex_rodrigues | 6,637 Kb |
Drawing a Terminal with CSS | Lachlanjc | 3,185 Kb |
Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
Drag n Drop | Martin42 | 2,594 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!