skip to package search or skip to sign in
❤
Pro
Teams
Pricing
Documentation
npm
Search packages
Search
scream
2.11.1 • Public • Published 3 years ago
/scream/dist/scream.js
/
scream
/
dist
/
scream.js


Back
358 LOC
15.5 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _sister = require('sister');

var _sister2 = _interopRequireDefault(_sister);

var _orientationchangeend = require('orientationchangeend');

var _orientationchangeend2 = _interopRequireDefault(_orientationchangeend);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var OCE = (0, _orientationchangeend2.default)();

exports.default = function () {
    var config = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];

    var scream = {};
    var eventEmitter = (0, _sister2.default)();

    var deviceSpecsByOS = new Map([[0, // Default - pre iOS13 device specs
    [[1280, 1762, 1920, 1280, 320, 480, 2, 'iPhone 4/4s'], [1280, 2114, 2272, 1280, 320, 568, 2, 'iPhone 5/5c/5s/SE and 6/6s (Zoomed)'], [1500, 2510, 2668, 1500, 375, 667, 2, 'iPhone 6/6s/7/8'], [1656, 2785, 2944, 1656, 414, 736, 3, 'iPhone 6+/6s+/7+/8+'], [1500, 2509, 2668, 1500, 375, 667, 3, 'iPhone 6+/6s+/7+/8+ (Zoomed)'], [3072, 3936, 4096, 2912, 768, 1024, 1, 'iPad 2'], [3072, 3938, 4096, 2914, 768, 1024, 2, 'iPad Air/Retina/Pro (9.7-inch)'], [3336, 4290, 4448, 3178, 834, 1112, 2, 'iPad Pro (10.5-inch)'], [3336, 4602, 4776, 3162, 834, 1194, 2, 'iPad Pro (11-inch)'], [4096, 5306, 5464, 3938, 1024, 1366, 2, 'iPad Pro (12.9-inch)'], [4096, 5290, 5464, 3922, 1024, 1366, 2, 'iPad Pro (12.9-inch) 3rd generation'], [1656, 3330, 3584, 1656, 414, 896, 2, 'iPhone XR'], [1500, 2993, 3248, 1500, 375, 812, 3, 'iPhone X/XS'], [1656, 3329, 3584, 1656, 414, 896, 3, 'iPhone XS Max']]], [13, [[1280, 2116, 2272, 1280, 320, 568, 2, 'iPhone 5/5c/5s/SE and 6/6s (Zoomed) (iOS 13)'], [1500, 2512, 2668, 1500, 375, 667, 2, 'iPhone 6/6s/7/8/SE2 (iOS 13)'], [1656, 2788, 2944, 1656, 414, 736, 3, 'iPhone 6+/6s+/7+/8+ (iOS 13)'], [1500, 2512, 2668, 1500, 375, 667, 3, 'iPhone 6+/6s+/7+/8+ (Zoomed) (iOS 13)'], [3072, 3940, 4096, 3166, 768, 1024, 2, 'iPad Air/Retina/Pro (9.7-inch) (iOS 13)'], [3336, 4276, 4448, 3164, 834, 1112, 2, 'iPad Pro (10.5-inch) (iOS 13)'], [3336, 4604, 4776, 3164, 834, 1194, 2, 'iPad Pro (11-inch) (iOS 13)'], [4096, 5308, 5464, 3940, 1024, 1366, 2, 'iPad Pro (12.9-inch) (iOS 13)'], [4096, 5292, 5464, 3924, 1024, 1366, 2, 'iPad Pro (12.9-inch) 3rd generation (iOS 13)'], [1656, 3332, 3584, 1656, 414, 896, 2, 'iPhone XR/11 (iOS 13)'], [1500, 2996, 3248, 1500, 375, 812, 3, 'iPhone X/XS/11 Pro (iOS 13)'], [1656, 3332, 3584, 1656, 414, 896, 3, 'iPhone XS Max/11 Pro Max (iOS 13)']]], [14, [[1280, 2116, 2272, 1280, 320, 568, 2, 'iPhone 5/5c/5s/SE and 6/6s (Zoomed) (iOS 14)'], [1500, 2512, 2668, 1500, 375, 667, 2, 'iPhone 6/6s/7/8/SE2 (iOS 14)'], [1656, 2788, 2944, 1656, 414, 736, 3, 'iPhone 6+/6s+/7+/8+ (iOS 14)'], [1500, 2512, 2668, 1500, 375, 667, 3, 'iPhone 6+/6s+/7+/8+ (Zoomed) (iOS 14)'], [3072, 3940, 4096, 3166, 768, 1024, 2, 'iPad Air/Retina/Pro (9.7-inch) (iOS 14)'], [3336, 4276, 4448, 3164, 834, 1112, 2, 'iPad Pro (10.5-inch) (iOS 14)'], [3336, 4604, 4448, 3048, 834, 1194, 2, 'iPad Pro (11-inch) (iOS 14)'], [4096, 5264, 4320, 3175, 810, 1080, 2, 'iPad 8th generation (iOS 14)'], [4096, 5308, 5464, 3940, 1024, 1366, 2, 'iPad Pro (12.9-inch) (iOS 14)'], [4096, 5292, 5464, 3924, 1024, 1366, 2, 'iPad Pro (12.9-inch) 3rd generation (iOS 14)'], [1656, 3316, 3584, 1656, 414, 896, 2, 'iPhone XR/11 (iOS 14)'], [1500, 2996, 3248, 1500, 375, 812, 3, 'iPhone X/XS/11 Pro (iOS 14)'], [1656, 3332, 3584, 1656, 414, 896, 3, 'iPhone XS Max/11 Pro Max (iOS 14)'], [1560, 3112, 3376, 1560, 390, 844, 3, "iPhone 12/12 Pro"], [1500, 2972, 3248, 1500, 375, 812, 3, "iPhone 12 mini"], [1712, 3440, 3704, 1712, 428, 926, 3, "iPhone 12 Pro Max"]]]]);

    config.width = config.width || {};

    if (!config.width.portrait) {
        config.width.portrait = window.screen.width;
    }

    if (!config.width.landscape) {
        config.width.landscape = window.screen.width;
    }

    if (config.viewport === undefined) {
        config.viewport = true;
    }

    /**
     * Detects iOS version
     */
    scream.getIOSVersion = function () {
        if (/iP(hone|od|ad)/.test(navigator.platform)) {
            var v = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/);
            return parseInt(v[1]);
        }

        // Detect iPadOS
        if (navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform)) {
            var iPadV = navigator.appVersion.match(/Version\/(\d+).(\d+)/);
            return parseInt(iPadV[1]);
        }
    };

    /**
     * Whether to manage the viewport of the page.
     */
    scream.manageViewport = function () {
        return config.viewport;
    };

    /**
     * Viewport width relative to the device orientation.
     */
    scream.getViewportWidth = function () {
        return config.width[scream.getOrientation()];
    };

    /**
     * Viewport height relative to the device orientation and to scale with the viewport width.
     */
    scream.getViewportHeight = function () {
        return Math.round(scream.getScreenHeight() / scream.getScale());
    };

    /**
     * The ratio between screen width and viewport width.
     */
    scream.getScale = function () {
        return scream.getScreenWidth() / scream.getViewportWidth();
    };

    var OrientationType = 'portrait' | 'landscape';

    scream.getOrientation = function () {
        return window.orientation === 0 || window.orientation === 180 ? 'portrait' : 'landscape';
    };

    /**
     * Screen width relative to the device orientation.
     */
    scream.getScreenWidth = function () {
        return window.screen[scream.getOrientation() === 'portrait' ? 'width' : 'height'];
    };

    /**
     * Screen width relative to the device orientation.
     */
    scream.getScreenHeight = function () {
        return window.screen[scream.getOrientation() === 'portrait' ? 'height' : 'width'];
    };

    /**
     * Generates a viewport tag reflecting the content width relative to the device orientation
     * and scale required to fit the content in the viewport if enabled.
     *
     * Appends the tag to the document.head and removes the preceding additions.
     */
    scream.updateViewport = function () {
        if (!scream.manageViewport()) return;

        var width = scream.getViewportWidth();
        var scale = scream.getScale();
        var padding = scream.getNotchPadding();

        var content = 'width=' + width + ', initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=0' + ', viewport-fit=cover';

        if (padding > 0) {
            content = 'width=' + (width - padding) + ', initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=0';
        }

        var viewport = document.createElement('meta');
        viewport.name = 'viewport';
        viewport.content = content;

        var oldViewport = window.document.head.querySelector('meta[name="viewport"]');

        if (oldViewport) {
            // Workaround for viewport-fit change not having an immediate effect
            setTimeout(function (content, viewport) {
                if (scream.getNotchPadding() > 0 && content !== viewport) {
                    scream.updateViewport();
                }
            }, 2000, content, oldViewport.getAttribute('content'));
            oldViewport.parentNode.removeChild(oldViewport);
        } else {
            // Workaround for viewport-fit change not having an immediate effect
            setTimeout(function () {
                scream.updateViewport();
            }, 1000);
        }

        window.document.head.appendChild(viewport);
    };

    /**
     * @property 0 window.innerWidth when device is in a portrait orientation, scale 0.25 and page is the minimal view
     * @property 1 window.innerHeight when device is in a portrait orientation, scale 0.25 and page is the minimal view
     * @property 2 window.innerWidth when device is in a landscape orientation, scale 0.25 and page is the minimal view
     * @property 3 window.innerHeight when device is in a landscape orientation, scale 0.25 and page is the minimal view
     * @property 4 screen.width
     * @property 5 screen.height
     * @property 6 devicePixelRatio
     * @property 7 name
     */


    /**
     * Uses static device environment variables (screen.width, screen.height, devicePixelRatio) to recognize device spec.
     */
    scream.deviceSpec = function () {
        var index = void 0,
            spec = void 0;

        var iOSVersion = scream.getIOSVersion();
        var latestDefinedSpecOS = Array.from(deviceSpecsByOS.keys()).reduce(function (acc, key) {
            return Math.max(acc, key);
        }, 0);
        var defaultSpec = iOSVersion > latestDefinedSpecOS ? deviceSpecsByOS.get(latestDefinedSpecOS) : deviceSpecsByOS.get(0);
        var specs = deviceSpecsByOS.has(iOSVersion) ? deviceSpecsByOS.get(iOSVersion) : defaultSpec;

        index = specs.length;

        while (index--) {
            var currentSpec = specs[index];
            if (window.screen.width === currentSpec[4] && window.screen.height === currentSpec[5] && window.devicePixelRatio === currentSpec[6]) {
                if (currentSpec[7] === "iPhone 12 mini") {
                    // workaround for iPhone 12 mini (hello Apple)
                    // because it has the same screen sizes and devicePixelRatio as iPhone X/XS/11 Pro
                    if (window.innerHeight >= 629 && window.innerHeight <= 743) {
                        spec = currentSpec;
                        break;
                    }
                } else {
                    spec = currentSpec;
                    break;
                }
            }
        }

        return spec;
    };

    /**
     * Returns height of the usable viewport in the minimal view relative to the current viewport width.
     *
     * This method will work with iOS8 only.
     *
     * @see http://stackoverflow.com/questions/26827822/how-is-the-window-innerheight-derived-of-the-minimal-view/26827842
     * @see http://stackoverflow.com/questions/26801943/how-to-get-the-window-size-of-fullscream-view-when-not-in-fullscream
     */
    scream.getMinimalViewHeight = function () {
        var height = void 0;

        var orientation = scream.getOrientation();
        var spec = scream.deviceSpec();

        if (!spec) {
            throw new Error('Not a known iOS device. If you are using an iOS device, report it to https://github.com/gajus/scream/issues/1.');
        }

        if (orientation === 'portrait') {
            height = Math.round(scream.getViewportWidth() * spec[1] / spec[0]);
        } else {
            height = Math.round(scream.getViewportWidth() * spec[3] / spec[2]);
        }

        return height;
    };

    /**
     * Returns dimensions of the usable viewport in the minimal view relative to the current viewport width and orientation.
     */
    scream.getMinimalViewSize = function () {
        var width = scream.getViewportWidth();
        var height = scream.getMinimalViewHeight();

        return {
            height: height,
            width: width
        };
    };

    /**
     * Returns padding needed to prevent content from clashing with notch
     * https://stackoverflow.com/questions/46318395/detecting-mobile-device-notch
     */
    scream.getNotchPadding = function () {
        var proceed = false;
        var div = document.createElement('div');
        if (CSS.supports('padding-left: env(safe-area-inset-left)') && CSS.supports('padding-left: env(safe-area-inset-right)')) {
            div.style.paddingLeft = 'env(safe-area-inset-left)';
            div.style.paddingRight = 'env(safe-area-inset-right)';
            proceed = true;
        } else if (CSS.supports('padding-left: constant(safe-area-inset-left)') && CSS.supports('padding-left: constant(safe-area-inset-right)')) {
            div.style.paddingLeft = 'constant(safe-area-inset-left)';
            div.style.paddingRight = 'constant(safe-area-inset-right)';
            proceed = true;
        }
        if (proceed) {
            document.body.appendChild(div);
            var paddingLeft = parseInt(window.getComputedStyle(div).paddingLeft);
            var paddingRight = parseInt(window.getComputedStyle(div).paddingRight);
            document.body.removeChild(div);
            return paddingLeft + paddingRight;
        }
        return 0;
    };

    /**
     * Returns true if screen is in "minimal" UI.
     *
     * iOS 8 has removed the minimal-ui viewport property.
     * Nevertheless, user can enter minimal-ui using touch-drag-down gesture.
     * This method is used to detect if user is in minimal-ui view.
     *
     * In case of orientation change, the state of the view can be accurately
     * determined only after orientationchangeend event.
     */
    scream.isMinimalView = function () {
        // It is enough to check the height, because the viewport is based on width.
        return window.innerHeight === scream.getMinimalViewSize().height;
    };

    /**
     * Detect when view changes from full to minimal and vice-versa.
     */
    scream.detectViewChange = function () {
        var lastView = void 0;

        // This method will only with iOS 8.
        // Overwrite the event handler to prevent an error.
        if (!scream.deviceSpec()) {
            /* eslint-disable no-console */
            console.log('View change detection has been disabled. Unrecognized device. If you are using an iOS device, report it to https://github.com/gajus/scream/issues/1.');
            /* eslint-enable */

            return function () {};
        }

        return function () {
            var currentView = scream.isMinimalView() ? 'minimal' : 'full';

            if (lastView !== currentView) {
                eventEmitter.trigger('viewchange', {
                    viewName: currentView
                });

                lastView = currentView;
            }
        };
    };

    scream.detectViewChange = scream.detectViewChange();

    scream.setupDOMEventListeners = function () {
        var isOrientationChanging = void 0;

        // Media matcher is the first to pick up the orientation change.
        window.matchMedia('(orientation: portrait)').addListener(function () {
            isOrientationChanging = true;
        });

        OCE.on('orientationchangeend', function () {
            isOrientationChanging = false;

            scream.updateViewport();
            scream.detectViewChange();

            eventEmitter.trigger('orientationchangeend');
        });

        window.addEventListener('orientationchange', function () {
            scream.updateViewport();
        });

        window.addEventListener('resize', function () {
            if (!isOrientationChanging) {
                scream.detectViewChange();
            }
        });

        // iPhone 6 plus does not trigger resize event when leaving the minimal-ui in the landscape orientation.
        window.addEventListener('scroll', function () {
            if (!isOrientationChanging) {
                scream.detectViewChange();
            }
        });

        setTimeout(function () {
            scream.detectViewChange();
        });
    };

    scream.updateViewport();
    scream.setupDOMEventListeners();

    scream.on = eventEmitter.on;
    scream.off = eventEmitter.off;

    return scream;
};

module.exports = exports['default'];
//# sourceMappingURL=scream.js.map
Package Sidebar
Install
npm i scream

Repository
github.com/gajus/scream

Homepage
github.com/gajus/scream#readme

Weekly Downloads
156

Version
2.11.1

License
BSD-3-Clause

Unpacked Size
58.4 kB

Total Files
10

Issues
1

Pull Requests
0

Last publish
3 years ago

Collaborators
gajus
Try on RunKit
Report malware
Footer
Support
Help
Advisories
Status
Contact npm
Company
About
Blog
Press
Terms & Policies
Policies
Terms of Use
Code of Conduct
Privacy