topic Re: Determine Orientation on Mobile Device in ArcGIS JavaScript Maps SDK Questions

Determine Orientation on Mobile Device

WilliamMiller4 — Wed, 21 Sep 2016 17:30:30 GMT

How does one determine if a mobile device is being used so changes can be made when the orientation goes from portrait to landscape? Any help would be appreciated.

Thank you,

William

Re: Determine Orientation on Mobile Device

RobertScheitlin__GISP — Wed, 21 Sep 2016 17:40:37 GMT

William,

There are a couple of ways to know this. You can use css media queries or use dojo/has and dojo/sniff

Using media queries - CSS | MDN

https://dojotoolkit.org/reference-guide/1.10/dojo/has.html

https://dojotoolkit.org/reference-guide/1.10/dojo/sniff.html

Re: Determine Orientation on Mobile Device

WilliamMiller4 — Sun, 12 Dec 2021 08:06:56 GMT

Hi Robert,

Thanks for the links. I had been planning to use the following to determine whether the device being used was mobile or not. (I think this logic is correct. I was referencing this GeoNet thread.)

if(isFullWindow()){
   //true, mobile device
} else {
   //false, not mobile device
}‍‍‍‍‍

where

  function isFullWindow() {
    if (window.appInfo.isRunInMobile) {
        return true;
    } else {
        return false;
      }
    }‍‍‍‍‍‍‍

Now I need a way to determine if the screen orientation is portrait or landscape.

Looking at the links you provided, it appears the best way to go about this is to use two media queries in the CSS.

@media screen and (orientation: portrait){},
@media screen and (orientation: landscape){}‍‍

Is this the way you would go about solving the problem?

I had hoped to make the changes in the JavaScript file. I see how dojo/has and dojo/sniff can help with determining the device being used, but not with screen orientation. Maybe I'm missing something...

William

Re: Determine Orientation on Mobile Device

RobertScheitlin__GISP — Wed, 21 Sep 2016 21:26:37 GMT

William,

Here is a link for that:

https://davidwalsh.name/orientation-change

Re: Determine Orientation on Mobile Device

WilliamMiller4 — Fri, 23 Sep 2016 20:15:49 GMT

Hi Robert,

I looked at the link you shared. From reading the article, it sounds like the resize event is the best option, but I'm having trouble implementing it. I have a modal panel, incorporating ideas from the splash widget, that works except for the screen rotation. Below are pictures of the panel (with a widget inside) upon first opening it in the orientation shown.

Here is what they look like after rotation, respectively.

I get the following error:

Uncaught TypeError: b.call is not a function(…) init.js:1355

I've attached my panel, along with the original modal panel that is presented in Create a new panel.

Any thoughts would be appreciated and enjoy your first fall weekend of the year.

William

Re: Determine Orientation on Mobile Device

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:06:59 GMT

William,

I don't have time to look into your code right now but here are the events I use:

        if(has('event-orientationchange')){
          this.own(on(window, 'orientationchange', lang.hitch(this, function() {
            if (this._fixedHeight || this.autoHeight) {
              this._calculatePosition();

              this._moveToMiddle();
              return;
            }
            this._positioning();
          })));
        }

        this.own(on(window, 'resize', lang.hitch(this, function() {
          if (this._fixedHeight || this.autoHeight) {
            this._calculatePosition();

            this._moveToMiddle();
            return;
          }
          this._positioning();
        })));‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Determine Orientation on Mobile Device

WilliamMiller4 — Tue, 27 Sep 2016 14:35:50 GMT

Hi Robert,

I have a few questions.

- Would the code you provided be added to the startup function?

-How do I get values for this._fixedHeight and this.autoHeight?

- Do I write the _calculatePosition, _moveToMiddle and _positioning functions, do I refer to them (I see all three functions are in jimu.js\dijit\Popup.js) or are they automatically referenced?

-Should the resize code be included in an if statement?

As always, any guidance you can provide is greatly appreciated. Thank you.

William

Re: Determine Orientation on Mobile Device

RobertScheitlin__GISP — Tue, 27 Sep 2016 15:03:12 GMT

William,

The code I provided is from me customizing the Popup.js

Would the code you provided be added to the startup function?

I have it in the postCreate.

How do I get values for this._fixedHeight and this.autoHeight?

Those are Boolean vars in my code.

Do I write the _calculatePosition, _moveToMiddle and _positioning functions, do I refer to them (I see all three functions are in jimu.js\dijit\Popup.js) or are they automatically referenced?

you would need to write these functions

Should the resize code be included in an if statement?

Nope

Re: Determine Orientation on Mobile Device

WilliamMiller4 — Fri, 30 Sep 2016 20:39:13 GMT

Hi Robert,

Thank you for your help. I added the code you suggested to the modal panel and made some modifications. The panel responds, but the widget inside keeps the same layout it started with originally. (Please see images below.)

Starting in Portrait View

After switch to Landscape

Starting in Landscape View

After switch to Portrait

Do I need to add the same code to the widget as well?

Thanks again Robert.

William

Re: Determine Orientation on Mobile Device

WilliamMiller4 — Tue, 04 Oct 2016 12:48:18 GMT

Hi Robert,

How do I reference the panel from the widget inside it? (Or should I ask this in a new question thread?)

Thanks again,

William

Re: Determine Orientation on Mobile Device

RobertScheitlin__GISP — Tue, 04 Oct 2016 12:53:18 GMT

William,

You would just use a global var. this.blahblah

Re: Determine Orientation on Mobile Device

WilliamMiller4 — Tue, 04 Oct 2016 13:18:08 GMT

Robert,

So a global variable defined in widget.js?

PANEL: this.panel,‍

How does it know what panel though?

William

Re: Determine Orientation on Mobile Device

RobertScheitlin__GISP — Tue, 04 Oct 2016 13:36:37 GMT

William,

When I create a new popup panel I pass a reference of the parent widget into the constructor, i.e.:

var tr = new TaxReport({
height: 800,
titleLabel: "Tax Report",
json: taxReportJSON,
map: this.map,
layer: clayer||this.currentLayerAdded,
folderurl: this.folderUrl,

widget: this
});

Above the var tr is the panel and the panel has a reference back to the main widget using the constructor var "widget".

Re: Determine Orientation on Mobile Device

WilliamMiller4 — Sun, 12 Dec 2021 08:07:02 GMT

Hi Robert,

I'm not creating the panel from inside the widget, or the widget from inside the panel. I'm creating the panel by including it in a modified layout in a modified foldable theme. (The only modifications to the foldable theme are the addition of the modal panel to the panels folder and the modal panel's inclusion in a group in the config.json of the layout I'm using from the layouts folder, as shown below.)

  "widgetPool": {
    "panel": {
      "uri": "themes/eFoldableTheme/panels/FoldablePanel/Panel",
      "position": {
        "top": 5,
        "right": 5,
        "bottom": 5,
        "zIndex": 5
      }
    },
    "groups": [{
      "widgets": [{
        "uri": "widgets/Welcome/Widget"
      }],
      "panel": {
        "uri": "themes/eFoldableTheme/panels/ModalPanel/Panel",
        "position": {
          "relativeTo": "browser",
          "zIndex": 102
        }
      }
    }]
  },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

So I'm not quite sure where I can add a reference like widget: this or panel: this.

Any ideas?

William

Re: Determine Orientation on Mobile Device

RobertScheitlin__GISP — Tue, 04 Oct 2016 14:58:17 GMT

William,

Sorry, I don't

Re: Determine Orientation on Mobile Device

WilliamMiller4 — Wed, 05 Oct 2016 19:17:50 GMT

Hi Robert,

I was hoping you might look at my use of the _calculatePosition and _moveToMiddle functions. I'm not sure how to use the selfBox variable in the _moveToMiddle function. Currently, when the device is in portrait view, the widget's content is in landscape and vice versa. This switches as the on resize is activated and it doesn't matter what position they started in as they end up the same way. The on orientationchange is never activated, maybe because I've just used the preview feature in WAB for testing so far.

I tried pasting the text and then using the GeoNet syntax highlighter, but the code looked horrible (and not just because I wrote it), so I attached it as a text file instead.

Thank you for any help you can provide.

William