Merge pull request #656 from alpheios-project/i655-not-close-popup

Add a setting to hide/show popup on click away
alpheios-project · Aug 6, 2021 · ccc3ef7 · ccc3ef7
2 parents a5125f3 + f6800c5
commit ccc3ef7
Show file tree

Hide file tree

Showing 10 changed files with 26,202 additions and 26,174 deletions.
diff --git a/packages/components/dist/alpheios-components.js b/packages/components/dist/alpheios-components.js
diff --git a/packages/components/dist/alpheios-components.js.map b/packages/components/dist/alpheios-components.js.map
diff --git a/packages/components/dist/alpheios-components.min.js b/packages/components/dist/alpheios-components.min.js
diff --git a/packages/components/dist/style/style-components-safari.css.map b/packages/components/dist/style/style-components-safari.css.map
diff --git a/packages/components/dist/style/style-components.css.map b/packages/components/dist/style/style-components.css.map
diff --git a/packages/components/src/lib/controllers/app-controller.js b/packages/components/src/lib/controllers/app-controller.js
@@ -270,7 +270,8 @@ export default class AppController {
       arethusaTbRefreshDelay: 200,
       // A URL of a server that provides an app configuration
       configServiceUrl: 'https://config.alpheios.net/v1/config',
-      languageOptions: null
+      languageOptions: null,
+      uiOptions: null
     }
   }
 
@@ -380,7 +381,8 @@ export default class AppController {
       branch: this._options.app.buildBranch,
       buildNumber: this._options.app.buildNumber,
       storageAdapter: this._options.storageAdapter,
-      languageOptions: this._options.languageOptions
+      languageOptions: this._options.languageOptions,
+      uiOptions: this._options.uiOptions
     })
     // All options has been loaded and initialized after this point
 

diff --git a/packages/components/src/lib/controllers/settings-controller.js b/packages/components/src/lib/controllers/settings-controller.js
@@ -30,7 +30,7 @@ export default class SettingsController {
     }
   }
 
-  async init ({ api, store, configServiceUrl, clientId, appName, appVersion, branch, buildNumber, storageAdapter, languageOptions } = {}) {
+  async init ({ api, store, configServiceUrl, clientId, appName, appVersion, branch, buildNumber, storageAdapter, languageOptions, uiOptions } = {}) {
     if (!api) {
       throw new Error('API object is required for a settings controller initialization')
     }
@@ -42,6 +42,7 @@ export default class SettingsController {
     this._store = store
     this._storageAdapter = storageAdapter
     this._languageOptions = languageOptions
+    this._uiOutOptions = uiOptions
 
     this._configServiceUrl = configServiceUrl
     this._clientId = clientId
@@ -66,6 +67,7 @@ export default class SettingsController {
 
       this._appConfig = await appConfigResponse.json() // Parse an app config's response into JSON
       this.updateLanguageOptDefaults()
+      this.updateUiOptDefaults()
     } catch (err) {
       Logger.getInstance().error(`Unable to retrieve an app configuration from ${this._configServiceUrl}: ${err.message}`)
       this._appConfig = this._appConfig || {}
@@ -146,6 +148,7 @@ export default class SettingsController {
 
     this._resourceOptions = new Options(ResourcesOptionsDefaults, new StorageAdapter(ResourcesOptionsDefaults.domain, authData))
     this._uiOptions = new Options(UIOptionsDefaults, new StorageAdapter(UIOptionsDefaults.domain, authData))
+
     return [this._featureOptions.load(), this._resourceOptions.load(), this._uiOptions.load()]
   }
 
@@ -162,6 +165,15 @@ export default class SettingsController {
     }
   }
 
+  updateUiOptDefaults () {
+    if (this._uiOutOptions && Object.keys(this._uiOutOptions).length > 0) {
+      Object.keys(this._uiOutOptions).forEach(uiOutOptName => {
+        const optItem = this._uiOptions.items[uiOutOptName]
+        optItem.setValue(this._uiOutOptions[uiOutOptName])
+      })
+    }
+  }
+
   initNonConfigurableOptions () {
     this._siteOptions = [] // eslint-disable-line prefer-const
     for (const site of SiteOptionsDefaults) {
@@ -247,7 +259,8 @@ export default class SettingsController {
       'mouseMoveAccuracy',
       'enableMouseMoveLimitedByIdCheck',
       'mouseMoveLimitedById',
-      'forceMouseMoveGoogleDocs'
+      'forceMouseMoveGoogleDocs',
+      'hidePopupOnClickAway'
     ]
     if (nonTextFeatures.includes(name)) {
       this._uiOptions.items[name].setValue(value)

diff --git a/packages/components/src/settings/ui-options-defaults.json b/packages/components/src/settings/ui-options-defaults.json
@@ -151,6 +151,21 @@
       "defaultValue": "docs-editor-container",
       "labelText": "Google Docs Top-Level Container Id",
       "text": true
+    },
+    "hidePopupOnClickAway": {
+      "defaultValue": true,
+      "labelText": "Hide Popup on Clickway",
+      "boolean": true,
+      "values": [
+        {
+          "value": true,
+          "text": "Yes"
+        },
+        {
+          "value": false,
+          "text": "No"
+        }
+      ]
     }
   }
 }
diff --git a/packages/components/src/vue/components/popup.vue b/packages/components/src/vue/components/popup.vue
@@ -494,7 +494,8 @@ export default {
       this.resizedHeight = null
     },
 
-    attachTrackingClick: function (event) {
+    attachTrackingClick (event) {
+      const settingClose = this.settings.getUiOptions().items.hidePopupOnClickAway.currentValue
       /*
       When a popup is dragged outside of the viewport and then moved back
       by an adjustment procedure in dragEndListener(), a drag end mouse release event
@@ -509,7 +510,9 @@ export default {
         event.clientY >= 0 &&
         event.clientY <= this.app.platform.viewport.height
       ) {
-        this.closePopup()
+        if (settingClose) {
+          this.closePopup()
+        }
       }
     },
 

diff --git a/packages/components/src/vue/components/ui-settings.vue b/packages/components/src/vue/components/ui-settings.vue
@@ -37,6 +37,12 @@
         @change="uiOptionChanged"
     >
     </setting>
+    <setting
+        :classes="['alpheios-ui-options__item']"
+        :data="uiOptions.items.hidePopupOnClickAway"
+        @change="uiOptionChanged"
+    >
+    </setting>
   </div>
 </template>
 <script>