File: /home/mmickelson/w2p.spidev.xyz/public/demo/index.html
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="./utils.js"></script>
<meta name="robots" content="NOINDEX, NOFOLLOW" />
<style>
body {
padding-top: 20px;
}
a {
font-weight: 200;
color: #333333;
font-size: 1.1em;
width: 100%;
display: inline-block;
margin-bottom: 0;
padding: 5px 0;
}
a:hover,
a:active,
a:focus {
text-decoration: none;
}
img {
max-width: 100%;
}
img {
display: block;
}
textarea {
display: block;
width: 100%;
border: none;
}
ul li {}
ul li:hover,
.list-group-item-active {
background-color: #e6f2ff;
}
.list-group-item-active a {
font-weight: 700;
}
.list-group-item {
padding-left: 15px;
padding-right: 10px;
}
.list-group-item-heading {
margin: 0;
}
h1,
h2,
h3,
h4 {
font-weight: 400;
margin-top: 0;
}
h2 {
margin-bottom: 25px;
}
.content {
display: none;
}
.content.opened {
display: block;
margin-top: 5px;
}
.content .code-container {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 10px;
}
.content input {
flex-grow: 1;
max-width: 500px;
padding: 5px;
}
.preview-image-container {
position: relative;
}
.preview-image {
margin: 10px auto;
}
.preview-overlay {
display: none;
position: absolute;
min-width: 100px;
min-height: 100px;
width: 100%;
height: 100%;
background-color: rgba(30, 30, 30, 0.5);
top: 0;
left: 0;
border-radius: 6px;
}
.preview-image-container.loading .preview-overlay {
display: block;
}
.error {
display: none;
color: #a00;
padding: 10px;
font-size: 18px;
text-align: center;
}
.apply-button {
height: 34px;
margin-right: 8px;
margin-left: 10px;
width: 90px;
}
.lds-ring {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script type="text/javascript">
var url = getApiBaseUrl();
function getApiBaseUrl() {
var url = getUrlParameter('url');
if(url) {
return url;
}
var match = window.location.hostname.match(/\w+.((live|demo|dev|bi).ibalancer.net)/);
if(match) {
return window.location.protocol + '//' + match[1];
}
var url = window.location.protocol + '//' + window.location.hostname;
if(window.location.port != '') {
url += ':' + window.location.port;
}
return url;
}
var api = {
add_job(modifier, onSuccess) {
modifier = Object.assign({}, modifier);
modifier.project = 'minted';
modifier.actions_query = $('#' + modifier.name).val();
toggleError();
showPreviewLoader();
var jobUrl = url + '/api/v1/queue?' + modifier.actions_query + '&' + $.param({
ids: {
template_id: getUrlParameter('template_id') || '1',
template_name: getUrlParameter('template_name') || '',
script_id: getUrlParameter('script_id') || '',
key: getUrlParameter('key') || 'a6c2bbd0-8477-11e8-a020-e95d5f3d8762'
},
async: 1,
});
$.ajax({
type: 'GET',
url: jobUrl,
crossDomain: true,
contentType: 'application/json',
dataType: 'json',
success: function (rsp, textStatus, jqXHR) {
// checking if job is finished
var checkJobInterval = setInterval(function () {
api.check_job(rsp.id, function (imageUrl) {
clearInterval(checkJobInterval);
$('#preview-image').attr('src', imageUrl);
hidePreviewLoader();
}, function () {
clearInterval(checkJobInterval);
hidePreviewLoader();
});
}, 500);
},
error: function (rsp, textStatus, errorThrown) {
toggleError('Failed to queue modification');
console.error('Failed to queue modification', rsp, textStatus, errorThrown);
}
});
},
check_job(id, onSuccess, onError) {
toggleError();
showPreviewLoader();
$.ajax({
type: 'GET',
url: url + '/api/v1/job/' + id,
success: function (rsp, textStatus, jqXHR) {
if(rsp.status === 200) {
onSuccess(rsp.result);
}
else if(rsp.status === 500) {
toggleError('Modification failed to complete');
onError();
}
},
error: function (rsp, textStatus, errorThrown) {
toggleError('Failed to check pending modification');
console.error('Failed to check pending modification', rsp, textStatus, errorThrown);
hidePreviewLoader();
}
});
}
};
var modifiers = [{
title: 'Change text color',
name: 'change_text_color',
actions: {
'setAttr.text1': 's7:colorValue=#00adfe00&s7:colorspace=cmyk'
},
actions_query: 'setAttr.text1={s7:colorValue=%2300adfe00%26s7:colorspace=cmyk}'
}, {
title: 'Change frame color',
name: "change_frame_color",
actions: {
'setElement.text1': '<fill><SolidColor s7:colorName="" s7:colorValue="#35050002" s7:colorspace="cmyk"></SolidColor></fill>'
},
actions_query: 'setElement.text1={%3Cfill%3E%3CSolidColor%20s7:colorName=%22%22%20s7:colorValue=%22%2335050002%22%20s7:colorspace=%22cmyk%22%3E%3C/SolidColor%3E%3C/fill%3E}'
},
{
title: 'Change font',
name: 'change_font',
actions: {
'setElement.text1': '<content><p><span fontFamily="Blackjack" fontWeight="Regular">Almira Tique</span></p></content>'
},
actions_query: 'setElement.text1={%3Ccontent%3E%3Cp%3E%3Cspan%20fontFamily%3D%22Blackjack%22%20fontWeight%3D%22Regular%22%3EAlmira%20Tique%3C%2Fspan%3E%3C%2Fp%3E%3C%2Fcontent%3E"}'
}, {
title: 'Move elment',
name: 'move',
actions: {
'setAttr.text1': 'x=121.5&y=48.631'
},
actions_query: 'setAttr.text1={x=121.5&y=48.631}'
}, {
title: 'Align text',
name: 'align_text',
actions: {
'setAttr.text1': 'textAlign=left'
},
actions_query: 'setAttr.text1={textAlign=left}'
}, {
title: 'Justify text',
name: 'justify_text',
actions: {
'setAttr.title': 'textAlign=justify',
'setAttr.title': 'textAlignLast=justify'
},
actions_query: 'setAttr.title={textAlign=justify%26textAlignLast=justify}'
}, {
title: 'Change font size',
name: 'change_font_size',
actions: {
'setElement.text1': '<content><p><span fontSize="6">Almira Tique</span></p></content>'
},
actions_query: 'setElement.text1={%3Ccontent%3E%3Cp%3E%3Cspan%20fontSize%3D%226%22%3EAlmira%20Tique%3C%2Fspan%3E%3C%2Fp%3E%3C%2Fcontent%3E}'
}, {
title: 'Change text',
name: 'change_text',
actions: {
'setElement.text1': '<content><p><span>Name</span></p></content>'
},
actions_query: 'setElement.text1={%3Ccontent%3E%3Cp%3E%3Cspan%3EName%3C/span%3E%3C/p%3E%3C/content%3E}'
}, {
title: 'Multi-line text',
name: 'multiline_text',
actions: {
'setElement.address': '<content><p><span>5207 Phinney Avenue North</span></p><p><span>Seattle, Washington 98103</span></p></content>'
},
actions_query: 'setElement.address={%3Ccontent%3E%3Cp%3E%3Cspan%3E5207%20Phinney%20Avenue%20North%3C%2Fspan%3E%3C%2Fp%3E%3Cp%3E%3Cspan%3ESeattle%2C%20Washington%2098103%3C%2Fspan%3E%3C%2Fp%3E%3C%2Fcontent%3E}'
}, {
title: 'Change line height',
name: 'change_line_height',
actions: {
'setAddr.address': 'lineHeight=5'
},
actions_query: 'setAttr.address={lineHeight=5}'
}];
function toggleError(msg) {
var errorContainer = $('#error');
if(!msg) {
errorContainer.hide().text('');
return;
}
errorContainer.show().text(msg);
}
function getModifier(name) {
for(var i = 0; i < modifiers.length; i++) {
if(modifiers[i].name === name) {
return modifiers[i];
}
}
return null;
}
function showPreviewLoader() {
$('.preview-image-container').addClass('loading');
}
function hidePreviewLoader() {
$('.preview-image-container').removeClass('loading');
}
$(function ($) {
var modifiersContainer = $('#modifiers_container');
for(var i = 0; i < modifiers.length; i++) {
var modifier = modifiers[i];
var actionsList = '';
var index = 0;
$.each(modifier.actions, function (name, value) {
actionsList += name + '=' + value + (index++ < modifier.actions.length ? "\n" : '');
});
var code = $('<input />', {
id: modifier.name,
val: modifier.actions_query
});
code.keypress(function (input) {
return function (e) {
if(e.which == 13) {
e.preventDefault();
input.parents('.content:first').find('.apply-button').click();
return false;
}
}
}(code));
var header = $('<a href="#">' + modifier.title + '</a>');
var el = $('<li />', {
html: header
});
el.data('name', modifier.name);
modifiersContainer.append(el);
var content = $('<div />', {
class: 'content'
});
var codeContainer = $('<div />', {
class: 'code-container',
html: code
});
content.append(codeContainer);
var jobUrl = url + '/api/v1/queue?' + modifier.actions_query + '&' + $.param({
ids: {
template_id: getUrlParameter('template_id') || '8',
template_name: getUrlParameter('template_name') || '',
script_id: getUrlParameter('script_id') || '',
key: getUrlParameter('key') || 'c1e8fd70-6238-11e8-9131-5dba6ce9fb03'
},
async: 1,
});
var codePreview = $('<code />', {
class: 'code-preview',
text: decodeURIComponent(jobUrl)
});
code.on('input', function (codePreview) {
return function (e) {
var jobUrl = url + '/api/v1/queue?' + e.target.value + '&' + $.param({
ids: {
template_id: getUrlParameter('template_id') || '8',
template_name: getUrlParameter('template_name') || '',
script_id: getUrlParameter('script_id') || '',
key: getUrlParameter('key') || 'c1e8fd70-6238-11e8-9131-5dba6ce9fb03'
},
async: 1,
});
codePreview.text(decodeURIComponent(jobUrl));
}
}(codePreview));
content.append($('<pre />', {
html: codePreview
}));
el.append(content);
code.after($('<button />', {
class: 'apply-button',
text: 'Apply'
}));
}
var expandLink = $('.expand');
function updateExpandedState() {
var items = $('.examples ul li');
if(items.length === $('.examples ul li.opened').length) {
expandLink.text('Collapse all');
expandLink.addClass('opened');
}
else {
expandLink.text('Expand all');
expandLink.removeClass('opened');
}
}
$('.examples ul').addClass('list-group');
$('.examples ul li').addClass('list-group-item');
$('.examples ul li a').addClass('list-group-item-heading').on('click', function (e) {
e.preventDefault();
var li = $(this).parent();
li.toggleClass('opened');
var content = li.find('.content');
content.toggleClass('opened');
updateExpandedState();
});
expandLink.click(function (e) {
e.preventDefault();
var items = $('.examples ul li');
if(!expandLink.hasClass('opened')) {
$('.examples ul li:not(.opened) a').click();
}
else {
$('.examples ul li.opened a').click();
}
updateExpandedState();
});
$('.apply-button').click(function () {
var btn = $(this);
var li = btn.parents('li:first');
$('.enabled').removeClass('enabled');
var modifier = getModifier(li.data('name'));
if(!modifier) {
return
}
li.addClass('enabled');
api.add_job(modifier);
});
})
</script>
</head>
<body>
<div class="container examples">
<div class="row">
<div class="col-xs-12">
<h2>Oriental Trading Company Examples</h2>
</div>
</div>
<div id="error" class="row error">
</div>
<div class="row">
<div class="col-xs-12 col-sm-5 preview-image-container">
<img id="preview-image" class="preview-image" src="./output.png" />
<div class="preview-overlay">
<div class="lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-7">
<div class="col-xs-12 col-md-9">
<h4></h4>
</div>
<div class="col-xs-12 col-md-3 text-right">
<a href="#" class="expand">
Expand all
</a>
</div>
<div class="col-xs-12">
<ul id="modifiers_container"></ul>
</div>
</div>
</div>
</div>
</body>
</html>