Nanananananananana.. Pat Man!

    js.device.selector

    1.0.1 • Public • Published

    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

    Install

    npm i js.device.selector

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    1.39 MB

    Total Files

    69

    Last publish

    Collaborators

    • exiguus