README
Use cases
- Predefined scroll events
- Client side internationalization support
- Viewport is on top position detection
- Triggering media-query change events
- Handling page load animation
- Section switching transitions
- Simple section detection via url hashes
- Handle google tracking.
Content
[TOC]
Installation
Classical dom injection
You can simply download the compiled version as zip file here and inject it after needed dependencies:
#!HTML
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--TODO load genericStyle from "http://git@github.com/thaibault/genericStyle.git"-->
<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
<script src="http://torben.website/clientNode/data/distributionBundle/index.compiled.js"></script>
<script src="http://torben.website/language/data/distributionBundle/index.compiled.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
<!--Inject downloaded file:-->
<script src="/index.compiled.js"></script>
<!--Or integrate via cdn:
<script src="http://torben.website/websiteUtilities/data/distributionBundle/index.compiled.js"></script>
-->
The compiled bundle supports AMD, commonjs, commonjs2 and variable injection into given context (UMD) as export format: You can use a module bundler if you want.
Package managed and module bundled
If you are using npm as package manager you can simply add this tool to your package.json as dependency:
#!JSON
...
"dependencies": {
...
"websiteUtilities": "latest",
...
},
...
After updating your packages you can simply depend on this script and let a module bundler do the hard stuff or access it via a exported variable name into given context.
#!JavaScript
...
$ = require('websiteUtilities')
...
$.Website().isEquivalentDom('<div>', '<script>') // false
...
Usage
Here you can see the initialisation with all available plugin options:
#!HTML
<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
<script src="http://torben.website/clientNode/data/distributionBundle/index.compiled.js"></script>
<script src="http://torben.website/websiteUtilities/data/distributionBundle/index.compiled.js"></script>
<script>
$(($) => $.Website({
activateLanguageSupport: true,
additionalPageLoadingTimeInMilliseconds: 0,
domain: 'auto',
domNode: {
mediaQueryIndicator: '<div class="media-query-indicator">',
top: '> div.navbar-wrapper',
scrollToTopButton: 'a[href="#top"]',
startUpAnimationClassPrefix:
'.website-start-up-animation-number-',
windowLoadingCover: 'div.website-window-loading-cover',
windowLoadingSpinner: 'div.website-window-loading-cover > div'
},
domNodeSelectorPrefix: 'body.{1}',
knownScrollEventNames:
'scroll mousedown wheel DOMMouseScroll mousewheel keyup ' +
'touchmove',
language: {},
mediaQueryClassNameIndicator: [
['extraSmall', 'xs'], ['small', 'sm'], ['medium', 'md'],
['large', 'lg']
],
onViewportMovesToTop: $.noop(),
onViewportMovesAwayFromTop: $.noop(),
onChangeToLargeMode: $.noop(),
onChangeToMediumMode: $.noop(),
onChangeToSmallMode: $.noop(),
onChangeToExtraSmallMode: $.noop(),
onChangeMediaQueryMode: $.noop(),
onSwitchSection: $.noop(),
onStartUpAnimationComplete: $.noop(),
startUpAnimationElementDelayInMiliseconds: 100,
startUpShowAnimation: [{opacity: 1}, {}],
startUpHide: {opacity: 0},
switchToManualScrollingIndicator: (event:Object):boolean => (
event.which > 0 || event.type === 'mousedown' ||
event.type === 'mousewheel' || event.type === 'touchmove'),
scrollToTop: {
inLinearTime: true,
options: {duration: 'normal'},
button: {
slideDistanceInPixel: 30,
showAnimation: {duration: 'normal'},
hideAnimation: {duration: 'normal'}
}
},
trackingCode: null,
windowLoadingCoverHideAnimation: [{opacity: 0}, {}],
windowLoadingSpinner: {
lines: 9, // The number of lines to draw
length: 23, // The length of each line
width: 11, // The line thickness
radius: 40, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 75, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1.1, // Rounds per second
trail: 58, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
},
windowLoadedTimeoutAfterDocumentLoadedInMilliseconds: 3000
}))
</script>