Added agent.js and documentation

marknotton · May 18, 2018 · c42908a · c42908a
1 parent 3dc7c5a
commit c42908a
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 40 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## 1.0.5 - 2018-05-18
+### Added
+- agent.js is an optional script that opens up a list of features to query data attributes and device types.
+
+### Updated
+- Read Me includes documentation for agent.js
+
 ## 1.0.4 - 2018-05-09
 ### Added
 - A repo icon

diff --git a/README.md b/README.md
@@ -252,13 +252,13 @@ You can include the agent.js like this:
 )%}
 ```
 
-You can initialise it like this in your own script:
+You can initialise it like this:
 
 ```js
 let agent = new Agent();
 ```
 
-By default, we assume your using the Agent data function is defined in your HTML tag via Twig:
+By default, we assume the Twig data function is defined in your HTML tag via Twig:
 
 ```html
 <html {{ craft.agent.data|default }}>
@@ -267,22 +267,26 @@ By default, we assume your using the Agent data function is defined in your HTML
 If you're using it on another tag, you'll need to define the element like this:
 
 ```js
-let agent = new Agent($('body'));
+let agent = new Agent($('body')[0]);
 ```
 
 Now you have access to these methods:
 
 
-| Function | Autoload | Return Example | Description |
-| -- | -- | -- | -- | -- |
-| agent.browser | true | ```{name: "chrome", version: "66"}``` | Gets the users browser name and version number |
-| agent.viewport | true | ```{width: 1345, height: 1321}``` | Gets the users viewport width and height |
-| agent.screen | true | ```{pixelWidth: 2560, pixelHeight: 1440}``` | Gets the users device resolution. This takes into account condensed pixels |
-| agent.platform | true | ```osx``` | Gets the users platform type |
-| agent.mobile | true | ```true``` | Checks if the user is on a mobile device |
-| agent.tablet | true | ```true``` | Checks if the user is on a tablet device |
-| agent.desktop | true | ```true``` | Checks if the user is on a desktop |
-| agent.orientation | false | ```landscape``` | Checks the orientation of the users display/device |
-| agent.notch | false | ```left``` | Checks if the users device has a notch, and tells you what side it's on |
+| Function | Return Example | Description |
+| -- |  -- | -- | -- |
+| agent.browser | ```{name: "chrome", version: "66"}``` | Gets the users browser name and version number |
+| agent.viewport | ```{width: 1345, height: 1321}``` | Gets the users viewport width and height |
+| agent.screen | ```{pixelWidth: 2560, pixelHeight: 1440}``` | Gets the users device resolution. This takes into account condensed pixels |
+| agent.platform | ```osx``` | Gets the users platform type |
+| agent.mobile | ```true``` | Checks if the user is on a mobile device |
+| agent.tablet | ```true``` | Checks if the user is on a tablet device |
+| agent.desktop | ```true``` | Checks if the user is on a desktop |
+| agent.orientation | ```landscape``` | Checks the orientation of the users display/device |
+| agent.notch | ```left``` | Checks if the users device has a notch, and tells you what side it's on |
 
-Auto loaded methods are called when the Agent Class is initialised. They are then pushed directly to the DOM window. So all autoloaded methods are added or merged to existing objects. You can disable this by passing in `false` as argument.
+Orientation and Notch data is stored in the DOM window as `device`. Refering to this will return something like this:
+
+```[orientation: "landscape", type: "iphoneX", notched: true, notch: "left"]```
+
+All of the above methods are auto loaded when the Agent Class is initialised. Each method stores data to the DOM window. So rather than actioning each method when you need it, you can refer to the cached data in your Window. Meaning you can simply call `browser` in your script to get the data. You can disable this by passing in `false` as argument: `new Agent(false)`.
diff --git a/composer.json b/composer.json
@@ -2,7 +2,7 @@
     "name": "marknotton/agent",
     "description": "Query the server-side information from the users agent data.",
     "type": "craft-plugin",
-    "version": "1.0.4",
+    "version": "1.0.5",
     "keywords": [
         "craft",
         "cms",
@@ -33,7 +33,7 @@
     "extra": {
         "name": "Agent",
         "handle": "agent",
-        "schemaVersion": "1.0.4",
+        "schemaVersion": "1.0.5",
         "hasCpSettings": false,
         "hasCpSection": false,
         "changelogUrl": "https://github.com/marknotton/craft-plugin-agent/blob/master/CHANGELOG.md",

diff --git a/src/assets/scripts/agent.js b/src/assets/scripts/agent.js
@@ -8,14 +8,12 @@ class Agent {
     let autoload = true;
     let element = document.getElementsByTagName("html")[0];
 
-    let autoloads = [
-      'browser',
-      'platform',
-      'mobile',
-      'tablet',
-      'desktop',
-      'viewport'
-    ]
+    let autoloads = ['browser', 'platform', 'mobile', 'tablet', 'desktop', 'viewport']
+
+    // List of known notched devices and their screen resolutions.
+    let notchedScreens = {
+      'iphoneX' : [1125, 2436],
+    };
 
     var args = [].slice.call(arguments);
 
@@ -42,7 +40,7 @@ class Agent {
 
       // Add a listener for mobile and tablets to check for orientation changes. Call this function on Dom Ready too.
       if (window.mobile || window.tablet) {
-        window.addEventListener('orientationchange', this.debounce((e) => {
+        window.addEventListener('orientationchange', $this.debounce((e) => {
           this.orientation.update
         }));
         this.orientation.update
@@ -57,11 +55,16 @@ class Agent {
         window.screen = this.screen;
       }
 
-      // If the browser platform is iOS and the users device screen dimensions match those of the iPhoneX; define the device.iphoneX variable to true;
-      if (platform == 'ios' && screen.pixelWidth == 1125 && screen.pixelHeight === 2436) {
-        window.iphoneX = true
-        body.addClass('iphoneX')
+      // Loop through known notched devices
+      for (const key of Object.keys(notchedScreens)) {
+        if (screen.pixelWidth == notchedScreens[key][0] && screen.pixelHeight == notchedScreens[key][1]
+          || screen.pixelWidth == notchedScreens[key][1] && screen.pixelHeight == notchedScreens[key][0]) {
+          window.device.type = key;
+          window.device.notched = true
+          this.notch;
+        }
       }
+
     }
 
   }
@@ -106,10 +109,10 @@ class Agent {
   }
 
   get viewport () {
-    return {
+    return window.viewport = {
       width : window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
       height : window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
-    }
+    };
   }
 
   get screen () {
@@ -123,17 +126,19 @@ class Agent {
   get notch () {
 
     if (window.device.orientation == 'landscape') {
-      // If the iPhoneX is rotated left 90 degrees, assume the notch exists on the left
+      // If the device is rotated left 90 degrees, assume the notch exists on the left
       this.element.setAttribute("data-notch", 'left')
       window.device.notch = 'left'
     } else if (window.device.orientation == 'upside-down landscape') {
-      // If the iPhoneX is rotated right 90 degrees, assume the notch exists on the right
+      // If the device is rotated right 90 degrees, assume the notch exists on the right
       this.element.setAttribute("data-notch", 'right')
       window.device.notch = 'right'
     } else {
-      // If the iPhoneX is not landscape at all, remove both classes
-      this.element.removeAttribute("data-notch")
-      window.device.notch = false
+      // If the device is not landscape at all, remove both classes
+      // this.element.removeAttribute("data-notch")
+      // window.device.notch = false;
+      this.element.setAttribute("data-notch", 'top')
+      window.device.notch = 'top'
     }
     return window.device.notch;
   }
@@ -152,8 +157,8 @@ class Agent {
         // Update the data-orientation on the HTML element
         $this.element.setAttribute("data-orientation", window.device.orientation)
 
-        // If the device is an iPhoneX do a check for 'the notch' and it's position
-        if (window.device.iphoneX) {
+        // If the device is notched do a check for 'the notch' and it's position
+        if (window.device.notched) {
           $this.notch
         }
       },

diff --git a/src/services/AgentService.php b/src/services/AgentService.php
@@ -20,7 +20,7 @@
 /**
  * @author    Mark Notton
  * @package   Agent
- * @since     1.0.0
+ * @since     1.0.5
  */
 class AgentService extends Component
 {