Skip to content

Instantly share code, notes, and snippets.

@Rohja

Rohja/image.html

Last active May 15, 2018 15:58
Show Gist options
  • Save Rohja/045fad345fdbbfcfe6147ef88c91648a to your computer and use it in GitHub Desktop.
Save Rohja/045fad345fdbbfcfe6147ef88c91648a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
image.html
<script type="text/html" settings>
<div class="padding npb">
<div class="m" data-jc="textbox" data-jc-path="image_url" data-jc-config="required:true;icon:envelope">Image URL</div>
</div>
</script>
<script>
// {String}, IMPORTANT (lower case without diacritics)
exports.name = 'imagedisplay';
// {String}, optional (default: "component name")
exports.title = 'Image';
// {String}, optional (default: "")
// Font-Awesome icon without "fa-"
exports.icon = 'image';
// {String}, optional (default: "Unknown")
exports.author = 'Paul "Rohja" LESELLIER';
// {String}, optional (default: "Common")
exports.group = 'Common';
// {Object}, optional (default "undefined")
// Default options for new and existing instances
exports.options = { id: null };
// {String}, optional (default: "")
exports.version = '1.0.0';
// Installation
exports.install = function(instance) {
instance.options.image_url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAIAAAD2HxkiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAxhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDM0MiwgMjAxMC8wMS8xMC0xODowNjo0MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyOUVGMTdGOTVGOTYxMUUxOEJEM0U2OUI0NjhBNkY0MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyOUVGMTdGQTVGOTYxMUUxOEJEM0U2OUI0NjhBNkY0MCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjI5RUYxN0Y3NUY5NjExRTE4QkQzRTY5QjQ2OEE2RjQwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI5RUYxN0Y4NUY5NjExRTE4QkQzRTY5QjQ2OEE2RjQwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VF0YqgAADGxJREFUeNrs3a2TFccaB2ByC1aAwdwVidg1IIIAgwGDQcXE5K+MjsJgEhMTBIhgLoKIUEWxgghi7lvblVNTb8+Z0/Nx5pzdPI9IXfbuzpnt7l9/zPTMfvXx48cbwOH8RxGAEIIQAkIIQggIIQghIIQghIAQghACQghCCAghCCEghCCEgBCCEAJCCEIICCEIISCEIISAEIIQAkIIQggIIQghIIQghIAQghACQghCCAghCCEghCCEgBCCEAJCCEIICCEIISCEIISAEIIQAkIIQggIIQghIIQghIAQghACQghCCAghCCEghCCEIISAEIIQAkIIQggIIQghIIQghIAQghACQghCCAghCCEghCCEgBCCEAJCCEIICCEIISCEIISAEIIQAkIIQggIIQghIIQghIAQghACQghCCAghCCEghCCEgBCCEAJCCEIICCEIISCEIISAEIIQAkIIQggIIQghIIQghIAQghACQghCCAghCCEghCCEIITAId1c4TM+f/78119/bf5569atu3fvjj3Ihw8fuv+MI8Rxpp3Mp0+fLi4uPl/aHO3k5OS/l/ZaFH///Xd8evcrw58Y3xw/MrPoFjxOqso5FTF8tlHdccJ//vnn5ounp6eluMZ+Ymo5o+y7PawXwnfv3r1+/br7lefPn49tBC9fvuz+89mzZ6MKKGr0f5dSBup6+uabb87OzuK/+yiK+PT0i/zwww8D3//rr7+mE/7+++/HNvr43V+8eJHaVhTghPN/9erV+/fvu195/Pjx+fn5Up31mzdv4vjd/qK3jqLxnF9qKYpU4KOMbWbHG8LethU5XOezokbfvn37+++/91Zt7f2lO3fuRPNapyMcDm36SvQj9+7dG3WQ+PV3HraxJFMCwx9//DE/hBG/Ot7DxfLbpfjoR48eLT4U/yvWhFGI0eet80ExCMQ43JjAbrOIHvSXX34Z+4P7Vidqp8htHacJH90bkm0D16jfKOqoPYHpV/vpp5/qX1AIm0QwpvXHo2ooanez8JvW7CKKc46wjwX2qPYahbDU+W9r63MyEHOiGNDmxDh+Ng5ypXN484CfHeNMTEr3NJeIWom66f2/Yr1X1ve3b9+OaWe5aBEtO2ZWdXstY2msDaZdyZhj2xWFGDral6zbWmf8XqN+oyiZbeczYYa8SWDv6UWTKHUUtVMuw5Q6ihOI/1H3QfFt7QUS09f2X3ydSj9kCKNeYzyMQlktgbGE+Pbb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i36pHLqjUNl4Pe2STJqRDgS7Pp+o31h3jN2RG3V6kD8Q8q+bjnYnpWNnEWk4LRtTY00/vCQot7lnvihxcQueTBRmN+Hd6WidlmnjTBR1dzVeHokaTkvZoREnEPPh4YvY5RbU2dnZlX5iO/nq48eP+/4Mfy672+hb/lz2IiW27bJEN3jl0tSyH1r/jqMqq/yV7FRBp6enZeNo/aac7jn3FubMacUK3fEaIQSu9poQhBAQQhBCQAhBCAEhBCEEhBCEEBBCEEJACEEIASEEIQSEEIQQEEIQQkAIQQgBIQQhBIQQhBAQQhBCQAhBCAEhBCEEhBCEEBBCEEJACEEIASEEIQSEEIQQEEIQQkAIQQgBIQQhBCFUBCCEIISAEIIQAkIIQggIIQghIIQghIAQghACQghCCAghCCEghCCEgBCCEAJCCEIICCEIISCEIISAEIIQAkIIQggIIQghIIQghIAQghACQghCCAghCCEghCCEgBCCEAJCCEIICCEIISCEIISAEIIQAkIIQggIIQghIIQghIAQghACQghCCAghCCEIISCEIISAEIIQAkIIQggIIQghIIQghIAQghACQghCCAghCCEghHCd/V+AAQBMhOYQBeMPDAAAAABJRU5ErkJggg==";
instance.on('options', function(options_new, options_old) {
console.log("NEW OPTIONS");
console.log(options_new);
instance.options = options_new;
instance.html('<img class="images__image" src="' + instance.options.image_url + '"/ >');
});
instance.emit("options", instance.options, instance.options);
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment