/**
30 | * @fileOverview device selector
31 | Get the current Display and Device Type of a Browser
32 | * @author Simon Gattner <npm@0x38.de>
33 | * @license MIT
34 | * @version 1.0.1
35 | */
36 | export default class DeviceSelector {
37 | /* eslint-disable max-len */
38 | /**
39 | * Get the current Display and Device Type of a Browser.
40 | * @class DeviceSelector
41 | * @classdesc Class to get current Display and Device Type.
42 | * @param {object} options The DeviceSelector options.
43 | * @param {string} options.selector The DeviceSelector selector options.
44 | * @param {string} options.selector.name The DeviceSelector selector name for initialisation.
45 | * @param {string} options.selector.items The DeviceSelector selector items for initialisation.
46 | * @param {string} options.selector.items.name The DeviceSelector selector items name for initialisation.
47 | * @param {string} options.selector.parent The DeviceSelector selector parent for initialisation.
48 | * @param {string} options.selector.parent.name The DeviceSelector selector parent name for initialisation.
49 | * @param {string} options.device The DeviceSelector device type options.
50 | * @param {string} options.device.selector The DeviceSelector device type selector for initialisation.
51 | * @param {string} options.device.selector.name The DeviceSelector device type selector name for initialisation.
52 | * @param {string} options.display The DeviceSelector display type options.
53 | * @param {string} options.display.selector The DeviceSelector display type selector for initialisation.
54 | * @param {string} options.display.selector.name The DeviceSelector display type selector name for initialisation.
55 | */
56 | constructor(options) {
57 | /* eslint-enable max-len */
58 | this._defaults = {
59 | selector: {
60 | name: '[data-device-selector]',
61 | items: {
62 | name: '[data-device-selector-item]',
63 | },
64 | parent: {
65 | name: 'body',
66 | },
67 | },
68 | device: {
69 | selector: {
70 | name: 'data-device-selector-devicetype',
71 | },
72 | },
73 | display: {
74 | selector: {
75 | name: 'data-device-selector-displaytype',
76 | },
77 | },
78 | };
79 | this._options = options || {};
80 | this._settings = Object.assign({}, this._defaults, this._options);
81 | this._items = document.querySelectorAll(
82 | this._settings.selector.parent.name + ' ' +
83 | this._settings.selector.name + ' ' +
84 | this._settings.selector.items.name
85 | );
86 | this._displayType = (
87 | item = (this._items && this._items.length > 0) ?
88 | Array.prototype.slice.call(this._items)
89 | .filter((item) =>
90 | (item.offsetWidth > 0 || item.offsetHeight > 0) &&
91 | item.hasAttribute(this._settings.display.selector.name)
92 | ) :
93 | null
94 | ) => (item && item.length > 0) ?
95 | '' + item[0].getAttribute(this._settings.display.selector.name) :
96 | undefined;
97 | this._deviceType = (
98 | item = (this._items && this._items.length > 0) ?
99 | Array.prototype.slice.call(this._items)
100 | .filter((item) =>
101 | (item.offsetWidth > 0 || item.offsetHeight > 0) &&
102 | item.hasAttribute(this._settings.device.selector.name)
103 | ) :
104 | null
105 | ) => (item && item.length > 0) ?
106 | '' + item[0].getAttribute(this._settings.device.selector.name) :
107 | undefined;
108 | }
109 | /**
110 | * Get the current Device Type; // Device Type.
111 | * @function DeviceSelector.deviceType
112 | * @param {string} string The current Device Type.
113 | * @return {string | undefined} The current Device Type Name.
114 | */
115 | get deviceType() {
116 | return this._deviceType;
117 | }
118 | /**
119 | * Get the current Display Type.
120 | * @function DeviceSelector.displayType
121 | * @param {string} string The current Display Type.
122 | * @return {string | undefined} The current Display Type Name.
123 | */
124 | get displayType() {
125 | return this._displayType;
126 | }
127 | }
128 |