src/index.jquery.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Device Selector — jQuery Plugin</title>
<meta name="description" content="Device Selector — 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>
<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>
</code>
</pre>
<h2>Markup</h2>
<pre>
<code>
<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>
</code>
</pre>
<h2>JavaScript</h2>
<pre>
<code>
<script>
$.fn.deviceSelector();
// var config = {
// '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',
// },
// },
// };
// $.fn.deviceSelector(config);
$('#deviceType').text($.fn.deviceSelector.getDeviceType());
$('#displayType').text($.fn.deviceSelector.getDisplayType());
</script>
</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>