Refactor fullscreen-only to be open-in-fullscreen

Tangerine-Community · Mar 10, 2022 · 81ae52e · 81ae52e
1 parent cb88eab
commit 81ae52e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 18 deletions.
diff --git a/tangy-form-reducer.js b/tangy-form-reducer.js
@@ -72,9 +72,8 @@ 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.fullscreenOnly === true) {
-        newState.form.fullscreen = true
-        newState.items.forEach(item => item.fullscreenOnly = true)
+      if (newState.form.openInFullscreen === true) {
+        newState.form.fullscreenEnabled = true
         newState.items.forEach(item => item.fullscreenEnabled = true)
       }
       return newState

diff --git a/tangy-form.js b/tangy-form.js
@@ -339,7 +339,7 @@ export class TangyForm extends PolymerElement {
 
   static get properties() {
     return {
-      fullscreenOnly: {
+      openInFullscreen: {
         type: Boolean,
         value: false,
         reflectToAttribute: true
@@ -647,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)
 
@@ -674,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,11 +329,11 @@
       </template>
     </test-fixture>
 
-    <test-fixture id="FullscreenOnly">
+    <test-fixture id="OpenInFullscreen">
       <template>
         <tangy-form
-          id="FullscreenOnlyForm"
-          fullscreen-only
+          id="OpenInFullscreenForm"
+          open-in-fullscreen
         >
           <tangy-form-item id="item1" title="1">
             <tangy-input name="input1" label="What is your last name?"></tangy-input>
@@ -364,8 +364,8 @@
 
       suite('tangy-form', () => {
 
-        test('should launch in fullscreen mode', () => {
-          const element = fixture('FullscreenOnly')
+        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'), '')