javascript-feature-flags/index.html at master · jayf/javascript-feature-flags · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Javascript Feature Flags Demo</title>

    <!-- this is the required script -->
	<script src="feature-flags.js"></script>

	<style type="text/css">
	    body { font-family: sans-serif; color: #333; }
	    code { font-size: 20px; }
	    .lil, .lil a { color: #999; }
	    .note { display: none; }
	</style>
</head>
<body>
    <h1>Javascript Feature Flags Demo</h1>

    <p>
    A quick demo of <a href="https://github.com/jayf/javascript-feature-flags">Javascript Feature Flags</a> code.
    </p>

    <div class="note">
    <h2>Flags That Are Set on this Page:</h2>
    <p>These flags have been set via URL query strings, URL fragments and/or the domain name.</p>
    </div>
    <code></code>
    <!--
        Note that Javascript Feature Flags does not use jQuery
        jQuery is just used for testing on this page
    -->
	<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
	<script>
	    var c = ff.flags.length,
    	    s = '',
	        i;

	    for ( i=0; i < c; i++ ) {
	        s += ff.flags[i] + ' ';
	    }

	    if (s) {
    	    $('code').append( s );
    	    $('.note').css('display','block');
	    }

	</script>
	<h2>Example flags in URL fragments and/or query strings</h2>
	<ul>
    	<li><a href="index.html?reload=1#ff,Jimi">#ff,Jimi</a></li>
    	<li><a href="index.html?reload=2#ff,Elvin,Ringo">#ff,Elvin,Ringo</a></li>
    	<li><a href="index.html?reload=3&amp;ff=Eddie,Sonny">&amp;ff=Eddie,Sonny</a></li>
    	<li><a href="index.html?reload=4&amp;ff=Jimmy&amp;ff=Cecil">&amp;ff=Jimmy&amp;ff=Cecil</a></li>
    	<li><a href="index.html?reload=5&amp;ff=Duke,Count&amp;ff=Ellington,Basie">&amp;ff=Duke,Count&amp;ff=Ellington,Basie</a></li>
    	<li><a href="index.html?reload=6&amp;ff=guitar,organ&amp;ff=piano#ff,jazz,music">&amp;ff=guitar,organ&amp;ff=piano#ff,jazz,music</a></li>
    </ul>

    <h2>To Do</h2>
    <p>I'd like to add some cookie examples, and maybe also a demo of the test domain feature.</p>

    <hr>
    <p class="lil">This code was originally written by Jay Fienberg of <a href="http://juxtaprose.com/">Juxtaprose</a> in April 2013.</p>
</body>
</html>