Setting for app preview

bower.json

@@ -58,7 +58,8 @@
     "datetimepicker": "2.5.4",
     "DOMPurify": "0.8.3",
     "jquery-tiny-pubsub": "https://github.com/cowboy/jquery-tiny-pubsub.git#~0.7.0",
-    "markdown-it": "7.0.1"
+    "markdown-it": "7.0.1",
+    "bootstrap-switch": "3.3.2"
   },
   "devDependencies": {
     "chai": "3.3.0",

corehq/apps/app_manager/static/app_manager/js/preview_app.js

@@ -9,6 +9,7 @@ hqDefine('app_manager/js/preview_app.js', function() {
     module.SELECTORS = {
         BTN_TOGGLE_PREVIEW: '.js-preview-toggle',
         PREVIEW_WINDOW: '#js-appmanager-preview',
+        PREVIEW_WINDOW_IFRAME: '#js-appmanager-preview iframe',
         APP_MANAGER_BODY: '#js-appmanager-body',
         PREVIEW_ACTION_TEXT_SHOW: '.js-preview-action-show',
         PREVIEW_ACTION_TEXT_HIDE: '.js-preview-action-hide',
@@ -38,7 +39,8 @@ hqDefine('app_manager/js/preview_app.js', function() {
     };
 
     _private.navigateBack = function() {
-        var previewWindow = $appPreviewIframe[0].contentWindow;
+        var $appPreviewIframe = $(module.SELECTORS.PREVIEW_WINDOW_IFRAME),
+            previewWindow = $appPreviewIframe[0].contentWindow;
         previewWindow.postMessage({
             action: 'back',
         }, window.location.origin);

corehq/apps/app_manager/templates/app_manager/v1/partials/preview_app.html

@@ -1,18 +1,15 @@
 {% load hq_shared_tags %}
-
 <div id="js-appmanager-preview" class="preview-phone-wrapper">
-  <div class="preview-phone-container">
-    <button type="button" class="btn btn-default js-preview-toggle btn-preview-toggle">
-      <i class="fa fa-close"></i>
-    </button>
-    <iframe
-        class="preview-phone-window"
-        frameBorder="0"
-        scrolling="no"
-        src="{% url 'preview_app' request.domain app.get_id %}">
-    </iframe>
-    <button type="button" class="btn btn-default btn-preview-back js-preview-back">
-      <i class="fa fa-arrow-left"></i>
-    </button>
-  </div>
+    <div class="preview-phone-container">
+        <button type="button" class="btn btn-default js-preview-toggle btn-preview-toggle">
+            <i class="fa fa-close"></i>
+        </button>
+        <iframe class="preview-phone-window" frameBorder="0" scrolling="no" src="{% url 'preview_app' request.domain app.get_id %}">
+        </iframe>
+        <div class="hardware-buttons">
+            <button type="button" class="btn btn-default btn-preview-back js-preview-back">
+                <i class="fa fa-arrow-left"></i>
+            </button>
+        </div>
+    </div>
 </div>

corehq/apps/app_manager/templates/app_manager/v2/partials/preview_app.html

@@ -1,19 +1,16 @@
 {% load hq_shared_tags %}
 
 <div id="js-appmanager-preview" class="preview-phone-wrapper">
-  <div class="preview-phone-container">
-    <button type="button" class="btn btn-default js-preview-toggle btn-preview-toggle">
-      <i class="fa fa-close"></i>
-    </button>
-    <iframe
-        class="preview-phone-window"
-        frameBorder="0"
-        scrolling="no"
-        src="{% url 'preview_app' request.domain app.get_id %}">
-    </iframe>
-{#    todo fix #}
-{#  <button type="button" class="btn btn-default btn-preview-back js-preview-back">#}
-{#    <i class="fa fa-arrow-left"></i>#}
-{#  </button>#}
-  </div>
+    <div class="preview-phone-container">
+        <button type="button" class="btn btn-default js-preview-toggle btn-preview-toggle">
+            <i class="fa fa-close"></i>
+        </button>
+        <iframe class="preview-phone-window" frameBorder="0" scrolling="no" src="{% url 'preview_app' request.domain app.get_id %}">
+        </iframe>
+        <div class="hardware-buttons">
+            <button type="button" class="btn btn-default btn-preview-back js-preview-back">
+                <i class="fa fa-arrow-left"></i>
+            </button>
+        </div>
+    </div>
 </div>

corehq/apps/app_manager/tests/data/v2_diffs/partials/preview_app.html.diff.txt

@@ -1,15 +1,8 @@
 --- 
 +++ 
-@@ -11,8 +11,9 @@
-         scrolling="no"
-         src="{% url 'preview_app' request.domain app.get_id %}">
-     </iframe>
--    <button type="button" class="btn btn-default btn-preview-back js-preview-back">
--      <i class="fa fa-arrow-left"></i>
--    </button>
-+{#    todo fix #}
-+{#  <button type="button" class="btn btn-default btn-preview-back js-preview-back">#}
-+{#    <i class="fa fa-arrow-left"></i>#}
-+{#  </button>#}
-   </div>
- </div>
+@@ -1,4 +1,5 @@
+ {% load hq_shared_tags %}
++
+ <div id="js-appmanager-preview" class="preview-phone-wrapper">
+     <div class="preview-phone-container">
+         <button type="button" class="btn btn-default js-preview-toggle btn-preview-toggle">

corehq/apps/cloudcare/static/cloudcare/js/form_entry/fullform-ui.js

@@ -601,7 +601,6 @@ Formplayer.Utils.answersEqual = function(answer1, answer2) {
 Formplayer.Utils.initialRender = function(formJSON, resourceMap, $div) {
     var form = new Form(formJSON),
         $debug = $('#cloudcare-debugger'),
-        $webformsNav = $('#webforms-nav'),
         cloudCareDebugger;
     Formplayer.resourceMap = resourceMap;
     ko.cleanNode($div[0]);
@@ -613,11 +612,6 @@ Formplayer.Utils.initialRender = function(formJSON, resourceMap, $div) {
         $debug.koApplyBindings(cloudCareDebugger);
     }
 
-    if ($webformsNav.length) {
-        ko.cleanNode($webformsNav[0]);
-        $webformsNav.koApplyBindings(form);
-    }
-
     return form;
 };
 

corehq/apps/cloudcare/static/cloudcare/js/formplayer/app.js

@@ -165,19 +165,24 @@ FormplayerFrontend.on('startForm', function (data) {
 
 FormplayerFrontend.on("start", function (options) {
     var user = FormplayerFrontend.request('currentUser'),
+        savedDisplayOptions,
         appId;
     user.username = options.username;
     user.language = options.language;
     user.apps = options.apps;
     user.domain = options.domain;
     user.formplayer_url = options.formplayer_url;
     user.debuggerEnabled = options.debuggerEnabled;
-    user.phoneMode = options.phoneMode;
     user.restoreAs = FormplayerFrontend.request('restoreAsUser', user.domain, user.username);
-    user.displayOptions = {
+
+    savedDisplayOptions = _.pick(
+        Util.getSavedDisplayOptions(),
+        FormplayerFrontend.Constants.ALLOWED_SAVED_OPTIONS
+    );
+    user.displayOptions = _.defaults(savedDisplayOptions, {
         phoneMode: options.phoneMode,
         oneQuestionPerScreen: options.oneQuestionPerScreen,
-    };
+    });
 
     FormplayerFrontend.request('gridPolyfillPath', options.gridPolyfillPath);
     if (Backbone.history) {
@@ -275,9 +280,7 @@ FormplayerFrontend.on('clearRestoreAsUser', function() {
         })
     );
 
-    appId = FormplayerFrontend.request('getCurrentAppId');
-
-    FormplayerFrontend.trigger('navigateHome', appId);
+    FormplayerFrontend.trigger('navigateHome');
 });
 
 FormplayerFrontend.on("sync", function () {
@@ -399,16 +402,18 @@ FormplayerFrontend.on('refreshApplication', function(appId) {
         tfLoadingComplete(true);
     }).done(function() {
         tfLoadingComplete();
-        FormplayerFrontend.trigger('navigateHome', appId);
+        FormplayerFrontend.trigger('navigateHome');
     });
 });
 
-FormplayerFrontend.on('navigateHome', function(appId) {
+FormplayerFrontend.on('navigateHome', function() {
     var urlObject = Util.currentUrlToObject(),
+        appId,
         currentUser = FormplayerFrontend.request('currentUser');
     urlObject.clearExceptApp();
     FormplayerFrontend.regions.breadcrumb.empty();
-    if (currentUser.phoneMode) {
+    if (currentUser.displayOptions.phoneMode) {
+        appId = FormplayerFrontend.request('getCurrentAppId');
         FormplayerFrontend.navigate("/single_app/" + appId, { trigger: true });
     } else {
         FormplayerFrontend.navigate("/apps", { trigger: true });

corehq/apps/cloudcare/static/cloudcare/js/formplayer/apps/list/list_controller.js

@@ -29,5 +29,9 @@ FormplayerFrontend.module("SessionNavigate.AppList", function(AppList, Formplaye
             FormplayerFrontend.regions.main.show(singleAppView);
             FormplayerFrontend.trigger('phone:back:hide');
         },
+        listSettings: function() {
+            var settingsView = new AppList.SettingsView();
+            FormplayerFrontend.regions.main.show(settingsView);
+        },
     };
 });

corehq/apps/cloudcare/static/cloudcare/js/formplayer/apps/list/list_view.js

@@ -20,6 +20,7 @@ FormplayerFrontend.module("SessionNavigate.AppList", function (AppList, Formplay
             'click .js-incomplete-sessions-item': 'incompleteSessionsClick',
             'click .js-sync-item': 'syncClick',
             'click .js-restore-as-item': 'onClickRestoreAs',
+            'click .js-settings': 'onClickSettings',
         },
         incompleteSessionsClick: function (e) {
             e.preventDefault();
@@ -33,6 +34,10 @@ FormplayerFrontend.module("SessionNavigate.AppList", function (AppList, Formplay
             e.preventDefault();
             FormplayerFrontend.trigger("restore_as:list", this.appId);
         },
+        onClickSettings: function(e) {
+            e.preventDefault();
+            FormplayerFrontend.trigger("settings:list");
+        },
     };
 
     AppList.GridView = Marionette.CompositeView.extend({
@@ -44,6 +49,7 @@ FormplayerFrontend.module("SessionNavigate.AppList", function (AppList, Formplay
         incompleteSessionsClick: _.extend(AppList.BaseAppView.incompleteSessionsClick),
         syncClick: _.extend(AppList.BaseAppView.syncClick),
         onClickRestoreAs: _.extend(AppList.BaseAppView.onClickRestoreAs),
+        onClickSettings: _.extend(AppList.BaseAppView.onClickSettings),
     });
 
     /**
@@ -63,6 +69,7 @@ FormplayerFrontend.module("SessionNavigate.AppList", function (AppList, Formplay
         incompleteSessionsClick: _.extend(AppList.BaseAppView.incompleteSessionsClick),
         syncClick: _.extend(AppList.BaseAppView.syncClick),
         onClickRestoreAs: _.extend(AppList.BaseAppView.onClickRestoreAs),
+        onClickSettings: _.extend(AppList.BaseAppView.onClickSettings),
 
         initialize: function(options) {
             this.appId = options.appId;

corehq/apps/cloudcare/static/cloudcare/js/formplayer/apps/list/settings_view.js

@@ -0,0 +1,31 @@
+/*global FormplayerFrontend, Util */
+
+FormplayerFrontend.module("SessionNavigate.AppList", function (AppList, FormplayerFrontend, Backbone, Marionette) {
+    AppList.SettingsView = Marionette.ItemView.extend({
+        ui: {
+            oneQuestionPerScreen: '.js-one-question-per-screen',
+            done: '.js-done',
+        },
+        events: {
+            'switchChange.bootstrapSwitch @ui.oneQuestionPerScreen': 'onChangeOneQuestionPerScreen',
+            'click @ui.done': 'onClickDone',
+        },
+        template: '#settings-template',
+        initialize: function() {
+            this.currentUser = FormplayerFrontend.request('currentUser');
+        },
+        onRender: function() {
+            this.ui.oneQuestionPerScreen.bootstrapSwitch(
+                'state',
+                this.currentUser.displayOptions.oneQuestionPerScreen
+            );
+        },
+        onChangeOneQuestionPerScreen: function(e, switchValue) {
+            this.currentUser.displayOptions.oneQuestionPerScreen = switchValue;
+            Util.saveDisplayOptions(this.currentUser.displayOptions);
+        },
+        onClickDone: function() {
+            FormplayerFrontend.trigger('navigateHome');
+        },
+    });
+});

corehq/apps/cloudcare/static/cloudcare/js/formplayer/apps/session_nav.js

@@ -11,6 +11,7 @@ FormplayerFrontend.module("SessionNavigate", function (SessionNavigate, Formplay
             "restore_as/:page/:query": "listUsers",
             "restore_as/:page/": "listUsers",
             "restore_as": "listUsers",
+            "settings": "listSettings",
             ":session": "listMenus",  // Default route
         },
     });
@@ -44,6 +45,9 @@ FormplayerFrontend.module("SessionNavigate", function (SessionNavigate, Formplay
             }
             SessionNavigate.Users.Controller.listUsers(page, query);
         },
+        listSettings: function() {
+            SessionNavigate.AppList.Controller.listSettings();
+        },
         showDetail: function (model, detailTabIndex) {
             SessionNavigate.MenuList.Controller.showDetail(model, detailTabIndex);
         },
@@ -153,6 +157,11 @@ FormplayerFrontend.module("SessionNavigate", function (SessionNavigate, Formplay
         API.listUsers();
     });
 
+    FormplayerFrontend.on('settings:list', function() {
+        FormplayerFrontend.navigate("/settings");
+        API.listSettings();
+    });
+
     FormplayerFrontend.on("menu:show:detail", function (model, detailTabIndex) {
         API.showDetail(model, detailTabIndex);
     });

corehq/apps/cloudcare/static/cloudcare/js/formplayer/apps/util/util.js

@@ -74,6 +74,26 @@ Util.setCrossDomainAjaxOptions = function (options) {
     options.contentType = "application/json;charset=UTF-8";
 };
 
+Util.saveDisplayOptions = function(displayOptions) {
+    var displayOptionsKey = Util.getDisplayOptionsKey();
+    localStorage.setItem(displayOptionsKey, JSON.stringify(displayOptions));
+};
+
+Util.getSavedDisplayOptions = function() {
+    var displayOptionsKey = Util.getDisplayOptionsKey();
+    try {
+        return JSON.parse(localStorage.getItem(displayOptionsKey));
+    } catch (e) {
+        window.console.warn('Unabled to parse saved display options');
+        return {};
+    }
+};
+
+Util.getDisplayOptionsKey = function() {
+    var user = FormplayerFrontend.request('currentUser');
+    return user.domain + ':' + user.username + ':' + 'displayOptions';
+};
+
 Util.CloudcareUrl = function (options) {
     this.appId = options.appId;
     this.sessionId = options.sessionId;

corehq/apps/cloudcare/static/cloudcare/js/formplayer/constants.js

@@ -0,0 +1,5 @@
+/*global FormplayerFrontend */
+
+FormplayerFrontend.Constants = {
+    ALLOWED_SAVED_OPTIONS: ['oneQuestionPerScreen'],
+};

corehq/apps/cloudcare/static/cloudcare/js/formplayer/hq.events.js

@@ -16,14 +16,8 @@ FormplayerFrontend.module("HQ.Events", function(Events, FormplayerFrontend) {
         // For Chrome, the origin property is in the event.originalEvent object
         var origin = event.origin || event.originalEvent.origin,
             data = event.data,
-            returnValue = null,
             success = true;
 
-        _.defaults(data, {
-            success: function() {},
-            error: function() {},
-            complete: function() {},
-        });
         if (!origin.endsWith(this.allowedHost)) {
             throw new Error('Disallowed origin ' + origin);
         }
@@ -35,20 +29,10 @@ FormplayerFrontend.module("HQ.Events", function(Events, FormplayerFrontend) {
             throw new Error('Invalid action ' + data.action);
         }
 
-        try {
-            switch (data.action) {
-            case Events.Actions.BACK:
-                FormplayerFrontend.trigger('navigation:back');
-                break;
-            }
-        } catch (e) {
-            success = false;
-            data.error(event, data, returnValue);
-        } finally {
-            data.complete(event, data, returnValue);
-        }
-        if (success) {
-            data.success(event, data, returnValue);
+        switch (data.action) {
+        case Events.Actions.BACK:
+            FormplayerFrontend.trigger('navigation:back');
+            break;
         }
     };