A collection of DOM utils to add syntactic sugar and supplement jQuery.
\n\nThis is not an (ES5) browser package. It's an ES6 source module designed to be 'imported' into a javascript project that's transpiled using babel & webpack.
\n\n\n\nready().then(...) - deferred document ready.loaded().then(...) - deferred window loaded.$cache() - providing $(window), $(document), and $('body').isInIframe() - is our code running inside an iframe?isTouchDevice()isMobile()isVisible(element) - whether element is visible in the viewport or scrolled out of view.getViewportOffset(element) - top, right, bottom, left offsets from viewport.onTopZIndex() - for new elements to be displayed on top.getZIndex(element) - provides layer information.getAppliedStyle(element, style) - computed style.webpSupport() - whether the browser supports webP images.screenResolution() - returns 'lo', 'med' or 'hi' (to support a responsive image system).hash(content) - fast hash code generator.scrollTo(elementOrSelector) - an easier, more flexible alternative to element.scrollIntoView().import { ready } from '@aamasri/dom-utils';\n\nready().then(function() { \n alert('Your browser is ready to run scripts...');\n});\n\n\n\nimport { loaded } from '@aamasri/dom-utils';\n\nloaded().then(function() {\n domUtils.loaded().then(function() { \n alert('Your browser has finished loading (including images)...');\n });\n});\n\n\n\nimport { $cache } from '@aamasri/dom-utils';\n\nlet windowWidth = $cache().$window.width();\n\n\n\n\nimport { isInIframe } from '@aamasri/dom-utils';\n\nif (isInIframe) {\n parent.showMessage('I'm executing a parent window function');\n} else {\n alert('This is in the iframe');\n}\n\n\n\n\nReturns the top, right, bottom, left offsets of the element (relative to the viewport).
\nFor example, a negative offset means that the element is scrolled out of view.
\nThis function is also useful in positioning another element relative to the specified element.
\n\nimport { getViewportOffset } from '@aamasri/dom-utils';\n\nconst target = window.getElementById('submitButton');\nconst targetOffsets = getViewportOffset(target); // target can be a DOM element or jQuery object\n\nif (targetOffsets.top < 0 || targetOffsets.bottom < 0) {\n target.scrollIntoView();\n}\n\n\n\nReturns the top, right, bottom, left offsets of the element (relative to the document).
\nFor example, a negative offset means that the element is scrolled out of view.
\nThis function is also useful in positioning another element relative to the specified element.
\n\nimport { getViewportOffset } from '@aamasri/dom-utils';\n\nconst target = window.getElementById('submitButton');\nconst targetOffsets = getViewportOffset(target); // target can be a DOM element or jQuery object\n\nif (targetOffsets.top < 0 || targetOffsets.bottom < 0) {\n target.scrollIntoView();\n}\n\n\n\n\nReturns the highest z-index value on the page.
\nThis is useful for popup dialog boxes (or notifications) that need to display on-top of everything else already on the page.
\n\nimport { onTopZIndex } from '@aamasri/dom-utils';\n\n$dialog.css({ 'position', 'absolute', 'z-index', onTopZIndex() + 1 }); // position dialog box on top\n\n\n\n\nGets the z-index style applied to an element.
\nMore usefully (because parent z-index affects descendants), set the recursive option true for the effective z-index (ie. the element's ancestry).
\n\nimport { getZIndex } from '@aamasri/dom-utils';\n\nconst dialogLayer = getZIndex(dialog, true);\n\n\n\n\nSlightly easier to use than the native window.getComputedStyle() function.
\n\nimport { getAppliedStyle } from '@aamasri/dom-utils';\n\nconst buttonVisible = getAppliedStyle(button, 'display') !== 'none';\n\n\n\n\n\n\nAs of 2021 full browser support for webp images is ~95%. Nevertheless, with Safari only recently offering full\nsupport and considering many older IOS devices (which simply can't be upgraded), this function will probably be useful \nthrough 2024.
\n\nThis function checks for specific feature support (alpha by default) because some browsers added features incrementally\nwith lossy image support added first, followed by lossless & alpha, and finally support for animated images.\n\n\nimport { webpSupport } from '@aamasri/dom-utils';\n\n// eg. check for full webp support including animation\nwebpSupport('animation').then(msg => {\n window.browserInfo.webpSupport = true;\n console.log(msg);\n}).catch(errorMessage => {\n window.browserInfo.webpSupport = false;\n console.info(errorMessage);\n stripWebp(); // remove unsupported responsive webp images from srcset\n});\n\n\n\n\n\n\nPart of a system to determine the optimal image resolution for a given device.
\nReturns 'lo', 'med' or 'hi' based on the size of the browser viewport.
\n\nimport { screenResolution } from '@aamasri/dom-utils';\n\nconst resolution = screenResolution();\nwallpaper.src = \\`/img/wallpaper-${resolution}.jpg\\`;\n\n\n\n\n\n\nA simple, fast (faster than md5 etc) hash code generator.
\n\nimport { hash } from '@aamasri/dom-utils';\n\nconst initialContent = $input.val();\nconst initialContentSignature = hash(initialContent);\n\n$input.on('change', function() {\n const newContent = $input.val();\n const newContentSignature = hash(newContent);\n\n if (newContentSignature !== initialContentSignature)\n alert('the input value changed');\n});\n\n\n\n\n\n An alternative to element.scrollIntoView()
\n 1. It handles selectors and Elements
\n 2. It's svelte friendly, handling components that are still rendering
import { scrollTo } from '@aamasri/dom-utils';\n\nscrollTo('.user-profile-{userId}}');\n\n\n\n\n\n$ cd to/your/project\n$ npm install @aamasri/dom-utils --save-dev\n\nThen import and use it in your project's ES6 modules:\n
\nimport { ready, loaded, isVisible } from '@aamasri/dom-utils';\n\nready().then(function() {\n alert('Your browser is ready to run scripts...')\n});\n\n\n\nimport(/* webpackChunkName: \"dom-utils\" */ '@aamasri/dom-utils').then((domUtils) => {\n domUtils.loaded().then(function() { \n alert('Your browser has finished loading (including images)...')\n });\n});\n\n\n\ngit commit -a -m \"Release version x.x.x - description\"
git tag x.x.x
git tag -f latest\ngit push origin master :refs/tags/latest\ngit push origin master --tags\n
npm publish