-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfake_esp_app.erb
163 lines (146 loc) · 7.18 KB
/
fake_esp_app.erb
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!-- demo styling not a part of integration -->
<link rel="stylesheet" href="stylesheets/fake-esp.css">
<script src="<%= sdk_url %>"></script>
</head>
<body class="<%= "orange" if ENV["ORANGE"] %>">
<div class="container-fluid">
<div class="row sample-partner-chrome">
<h1><%= app_name %></h1>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#hidden-config" role="tab" data-toggle="tab">Hidden config</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#editor" role="tab" data-toggle="tab">Design</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#litmus-platform" role="tab" data-toggle="tab">Test</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#send" role="tab" data-toggle="tab">Send</a>
</li>
</ul>
</div>
</div><!-- /container-fluid -->
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active show" id="hidden-config">
<div class="form-group col-sm-6 mx-auto">
<small><strong>Integration notes</strong>: The behaviour of the integration differs if you are already
logged in to Litmus, if you are logged in, you may wish to
<a href="https://litmus.com/logout">logout</a>. The following are fields that your application would provide via the
SDK, not shown to end users.
</small>
<form>
<fieldset class="form-group">
<label for="user-hash">Example user hash</label>
<input class="form-control" type="text" name="user-hash" id="user-hash" />
<small>
(change this to simulate a different ESP user<br>
append '-mismatch' to simulate a session signing failure)
</small>
</fieldset>
<fieldset class="form-group">
<label for="account-hash">Example account hash</label>
<input class="form-control" type="text" name="account-hash" id="account-hash" value="xyz789" />
<small>(Change this to simulate another customer account)</small>
</fieldset>
<fieldset class="form-group">
<label for="project-hash">Example project hash</label>
<input class="form-control" type="text" name="project-hash" id="project-hash" value="foo456" />
<small>(used to distinguish a project/document/campaign/test-set)</small>
</fieldset>
<form>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="editor">
<div class="form-group col-sm-6 mx-auto">
<small><strong>Integration notes</strong>: This is an example of where the user would design/code an email.</small>
<form>
<fieldset class="form-group">
<label for="subject">Email Subject</label>
<input class="form-control" type="text" name="subject" id="subject" value="Awesome Subject" />
</fieldset>
<fieldset class="form-group">
<label for="html">Email HTML</label>
<textarea class="form-control" name="html" id="html" cols="40" rows="10"><h1>Awesome email content</h1></textarea>
</fieldset>
<button href="#" class="btn btn-secondary" id="save-test">
Save and test
</button>
</form>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="litmus-platform">
<!-- this div needs to exist in the DOM when Litmus.setup is called -->
<div id="litmus-container"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="send">
<button type="button" class="btn btn-primary btn-lg" onclick="alert('Sent! ;)');">Send Campaign</button>
</div>
</div>
<!-- bootstrap script imports -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="/javascripts/bootstrap-html5-history-tabs.js"></script>
<!-- Litmus Inline integration setup -->
<script>
Litmus.setup({
"publishableKey": "<%= publishable_key %>",
"sessionSigningUri": "/sign-session-jwt"
});
// on load we initialise our demo with random hashes - a collision with
// someone who's previously used the demo can be confusing.
function randomString() { return Math.random().toString(36).substring(7); }
function randomDemoHash() { return randomString() + randomString() + randomString(); }
document.getElementById("user-hash").value = randomDemoHash();
document.getElementById("account-hash").value = randomDemoHash();
document.getElementById("project-hash").value = randomDemoHash();
// For our demo purposes we need to pick up changes to the fields above when
// the input fields change. In reality most of these would be fixed within
// the page context.
var identify = function () {
Litmus.identify({
user: document.getElementById("user-hash").value,
account: document.getElementById("account-hash").value,
project: document.getElementById("project-hash").value
});
};
identify();
document.getElementById("user-hash").onchange = identify;
document.getElementById("account-hash").onchange = identify;
document.getElementById("project-hash").onchange = identify;
// provide callbacks that allow the SDK to look up email subject and html
// whenever a test run is requested
Litmus.emailSubjectFrom(function() {
return document.getElementById("subject").value;
});
Litmus.emailHtmlFrom(function() {
return document.getElementById("html").value;
});
// Open the Litmus Inline frame (in our target-container div) whenever
// the user navigates to the Litmus tab.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
if (target === "#litmus-platform") {
Litmus.open(Litmus.PREVIEWS);
}
});
// set up HTML5 history on tab navigation to demonstrate the interaction of
// the frame's history with the parent
$('a[data-toggle="tab"]').historyTabs();
//Sample button to simulate saving and continuing to a Litmus Test
$('#save-test').on('click', function (e) {
e.preventDefault();
$('.nav-tabs a[href="#litmus-platform"]').tab('show');
});
</script>
</body>