Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: new javascript example v2 #7

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat: new javascript example v2 #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
612b5a1
new javascript example v2
MatheusLasserre Jan 5, 2024
b19c4d0
main.js comments changes
MatheusLasserre Jan 8, 2024
6cce086
Fix form cancel error
MatheusLasserre Jan 10, 2024
f2f76e5
Update javascript-vanilla-v2/main.js
gnumoreno Jan 10, 2024
1d8b8ff
Typo
MatheusLasserre Jan 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions javascript-vanilla-v2/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<img width="100%" src="https://raw.githubusercontent.com/Flagsmith/flagsmith/main/static-files/hero.png"/>

## 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.
Binary file added javascript-vanilla-v2/assets/example-1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added javascript-vanilla-v2/assets/example-2.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added javascript-vanilla-v2/assets/example-3.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added javascript-vanilla-v2/assets/example-4.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
150 changes: 150 additions & 0 deletions javascript-vanilla-v2/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
192 changes: 192 additions & 0 deletions javascript-vanilla-v2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Javascript Vanilla Example V2</title>
<link rel="stylesheet" href="./index.css">

<!-- https://docs.flagsmith.com/clients/javascript#via-javascript-cdn -->
<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer -->
<script src="https://cdn.jsdelivr.net/npm/flagsmith/index.js" defer></script>
<script src="./main.js" defer></script>
</head>

<body>
<section class="content hidden" id="content">
<div class="header">
<h1>Javascript Vanilla Example</h1>
<button id="js-logout" class="hidden">
Logout
</button>

<button id="js-login">
Login
</button>
</div>

<div class="announcement" id="announcement">
<p>
</p>
</div>

<h2>Instructions</h2>
<ol id="list">
<li>Clone this repository to play with it locally.</li>
<li>Go to <a href="http://app.flagsmith.com/" target="_blank"
rel="noopener noreferrer">app.flagsmith.com</a>, click on Sign Up, and create an account.</li>
<li>Create an Organisation.</li>
<li>Create a Project.</li>
<li>Under the Development environment, create the feature flags listed in the next section. You can continue
the steps after you are done creating all of them. See image 1.</li>
<li>Go to Settings (under your Development environment), Keys, and copy your Client-side Environment Key.
</li>
<li>In the file main.js under the javascript-vanilla-v2 folder, replace the existing environmentID (line 6)
key with yours and save.</li>
<li>Open the index.html under the javascript-vanilla-v2 folder in your browser. Now the example is already
working with your project!</li>
<li>Enable each of the feature flags in your development environment and refresh the app in your browser.
Notice what changed in your app for each feature flag you enabled.</li>
<li>We will now play with some mock identities (there is no real authentication) in our app.
<ul>
<li>Login, type [email protected], Proceed, Logout.</li>
<li>Login, type [email protected], Proceed, Logout.</li>
<li>Login, type [email protected], Proceed, Logout.</li>
</ul>
</li>
<li>Check the Identities (under your Development environment). You should see the Identities created there.
</li>
<li>Now click on the [email protected] identity. Click on the announcement feature. Make sure it is enabled
and change the value to “Welcome, John! Identity override is working!”</li>
<li>Let’s now create a Segment (right under the Project Settings).
<ul>
<li><b>ID:</b> mycompany_employees</li>
<li><b>Description:</b> This is the segment for all my company employees so we can test in
production
later.</li>
<li><b>Trait:</b> email</li>
<li><b>Criteria:</b> Matches regex</li>
<li><b>Value:</b> .*@mycompany\.com</li>
</ul>
</li>
<li>Go back to the Features (under Development environment), click on the announcement feature Segment
Overrides tab, select the mycompany_employees, enable it, and add the value: Welcome, employee! Segment
override is working! See image 2 and 3. You just created a Segment Override for your feature!</li>
<li>Login as [email protected], logout, login as [email protected], logout. Notice the difference in the
announcement banner.</li>
</ol>

<h2>
Feature Flags
</h2>
<table id="features">
<thead>
<tr>
<th>Name</th>
<th>Enabled</th>
<th>Value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>new_button</td>
<td>disabled</td>
<td>empty</td>
<td>This is the “Button 1” in my app</td>
</tr>
<tr>
<td>coloured_button</td>
<td>disabled</td>
<td>#04A596</td>
<td>This is “Button 2” in my app and it will have the background color of whatever is the value in
this feature</td>
</tr>
<tr>
<td>font_size</td>
<td>disabled</td>
<td>18</td>
<td>Font size for the Instructions section</td>
</tr>
<tr>
<td>show_footer_icons</td>
<td>disabled</td>
<td>empty</td>
<td>This flag determines if we will show the footer with the links to our website, documentation,
and GitHub</td>
</tr>
<tr>
<td>announcement</td>
<td>disabled</td>
<td>This is a general announcement for all users</td>
<td>Toggle this to show or hide the announcement on the top of the page</td>
</tr>
<tr>
<td>json_textbox</td>
<td>disabled</td>
<td>{"indent": 4}</td>
<td>Inspect all the feature flags in a textbox in JSON format. The value is itself a JSON from which
we can extract values. Changing the number in the indent will change the format of the JSON.
</td>
</tr>
<tr>
<td>images</td>
<td>enabled</td>
<td>empty</td>
<td>Show the example images</td>
</tr>
</tbody>
</table>

<div id="images">
<h2>Example Images</h2>
<div class="imagesBox">
<img src="./assets/example-1.jpg" alt="Feature Flags Dashboard Example">
<img src="./assets/example-2.jpg" alt="Segments Config Example">
<img src="./assets/example-3.jpg" alt="Identity Override Example">
<img src="./assets/example-4.jpg" alt="Identities Example">
</div>
</div>

<div class="button-box">
<button id="button">
Button 1
</button>

<button id="coloured-button">
Button 2
</button>
</div>
<p class="json" id="json-text-box">
</p>

<div class="links">
<p>
Links
</p>
<div class="icons" id="icons">
<a href="https://flagsmith.com">Flagsmith</a>
<a href="https://docs.flagsmith.com">Docs</a>
<a href="https://github.com/Flagsmith/flagsmith-js-client">Github</a>
</div>
</div>
</section>
<p id="loading">Loading...</p>

<div class="modal hidden" id="modal">
<form id="login-form" method="POST">
<label for="email"> Type Your Email</label>
<input name="email" type="text" id="email" placeholder="Email" required>
<div class="actions">
<button type="button" id="cancel-login">
Cancel
</button>
<button type="submit">
Proceed
</button>
</form>
</div>
</div>
</body>

</html>
Loading