switch to picnic
Florian Schrofner
parent
7f3508a4ec
commit
323f8b484e
|
|
@ -1,3 +1,6 @@
|
|||
baseURL = "https://schro.fi/"
|
||||
languageCode = "en-us"
|
||||
title = "Florian Schrofner"
|
||||
|
||||
[markup.goldmark.renderer]
|
||||
unsafe = true
|
||||
|
|
|
|||
|
|
@ -4,12 +4,13 @@ date: 2019-08-17T15:48:34+02:00
|
|||
draft: true
|
||||
---
|
||||
|
||||
# Hi, it's me
|
||||
## Second headline
|
||||
### Third headline
|
||||
# Hi, it's me 👋
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin diam nec nulla vestibulum fermentum. Aenean ullamcorper eget metus quis auctor. Proin at quam nec diam suscipit faucibus fringilla eget lacus. Nulla sollicitudin gravida tristique. Etiam tincidunt eget libero vel iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut congue ornare laoreet. Quisque malesuada ex efficitur ultricies aliquam. Sed facilisis velit ac nisl dapibus, in ultrices nisi faucibus. Curabitur tempor luctus imperdiet. Sed facilisis rutrum sapien ut feugiat.
|
||||
|
||||
Etiam et eros neque. Donec pellentesque bibendum ipsum, at convallis nisi imperdiet sit amet. Integer varius volutpat pretium. Morbi eu eros laoreet, tristique ligula in, facilisis sapien. Vivamus vehicula laoreet nisl sit amet hendrerit. Proin congue magna a pretium rhoncus. Suspendisse eleifend nibh sit amet augue convallis, condimentum fermentum elit lacinia. Nullam laoreet condimentum metus, ac fringilla sem tincidunt sit amet. Integer sapien lacus, volutpat eget elementum a, efficitur quis nulla. Aliquam a arcu ultricies, interdum ipsum in, malesuada tellus. Integer ligula ipsum, dictum et pulvinar et, efficitur id orci. Etiam egestas tellus non elit accumsan dignissim. Proin lacinia eget felis sit amet mattis. Aliquam vestibulum imperdiet orci, vitae semper nisl. Nunc suscipit pulvinar lectus vulputate accumsan. Nunc vel est vitae tellus pulvinar malesuada.
|
||||
|
||||
Proin placerat ornare orci, id ornare lectus ultricies quis. Duis euismod tincidunt tellus, ut volutpat elit dictum feugiat. Nunc viverra enim vitae condimentum gravida. Cras sed sapien convallis, pharetra turpis sed, condimentum nunc. Integer mi dolor, faucibus vel diam nec, vulputate rutrum erat. Sed ut sem enim. Mauris blandit, massa in consectetur tincidunt, justo tortor fringilla velit, id rhoncus enim neque quis neque. Nunc porttitor arcu in risus mattis cursus.
|
||||
|
||||
<i class="fab fa-mastodon"></i>
|
||||
<i class="fab fa-strava"></i>
|
||||
|
|
|
|||
|
|
@ -5,50 +5,47 @@
|
|||
{{ partial "script_prepend.html" . }}
|
||||
</head>
|
||||
<body>
|
||||
<div class="grid-container full">
|
||||
<div class="grid-x">
|
||||
<div class="cell">
|
||||
<div class="flex twelve grow">
|
||||
<div>
|
||||
<p id="website-title">Florian Schrofner</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid-x align-center" id="picture-holder">
|
||||
<div class="flex twelve center" id="picture-holder">
|
||||
<!-- scale image for different resolutions -->
|
||||
{{ $picture := resources.Get "images/me.png"}}
|
||||
{{ $sPicture := $picture.Resize "x100" }}
|
||||
{{ $mPicture := $picture.Resize "x400" }}
|
||||
{{ $lPicture := $picture.Resize "x600" }}
|
||||
<!-- <img data-interchange="[{{$sPicture.Permalink}}, small], [{{$mPicture.Permalink}}, medium], [{{$lPicture.Permalink}}, large]"> -->
|
||||
<!-- <img data-interchange="[http://localhost:1313/images/me.png, small], [http://localhost:1313/images/me.png, medium], [http://localhost:1313/images/me.png, large]"> -->
|
||||
<img src="{{$lPicture.Permalink}}">
|
||||
<img class="half third-1200" src="{{$picture.Permalink}}">
|
||||
</div>
|
||||
|
||||
<div class="grid-x align-center beige-content-block">
|
||||
<div class="cell large-6">
|
||||
<div class="flex twelve center beige-content-block">
|
||||
<div class="four-fifth half-1200">
|
||||
{{ with .Site.GetPage "/intro" }}
|
||||
{{.Content}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid-x align-center brown-content-block">
|
||||
<div class="cell large-6">
|
||||
<div class="flex twelve center brown-content-block">
|
||||
<div class="four-fifth half-1200">
|
||||
{{ with .Site.GetPage "/section" }}
|
||||
{{.Content}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid-x align-center beige-content-block">
|
||||
<div class="cell large-6">
|
||||
<div class="flex twelve center beige-content-block">
|
||||
<div class="four-fifth half-1200">
|
||||
{{ with .Site.GetPage "/section" }}
|
||||
{{.Content}}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid-x align-center" id="footer">
|
||||
<div class="cell large-6">
|
||||
<div class="flex twelve center" id="footer">
|
||||
<div class="four-fifth half-1200">
|
||||
{{ with .Site.GetPage "/footer" }}
|
||||
{{.Content}}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{ $foundation := "foundation/css/foundation.min.css" | absURL }}
|
||||
<link rel="stylesheet" href="{{ $foundation }}">
|
||||
{{ $picnic := "picnic-css/picnic.min.css" | absURL }}
|
||||
<link rel="stylesheet" href="{{ $picnic }}">
|
||||
|
||||
<!-- convert main sass to css and add it to the html -->
|
||||
{{ $sass := resources.Get "sass/main.sass" }}
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
{{ $applyFoundation := "foundation/js/app.js" | absURL }}
|
||||
<script src="{{ $applyFoundation }}" </script>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
{{ $foundation := "foundation/js/vendor/foundation.min.js" | absURL }}
|
||||
<script src="{{ $foundation }}"></script>
|
||||
|
|
@ -1 +1 @@
|
|||
@font-face{font-family:fira sans;font-style:normal;font-weight:400;src:local("Fira Sans Regular"),local(FiraSans-Regular),url(/fonts/fira-sans/FiraSans-Regular.ttf) format("truetype")}@font-face{font-family:fira sans;font-style:normal;font-weight:700;src:local("Fira Sans Bold"),local(FiraSans-Bold),url(/fonts/fira-sans/FiraSans-Bold.ttf) format("truetype")}@font-face{font-family:fira sans medium;font-style:normal;font-weight:400;src:local("Fira Sans Medium"),local(FiraSans-Medium),url(/fonts/fira-sans/FiraSans-Medium.ttf) format("truetype")}@font-face{font-family:learning curve pro;font-style:normal;font-weight:400;src:local("Learning Curve Pro Regular"),local(LearningCurvePro-Regular),url(/fonts/learning-curve/learning_curve_regular_ot_tt.ttf) format("truetype")}@font-face{font-family:learning curve pro;font-style:normal;font-weight:700;src:local("Learning Curve Pro Bold"),local(LearningCurvePro-Bold),url(/fonts/learning-curve/learning_curve_bold_ot_tt.ttf) format("truetype")}body{font:100% fira sans,sans-serif;color:#52453f;background:#bfcecd}h1{font:300% fira sans medium,sans-serif}h2{font:250% fira sans medium,sans-serif}h3{font:200% fira sans medium,sans-serif}#website-title{font-size:4.5em;margin-top:30px;margin-left:30px;font-family:learning curve pro;font-weight:700;color:#fff}.beige-content-block{background:#f5e9e4}.brown-content-block{background:#d1c1ba}
|
||||
@font-face{font-family:fira sans;font-style:normal;font-weight:400;src:local("Fira Sans Regular"),local("FiraSans-Regular"),url(/fonts/fira-sans/FiraSans-Regular.ttf)format("truetype")}@font-face{font-family:fira sans;font-style:normal;font-weight:700;src:local("Fira Sans Bold"),local("FiraSans-Bold"),url(/fonts/fira-sans/FiraSans-Bold.ttf)format("truetype")}@font-face{font-family:fira sans medium;font-style:normal;font-weight:400;src:local("Fira Sans Medium"),local("FiraSans-Medium"),url(/fonts/fira-sans/FiraSans-Medium.ttf)format("truetype")}@font-face{font-family:learning curve pro;font-style:normal;font-weight:400;src:local("Learning Curve Pro Regular"),local("LearningCurvePro-Regular"),url(/fonts/learning-curve/learning_curve_regular_ot_tt.ttf)format("truetype")}@font-face{font-family:learning curve pro;font-style:normal;font-weight:700;src:local("Learning Curve Pro Bold"),local("LearningCurvePro-Bold"),url(/fonts/learning-curve/learning_curve_bold_ot_tt.ttf)format("truetype")}body{font:100% fira sans,sans-serif;color:#52453f;background:#bfcecd}h1{font:300% fira sans medium,sans-serif}h2{font:250% fira sans medium,sans-serif}h3{font:200% fira sans medium,sans-serif}#website-title{font-size:4.5em;margin-top:30px;margin-left:30px;font-family:learning curve pro;font-weight:700;color:#fff}.beige-content-block{background:#f5e9e4;clip-path:polygon(0 0,100% 6vw,100% calc(100% - 6vw),0 100%);position:relative;top:-6vw;margin-bottom:-6vw;padding-top:8vw;padding-bottom:8vw}.brown-content-block{background:#d1c1ba;clip-path:polygon(0 6vw,100% 0,100% 100%,0 calc(100% - 6vw));position:relative;top:-6vw;margin-bottom:-6vw;padding-top:8vw;padding-bottom:8vw}#picture-holder{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 6vw))}#footer{clip-path:polygon(0 6vw,100% 0,100% 100%,0 100%);background:#bfcecd;padding-top:6vw;text-align:center;font:100% fira sans medium,sans-serif}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -1,171 +0,0 @@
|
|||
<!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>Foundation for Sites</title>
|
||||
<link rel="stylesheet" href="css/foundation.css">
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="grid-container">
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-12 cell">
|
||||
<h1>Welcome to Foundation</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-12 cell">
|
||||
<div class="callout">
|
||||
<h3>We’re stoked you want to try Foundation! </h3>
|
||||
<p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
|
||||
<p>Once you've exhausted the fun in this document, you should check out:</p>
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-4 medium-4 cell">
|
||||
<p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
|
||||
</div>
|
||||
<div class="large-4 medium-4 cell">
|
||||
<p><a href="http://zurb.com/university/code-skills">Foundation Code Skills</a><br />These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.</p>
|
||||
</div>
|
||||
<div class="large-4 medium-4 cell">
|
||||
<p><a href="http://foundation.zurb.com/forum">Foundation Forum</a><br />Join the Foundation community to ask a question or show off your knowledge.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-4 medium-4 medium-push-2 cell">
|
||||
<p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
|
||||
</div>
|
||||
<div class="large-4 medium-4 medium-pull-2 cell">
|
||||
<p><a href="https://twitter.com/ZURBfoundation">@zurbfoundation</a><br />Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-8 medium-8 cell">
|
||||
<h5>Here’s your basic grid:</h5>
|
||||
<!-- Grid Example -->
|
||||
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-12 cell">
|
||||
<div class="primary callout">
|
||||
<p><strong>This is a twelve cell section in a grid-x.</strong> Each of these includes a div.callout element so you can see where the cell are - it's not required at all for the grid.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-6 medium-6 cell">
|
||||
<div class="primary callout">
|
||||
<p>Six cell</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-6 medium-6 cell">
|
||||
<div class="primary callout">
|
||||
<p>Six cell</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-4 medium-4 small-4 cell">
|
||||
<div class="primary callout">
|
||||
<p>Four cell</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-4 medium-4 small-4 cell">
|
||||
<div class="primary callout">
|
||||
<p>Four cell</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-4 medium-4 small-4 cell">
|
||||
<div class="primary callout">
|
||||
<p>Four cell</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<h5>We bet you’ll need a form somewhere:</h5>
|
||||
<form>
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-12 cell">
|
||||
<label>Input Label</label>
|
||||
<input type="text" placeholder="large-12.cell" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-4 medium-4 cell">
|
||||
<label>Input Label</label>
|
||||
<input type="text" placeholder="large-4.cell" />
|
||||
</div>
|
||||
<div class="large-4 medium-4 cell">
|
||||
<label>Input Label</label>
|
||||
<input type="text" placeholder="large-4.cell" />
|
||||
</div>
|
||||
<div class="large-4 medium-4 cell">
|
||||
<div class="grid-x">
|
||||
<label>Input Label</label>
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="small-9.cell" class="input-group-field" />
|
||||
<span class="input-group-label">.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-12 cell">
|
||||
<label>Select Box</label>
|
||||
<select>
|
||||
<option value="husker">Husker</option>
|
||||
<option value="starbuck">Starbuck</option>
|
||||
<option value="hotdog">Hot Dog</option>
|
||||
<option value="apollo">Apollo</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-6 medium-6 cell">
|
||||
<label>Choose Your Favorite</label>
|
||||
<input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio 1</label>
|
||||
<input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Radio 2</label>
|
||||
</div>
|
||||
<div class="large-6 medium-6 cell">
|
||||
<label>Check these out</label>
|
||||
<input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
|
||||
<input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-x grid-padding-x">
|
||||
<div class="large-12 cell">
|
||||
<label>Textarea Label</label>
|
||||
<textarea placeholder="small-12.cell"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="large-4 medium-4 cell">
|
||||
<h5>Try one of these buttons:</h5>
|
||||
<p><a href="#" class="button">Simple Button</a><br/>
|
||||
<a href="#" class="success button">Success Btn</a><br/>
|
||||
<a href="#" class="alert button">Alert Btn</a><br/>
|
||||
<a href="#" class="secondary button">Secondary Btn</a></p>
|
||||
<div class="callout">
|
||||
<h5>So many components, girl!</h5>
|
||||
<p>A whole kitchen sink of goodies comes with Foundation. Check out the docs to see them all, along with details on making them your own.</p>
|
||||
<a href="http://foundation.zurb.com/sites/docs/" class="small button">Go to Foundation Docs</a>
|
||||
</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 +0,0 @@
|
|||
$(document).foundation()
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -1,480 +0,0 @@
|
|||
/**
|
||||
* what-input - A global utility for tracking the current input method (mouse, keyboard or touch).
|
||||
* @version v5.1.2
|
||||
* @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;
|
||||
|
||||
// check for sessionStorage support
|
||||
// then 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) {}
|
||||
|
||||
// event buffer timer
|
||||
var eventTimer = null;
|
||||
|
||||
// form input types
|
||||
var formInputs = ['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'
|
||||
|
||||
// boolean: true if touch buffer is active
|
||||
};var isBuffering = false;
|
||||
|
||||
// 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) {}
|
||||
|
||||
/*
|
||||
* set up
|
||||
*/
|
||||
|
||||
var setUp = function setUp() {
|
||||
// add correct mouse wheel event mapping to `inputMap`
|
||||
inputMap[detectWheel()] = 'mouse';
|
||||
|
||||
addListeners();
|
||||
doUpdate('input');
|
||||
doUpdate('intent');
|
||||
};
|
||||
|
||||
/*
|
||||
* 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 } : false;
|
||||
|
||||
// pointer events (mouse, pen, touch)
|
||||
if (window.PointerEvent) {
|
||||
window.addEventListener('pointerdown', setInput);
|
||||
window.addEventListener('pointermove', setIntent);
|
||||
} else if (window.MSPointerEvent) {
|
||||
window.addEventListener('MSPointerDown', setInput);
|
||||
window.addEventListener('MSPointerMove', setIntent);
|
||||
} else {
|
||||
// mouse events
|
||||
window.addEventListener('mousedown', setInput);
|
||||
window.addEventListener('mousemove', setIntent);
|
||||
|
||||
// touch events
|
||||
if ('ontouchstart' in window) {
|
||||
window.addEventListener('touchstart', eventBuffer, options);
|
||||
window.addEventListener('touchend', setInput);
|
||||
}
|
||||
}
|
||||
|
||||
// mouse wheel
|
||||
window.addEventListener(detectWheel(), setIntent, options);
|
||||
|
||||
// keyboard events
|
||||
window.addEventListener('keydown', eventBuffer);
|
||||
window.addEventListener('keyup', eventBuffer);
|
||||
|
||||
// focus events
|
||||
window.addEventListener('focusin', setElement);
|
||||
window.addEventListener('focusout', clearElement);
|
||||
};
|
||||
|
||||
// checks conditions before updating new input
|
||||
var setInput = function setInput(event) {
|
||||
// only execute if the event buffer timer isn't running
|
||||
if (!isBuffering) {
|
||||
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';
|
||||
|
||||
if (currentInput !== value && shouldUpdate) {
|
||||
currentInput = value;
|
||||
|
||||
try {
|
||||
window.sessionStorage.setItem('what-input', currentInput);
|
||||
} catch (e) {}
|
||||
|
||||
doUpdate('input');
|
||||
}
|
||||
|
||||
if (currentIntent !== value && shouldUpdate) {
|
||||
// preserve intent for keyboard typing in form fields
|
||||
var activeElem = document.activeElement;
|
||||
var notFormInput = activeElem && activeElem.nodeName && formInputs.indexOf(activeElem.nodeName.toLowerCase()) === -1;
|
||||
|
||||
if (notFormInput) {
|
||||
currentIntent = value;
|
||||
|
||||
try {
|
||||
window.sessionStorage.setItem('what-intent', currentIntent);
|
||||
} catch (e) {}
|
||||
|
||||
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) {
|
||||
// test to see if `mousemove` happened relative to the screen to detect scrolling versus mousemove
|
||||
detectScrolling(event);
|
||||
|
||||
// only execute if the event buffer timer isn't running
|
||||
// or scrolling isn't happening
|
||||
if (!isBuffering && !isScrolling) {
|
||||
var value = inputMap[event.type];
|
||||
if (value === 'pointer') {
|
||||
value = pointerType(event);
|
||||
}
|
||||
|
||||
if (currentIntent !== value) {
|
||||
currentIntent = value;
|
||||
|
||||
try {
|
||||
window.sessionStorage.setItem('what-intent', currentIntent);
|
||||
} catch (e) {}
|
||||
|
||||
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');
|
||||
};
|
||||
|
||||
// buffers events that frequently also fire mouse events
|
||||
var eventBuffer = function eventBuffer(event) {
|
||||
// set the current input
|
||||
setInput(event);
|
||||
|
||||
// clear the timer if it happens to be running
|
||||
window.clearTimeout(eventTimer);
|
||||
|
||||
// set the isBuffering to `true`
|
||||
isBuffering = true;
|
||||
|
||||
// run the timer
|
||||
eventTimer = window.setTimeout(function () {
|
||||
// if the timer runs out, set isBuffering back to `false`
|
||||
isBuffering = false;
|
||||
}, 100);
|
||||
};
|
||||
|
||||
/*
|
||||
* 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;
|
||||
}
|
||||
};
|
||||
|
||||
// detect version of mouse wheel event to use
|
||||
// via https://developer.mozilla.org/en-US/docs/Web/Events/wheel
|
||||
var detectWheel = function detectWheel() {
|
||||
var wheelType = void 0;
|
||||
|
||||
// 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;
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
* 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);
|
||||
}
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
/***/ })
|
||||
/******/ ])
|
||||
});
|
||||
;
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue