Pogo map

Developer
Size
3,772 Kb
Views
16,192

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 Previews

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));
}
Pogo map - Script Codes
Pogo map - Script Codes
Home Page Home
Developer Dave
Username DaveOrDead
Uploaded December 12, 2022
Rating 3
Size 3,772 Kb
Views 16,192
Do you need developer help for Pogo map?

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!

Dave (DaveOrDead) Script Codes
Create amazing love letters with AI!

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!