Skip to content
This repository has been archived by the owner on Jul 31, 2023. It is now read-only.

Latest commit

 

History

History
353 lines (317 loc) · 10.5 KB

README.md

File metadata and controls

353 lines (317 loc) · 10.5 KB
Raw

tests coverage maintainability

js.device.selector

ES6 class and jQuery Plugin which get the current Device Type and Display Type of a Browser while making CSS Breakpoints available in JavaScript.

This solution make it possible to define your breakpoints only once (in CSS) and pass them automatically into JavaScript.

npm

npm

npm install --save js.device.selector

Example

jQuery plugin

Style for hidden Markup that make CSS Breakpoints available in JavaScript via Media-Queries and visibility.

<style>

  [data-device-selector-item] {
    display: none;
  }
  @media
  only screen and (max-width: 768px) {
    [data-device-selector-devicetype="mobile"] {
      display: block !important;
    }
  }
  @media
  only screen and (min-width: 769px) and (max-width: 960px) {
    [data-device-selector-devicetype="tablet"] {
      display: block !important;
    }
  }
  @media
  only screen and (min-width: 961px) and (max-width: 1200px) {
    [data-device-selector-devicetype="desktop"] {
      display: block !important;
    }
  }
  @media
  only screen and (min-width: 1201px) {
    [data-device-selector-devicetype="large-desktop"] {
      display: block !important;
    }
  }
  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    [data-device-selector-displaytype="retina"] {
      display: block !important;
    }
  }
</style>

Markup which make the visibility of Breakpoints available in JavaScript. The Markup should be added right before the closing body tag.

<div data-device-selector>
  <div data-device-selector-item data-device-selector-devicetype="mobile"></div>
  <div data-device-selector-item data-device-selector-devicetype="tablet"></div>
  <div data-device-selector-item data-device-selector-devicetype="desktop"></div>
  <div data-device-selector-item data-device-selector-devicetype="large-desktop"></div>
  <div data-device-selector-item data-device-selector-displaytype="retina"></div>
</div>

Initialise the jQuery Plugin and sample usage.

<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/js.device.selector/jquery.device.selector.min.js"></script>
<script>
  $.fn.deviceSelector();
  console.log($.fn.deviceSelector.getDeviceType()); // return mobile || tablet || desktop || large-desktop
  $('#deviceType').text($.fn.deviceSelector.getDeviceType());
  $('#displayType').text($.fn.deviceSelector.getDisplayType());
</script>

jQuery Plugin Custom

Use your own flavored Markup and pass your own settings to the Device Selector.

<style>

  .namespace__m-device-selector__item {
    display: none;
  }
  @media
  only screen and (max-width: 768px) {
    [data-ds-devicetype="m"] {
      display: block !important;
    }
  }
  @media
  only screen and (min-width: 769px) and (max-width: 960px) {
    [data-ds-devicetype="t"] {
      display: block !important;
    }
  }
  @media
  only screen and (min-width: 961px) and (max-width: 1200px) {
    [data-ds-devicetype="md"] {
      display: block !important;
    }
  }
  @media
  only screen and (min-width: 1201px) {
    [data-ds-devicetype="ld"] {
      display: block !important;
    }
  }
  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    [data-ds-displaytype="rt"] {
      display: block !important;
    }
  }
</style>
<div class="namespace">
  <div class="namespace__m-device-selector">
    <div class="namespace__m-device-selector__item" data-ds-devicetype="m"></div>
    <div class="namespace__m-device-selector__item" data-ds-devicetype="t"></div>
    <div class="namespace__m-device-selector__item" data-ds-devicetype="md"></div>
    <div class="namespace__m-device-selector__item" data-ds-devicetype="lg"></div>
    <div class="namespace__m-device-selector__item" data-ds-displaytype="rt"></div>
  </div>
</div>
<script>
  $.fn.deviceSelector({
    'selector': {
      'name': '.namespace__m-device-selector',
      'parent': {
        'name': 'body',
      },
      'items': {
        'name': '.namespace__m-device-selector__item',
      },
    },
    'device': {
      'selector': {
        'name': 'data-ds-devicetype',
      },
    },
    'display': {
      'selector': {
        'name': 'data-ds-displaytype',
      },
    },
  });
  console.log($.fn.deviceSelector.getDeviceType()); // return m || t || md || lg
  $('#deviceType').text($.fn.deviceSelector.getDeviceType());
  $('#displayType').text($.fn.deviceSelector.getDisplayType());
</script>

ES6 class

Style for hidden Markup that make CSS Breakpoints available in JavaScript via Media-Queries and visibility.

<style>

  [data-device-selector-item] {
    display: none;
  }
  @media
  only screen and (max-width: 768px) {
    [data-device-selector-devicetype="mobile"] {
      display: block !important;
    }
  }
  @media
  only screen and (min-width: 769px) and (max-width: 960px) {
    [data-device-selector-devicetype="tablet"] {
      display: block !important;
    }
  }
  @media
  only screen and (min-width: 961px) and (max-width: 1200px) {
    [data-device-selector-devicetype="desktop"] {
      display: block !important;
    }
  }
  @media
  only screen and (min-width: 1201px) {
    [data-device-selector-devicetype="large-desktop"] {
      display: block !important;
    }
  }
  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    [data-device-selector-displaytype="retina"] {
      display: block !important;
    }
  }
</style>

Markup which make the visibility of Breakpoints available in JavaScript. The Markup should be added right before the closing body tag.

<div data-device-selector>
  <div data-device-selector-item data-device-selector-devicetype="mobile"></div>
  <div data-device-selector-item data-device-selector-devicetype="tablet"></div>
  <div data-device-selector-item data-device-selector-devicetype="desktop"></div>
  <div data-device-selector-item data-device-selector-devicetype="large-desktop"></div>
  <div data-device-selector-item data-device-selector-displaytype="retina"></div>
</div>

Import the ES6 Class and sample usage.

import DeviceSelector from './js/device.selector.class';
const deviceSelector = new DeviceSelector();

console.log($.fn.deviceSelector.getDeviceType()); // return m || t || md || lg
document.querySelector('#deviceType').innerHTML = deviceSelector.deviceType();
document.querySelector('#displayType').innerHTML = deviceSelector.displayType();
</script>

ES6 Class Custom

<style>

  .namespace__m-device-selector__item {
    display: none;
  }
  @media
  only screen and (max-width: 768px) {
    [data-ds-devicetype="m"] {
      display: block !important;
    }
  }
  @media
  only screen and (min-width: 769px) and (max-width: 960px) {
    [data-ds-devicetype="t"] {
      display: block !important;
    }
  }
  @media
  only screen and (min-width: 961px) and (max-width: 1200px) {
    [data-ds-devicetype="md"] {
      display: block !important;
    }
  }
  @media
  only screen and (min-width: 1201px) {
    [data-ds-devicetype="ld"] {
      display: block !important;
    }
  }
  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    [data-ds-displaytype="rt"] {
      display: block !important;
    }
  }
</style>
<div class="namespace">
  <div class="namespace__m-device-selector">
    <div class="namespace__m-device-selector__item" data-ds-devicetype="m"></div>
    <div class="namespace__m-device-selector__item" data-ds-devicetype="t"></div>
    <div class="namespace__m-device-selector__item" data-ds-devicetype="md"></div>
    <div class="namespace__m-device-selector__item" data-ds-devicetype="lg"></div>
    <div class="namespace__m-device-selector__item" data-ds-displaytype="rt"></div>
  </div>
</div>
import DeviceSelector from './js/device.selector.class';
const deviceSelector = new DeviceSelector({
  'selector': {
    'name': '.namespace__m-device-selector',
    'parent': {
      'name': 'body',
    },
    'items': {
      'name': '.namespace__m-device-selector__item',
    },
  },
  'device': {
    'selector': {
      'name': 'data-ds-devicetype',
    },
  },
  'display': {
    'selector': {
      'name': 'data-ds-displaytype',
    },
  },
});

console.log($.fn.deviceSelector.getDeviceType()); // return m || t || md || lg
document.querySelector('#deviceType').innerHTML = deviceSelector.deviceType();
document.querySelector('#displayType').innerHTML = deviceSelector.displayType();

Documentation