exiguus/js.device.selector

View on GitHub
src/index.jquery.html

Summary

Maintainability
Test Coverage
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Device Selector &mdash; jQuery Plugin</title>
        <meta name="description" content="Device Selector &mdash; jQuery Plugin :: Make your CSS Breakpoints available in JavaScript">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
        <style>
          * {
            margin: 0;
            padding: 0;
          }
          body {
            font: normal 100%/1.2 Arial, Helvetica Neue, Helvetica, sans-serif;
            color: #F0FFF0;
            background-color: #838B83;
          }
          body.capture .logo {
            display: none;
          }
          header {
            position: relative;
            padding: 6em 1em 2em 1em;
          }
          header h1 {
            margin-bottom: .6em;
          }
          header h2 {
            padding-bottom: .8em;
            border-bottom: 2px solid #C1CDC1;
          }
          header .logo {
            position: absolute;
            top: 4em;
            right: 1em;
            visibility: hidden;
          }
          header .logo svg,
          footer .logo svg {
            display: inline-block;
            font-size: inherit;
            overflow: visible;
            vertical-align: -.125em;
            opacity: .7;
          }
          header .logo svg.mobile {
            height: 2em;
          }
          header .logo svg.tablet {
            height: 3em;
          }
          header .logo svg.desktop {
            height: 5em;
          }
          header .logo svg.large-desktop {
            height: 7em;
          }
          footer {
            margin: 0 1em;
            padding: 2em 0;
            border-top: 2px solid #C1CDC1;
          }
          footer .logo .javascript {
            height: 1em;
          }
          main {
            padding: 0 1em 2em 1em;
          }
          h1,
          h2,
          h3,
          h4,
          p {
            margin-bottom: 1em;
          }
          pre,
          dl {
            margin-bottom: 4em;
          }
          dl::after {
            content: ' ';
            display: table;
            width: 1px;
            height: 1px;
            clear: left;
          }
          dt, dd {
            float: left;
            margin-bottom: .5em;
            line-height: 2em;
            min-width: 160px;
          }
          dd + dt {
            clear: left;
          }
          dd code {
            display: inline-block;
            padding: 0 .4em;
            margin-left: 1em;
            min-width: 160px;
            font-size: 150%;
            border-left: 1px solid #C1CDC1;
          }
          pre {
            padding: .5em;
            font-size: 110%;
            color: #838B83;
            background-color: #C1CDC1;
            overflow-x: auto;
            opacity: .7;
          }
          @media
          only screen and (min-width: 698px) {
            main {
              padding: 0 4em 2em 4em;
            }
            header {
              padding: 6em 4em 2em 4em;
            }
            header .logo {
              right: 4em;
              visibility: visible;
            }
            footer {
              margin: 0 4em;
            }
            pre {
              padding: .5em 1em;
            }
          }

          [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>
    </head>
    <body class="development">
        <header>
          <h1>Device Selector</h1>
          <h2>jQuery Plugin</h2>
          <p>Make your CSS Breakpoints available in JavaScript</p>
          <div class="logo">
            <svg aria-hidden="true" data-icon="mobile" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="mobile"><path fill="currentColor" d="M192 416c0 17.7-14.3 32-32 32s-32-14.3-32-32 14.3-32 32-32 32 14.3 32 32zM320 48v416c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V48C0 21.5 21.5 0 48 0h224c26.5 0 48 21.5 48 48zm-32 0c0-8.8-7.2-16-16-16H48c-8.8 0-16 7.2-16 16v416c0 8.8 7.2 16 16 16h224c8.8 0 16-7.2 16-16V48z"></path></svg>
            <svg aria-hidden="true" data-icon="tablet" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="tablet"><path fill="currentColor" d="M256 416c0 17.7-14.3 32-32 32s-32-14.3-32-32c0-21.3 14.3-32 32-32s32 14.3 32 32zM448 48v416c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V48C0 21.5 21.5 0 48 0h352c26.5 0 48 21.5 48 48zm-32 0c0-8.8-7.2-16-16-16H48c-8.8 0-16 7.2-16 16v416c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16V48z"></path></svg>
            <svg aria-hidden="true" data-icon="desktop" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="desktop"><path fill="currentColor" d="M528 0H48C21.5 0 0 21.5 0 48v288c0 26.5 21.5 48 48 48h192l-24 96h-72c-8.8 0-16 7.2-16 16s7.2 16 16 16h288c8.8 0 16-7.2 16-16s-7.2-16-16-16h-72l-24-96h192c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM249 480l16-64h46l16 64h-78zm295-144c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V48c0-8.8 7.2-16 16-16h480c8.8 0 16 7.2 16 16v288z"></path></svg>
            <svg aria-hidden="true" data-icon="large-desktop" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="large-desktop"><path fill="currentColor" d="M592 0H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h256v64H144c-8.8 0-16 7.2-16 16s7.2 16 16 16h352c8.8 0 16-7.2 16-16s-7.2-16-16-16H336v-64h256c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm16 368c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V48c0-8.8 7.2-16 16-16h544c8.8 0 16 7.2 16 16v320z"></path></svg>
          </div>
        </header>

        <main>
          <article>
            <h2>Select Device Type</h2>
            <dl>
              <dt>DeviceType</dt>
              <dd><code id="deviceType">not set</code></dd>
              <dt>WindowInnerWidth</dt>
              <dd><code id="windowInnerWidth">not set</code></dd>
            </dl>
            <h2>Select Display Type</h2>
            <dl>
              <dt>DisplayType</dt>
              <dd><code id="displayType">not set</code></dd>
            </dl>
            <h2>CSS</h2>
<pre>
  <code>
    &lt;style&gt;
      [data-device-selector-item] {
        display: none;
      }
      @media
      only screen and (max-width: 768px) {
        [data-device-selector-devicetype=&quot;mobile&quot;] {
          display: block !important;
        }
      }
      @media
      only screen and (min-width: 769px) and (max-width: 960px) {
        [data-device-selector-devicetype=&quot;tablet&quot;] {
          display: block !important;
        }
      }
      @media
      only screen and (min-width: 961px) and (max-width: 1200px) {
        [data-device-selector-devicetype=&quot;desktop&quot;] {
          display: block !important;
        }
      }
      @media
      only screen and (min-width: 1201px) {
        [data-device-selector-devicetype=&quot;large-desktop&quot;] {
          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=&quot;retina&quot;] {
          display: block !important;
        }
      }
    &lt;/style&gt;
  </code>
</pre>
            <h2>Markup</h2>
<pre>
  <code>
    &lt;div data-device-selector&gt;
      &lt;div data-device-selector-item data-device-selector-devicetype=&quot;mobile&quot;&gt;&lt;/div&gt;
      &lt;div data-device-selector-item data-device-selector-devicetype=&quot;tablet&quot;&gt;&lt;/div&gt;
      &lt;div data-device-selector-item data-device-selector-devicetype=&quot;desktop&quot;&gt;&lt;/div&gt;
      &lt;div data-device-selector-item data-device-selector-devicetype=&quot;large-desktop&quot;&gt;&lt;/div&gt;
      &lt;div data-device-selector-item data-device-selector-displaytype=&quot;retina&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
  </code>
</pre>
            <h2>JavaScript</h2>
<pre>
  <code>
    &lt;script&gt;
      $.fn.deviceSelector();
      // var config = {
      //   &#39;selector&#39;: {
      //     &#39;name&#39;: &#39;.namespace__m-device-selector&#39;,
      //     &#39;parent&#39;: {
      //       &#39;name&#39;: &#39;body&#39;,
      //     },
      //     &#39;items&#39;: {
      //       &#39;name&#39;: &#39;.namespace__m-device-selector__item&#39;,
      //     },
      //   },
      //   &#39;device&#39;: {
      //     &#39;selector&#39;: {
      //       &#39;name&#39;: &#39;data-ds-devicetype&#39;,
      //     },
      //   },
      //   &#39;display&#39;: {
      //     &#39;selector&#39;: {
      //       &#39;name&#39;: &#39;data-ds-displaytype&#39;,
      //     },
      //   },
      // };
      // $.fn.deviceSelector(config);
      $(&#39;#deviceType&#39;).text($.fn.deviceSelector.getDeviceType());
      $(&#39;#displayType&#39;).text($.fn.deviceSelector.getDisplayType());
    &lt;/script&gt;
  </code>
</pre>

          </article>
        </main>
        <footer>
          <p>
            <span class="logo">
              <svg aria-hidden="true" data-icon="javascript" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="javascript"><path fill="currentColor" d="M0 32v448h448V32H0zm243.8 349.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z"></path></svg>
            </span>
            Device Selector
          </p>
        </footer>
        <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>
        <script src="../node_modules/jquery/dist/jquery.min.js"></script>
        <script src="js/jquery.device.selector.js"></script>
        <script>
          $.fn.deviceSelector();
          // $.fn.deviceSelector({
          //   'selector': {
          //     'name': '.namespace__m-device-selector',
          //     'parent': {
          //       'name': '.namespace',
          //     },
          //     'items': {
          //       'name': '.namespace__m-device-selector__item',
          //     },
          //   },
          //   'device': {
          //     'selector': {
          //       'name': 'data-ds-devicetype',
          //     },
          //   },
          //   'display': {
          //     'selector': {
          //       'name': 'data-ds-displaytype',
          //     },
          //   },
          // });
          console.log($.fn.deviceSelector.defaults);
          console.log($.fn.deviceSelector.getDeviceType());
          console.log($.fn.deviceSelector.getDisplayType());
          $('#deviceType').text($.fn.deviceSelector.getDeviceType());
          $('#displayType').text($.fn.deviceSelector.getDisplayType());
          // misc
          $('#windowInnerWidth').text(window.innerWidth + 'px');
          $('.logo svg.' + $.fn.deviceSelector.getDeviceType()).css('opacity','1');
        </script>
    </body>
</html>