From 55b7254e0557b1ff357f02b40d2fa20d0cf57cd3 Mon Sep 17 00:00:00 2001
From: Tony Wu <twu@fliplet.com>
Date: Tue, 22 Jan 2019 15:18:16 +0000
Subject: [PATCH 1/3] Code shuffling
---
js/interface.js | 252 +++++++++++++++++++++++++-----------------------
1 file changed, 129 insertions(+), 123 deletions(-)
diff --git a/js/interface.js b/js/interface.js
index 5455343..328fcfe 100644
--- a/js/interface.js
+++ b/js/interface.js
@@ -56,6 +56,118 @@ var emailProviderData = $.extend(true, {
to: []
}, widgetInstanceData.appData ? widgetInstanceData.appData.untouchedData : {});
+function showPageQuery() {
+ $('#add-query').addClass('hidden');
+ $('#screen-form').addClass('show-query');
+ Fliplet.Widget.autosize();
+}
+
+// Save data when submitting the form
+function save(notifyComplete) {
+ // Clean data to store the new saved values
+ var data = {};
+
+ // Attach options from widgetInstanceData
+ data.options = widgetInstanceData.options;
+
+ // Get and save values to data
+ fields.forEach(function(fieldId) {
+ data[fieldId] = $('#' + fieldId).val();
+ });
+
+ var appAction = $appAction.val();
+ if (data.action === 'app' && appAction) {
+ data.app = appAction;
+ data.appData = {};
+
+ if (data.app === "gmail.compose") {
+ data.appData.untouchedData = emailProviderData
+ data.appData.body = emailProviderData.html
+ data.appData.subject = emailProviderData.subject
+
+ // All recipients are found in the "emailProviderData.to" array, but with "type"
+ // defining whether they are "to" or "cc" or "bcc" recipients.
+ data.appData.to = _.find(emailProviderData.to, function(o) { return o.type === 'to'; }) || '';
+ data.appData.cc = _.find(emailProviderData.to, function(o) { return o.type === 'cc'; }) || '';
+ data.appData.bcc = _.find(emailProviderData.to, function(o) { return o.type === 'bcc'; }) || '';
+ } else if (data.app === 'googlechrome.website') {
+ data.appData.url = $('#' + externalAppValueMap[appAction]).val();
+ } else {
+ var urlValue = $('#' + externalAppValueMap[appAction]).val();
+ var result;
+
+ data.appData.fullUrl = urlValue;
+ if (appAction === "gdocs.document" || appAction === "gdocs.spreadsheet" || appAction === "gdocs.presentation") {
+ result = urlValue.match(/\/d\/([A-z0-9-_]+)/);
+ data.appData.id = result.length && result[1];
+ }
+
+ if (appAction === "gdrive.folder") {
+ result = urlValue.match(/folders\/([A-z0-9-_]+)/);
+ data.appData.id = result.length && result[1];
+ }
+
+ if (appAction === "gdrive.file") {
+ result = urlValue.match(/open\?.?id=([A-z0-9-_]+)/);
+ data.appData.id = result.length && result[1];
+ }
+ }
+ }
+
+ if (data.url && !data.url.match(/^[A-z]+:/i)) {
+ data.url = 'http://' + data.url;
+ }
+
+ if (['document', 'video'].indexOf(data.action) !== -1) {
+ if (files.toRemove) {
+ data.files = {};
+ } else {
+ data.files = _.isEmpty(files.selectedFiles) ? files : files.selectedFiles;
+ }
+ }
+
+ // cleanup
+ ['url', 'query', 'page'].forEach(function(key) {
+ if (data[key] === '') {
+ delete data[key];
+ }
+ });
+
+ if (notifyComplete) {
+ // TODO: validate query
+ Fliplet.Widget.save(data).then(function() {
+ Fliplet.Widget.complete();
+ });
+ } else {
+ Fliplet.Widget.save(data).then(function() {
+ Fliplet.Studio.emit('reload-widget-instance', widgetInstanceId);
+ });
+ }
+}
+
+function initializeData() {
+ if (widgetInstanceData.action) {
+ fields.forEach(function(fieldId) {
+ $('#' + fieldId).val(widgetInstanceData[fieldId]).trigger('change');
+ Fliplet.Widget.autosize();
+ });
+
+ if (widgetInstanceData.action === 'app' && widgetInstanceData.app) {
+ $appAction.val(widgetInstanceData.app);
+ $appAction.trigger('change');
+ var url = widgetInstanceData.appData.fullUrl || widgetInstanceData.appData.url;
+ if (widgetInstanceData.appData && url) {
+ $('#' + externalAppValueMap[widgetInstanceData.app]).val(url);
+ }
+ }
+ $('.spinner-holder').removeClass('animated');
+ return;
+ }
+
+ $('.spinner-holder').removeClass('animated');
+ $('#transition').val(defaultTransitionVal).trigger('change')
+}
+
// Only Fliplet, "Colgate" and "Hills Pet Nutirition" can see the "Open app" feature while it's on beta
Fliplet.Organizations.get().then(function (organizations) {
var valid = organizations.some(function (org) {
@@ -170,14 +282,12 @@ $appAction.on('change', function onAppActionChange() {
});
$('#add-query').on('click', function() {
- $(this).addClass('hidden');
- $(this).parents('#screen-form').addClass('show-query');
- Fliplet.Widget.autosize();
+ showPageQuery();
});
$('#query').on('change', function() {
- if ($(this).val() !== '') {
- $('#add-query').trigger('click');
+ if ($(this).val() === '') {
+ showPageQuery();
}
});
@@ -270,125 +380,21 @@ Fliplet.Widget.onCancelRequest(function() {
}
});
-// Save data when submitting the form
-function save(notifyComplete) {
- // Clean data to store the new saved values
- var data = {};
-
- // Attach options from widgetInstanceData
- data.options = widgetInstanceData.options;
-
- // Get and save values to data
- fields.forEach(function(fieldId) {
- data[fieldId] = $('#' + fieldId).val();
- });
-
- var appAction = $appAction.val();
- if (data.action === 'app' && appAction) {
- data.app = appAction;
- data.appData = {};
-
- if (data.app === "gmail.compose") {
- data.appData.untouchedData = emailProviderData
- data.appData.body = emailProviderData.html
- data.appData.subject = emailProviderData.subject
-
- // All recipients are found in the "emailProviderData.to" array, but with "type"
- // defining whether they are "to" or "cc" or "bcc" recipients.
- data.appData.to = _.find(emailProviderData.to, function(o) { return o.type === 'to'; }) || '';
- data.appData.cc = _.find(emailProviderData.to, function(o) { return o.type === 'cc'; }) || '';
- data.appData.bcc = _.find(emailProviderData.to, function(o) { return o.type === 'bcc'; }) || '';
- } else if (data.app === 'googlechrome.website') {
- data.appData.url = $('#' + externalAppValueMap[appAction]).val();
- } else {
- var urlValue = $('#' + externalAppValueMap[appAction]).val();
- var result;
-
- data.appData.fullUrl = urlValue;
- if (appAction === "gdocs.document" || appAction === "gdocs.spreadsheet" || appAction === "gdocs.presentation") {
- result = urlValue.match(/\/d\/([A-z0-9-_]+)/);
- data.appData.id = result.length && result[1];
- }
-
- if (appAction === "gdrive.folder") {
- result = urlValue.match(/folders\/([A-z0-9-_]+)/);
- data.appData.id = result.length && result[1];
- }
-
- if (appAction === "gdrive.file") {
- result = urlValue.match(/open\?.?id=([A-z0-9-_]+)/);
- data.appData.id = result.length && result[1];
- }
- }
- }
-
- if (data.url && !data.url.match(/^[A-z]+:/i)) {
- data.url = 'http://' + data.url;
- }
-
- if (['document', 'video'].indexOf(data.action) !== -1) {
- if (files.toRemove) {
- data.files = {};
- } else {
- data.files = _.isEmpty(files.selectedFiles) ? files : files.selectedFiles;
- }
- }
-
- // cleanup
- ['url', 'query', 'page'].forEach(function(key) {
- if (data[key] === '') {
- delete data[key];
- }
+Fliplet.Pages.get().then(function(pages) {
+ pages = pages || [];
+ var options = [];
+ pages.forEach(function(page) {
+ options.push([
+ '<option value="' + page.id + '"',
+ (widgetInstanceData.page === page.id.toString() ? ' selected' : ''),
+ '>' + page.title + '</option>'
+ ].join(''));
});
+ $('#page').append(options.join(''));
- if (notifyComplete) {
- // TODO: validate query
- Fliplet.Widget.save(data).then(function() {
- Fliplet.Widget.complete();
- });
- } else {
- Fliplet.Widget.save(data).then(function() {
- Fliplet.Studio.emit('reload-widget-instance', widgetInstanceId);
- });
- }
-}
-
-function initialiseData() {
- if (widgetInstanceData.action) {
- fields.forEach(function(fieldId) {
- $('#' + fieldId).val(widgetInstanceData[fieldId]).trigger('change');
- Fliplet.Widget.autosize();
- });
-
- if (widgetInstanceData.action === 'app' && widgetInstanceData.app) {
- $appAction.val(widgetInstanceData.app);
- $appAction.trigger('change');
- var url = widgetInstanceData.appData.fullUrl || widgetInstanceData.appData.url;
- if (widgetInstanceData.appData && url) {
- $('#' + externalAppValueMap[widgetInstanceData.app]).val(url);
- }
- }
- $('.spinner-holder').removeClass('animated');
- return;
- }
+ initializeData();
- $('.spinner-holder').removeClass('animated');
- $('#transition').val(defaultTransitionVal).trigger('change')
-}
-
-Fliplet.Pages.get()
- .then(function(pages) {
- var $select = $('#page');
- (pages || []).forEach(function(page) {
- $select.append(
- '<option value="' + page.id + '"' +
- (widgetInstanceData.page === page.id.toString() ? ' selected' : '') +
- '>' + page.title + '</option>'
- );
- });
-
- return Promise.resolve();
- })
- .then(initialiseData);
+ return Promise.resolve();
+});
-Fliplet.Widget.autosize();
+Fliplet.Widget.autosize();
\ No newline at end of file
From afda41a3489a22e22528eec8a58723853641f0c2 Mon Sep 17 00:00:00 2001
From: Tony Wu <twu@fliplet.com>
Date: Tue, 22 Jan 2019 15:47:42 +0000
Subject: [PATCH 2/3] Adds UI flow for adding screen actions
---
css/interface.css | 8 +++--
interface.html | 29 ++++++++++++----
js/interface.js | 84 ++++++++++++++++++++++++++++++++++++++++++-----
3 files changed, 102 insertions(+), 19 deletions(-)
diff --git a/css/interface.css b/css/interface.css
index 4a45996..0766b99 100644
--- a/css/interface.css
+++ b/css/interface.css
@@ -36,7 +36,8 @@ body {
pointer-events: none;
}
-#query-form {
+#screen-action-form,
+#custom-screen-query {
height: 0;
opacity: 0;
overflow: hidden;
@@ -51,10 +52,11 @@ body {
transform: translate(0, -10px);
}
-#screen-form.show-query #query-form {
+#screen-form.show-screen-action #screen-action-form,
+#screen-form.show-custom-query #custom-screen-query {
display: block;
opacity: 1;
- overflow: auto;
+ overflow: visible;
height: auto;
margin-bottom: 15px;
-webkit-transform: translate(0, 0);
diff --git a/interface.html b/interface.html
index de09e05..f8be5da 100644
--- a/interface.html
+++ b/interface.html
@@ -53,16 +53,31 @@
</select>
<span class="icon fa fa-chevron-down"></span>
</label>
- <a id="add-query" href="#">Add query parameters</a>
+ <a id="add-action" href="#">Add screen action</a>
</div>
</div>
- <div class="form-group" id="query-form">
- <div class="col-sm-4 control-label">
- <label for="query">Add query parameters</label>
+ <div id="screen-action-form">
+ <div class="form-group">
+ <div class="col-sm-4 control-label">
+ <label for="query-action">Screen action</label>
+ </div>
+ <div class="col-sm-8">
+ <label for="query-action" class="select-proxy-display">
+ <select name="query_action" id="query-action" data-label="select" class="hidden-select form-control">
+ <option selected value="">Select a screen action</option>
+ </select>
+ <span class="icon fa fa-chevron-down"></span>
+ </label>
+ </div>
</div>
- <div class="col-sm-8">
- <input type="text" class="form-control" name="query" id="query" placeholder="Enter query (e.g. ?variable1=value1&variable2=value2)" />
- <p class="help-block">This needs to be URL encoded - <a target="_blank" href="http://meyerweb.com/eric/tools/dencoder/">URL encoding tool</a></p>
+ <div class="form-group" id="custom-screen-query">
+ <div class="col-sm-4 control-label">
+ <label for="query">Custom query parameters</label>
+ </div>
+ <div class="col-sm-8">
+ <input type="text" class="form-control" name="query" id="query" placeholder="Enter query (e.g. ?variable1=value1&variable2=value2)" />
+ <p class="help-block">This needs to be URL encoded - <a target="_blank" href="http://meyerweb.com/eric/tools/dencoder/">URL encoding tool</a></p>
+ </div>
</div>
</div>
<div class="form-group">
diff --git a/js/interface.js b/js/interface.js
index 328fcfe..f6e0853 100644
--- a/js/interface.js
+++ b/js/interface.js
@@ -56,9 +56,56 @@ var emailProviderData = $.extend(true, {
to: []
}, widgetInstanceData.appData ? widgetInstanceData.appData.untouchedData : {});
-function showPageQuery() {
- $('#add-query').addClass('hidden');
- $('#screen-form').addClass('show-query');
+var screenActions = [
+ {
+ group: 'Accordion',
+ actions: [
+ {
+ value: 'accordionOpenTitle',
+ label: 'Open accordion (by title)'
+ },
+ {
+ value: 'accordionOpenIndex',
+ label: 'Open accordion (by index)'
+ }
+ ]
+ },
+ {
+ group: 'Directory',
+ actions: [
+ {
+ value: 'directoryLoadFilter',
+ label: 'Load directory with a filter'
+ },
+ {
+ value: 'directoryLoadSearch',
+ label: 'Load directory with a search'
+ },
+ {
+ value: 'directoryLoadFilterMode',
+ label: 'Load directory in filter mode'
+ }
+ ]
+ },
+ {
+ group: 'Custom',
+ actions: [
+ {
+ value: 'customQuery',
+ label: 'Custom query parameters'
+ }
+ ]
+ }
+];
+
+function showScreenActions() {
+ $('#add-action').addClass('hidden');
+ $('#screen-form').addClass('show-screen-action');
+ Fliplet.Widget.autosize();
+}
+
+function toggleCustomQuery(show) {
+ $('#screen-form')[show ? 'addClass' : 'removeClass']('show-custom-query');
Fliplet.Widget.autosize();
}
@@ -281,13 +328,17 @@ $appAction.on('change', function onAppActionChange() {
Fliplet.Widget.autosize();
});
-$('#add-query').on('click', function() {
- showPageQuery();
+$('#add-action').on('click', function() {
+ showScreenActions();
+});
+
+$('#query-action').on('change', function () {
+ toggleCustomQuery($(this).val() === 'customQuery');
});
$('#query').on('change', function() {
if ($(this).val() === '') {
- showPageQuery();
+ showScreenActions();
}
});
@@ -382,15 +433,30 @@ Fliplet.Widget.onCancelRequest(function() {
Fliplet.Pages.get().then(function(pages) {
pages = pages || [];
- var options = [];
+ var pageOptions = [];
+ var screenActionOptions = [];
pages.forEach(function(page) {
- options.push([
+ pageOptions.push([
'<option value="' + page.id + '"',
(widgetInstanceData.page === page.id.toString() ? ' selected' : ''),
'>' + page.title + '</option>'
].join(''));
});
- $('#page').append(options.join(''));
+ $('#page').append(pageOptions.join(''));
+
+ screenActions.forEach(function (screenActionGroup) {
+ var actions = screenActionGroup.actions || [];
+ screenActionOptions.push('<optgroup label="' + screenActionGroup.group + '">');
+ actions.forEach(function (action) {
+ screenActionOptions.push([
+ '<option value="' + action.value + '">',
+ action.label,
+ '</option>'
+ ].join(''));
+ });
+ screenActionOptions.push('</optgroup>');
+ });
+ $('#query-action').append(screenActionOptions.join(''));
initializeData();
From 67c6b4238899de1405e4d4f73dfe9971b623dc97 Mon Sep 17 00:00:00 2001
From: Tony Wu <twu@fliplet.com>
Date: Tue, 22 Jan 2019 16:34:33 +0000
Subject: [PATCH 3/3] Adds an additional field to demonstrate flow
---
css/interface.css | 6 ++++--
interface.html | 8 ++++++++
js/interface.js | 7 +++++--
3 files changed, 17 insertions(+), 4 deletions(-)
diff --git a/css/interface.css b/css/interface.css
index 0766b99..382e179 100644
--- a/css/interface.css
+++ b/css/interface.css
@@ -37,7 +37,8 @@ body {
}
#screen-action-form,
-#custom-screen-query {
+#custom-screen-query,
+#screen-form.show-custom-query #another-field {
height: 0;
opacity: 0;
overflow: hidden;
@@ -53,7 +54,8 @@ body {
}
#screen-form.show-screen-action #screen-action-form,
-#screen-form.show-custom-query #custom-screen-query {
+#screen-form.show-custom-query #custom-screen-query,
+#another-field {
display: block;
opacity: 1;
overflow: visible;
diff --git a/interface.html b/interface.html
index f8be5da..822247e 100644
--- a/interface.html
+++ b/interface.html
@@ -70,6 +70,14 @@
</label>
</div>
</div>
+ <div class="form-group" id="another-field">
+ <div class="col-sm-4 control-label">
+ <label for="another">Accordion title</label>
+ </div>
+ <div class="col-sm-8">
+ <input type="text" class="form-control" name="another" id="another" />
+ </div>
+ </div>
<div class="form-group" id="custom-screen-query">
<div class="col-sm-4 control-label">
<label for="query">Custom query parameters</label>
diff --git a/js/interface.js b/js/interface.js
index f6e0853..d696bbf 100644
--- a/js/interface.js
+++ b/js/interface.js
@@ -62,7 +62,8 @@ var screenActions = [
actions: [
{
value: 'accordionOpenTitle',
- label: 'Open accordion (by title)'
+ label: 'Open accordion (by title)',
+ selected: true
},
{
value: 'accordionOpenIndex',
@@ -449,7 +450,9 @@ Fliplet.Pages.get().then(function(pages) {
screenActionOptions.push('<optgroup label="' + screenActionGroup.group + '">');
actions.forEach(function (action) {
screenActionOptions.push([
- '<option value="' + action.value + '">',
+ '<option value="' + action.value + '"',
+ (action.selected ? ' selected' : ''),
+ '>',
action.label,
'</option>'
].join(''));