From cb88eabb86d0cc51c1eb6ffa7b201a38675aeb9d Mon Sep 17 00:00:00 2001
From: "R.J. (Steinert) Corwin" <rj@rjsteinert.com>
Date: Wed, 9 Mar 2022 16:07:29 -0500
Subject: [PATCH 1/2] Should launch in fullscreen mode

---
 tangy-form-reducer.js     |  5 +++++
 tangy-form.js             |  5 +++++
 test/tangy-form_test.html | 22 ++++++++++++++++++++++
 3 files changed, 32 insertions(+)

diff --git a/tangy-form-reducer.js b/tangy-form-reducer.js
index 7ee82bfe..b6cdb32d 100644
--- a/tangy-form-reducer.js
+++ b/tangy-form-reducer.js
@@ -72,6 +72,11 @@ 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)
+        newState.items.forEach(item => item.fullscreenEnabled = true)
+      }
       return newState
 
     case 'OPEN_ALL_ITEMS':
diff --git a/tangy-form.js b/tangy-form.js
index 83e2a9fb..e0975841 100644
--- a/tangy-form.js
+++ b/tangy-form.js
@@ -339,6 +339,11 @@ export class TangyForm extends PolymerElement {
 
   static get properties() {
     return {
+      fullscreenOnly: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true
+      },
       fullscreen: {
         type: Boolean,
         value: false,
diff --git a/test/tangy-form_test.html b/test/tangy-form_test.html
index efdec057..f193f2e0 100644
--- a/test/tangy-form_test.html
+++ b/test/tangy-form_test.html
@@ -329,6 +329,21 @@
       </template>
     </test-fixture>
 
+    <test-fixture id="FullscreenOnly">
+      <template>
+        <tangy-form
+          id="FullscreenOnlyForm"
+          fullscreen-only
+        >
+          <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 launch in fullscreen mode', () => {
+          const element = fixture('FullscreenOnly')
+          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() {

From 81ae52ef3534b75896282b23c92dcd3408e1d081 Mon Sep 17 00:00:00 2001
From: "R.J. (Steinert) Corwin" <rj@rjsteinert.com>
Date: Thu, 10 Mar 2022 15:23:03 -0500
Subject: [PATCH 2/2] Refactor fullscreen-only to be open-in-fullscreen

---
 tangy-form-reducer.js     |  5 ++---
 tangy-form.js             | 20 ++++++++++----------
 test/tangy-form_test.html | 10 +++++-----
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/tangy-form-reducer.js b/tangy-form-reducer.js
index b6cdb32d..a4194c14 100644
--- 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
index e0975841..ee493c49 100644
--- 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
index f193f2e0..6827d7ca 100644
--- 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'), '')