Determine Orientation on Mobile Device

2268
15
09-21-2016 10:30 AM
WilliamMiller4
Occasional Contributor II

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

0 Kudos
15 Replies
RobertScheitlin__GISP
MVP Emeritus

William,

   You would just use a global var. this.blahblah

0 Kudos
WilliamMiller4
Occasional Contributor II

Robert,

So a global variable defined in widget.js?

PANEL: this.panel,

How does it know what panel though?

William

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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".

0 Kudos
WilliamMiller4
Occasional Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

William,

  Sorry, I don't

0 Kudos
WilliamMiller4
Occasional Contributor II

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

0 Kudos