diff --git a/css/interface.css b/css/interface.css index 4a45996..382e179 100644 --- a/css/interface.css +++ b/css/interface.css @@ -36,7 +36,9 @@ body { pointer-events: none; } -#query-form { +#screen-action-form, +#custom-screen-query, +#screen-form.show-custom-query #another-field { height: 0; opacity: 0; overflow: hidden; @@ -51,10 +53,12 @@ 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, +#another-field { 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..822247e 100644 --- a/interface.html +++ b/interface.html @@ -53,16 +53,39 @@ - Add query parameters + Add screen action -
-
- +
+
+
+ +
+
+ +
-
- -

This needs to be URL encoded - URL encoding tool

+
+
+ +
+
+ +
+
+
+
+ +
+
+ +

This needs to be URL encoded - URL encoding tool

+
diff --git a/js/interface.js b/js/interface.js index 5455343..d696bbf 100644 --- a/js/interface.js +++ b/js/interface.js @@ -56,6 +56,166 @@ var emailProviderData = $.extend(true, { to: [] }, widgetInstanceData.appData ? widgetInstanceData.appData.untouchedData : {}); +var screenActions = [ + { + group: 'Accordion', + actions: [ + { + value: 'accordionOpenTitle', + label: 'Open accordion (by title)', + selected: true + }, + { + 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(); +} + +// 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) { @@ -169,15 +329,17 @@ $appAction.on('change', function onAppActionChange() { Fliplet.Widget.autosize(); }); -$('#add-query').on('click', function() { - $(this).addClass('hidden'); - $(this).parents('#screen-form').addClass('show-query'); - Fliplet.Widget.autosize(); +$('#add-action').on('click', function() { + showScreenActions(); +}); + +$('#query-action').on('change', function () { + toggleCustomQuery($(this).val() === 'customQuery'); }); $('#query').on('change', function() { - if ($(this).val() !== '') { - $('#add-query').trigger('click'); + if ($(this).val() === '') { + showScreenActions(); } }); @@ -270,125 +432,38 @@ 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 pageOptions = []; + var screenActionOptions = []; + pages.forEach(function(page) { + pageOptions.push([ + '' + ].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(); + $('#page').append(pageOptions.join('')); + + screenActions.forEach(function (screenActionGroup) { + var actions = screenActionGroup.actions || []; + screenActionOptions.push(''); + actions.forEach(function (action) { + screenActionOptions.push([ + '' + ].join('')); }); + screenActionOptions.push(''); + }); + $('#query-action').append(screenActionOptions.join('')); - 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') -} - -Fliplet.Pages.get() - .then(function(pages) { - var $select = $('#page'); - (pages || []).forEach(function(page) { - $select.append( - '' - ); - }); + initializeData(); - return Promise.resolve(); - }) - .then(initialiseData); + return Promise.resolve(); +}); -Fliplet.Widget.autosize(); +Fliplet.Widget.autosize(); \ No newline at end of file