Initial Commit
This commit is contained in:
commit
86031b5286
22 changed files with 19663 additions and 0 deletions
115
css/app.css
Normal file
115
css/app.css
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
.hero-section-text {
|
||||
display: block;
|
||||
color: #0a0a0a;
|
||||
text-shadow: 1px 1px 2px #fefefe;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.work-feature-block-image {
|
||||
display: block;
|
||||
margin-right: 0;
|
||||
margin-left: auto;
|
||||
max-height: 500px;
|
||||
/* width: 100%; */
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.hero-full-screen {
|
||||
padding-top: 100px;
|
||||
margin-bottom: 100px;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
body {
|
||||
background: url("../images/background.jpg") center center no-repeat;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.hero-full-screen .middle-content-section {
|
||||
/* text-align: center; */
|
||||
color: #fefefe;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-full-screen .middle-content-section {
|
||||
width: 100%;
|
||||
}
|
||||
.overview-image {
|
||||
display: none;
|
||||
}
|
||||
#main-content-section .grid-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.top-content-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-full-screen .bottom-content-section {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.hero-full-screen .bottom-content-section svg {
|
||||
height: 3.75rem;
|
||||
width: 3.75rem;
|
||||
fill: #fefefe;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.top-bar .menu {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.top-bar .menu-text {
|
||||
color: #fefefe;
|
||||
}
|
||||
|
||||
.top-bar img {
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.top-bar .menu li {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.top-bar .menu a {
|
||||
color: #fefefe;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#main-content-section .grid-container {
|
||||
margin: auto;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
/* max-width: 50%; */
|
||||
}
|
||||
#main-content-section .grid-container .grid-x {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
7753
css/foundation.css
vendored
Normal file
7753
css/foundation.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
1
css/foundation.min.css
vendored
Normal file
1
css/foundation.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
images/background.jpg
Normal file
BIN
images/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
images/overview.png
Normal file
BIN
images/overview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
BIN
images/overview.xcf
Normal file
BIN
images/overview.xcf
Normal file
Binary file not shown.
BIN
images/rocks.syng.Syng.png
Normal file
BIN
images/rocks.syng.Syng.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
images/syng.png
Normal file
BIN
images/syng.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
images/syng_advanced.png
Normal file
BIN
images/syng_advanced.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
images/syng_mobile_search.png
Normal file
BIN
images/syng_mobile_search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
BIN
images/syng_player_empty.png
Normal file
BIN
images/syng_player_empty.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
images/syng_player_next_up.png
Normal file
BIN
images/syng_player_next_up.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
BIN
images/syng_player_song.png
Normal file
BIN
images/syng_player_song.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
BIN
images/syng_web.png
Normal file
BIN
images/syng_web.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
images/syng_web2.png
Normal file
BIN
images/syng_web2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 550 KiB |
BIN
images/web-shadows.png
Normal file
BIN
images/web-shadows.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 615 KiB |
99
index.html
Normal file
99
index.html
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
|
||||
<!doctype html>
|
||||
<html class="no-js" lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Syng.Rocks</title>
|
||||
<link rel="stylesheet" href="css/foundation.css">
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="top-content-section">
|
||||
<div class="top-bar">
|
||||
<div class="top-bar-left">
|
||||
<ul class="menu">
|
||||
<li class="menu-text"><img src="images/rocks.syng.Syng.png" alt="Syng.Rocks! Logo" height=30></li>
|
||||
<li><a href="#install">Installation</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Server</a></li>
|
||||
<li><a href="#privacy">Privacy Policy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-full-screen">
|
||||
<div class="middle-content-section grid-container">
|
||||
<div class="grid-x align-middle">
|
||||
<div class="cell large-6">
|
||||
<img src="images/overview.png" alt="Syng.Rocks Overview" class="work-feature-block-image overview-image"/>
|
||||
</div>
|
||||
<div class="cell large-6">
|
||||
<div class="hero-section-text">
|
||||
<h1>Syng.Rocks!</h1>
|
||||
<h5>Easily host karaoke events</h5>
|
||||
<p>
|
||||
Syng.Rocks! is a karaoke app that allows you to host karaoke events without much hassle.
|
||||
Whether you have a big collection of karaoke songs, or just want to stream karaoke songs from YouTube, whether you want to sing with a couple of friends or with a crowd of over 100 people, Syng.Rocks! has you covered in a privacy friendly manner. No need to register, no need to log in, Syng.Rocks! will never collect any personal data from you. You can even host your own server if you want to.
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://flathub.org/apps/rocks.syng.Syng" target="_blank" class="button">Linux/Flatpak</a>
|
||||
<a href="https://github.com/christofsteel/syng/releases" target="_blank" class="button">Windows</a>
|
||||
<a href="https://syng.rocks" target="_blank" class="button hollow">Web Client</a>
|
||||
<a href="https://github.com/christofsteel/syng" target="_blank" class="button hollow">Source Code</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="main-content-section">
|
||||
<div class="grid-container">
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="cell medium-4">
|
||||
<h2>Get started</h2>
|
||||
<p>
|
||||
If you only want to have a small YouTube based karaoke event, you can just download the app, share the generated QR Code and start singing. No registration, no login and no configuration required.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cell medium-8">
|
||||
<img src="images/syng.png" alt="Syng.Rocks Client" class="work-feature-block-image"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="cell medium-8">
|
||||
<img src="images/web-shadows.png" alt="Syng.Rocks Web Client" class="work-feature-block-image"/>
|
||||
</div>
|
||||
<div class="cell medium-4">
|
||||
<h2>Web client</h2>
|
||||
<p>
|
||||
Let your guests join your karaoke event using the web client. They can use their browser on their own devices to search for songs and queue them up.
|
||||
The web client also contains an admin mode, that allows for manual moderation of the song queue.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="cell medium-4">
|
||||
<h2>Configure to your needs</h2>
|
||||
<p>
|
||||
Syng allows for a lot of configuration options. You can set up your own song database, you can set up a <a href="#waiting-room">waiting room</a>, a set time the event ends and much more.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cell medium-8">
|
||||
<img src="./images/syng_advanced.png" alt="Syng.Rocks Client" class="work-feature-block-image"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/vendor/jquery.js"></script>
|
||||
<script src="js/vendor/what-input.js"></script>
|
||||
<script src="js/vendor/foundation.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1
js/app.js
Normal file
1
js/app.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
$(document).foundation()
|
||||
460
js/vendor/foundation.js
vendored
Normal file
460
js/vendor/foundation.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
js/vendor/foundation.min.js
vendored
Normal file
1
js/vendor/foundation.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
10716
js/vendor/jquery.js
vendored
Normal file
10716
js/vendor/jquery.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
517
js/vendor/what-input.js
vendored
Normal file
517
js/vendor/what-input.js
vendored
Normal file
|
|
@ -0,0 +1,517 @@
|
|||
/**
|
||||
* what-input - A global utility for tracking the current input method (mouse, keyboard or touch).
|
||||
* @version v5.2.12
|
||||
* @link https://github.com/ten1seven/what-input
|
||||
* @license MIT
|
||||
*/
|
||||
(function webpackUniversalModuleDefinition(root, factory) {
|
||||
if(typeof exports === 'object' && typeof module === 'object')
|
||||
module.exports = factory();
|
||||
else if(typeof define === 'function' && define.amd)
|
||||
define("whatInput", [], factory);
|
||||
else if(typeof exports === 'object')
|
||||
exports["whatInput"] = factory();
|
||||
else
|
||||
root["whatInput"] = factory();
|
||||
})(this, function() {
|
||||
return /******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId])
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ exports: {},
|
||||
/******/ id: moduleId,
|
||||
/******/ loaded: false
|
||||
/******/ };
|
||||
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.loaded = true;
|
||||
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
|
||||
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "";
|
||||
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(0);
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ([
|
||||
/* 0 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = function () {
|
||||
/*
|
||||
* bail out if there is no document or window
|
||||
* (i.e. in a node/non-DOM environment)
|
||||
*
|
||||
* Return a stubbed API instead
|
||||
*/
|
||||
if (typeof document === 'undefined' || typeof window === 'undefined') {
|
||||
return {
|
||||
// always return "initial" because no interaction will ever be detected
|
||||
ask: function ask() {
|
||||
return 'initial';
|
||||
},
|
||||
|
||||
// always return null
|
||||
element: function element() {
|
||||
return null;
|
||||
},
|
||||
|
||||
// no-op
|
||||
ignoreKeys: function ignoreKeys() {},
|
||||
|
||||
// no-op
|
||||
specificKeys: function specificKeys() {},
|
||||
|
||||
// no-op
|
||||
registerOnChange: function registerOnChange() {},
|
||||
|
||||
// no-op
|
||||
unRegisterOnChange: function unRegisterOnChange() {}
|
||||
};
|
||||
}
|
||||
|
||||
/*
|
||||
* variables
|
||||
*/
|
||||
|
||||
// cache document.documentElement
|
||||
var docElem = document.documentElement;
|
||||
|
||||
// currently focused dom element
|
||||
var currentElement = null;
|
||||
|
||||
// last used input type
|
||||
var currentInput = 'initial';
|
||||
|
||||
// last used input intent
|
||||
var currentIntent = currentInput;
|
||||
|
||||
// UNIX timestamp of current event
|
||||
var currentTimestamp = Date.now();
|
||||
|
||||
// check for a `data-whatpersist` attribute on either the `html` or `body` elements, defaults to `true`
|
||||
var shouldPersist = false;
|
||||
|
||||
// form input types
|
||||
var formInputs = ['button', 'input', 'select', 'textarea'];
|
||||
|
||||
// empty array for holding callback functions
|
||||
var functionList = [];
|
||||
|
||||
// list of modifier keys commonly used with the mouse and
|
||||
// can be safely ignored to prevent false keyboard detection
|
||||
var ignoreMap = [16, // shift
|
||||
17, // control
|
||||
18, // alt
|
||||
91, // Windows key / left Apple cmd
|
||||
93 // Windows menu / right Apple cmd
|
||||
];
|
||||
|
||||
var specificMap = [];
|
||||
|
||||
// mapping of events to input types
|
||||
var inputMap = {
|
||||
keydown: 'keyboard',
|
||||
keyup: 'keyboard',
|
||||
mousedown: 'mouse',
|
||||
mousemove: 'mouse',
|
||||
MSPointerDown: 'pointer',
|
||||
MSPointerMove: 'pointer',
|
||||
pointerdown: 'pointer',
|
||||
pointermove: 'pointer',
|
||||
touchstart: 'touch',
|
||||
touchend: 'touch'
|
||||
|
||||
// boolean: true if the page is being scrolled
|
||||
};var isScrolling = false;
|
||||
|
||||
// store current mouse position
|
||||
var mousePos = {
|
||||
x: null,
|
||||
y: null
|
||||
|
||||
// map of IE 10 pointer events
|
||||
};var pointerMap = {
|
||||
2: 'touch',
|
||||
3: 'touch', // treat pen like touch
|
||||
4: 'mouse'
|
||||
|
||||
// check support for passive event listeners
|
||||
};var supportsPassive = false;
|
||||
|
||||
try {
|
||||
var opts = Object.defineProperty({}, 'passive', {
|
||||
get: function get() {
|
||||
supportsPassive = true;
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('test', null, opts);
|
||||
} catch (e) {}
|
||||
// fail silently
|
||||
|
||||
|
||||
/*
|
||||
* set up
|
||||
*/
|
||||
|
||||
var setUp = function setUp() {
|
||||
// add correct mouse wheel event mapping to `inputMap`
|
||||
inputMap[detectWheel()] = 'mouse';
|
||||
|
||||
addListeners();
|
||||
};
|
||||
|
||||
/*
|
||||
* events
|
||||
*/
|
||||
|
||||
var addListeners = function addListeners() {
|
||||
// `pointermove`, `MSPointerMove`, `mousemove` and mouse wheel event binding
|
||||
// can only demonstrate potential, but not actual, interaction
|
||||
// and are treated separately
|
||||
var options = supportsPassive ? { passive: true, capture: true } : true;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', setPersist, true);
|
||||
|
||||
// pointer events (mouse, pen, touch)
|
||||
if (window.PointerEvent) {
|
||||
window.addEventListener('pointerdown', setInput, true);
|
||||
window.addEventListener('pointermove', setIntent, true);
|
||||
} else if (window.MSPointerEvent) {
|
||||
window.addEventListener('MSPointerDown', setInput, true);
|
||||
window.addEventListener('MSPointerMove', setIntent, true);
|
||||
} else {
|
||||
// mouse events
|
||||
window.addEventListener('mousedown', setInput, true);
|
||||
window.addEventListener('mousemove', setIntent, true);
|
||||
|
||||
// touch events
|
||||
if ('ontouchstart' in window) {
|
||||
window.addEventListener('touchstart', setInput, options);
|
||||
window.addEventListener('touchend', setInput, true);
|
||||
}
|
||||
}
|
||||
|
||||
// mouse wheel
|
||||
window.addEventListener(detectWheel(), setIntent, options);
|
||||
|
||||
// keyboard events
|
||||
window.addEventListener('keydown', setInput, true);
|
||||
window.addEventListener('keyup', setInput, true);
|
||||
|
||||
// focus events
|
||||
window.addEventListener('focusin', setElement, true);
|
||||
window.addEventListener('focusout', clearElement, true);
|
||||
};
|
||||
|
||||
// checks if input persistence should happen and
|
||||
// get saved state from session storage if true (defaults to `false`)
|
||||
var setPersist = function setPersist() {
|
||||
shouldPersist = !(docElem.getAttribute('data-whatpersist') === 'false' || document.body.getAttribute('data-whatpersist') === 'false');
|
||||
|
||||
if (shouldPersist) {
|
||||
// check for session variables and use if available
|
||||
try {
|
||||
if (window.sessionStorage.getItem('what-input')) {
|
||||
currentInput = window.sessionStorage.getItem('what-input');
|
||||
}
|
||||
|
||||
if (window.sessionStorage.getItem('what-intent')) {
|
||||
currentIntent = window.sessionStorage.getItem('what-intent');
|
||||
}
|
||||
} catch (e) {
|
||||
// fail silently
|
||||
}
|
||||
}
|
||||
|
||||
// always run these so at least `initial` state is set
|
||||
doUpdate('input');
|
||||
doUpdate('intent');
|
||||
};
|
||||
|
||||
// checks conditions before updating new input
|
||||
var setInput = function setInput(event) {
|
||||
var eventKey = event.which;
|
||||
var value = inputMap[event.type];
|
||||
|
||||
if (value === 'pointer') {
|
||||
value = pointerType(event);
|
||||
}
|
||||
|
||||
var ignoreMatch = !specificMap.length && ignoreMap.indexOf(eventKey) === -1;
|
||||
|
||||
var specificMatch = specificMap.length && specificMap.indexOf(eventKey) !== -1;
|
||||
|
||||
var shouldUpdate = value === 'keyboard' && eventKey && (ignoreMatch || specificMatch) || value === 'mouse' || value === 'touch';
|
||||
|
||||
// prevent touch detection from being overridden by event execution order
|
||||
if (validateTouch(value)) {
|
||||
shouldUpdate = false;
|
||||
}
|
||||
|
||||
if (shouldUpdate && currentInput !== value) {
|
||||
currentInput = value;
|
||||
|
||||
persistInput('input', currentInput);
|
||||
doUpdate('input');
|
||||
}
|
||||
|
||||
if (shouldUpdate && currentIntent !== value) {
|
||||
// preserve intent for keyboard interaction with form fields
|
||||
var activeElem = document.activeElement;
|
||||
var notFormInput = activeElem && activeElem.nodeName && (formInputs.indexOf(activeElem.nodeName.toLowerCase()) === -1 || activeElem.nodeName.toLowerCase() === 'button' && !checkClosest(activeElem, 'form'));
|
||||
|
||||
if (notFormInput) {
|
||||
currentIntent = value;
|
||||
|
||||
persistInput('intent', currentIntent);
|
||||
doUpdate('intent');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// updates the doc and `inputTypes` array with new input
|
||||
var doUpdate = function doUpdate(which) {
|
||||
docElem.setAttribute('data-what' + which, which === 'input' ? currentInput : currentIntent);
|
||||
|
||||
fireFunctions(which);
|
||||
};
|
||||
|
||||
// updates input intent for `mousemove` and `pointermove`
|
||||
var setIntent = function setIntent(event) {
|
||||
var value = inputMap[event.type];
|
||||
|
||||
if (value === 'pointer') {
|
||||
value = pointerType(event);
|
||||
}
|
||||
|
||||
// test to see if `mousemove` happened relative to the screen to detect scrolling versus mousemove
|
||||
detectScrolling(event);
|
||||
|
||||
// only execute if scrolling isn't happening
|
||||
if ((!isScrolling && !validateTouch(value) || isScrolling && event.type === 'wheel' || event.type === 'mousewheel' || event.type === 'DOMMouseScroll') && currentIntent !== value) {
|
||||
currentIntent = value;
|
||||
|
||||
persistInput('intent', currentIntent);
|
||||
doUpdate('intent');
|
||||
}
|
||||
};
|
||||
|
||||
var setElement = function setElement(event) {
|
||||
if (!event.target.nodeName) {
|
||||
// If nodeName is undefined, clear the element
|
||||
// This can happen if click inside an <svg> element.
|
||||
clearElement();
|
||||
return;
|
||||
}
|
||||
|
||||
currentElement = event.target.nodeName.toLowerCase();
|
||||
docElem.setAttribute('data-whatelement', currentElement);
|
||||
|
||||
if (event.target.classList && event.target.classList.length) {
|
||||
docElem.setAttribute('data-whatclasses', event.target.classList.toString().replace(' ', ','));
|
||||
}
|
||||
};
|
||||
|
||||
var clearElement = function clearElement() {
|
||||
currentElement = null;
|
||||
|
||||
docElem.removeAttribute('data-whatelement');
|
||||
docElem.removeAttribute('data-whatclasses');
|
||||
};
|
||||
|
||||
var persistInput = function persistInput(which, value) {
|
||||
if (shouldPersist) {
|
||||
try {
|
||||
window.sessionStorage.setItem('what-' + which, value);
|
||||
} catch (e) {
|
||||
// fail silently
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
* utilities
|
||||
*/
|
||||
|
||||
var pointerType = function pointerType(event) {
|
||||
if (typeof event.pointerType === 'number') {
|
||||
return pointerMap[event.pointerType];
|
||||
} else {
|
||||
// treat pen like touch
|
||||
return event.pointerType === 'pen' ? 'touch' : event.pointerType;
|
||||
}
|
||||
};
|
||||
|
||||
// prevent touch detection from being overridden by event execution order
|
||||
var validateTouch = function validateTouch(value) {
|
||||
var timestamp = Date.now();
|
||||
|
||||
var touchIsValid = value === 'mouse' && currentInput === 'touch' && timestamp - currentTimestamp < 200;
|
||||
|
||||
currentTimestamp = timestamp;
|
||||
|
||||
return touchIsValid;
|
||||
};
|
||||
|
||||
// detect version of mouse wheel event to use
|
||||
// via https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event
|
||||
var detectWheel = function detectWheel() {
|
||||
var wheelType = null;
|
||||
|
||||
// Modern browsers support "wheel"
|
||||
if ('onwheel' in document.createElement('div')) {
|
||||
wheelType = 'wheel';
|
||||
} else {
|
||||
// Webkit and IE support at least "mousewheel"
|
||||
// or assume that remaining browsers are older Firefox
|
||||
wheelType = document.onmousewheel !== undefined ? 'mousewheel' : 'DOMMouseScroll';
|
||||
}
|
||||
|
||||
return wheelType;
|
||||
};
|
||||
|
||||
// runs callback functions
|
||||
var fireFunctions = function fireFunctions(type) {
|
||||
for (var i = 0, len = functionList.length; i < len; i++) {
|
||||
if (functionList[i].type === type) {
|
||||
functionList[i].fn.call(undefined, type === 'input' ? currentInput : currentIntent);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// finds matching element in an object
|
||||
var objPos = function objPos(match) {
|
||||
for (var i = 0, len = functionList.length; i < len; i++) {
|
||||
if (functionList[i].fn === match) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var detectScrolling = function detectScrolling(event) {
|
||||
if (mousePos.x !== event.screenX || mousePos.y !== event.screenY) {
|
||||
isScrolling = false;
|
||||
|
||||
mousePos.x = event.screenX;
|
||||
mousePos.y = event.screenY;
|
||||
} else {
|
||||
isScrolling = true;
|
||||
}
|
||||
};
|
||||
|
||||
// manual version of `closest()`
|
||||
var checkClosest = function checkClosest(elem, tag) {
|
||||
var ElementPrototype = window.Element.prototype;
|
||||
|
||||
if (!ElementPrototype.matches) {
|
||||
ElementPrototype.matches = ElementPrototype.msMatchesSelector || ElementPrototype.webkitMatchesSelector;
|
||||
}
|
||||
|
||||
if (!ElementPrototype.closest) {
|
||||
do {
|
||||
if (elem.matches(tag)) {
|
||||
return elem;
|
||||
}
|
||||
|
||||
elem = elem.parentElement || elem.parentNode;
|
||||
} while (elem !== null && elem.nodeType === 1);
|
||||
|
||||
return null;
|
||||
} else {
|
||||
return elem.closest(tag);
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
* init
|
||||
*/
|
||||
|
||||
// don't start script unless browser cuts the mustard
|
||||
// (also passes if polyfills are used)
|
||||
if ('addEventListener' in window && Array.prototype.indexOf) {
|
||||
setUp();
|
||||
}
|
||||
|
||||
/*
|
||||
* api
|
||||
*/
|
||||
|
||||
return {
|
||||
// returns string: the current input type
|
||||
// opt: 'intent'|'input'
|
||||
// 'input' (default): returns the same value as the `data-whatinput` attribute
|
||||
// 'intent': includes `data-whatintent` value if it's different than `data-whatinput`
|
||||
ask: function ask(opt) {
|
||||
return opt === 'intent' ? currentIntent : currentInput;
|
||||
},
|
||||
|
||||
// returns string: the currently focused element or null
|
||||
element: function element() {
|
||||
return currentElement;
|
||||
},
|
||||
|
||||
// overwrites ignored keys with provided array
|
||||
ignoreKeys: function ignoreKeys(arr) {
|
||||
ignoreMap = arr;
|
||||
},
|
||||
|
||||
// overwrites specific char keys to update on
|
||||
specificKeys: function specificKeys(arr) {
|
||||
specificMap = arr;
|
||||
},
|
||||
|
||||
// attach functions to input and intent "events"
|
||||
// funct: function to fire on change
|
||||
// eventType: 'input'|'intent'
|
||||
registerOnChange: function registerOnChange(fn, eventType) {
|
||||
functionList.push({
|
||||
fn: fn,
|
||||
type: eventType || 'input'
|
||||
});
|
||||
},
|
||||
|
||||
unRegisterOnChange: function unRegisterOnChange(fn) {
|
||||
var position = objPos(fn);
|
||||
|
||||
if (position || position === 0) {
|
||||
functionList.splice(position, 1);
|
||||
}
|
||||
},
|
||||
|
||||
clearStorage: function clearStorage() {
|
||||
window.sessionStorage.clear();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
/***/ })
|
||||
/******/ ])
|
||||
});
|
||||
;
|
||||
Loading…
Add table
Reference in a new issue