const loadModalJavaScript = options => { const MICRO_MODAL_SOURCE = "https://unpkg.com/micromodal/dist/micromodal.min.js"; if (typeof define === "function" && define.amd) { require([MICRO_MODAL_SOURCE], (dependency) => initMicroModal(dependency, options)); } else { const script = document.createElement('script'); script.src = 'https://unpkg.com/micromodal/dist/micromodal.min.js'; script.onload = () => initMicroModal(window.MicroModal, options); document.head.appendChild(script); } } const initMicroModal = (MicroModal, options) => { MicroModal.init(); if (options.debug) { console.log('Kleurmonster.nl - MicroModal JS is geladen'); } } const loadModalCSS = (options, baseUrl) => { // Load css const link = document.createElement('link'); link.href = `${baseUrl}plugin.css`; link.rel = 'stylesheet'; link.type = 'text/css'; link.onload = function() { if (options.debug) { console.log('Kleurmonster.nl - MicroModal CSS is geladen'); } }; document.head.appendChild(link); }; const generateButtonHtml = (options, containerEl) => { // Create button const button = ` `; containerEl.insertAdjacentHTML('beforeend', button); }; const generateModalHtml = iframeEl => { // Create HTML const modalHtml = `
`; document.body.insertAdjacentHTML('beforeend', modalHtml); }; (function() { const KLEURMONSTER_BASE_URL = { production: 'https://www.kleurmonster.nl/', staging: 'https://staging.kleurmonster.nl/', development: 'http://localhost:4200/' }; const KLEURMONSTER_CHANNEL_ID = '20663'; const options = { debug: false, environment: 'production', channelId: KLEURMONSTER_CHANNEL_ID, publisherId: null, height: 'auto', mode: 'inline', // modal imageSrc: null, imageMobileSrc: null }; document.addEventListener('DOMContentLoaded', function() { const containerEl = document.getElementById('kleurmonster-container'); if (containerEl === null) { console.error( 'Kleurmonster.nl - De pagina bevat geen element met een id "kleurmonster-container"' ); return; } if (containerEl.dataset.debug) { options.debug = true; console.log('Kleurmonster.nl - Debug modus actief'); console.log( 'Kleurmonster.nl - Environment: ' + containerEl.dataset.environment ); } // Copy options from the element's dataset to the plugin options. Object.keys(options).forEach(function(option) { const datasetValue = containerEl.dataset[option]; if (datasetValue) { options[option] = datasetValue; } if (options.debug && datasetValue) { console.log( 'Kleurmonster.nl - Optie ' + option + ' aangepast naar "' + datasetValue + '"' ); } }); const baseUrl = KLEURMONSTER_BASE_URL[options.environment]; if (baseUrl === undefined) { if (options.debug) { console.log( `Kleurmonster.nl - Omgevingsvariable "${options.environment}" niet gevonden.` ); } return; } if (options.debug) { console.log(`Kleurmonster.nl - BaseUrl gezet naar "${baseUrl}".`); } const channelId = options.channelId ? options.channelId : KLEURMONSTER_CHANNEL_ID; let iframeUrl = `${baseUrl}?channelId=${channelId}`; if (options.publisherId !== null) { iframeUrl = `${iframeUrl}&publisherId=${options.publisherId}`; } if (options.debug) { console.log('Kleurmonster.nl - iFrame wordt ingeladen: ' + iframeUrl); } const iframeEl = document.createElement('iframe'); iframeEl.src = iframeUrl; iframeEl.style.border = 'none'; iframeEl.style.width = '100%'; iframeEl.style.height = '100%'; iframeEl.style.backgroundColor = '#f9f9f9'; iframeEl.style.backgroundImage = `url(${baseUrl}loader.png)`; iframeEl.style.backgroundPosition = 'center'; iframeEl.style.backgroundSize = '64px'; iframeEl.style.backgroundRepeat = 'no-repeat'; iframeEl.addEventListener('load', function() { if (options.debug) { console.log('Kleurmonster.nl - iFrame ingeladen'); } }); if (options.mode === 'inline') { containerEl.appendChild(iframeEl); return; } if (options.mode === 'modal') { loadModalJavaScript(options, baseUrl); loadModalCSS(options, baseUrl); generateButtonHtml(options, containerEl); generateModalHtml(iframeEl, containerEl); } }); })();