Merge pull request #321 from Tangerine-Community/feature/fullscreen-o…

…nly-mode Add an open-in-fullscreen mode for Tangy Form
Tangerine-Community · Mar 10, 2022 · 8dda778 · 8dda778
2 parents 119a080 + 81ae52e
commit 8dda778
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 9 deletions.
diff --git a/tangy-form-reducer.js b/tangy-form-reducer.js
@@ -72,6 +72,10 @@ const tangyFormReducer = function (state = initialState, action) {
       if (newState.form.hideClosedItems === true) newState.items.forEach(item => item.hidden = !item.open)
       if (newState.form.linearMode === true) newState.items.forEach(item => item.hideButtons = true)
       if (newState.form.fullscreen === true) newState.items.forEach(item => item.fullscreen = true)
+      if (newState.form.openInFullscreen === true) {
+        newState.form.fullscreenEnabled = true
+        newState.items.forEach(item => item.fullscreenEnabled = true)
+      }
       return newState
 
     case 'OPEN_ALL_ITEMS':

diff --git a/tangy-form.js b/tangy-form.js
@@ -339,6 +339,11 @@ export class TangyForm extends PolymerElement {
 
   static get properties() {
     return {
+      openInFullscreen: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true
+      },
       fullscreen: {
         type: Boolean,
         value: false,
@@ -642,7 +647,11 @@ export class TangyForm extends PolymerElement {
 
     let state = this.store.getState()
     // Set initial this.previousState
-    if (!this.previousState) this.previousState = state
+    let firstState = false
+    if (!this.previousState) { 
+      this.previousState = state
+      firstState = true
+    }
 
     this.setProps(state.form)
 
@@ -669,14 +678,10 @@ export class TangyForm extends PolymerElement {
       this.dispatchEvent(new CustomEvent('ALL_ITEMS_CLOSED'))
     }
 
-    if (state.form && state.form.fullscreen) {
-      if (!this.previousState.form.fullscreenEnabled && state.form.fullscreenEnabled) {
-        this.enableFullscreen()
-      }
-      else if (this.previousState.form.fullscreenEnabled && !state.form.fullscreenEnabled) {
-        this.disableFullscreen()
-      }
-    } else if (this.previousState.form.fullscreen && !state.form.fullscreen) {
+    if ((!this.previousState.form.fullscreenEnabled && state.form.fullscreenEnabled) || (firstState && state.form.fullscreenEnabled)) {
+      this.enableFullscreen()
+    }
+    else if (this.previousState.form.fullscreenEnabled && !state.form.fullscreenEnabled) {
       this.disableFullscreen()
     }
 

diff --git a/test/tangy-form_test.html b/test/tangy-form_test.html
@@ -329,6 +329,21 @@
       </template>
     </test-fixture>
 
+    <test-fixture id="OpenInFullscreen">
+      <template>
+        <tangy-form
+          id="OpenInFullscreenForm"
+          open-in-fullscreen
+        >
+          <tangy-form-item id="item1" title="1">
+            <tangy-input name="input1" label="What is your last name?"></tangy-input>
+          </tangy-form-item>
+          <tangy-form-item id="item2" title="2">
+            <tangy-input name="input2" label="What is your last name?"></tangy-input>
+          </tangy-form-item>
+        </tangy-form>
+      </template>
+    </test-fixture>
 
     <script type="module">
       import * as Polymer from '../node_modules/@polymer/polymer/polymer-legacy.js'
@@ -349,6 +364,13 @@
 
       suite('tangy-form', () => {
 
+        test('should open in fullscreen mode', () => {
+          const element = fixture('OpenInFullscreen')
+          element.newResponse()
+          element.querySelector('#item1').shadowRoot.querySelector('dom-if').render()
+          assert.equal(element.querySelector('#item1').getAttribute('fullscreen-enabled'), '')
+        })
+
         test('should inject variable', () => {
           var someInjectedVariable = {
             itWorked: function() {