diff --git a/javascript-vanilla-v2/README.md b/javascript-vanilla-v2/README.md new file mode 100644 index 0000000..eb846dc --- /dev/null +++ b/javascript-vanilla-v2/README.md @@ -0,0 +1,10 @@ + + +## Flagsmith with vanilla javascript + +This repository contains basic integration without any JavaScript framework. Simply open index.html in your preferred +browser. + +## Installation + +None! Just open index.html in your preferred browser. diff --git a/javascript-vanilla-v2/assets/example-1.jpg b/javascript-vanilla-v2/assets/example-1.jpg new file mode 100644 index 0000000..3f1c1d7 Binary files /dev/null and b/javascript-vanilla-v2/assets/example-1.jpg differ diff --git a/javascript-vanilla-v2/assets/example-2.jpg b/javascript-vanilla-v2/assets/example-2.jpg new file mode 100644 index 0000000..e10f829 Binary files /dev/null and b/javascript-vanilla-v2/assets/example-2.jpg differ diff --git a/javascript-vanilla-v2/assets/example-3.jpg b/javascript-vanilla-v2/assets/example-3.jpg new file mode 100644 index 0000000..e5bd18c Binary files /dev/null and b/javascript-vanilla-v2/assets/example-3.jpg differ diff --git a/javascript-vanilla-v2/assets/example-4.jpg b/javascript-vanilla-v2/assets/example-4.jpg new file mode 100644 index 0000000..584cbfa Binary files /dev/null and b/javascript-vanilla-v2/assets/example-4.jpg differ diff --git a/javascript-vanilla-v2/index.css b/javascript-vanilla-v2/index.css new file mode 100644 index 0000000..f3be1d2 --- /dev/null +++ b/javascript-vanilla-v2/index.css @@ -0,0 +1,150 @@ +html { + --purple: #4E25DA; + --white: #fff; + --black: #192634; + background-color: var(--white); + color: var(--black); +} + +* { + + box-sizing: border-box; +} + +body { + width: 100%; + margin: 0; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding-right: 20px; +} + +.modal { + position: fixed; + top: 20px; + left: 50%; + transform: translateX(-50%); + width: 300px; + color: var(--black); + background-color: var(--white); + border: 2px solid var(--black); + display: flex; + justify-content: center; + align-items: flex-start; + z-index: 100; + padding: 20px; + border-radius: 12px; +} + +.modal form { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 10px; +} + +.announcement { + width: 80%; + background-color: var(--purple); + color: var(--white); + height: 100%; + padding: 10px; + text-align: center; + font-weight: 700; + margin: auto; + border-radius: 8px; +} + +ol li::marker { + font-weight: bold; +} + +li { + margin-bottom: 4px; +} + +ul { + list-style-type: disc; +} + + +table { + border-collapse: collapse; + width: 100%; + max-width: 1280px; + margin-bottom: 10px; +} +th, td { + border: 1px solid #dddddd; + text-align: left; + padding: 8px; +} +th { + background-color: #f2f2f2; +} + + +.imagesBox { + display: flex; + flex-direction: column; + flex-wrap:wrap; + justify-content: flex-start; + gap: 10px; + margin-bottom: 10px; +} + +.imagesBox > img { + width: auto; + object-fit: scale-down; + object-position: left; + /* max-width: 900px; */ + height: auto; + border-radius: 8px; +} + + +button { + background-color: var(--purple); + color: var(--white); + padding: 8px 20px; + border: none; + text-align: center; + border-radius: 6px; + height: 100%; + cursor: pointer; +} + +.json { + white-space: pre-wrap; +} + +.links { + width: 100%; + color: var(--white); + background-color: var(--purple); + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; +} + +.icons { + display: flex; + flex-direction: column; + gap: 8px; +} + +.icons a { + color: var(--white); + text-align: right; +} + +.hidden { + display: none; +} \ No newline at end of file diff --git a/javascript-vanilla-v2/index.html b/javascript-vanilla-v2/index.html new file mode 100644 index 0000000..eb43f82 --- /dev/null +++ b/javascript-vanilla-v2/index.html @@ -0,0 +1,192 @@ + + + + + + Javascript Vanilla Example V2 + + + + + + + + + + +

Loading...

+ + + + + \ No newline at end of file diff --git a/javascript-vanilla-v2/main.js b/javascript-vanilla-v2/main.js new file mode 100644 index 0000000..7200178 --- /dev/null +++ b/javascript-vanilla-v2/main.js @@ -0,0 +1,159 @@ +// https://docs.flagsmith.com/clients/javascript#initialisation-options +// code and comments by @gnumoreno and @MatheusLasserre (github ids) +const debug = 0 +flagsmith.init({ + // Dev environment key: iefBdPk5jLjp3WfFjiB4MS + // Prod environment key: B7PbVXEWTCGhTD3njUxoL3 + environmentID: 'iefBdPk5jLjp3WfFjiB4MS', // Required, the environment ID for your environment + + api: 'https://edge.api.flagsmith.com/api/v1/', // Defaults to Flagsmith edge API + enableAnalytics: true, // See https://docs.flagsmith.com/flag-analytics/ for more info + + // Using caching options you're reducing the number of api calls for each user. + // For example, if the ttl for your cache is 600000ms, basically, your cache is going to be refreshed only after 10 minutes. + cacheFlags: true, // stores flags in localStorage cache + cacheOptions: { + ttl: 10, // Time to Live in ms -- Default: 0. Try changing it to 1 min (60000 ms) and see what happens. + skipAPI: true, // If cache is available, get data from cache. Default: false. + }, + // If you are using the Free plan, StartUp plan or Self-Hosting you don't have real time available. + // This feature is only available for Scale Up and Enterprise plan. See https://docs.flagsmith.com/advanced-use/real-time-flags + // realTime: true, + // Set as a identity if you want to fetch flags only for this specific identity. + // identity: 'some_identity', + // Set as a trait if you want to fetch flags only for this specific trait. + // traits: { age: 21, country: 'England', employee: true }, + + onChange: (oldFlags, params) => { + document.getElementById('loading').classList.add('hidden') + document.getElementById('content').classList.remove('hidden') + // Occurs whenever flags are changed + const { isFromServer } = params //determines if the update came from the server or localStorage cache + const jsonTextBox = flagsmith.hasFeature('json_textbox') + const flagsJson = flagsmith.getAllFlags() + const indentValue = flagsmith.getValue('json_textbox', { + json: true, + }) + const button = flagsmith.hasFeature('new_button') + const colouredButton = flagsmith.hasFeature('coloured_button') + const colouredButtonValue = flagsmith.getValue('coloured_button') + const fontSize = flagsmith.hasFeature('font_size') + const fontSizeValue = flagsmith.getValue('font_size') + const showIcons = flagsmith.hasFeature('show_footer_icons') + const announcement = flagsmith.hasFeature('announcement') + const announcementValue = flagsmith.getValue('announcement') + const images = flagsmith.hasFeature('images') + // Check if the update is from server, otherwise, its the default flags. + // If default flags is not defined, all values will be undefined. + // All getters should be used outside the server check, because they need to be called BEFORE the server can send the update. + if (isFromServer) { + + const jsonTextBoxEl = document.getElementById('json-text-box') + if (jsonTextBox) { + jsonTextBoxEl.innerHTML = JSON.stringify( + flagsJson, + '', + indentValue.indent, + ) + jsonTextBoxEl.classList.remove('hidden') + } else { + jsonTextBoxEl.classList.add('hidden') + } + + const buttonEl = document.getElementById('button') + if (button) { + buttonEl.classList.remove('hidden') + } else { + buttonEl.classList.add('hidden') + } + + const colouredButtonEl = document.getElementById('coloured-button') + if (colouredButton) { + colouredButtonEl.classList.remove('hidden') + colouredButtonEl.style.backgroundColor = colouredButtonValue + } else { + colouredButtonEl.classList.add('hidden') + } + + const featuresTableEl = document.getElementById('features') + const listEl = document.getElementById('list') + if (fontSize) { + featuresTableEl.style.fontSize = fontSizeValue + 'px' + listEl.style.fontSize = fontSizeValue + 'px' + } else { + featuresTableEl.style.fontSize = '16px' + listEl.style.fontSize = '16px' + } + + const showIconsEl = document.getElementById('icons') + if (showIcons) { + showIconsEl.classList.remove('hidden') + } else { + showIconsEl.classList.add('hidden') + } + + const announcementEl = document.getElementById('announcement') + if (announcement) { + announcementEl.classList.remove('hidden') + announcementEl.innerHTML = announcementValue + } else { + announcementEl.classList.add('hidden') + } + + const imagesEl = document.getElementById('images') + if (images) { + imagesEl.classList.remove('hidden') + } else { + imagesEl.classList.add('hidden') + } + + const loginButton = document.getElementById('js-login') + const logoutButton = document.getElementById('js-logout') + + if (flagsmith.identity) { + loginButton.classList.add('hidden') + logoutButton.classList.remove('hidden') + } else { + loginButton.classList.remove('hidden') + logoutButton.classList.add('hidden') + } + } + // To enable debug mode, set debug to 1 on line 3. + if (debug) { + console.log('is_Server', isFromServer) + console.log('allFlags', flagsJson) + console.log('json_textbox', jsonTextBox, indentValue) + console.log('font_size', fontSize, fontSizeValue) + console.log('announcement', announcement, announcementValue) + console.log('new_button', button) + console.log('coloured_button', colouredButton, colouredButtonValue) + } + }, +}) + + + +function login(formData) { + formData.preventDefault() + const email = formData.target.email.value + flagsmith.identify(email) + flagsmith.setTrait('email', email) + hideModal() +} +document.getElementById('login-form').addEventListener('submit', login) + +function showModal() { + document.getElementById('modal').classList.remove('hidden') +} +document.getElementById('js-login').addEventListener('click', showModal) + +function hideModal() { + document.getElementById('modal').classList.add('hidden') +} +document.getElementById('cancel-login').addEventListener('click', hideModal) + +function logout() { + flagsmith.logout() + hideModal() +} +document.getElementById('js-logout').addEventListener('click', logout)