From 2c75621526dc479585d44eb41369478e27610d61 Mon Sep 17 00:00:00 2001 From: carson Date: Sat, 9 May 2020 19:51:30 -0700 Subject: [PATCH] Documentation update, make `kt-indicator` usable out of the box, standardize class names --- dist/kutty.js | 12 ++- dist/kutty.min.js | 2 +- dist/kutty.min.js.gz | Bin 4861 -> 4947 bytes src/kutty.js | 14 ++- test/browser-only.html | 2 +- test/index.html | 2 +- test/scratch.html | 2 +- www/_includes/demo_ui.html.liquid | 23 ++++- www/_includes/layout.njk | 12 +-- www/attributes.md | 29 ------- www/attributes/kt-indicator.md | 79 +++++++++++++++-- www/events.md | 31 ------- www/{patterns.md => examples.md} | 2 +- www/{patterns => examples}/click-to-edit.md | 0 www/headers.md | 26 ------ www/img/bars.svg | 52 ++++++++++++ www/js/kutty.js | 16 +++- www/reference.md | 89 ++++++++++++++++++++ 18 files changed, 273 insertions(+), 120 deletions(-) delete mode 100644 www/attributes.md delete mode 100644 www/events.md rename www/{patterns.md => examples.md} (81%) rename www/{patterns => examples}/click-to-edit.md (100%) delete mode 100644 www/headers.md create mode 100644 www/img/bars.svg create mode 100644 www/reference.md diff --git a/dist/kutty.js b/dist/kutty.js index b0b03e30..6a263698 100644 --- a/dist/kutty.js +++ b/dist/kutty.js @@ -642,7 +642,7 @@ var kutty = kutty || (function () { // History Support //==================================================================== function getHistoryElement() { - var historyElt = getDocument().querySelector('.kt-history-elt'); + var historyElt = getDocument().querySelector('.kutty-history-elt'); return historyElt || getDocument().body; } @@ -697,7 +697,7 @@ var kutty = kutty || (function () { triggerEvent(getDocument().body, "historyCacheMissLoad.kutty", {path: pathAndSearch}); if (this.status >= 200 && this.status < 400) { var fragment = makeFragment(this.response); - fragment = fragment.querySelector('.kt-history-elt') || fragment; + fragment = fragment.querySelector('.kutty-history-elt') || fragment; settleImmediately(swapInnerHTML(getHistoryElement(), fragment)); } }; @@ -736,7 +736,7 @@ var kutty = kutty || (function () { indicators = [elt]; } forEach(indicators, function(ic) { - ic.classList[action].call(ic.classList, "kutty-show-indicator"); + ic.classList[action].call(ic.classList, "kutty-request"); }); } @@ -1055,6 +1055,12 @@ var kutty = kutty || (function () { } } + // insert kutty-indicator css rules + var sheet = getDocument().styleSheets[0]; + sheet.insertRule(".kutty-indicator{opacity:0;transition: opacity 500ms ease-in;}\n" + + ".kutty-request .kutty-indicator{opacity:1}\n" + + ".kutty-request.kutty-indicator{opacity:1}\n", sheet.cssRules.length); + // initialize the document ready(function () { var body = getDocument().body; diff --git a/dist/kutty.min.js b/dist/kutty.min.js index e73235d8..ba9edb44 100644 --- a/dist/kutty.min.js +++ b/dist/kutty.min.js @@ -1 +1 @@ -var kutty=kutty||function(){"use strict";var e=["get","post","put","delete","patch"];function g(e){if(e==="null"||e==="false"||e===""){return null}else if(e.lastIndexOf("ms")===e.length-2){return parseFloat(e.substr(0,e.length-2))}else if(e.lastIndexOf("s")===e.length-1){return parseFloat(e.substr(0,e.length-1))*1e3}else{return parseFloat(e)}}function u(e,t){return e.getAttribute&&e.getAttribute(t)}function o(e,t){return u(e,t)||u(e,"data-"+t)}function a(e){return e.parentElement}function s(){return document}function l(e,t){if(t(e)){return e}else if(a(e)){return l(a(e),t)}else{return null}}function h(e,t){var r=null;l(e,function(e){return r=u(e,t)});return r}function f(e,t){return e!=null&&(e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector).call(e,t)}function c(e,t){do{if(e==null||f(e,t))return e}while(e=e&&a(e))}function v(e){var t=new DOMParser;var r=t.parseFromString(e,"text/html");return r.body}function t(e,t){return Object.prototype.toString.call(e)==="[object "+t+"]"}function d(e){return t(e,"Function")}function p(e){return t(e,"Object")}function y(e){var t="kutty-internal-data";var r=e[t];if(!r){r=e[t]={}}return r}function m(e,t){if(e){for(var r=0;r=0}function k(e){return s().body.contains(e)}function b(e,t){return e.concat(t)}function w(e){return e.split(/\s+/)}function S(e){var t=l(e,function(e){return u(e,"kt-target")!==null});if(t){var r=u(t,"kt-target");if(r==="this"){return t}else{return s().querySelector(r)}}else{var n=y(e);if(n.boosted){return s().body}else{return e}}}function E(t,r){m(t.attributes,function(e){if(!r.hasAttribute(e.name)){t.removeAttribute(e.name)}});m(r.attributes,function(e){t.setAttribute(e.name,e.value)})}function O(e){var n=[];m(e.children,function(e){if(o(e,"kt-swap-oob")==="true"){var t=s().getElementById(e.id);if(t){var r=s().createDocumentFragment();r.appendChild(e);n=n.concat(T(t,r))}else{e.parentNode.removeChild(e);$(s().body,"oobErrorNoTarget.kutty",{id:e.id,content:e})}}});return n}function L(n,e){var i=[];m(e.querySelectorAll("[id]"),function(e){var t=n.querySelector(e.tagName+"[id="+e.id+"]");if(t){var r=e.cloneNode();E(e,t);i.push(function(){E(e,r)})}});return i}function i(e,t,r){var n=L(e,r);while(r.childNodes.length>0){var i=r.firstChild;e.insertBefore(i,t);if(i.nodeType!==Node.TEXT_NODE){$(i,"load.kutty",{elt:i,parent:a(i)});Y(i)}}return n}function T(e,t){if(e.tagName==="BODY"){return q(e,t)}else{var r=i(a(e),e,t);a(e).removeChild(e);return r}}function C(e,t){return i(e,e.firstChild,t)}function x(e,t){return i(a(e),e,t)}function A(e,t){return i(e,null,t)}function N(e,t){return i(a(e),e.nextSibling,t)}function q(e,t){var r=e.firstChild;var n=i(e,r,t);if(r){while(r.nextSibling){e.removeChild(r.nextSibling)}e.removeChild(r)}return n}function I(e,t){var r=h(e,"kt-select");if(r){var n=s().createDocumentFragment();m(t.querySelectorAll(r),function(e){n.appendChild(e)});t=n}return t}function M(e,t,r,n){var i=v(n);if(i){var a=O(i);i=I(r,i);switch(e){case"outerHTML":return b(a,T(t,i));case"afterbegin":return b(a,C(t,i));case"beforebegin":return b(a,x(t,i));case"beforeend":return b(a,A(t,i));case"afterend":return b(a,N(t,i));default:return b(a,q(t,i))}}}function D(e,t){if(t){if(t.indexOf("{")===0){var r=JSON.parse(t);for(var n in r){if(r.hasOwnProperty(n)){var i=r[n];if(!p(i)){i={value:i}}$(e,n,i)}}}else{$(e,t,[])}}}function R(e){var t={trigger:"click"};var r=h(e,"kt-trigger");if(r){var n=w(r);if(n.length>0){var i=n[0];if(i==="every"){t.pollInterval=g(n[1])}else if(i.indexOf("sse:")===0){t.sseEvent=i.substr(4)}else{t["trigger"]=i;for(var a=1;a1){var r=t[0];var n=t[1].trim();var i;var a;if(n.indexOf(":")>0){var o=n.split(":");i=o[0];a=g(o[1])}else{i=n;a=100}return{operation:r,cssClass:i,delay:a}}else{return null}}function H(i,e,t){m(e.split("&"),function(e){var n=0;m(e.split(","),function(e){var t=e.trim();var r=F(t);if(r){if(r.operation==="toggle"){setTimeout(function(){setInterval(function(){i.classList[r.operation].call(i.classList,r.cssClass)},r.delay)},n);n=n+r.delay}else{n=n+r.delay;setTimeout(function(){i.classList[r.operation].call(i.classList,r.cssClass)},n)}}})})}function P(e,t,r,n){var i=y(e);i.timeout=setTimeout(function(){if(k(e)){we(e,t,r);P(e,t,o(e,"kt-"+t),n)}},n)}function X(e){return location.hostname===e.hostname&&u(e,"href")&&!u(e,"href").startsWith("#")}function U(e,t,r){if(e.tagName==="A"&&X(e)||e.tagName==="FORM"){t.boosted=true;var n,i;if(e.tagName==="A"){n="get";i=u(e,"href")}else{var a=u(e,"method");n=a?a.toLowerCase():"get";i=u(e,"action")}B(e,n,i,t,r,true)}}function j(e){return e.tagName==="FORM"||f(e,'input[type="submit"], button')&&c(e,"form")!==null||e.tagName==="A"&&e.href&&e.href.indexOf("#")!==0}function B(i,a,o,e,u,s){var t=function(e){if(s||j(i))e.preventDefault();var t=y(e);var r=y(i);if(!t.handled){t.handled=true;if(u.once){if(r.triggeredOnce){return}else{r.triggeredOnce=true}}if(u.changed){if(r.lastValue===i.value){return}else{r.lastValue=i.value}}if(r.delayed){clearTimeout(r.delayed)}var n=function(){we(i,a,o,e.target)};if(u.delay){r.delayed=setTimeout(n,g(u.delay))}else{n()}}};e.trigger=u.trigger;e.eventListener=t;i.addEventListener(u.trigger,t)}function J(){if(!window["kuttyScrollHandler"]){var e=function(){m(s().querySelectorAll("[kt-trigger='reveal']"),function(e){z(e)})};window["kuttyScrollHandler"]=e;window.addEventListener("scroll",e)}}function z(e){var t=y(e);if(!t.revealed&&r(e)){t.revealed=true;we(e,t.verb,t.path)}}function K(e){if(!k(e)){e.sseSource.close();return true}}function V(t,e){var r={initializer:function(){new EventSource(e,r.config)},config:{withCredentials:true}};$(t,"initSSE.kutty",{config:r});var n=r.initializer();n.onerror=function(e){$(t,"sseError.kutty",{error:e,source:n});K(t)};y(t).sseSource=n}function G(e,t,r,n){var i=l(t,function(e){return e.sseSource});if(i){var a=function(){if(!K(i)){if(k(t)){we(t,r,n)}else{i.sseSource.removeEventListener(e,a)}}};i.sseSource.addEventListener(e,a)}else{$(t,"noSSESourceError.kutty")}}function _(e,t,r,n){if(!e.loaded){e.loaded=true;we(t,r,n)}}function W(r,n,i){var a=false;m(e,function(e){var t=o(r,"kt-"+e);if(t){a=true;n.path=t;n.verb=e;if(i.sseEvent){G(i.sseEvent,r,e,t)}else if(i.trigger==="revealed"){J();z(r)}else if(i.trigger==="load"){_(n,r,e,t)}else if(i.pollInterval){n.polling=true;P(r,e,t,i.pollInterval)}else{B(r,e,t,n,i)}}});return a}function Y(e){var t=y(e);if(!t.processed){t.processed=true;var r=R(e);var n=W(e,t,r);if(!n&&h(e,"kt-boost")==="true"){U(e,t,r)}var i=o(e,"kt-sse-source");if(i){V(e,i)}var a=o(e,"kt-classes");if(a){H(e,a)}}if(e.children){m(e.children,function(e){Y(e)})}}function Q(e,t,r){var n=h(e,"kt-error-url");if(n){var i=new XMLHttpRequest;i.open("POST",n);i.setRequestHeader("Content-Type","application/json;charset=UTF-8");i.send(JSON.stringify({elt:e.id,event:t,detail:r}))}}function Z(e,t){var r;if(window.CustomEvent&&typeof window.CustomEvent==="function"){r=new CustomEvent(e,{bubbles:true,cancelable:true,detail:t})}else{r=s().createEvent("CustomEvent");r.initCustomEvent(e,true,true,t)}return r}function $(e,t,r){r["elt"]=e;var n=Z(t,r);if(kutty.logger){kutty.logger(e,t,r);if(t.indexOf("Error")>0){Q(e,t,r)}}var i=e.dispatchEvent(n);var a=e.dispatchEvent(Z("all.kutty",{elt:e,originalDetail:r,originalEvent:n}));return i&&a}function n(e,t,r){var n,i,a;if(d(e)){Se(function(){n=s().body;i="all.kutty";a=e;n.addEventListener(i,a)})}else if(d(t)){Se(function(){n=s().body;i=e;a=t;n.addEventListener(i,a)})}else{n=e;i=t;a=r;n.addEventListener(i,a)}}function ee(){var e=s().querySelector(".kt-history-elt");return e||s().body}function te(e,r){e=e.sort(function(e,t){return r[t]-r[e]});var t=0;m(e,function(e){t++;if(t>20){delete r[e];localStorage.removeItem(e)}})}function re(e){var t=JSON.parse(localStorage.getItem("kt-history-timestamps"))||{};t[e]=Date.now();var r=Object.keys(t);if(r.length>20){te(r,t)}localStorage.setItem("kt-history-timestamps",JSON.stringify(t))}function ne(){var e=ee();var t=location.pathname+location.search;$(s().body,"historyUpdate.kutty",{path:t,historyElement:e});history.replaceState({},s().title,window.location.href);localStorage.setItem("kt-history:"+t,e.innerHTML);re(t)}function ie(e){history.pushState({},"",e)}function ae(e){m(e,function(e){e.call()})}function oe(t){$(s().body,"historyCacheMiss.kutty",{path:t});var e=new XMLHttpRequest;e.open("GET",t,true);e.onload=function(){$(s().body,"historyCacheMissLoad.kutty",{path:t});if(this.status>=200&&this.status<400){var e=v(this.response);e=e.querySelector(".kt-history-elt")||e;ae(q(ee(),e))}}}function ue(){var e=location.pathname+location.search;$(s().body,"historyRestore.kutty",{path:e});var t=localStorage.getItem("kt-history:"+e);if(t){re(e);ae(q(ee(),v(t)))}else{oe(e)}}function se(e){return h(e,"kt-push-url")==="true"||e.tagName==="A"&&y(e).boosted}function le(e){ce(e,"add")}function fe(e){ce(e,"remove")}function ce(e,t){var r=h(e,"kt-indicator");if(r){var n=s().querySelectorAll(r)}else{n=[e]}m(n,function(e){e.classList[t].call(e.classList,"kutty-show-indicator")})}function ve(e,t){for(var r=0;r0){r["swapStyle"]=n[0];for(var i=1;i=200&&this.status<400){if(this.status!==204){var i=this.response;if(!$(o,"beforeSwap.kutty",{xhr:f,target:s,response:i}))return;if(n){ne()}var a=be(o);s.classList.add("kutty-swapping");var e=function(){try{var e=M(a.swapStyle,s,o,i);s.classList.remove("kutty-swapping");s.classList.add("kutty-settling");$(o,"afterSwap.kutty",{xhr:f,target:s});var t=function(){m(e,function(e){e.call()});s.classList.remove("kutty-settling");if(n){ie(r||v);ne()}$(o,"afterSettle.kutty",{xhr:f,target:s})};if(a.settleDelay>0){setTimeout(t,a.settleDelay)}else{t()}}catch(e){$(o,"swapError.kutty",{xhr:f,response:f.response,status:f.status,target:s});throw e}};if(a.swapDelay>0){setTimeout(e,g(a.swapDelay))}else{e()}}}else{$(o,"responseError.kutty",{xhr:f,response:f.response,status:f.status,target:s})}}catch(e){$(o,"onLoadError.kutty",{xhr:f,response:f.response,status:f.status,target:s});throw e}finally{fe(o);u();$(o,"afterOnLoad.kutty",{xhr:f,response:f.response,status:f.status,target:s})}};f.onerror=function(){fe(o);$(o,"sendError.kutty",{xhr:f});u()};if(!$(o,"beforeRequest.kutty",{xhr:f,values:c,target:s}))return u();le(o);f.send(e==="get"?null:pe(c))}function Se(e){if(s().readyState!=="loading"){e()}else{s().addEventListener("DOMContentLoaded",e)}}Se(function(){var e=s().body;Y(e);$(e,"load.kutty",{elt:e});window.onpopstate=function(){ue()}});function Ee(e){return eval(e)}function Oe(t){kutty.on("load.kutty",function(e){t(e.detail.elt)})}return{processElement:Y,on:n,onLoad:Oe,version:"0.0.1",_:Ee}}(); \ No newline at end of file +var kutty=kutty||function(){"use strict";var t=["get","post","put","delete","patch"];function y(t){if(t==="null"||t==="false"||t===""){return null}else if(t.lastIndexOf("ms")===t.length-2){return parseFloat(t.substr(0,t.length-2))}else if(t.lastIndexOf("s")===t.length-1){return parseFloat(t.substr(0,t.length-1))*1e3}else{return parseFloat(t)}}function u(t,e){return t.getAttribute&&t.getAttribute(e)}function o(t,e){return u(t,e)||u(t,"data-"+e)}function a(t){return t.parentElement}function s(){return document}function l(t,e){if(e(t)){return t}else if(a(t)){return l(a(t),e)}else{return null}}function g(t,e){var r=null;l(t,function(t){return r=u(t,e)});return r}function f(t,e){return t!=null&&(t.matches||t.matchesSelector||t.msMatchesSelector||t.mozMatchesSelector||t.webkitMatchesSelector||t.oMatchesSelector).call(t,e)}function c(t,e){do{if(t==null||f(t,e))return t}while(t=t&&a(t))}function v(t){var e=new DOMParser;var r=e.parseFromString(t,"text/html");return r.body}function e(t,e){return Object.prototype.toString.call(t)==="[object "+e+"]"}function d(t){return e(t,"Function")}function h(t){return e(t,"Object")}function p(t){var e="kutty-internal-data";var r=t[e];if(!r){r=t[e]={}}return r}function m(t,e){if(t){for(var r=0;r=0}function k(t){return s().body.contains(t)}function b(t,e){return t.concat(e)}function S(t){return t.split(/\s+/)}function w(t){var e=l(t,function(t){return u(t,"kt-target")!==null});if(e){var r=u(e,"kt-target");if(r==="this"){return e}else{return s().querySelector(r)}}else{var n=p(t);if(n.boosted){return s().body}else{return t}}}function E(e,r){m(e.attributes,function(t){if(!r.hasAttribute(t.name)){e.removeAttribute(t.name)}});m(r.attributes,function(t){e.setAttribute(t.name,t.value)})}function O(t){var n=[];m(t.children,function(t){if(o(t,"kt-swap-oob")==="true"){var e=s().getElementById(t.id);if(e){var r=s().createDocumentFragment();r.appendChild(t);n=n.concat(T(e,r))}else{t.parentNode.removeChild(t);$(s().body,"oobErrorNoTarget.kutty",{id:t.id,content:t})}}});return n}function L(n,t){var i=[];m(t.querySelectorAll("[id]"),function(t){var e=n.querySelector(t.tagName+"[id="+t.id+"]");if(e){var r=t.cloneNode();E(t,e);i.push(function(){E(t,r)})}});return i}function i(t,e,r){var n=L(t,r);while(r.childNodes.length>0){var i=r.firstChild;t.insertBefore(i,e);if(i.nodeType!==Node.TEXT_NODE){$(i,"load.kutty",{elt:i,parent:a(i)});Y(i)}}return n}function T(t,e){if(t.tagName==="BODY"){return N(t,e)}else{var r=i(a(t),t,e);a(t).removeChild(t);return r}}function C(t,e){return i(t,t.firstChild,e)}function x(t,e){return i(a(t),t,e)}function q(t,e){return i(t,null,e)}function A(t,e){return i(a(t),t.nextSibling,e)}function N(t,e){var r=t.firstChild;var n=i(t,r,e);if(r){while(r.nextSibling){t.removeChild(r.nextSibling)}t.removeChild(r)}return n}function I(t,e){var r=g(t,"kt-select");if(r){var n=s().createDocumentFragment();m(e.querySelectorAll(r),function(t){n.appendChild(t)});e=n}return e}function M(t,e,r,n){var i=v(n);if(i){var a=O(i);i=I(r,i);switch(t){case"outerHTML":return b(a,T(e,i));case"afterbegin":return b(a,C(e,i));case"beforebegin":return b(a,x(e,i));case"beforeend":return b(a,q(e,i));case"afterend":return b(a,A(e,i));default:return b(a,N(e,i))}}}function R(t,e){if(e){if(e.indexOf("{")===0){var r=JSON.parse(e);for(var n in r){if(r.hasOwnProperty(n)){var i=r[n];if(!h(i)){i={value:i}}$(t,n,i)}}}else{$(t,e,[])}}}function D(t){var e={trigger:"click"};var r=g(t,"kt-trigger");if(r){var n=S(r);if(n.length>0){var i=n[0];if(i==="every"){e.pollInterval=y(n[1])}else if(i.indexOf("sse:")===0){e.sseEvent=i.substr(4)}else{e["trigger"]=i;for(var a=1;a1){var r=e[0];var n=e[1].trim();var i;var a;if(n.indexOf(":")>0){var o=n.split(":");i=o[0];a=y(o[1])}else{i=n;a=100}return{operation:r,cssClass:i,delay:a}}else{return null}}function H(i,t,e){m(t.split("&"),function(t){var n=0;m(t.split(","),function(t){var e=t.trim();var r=F(e);if(r){if(r.operation==="toggle"){setTimeout(function(){setInterval(function(){i.classList[r.operation].call(i.classList,r.cssClass)},r.delay)},n);n=n+r.delay}else{n=n+r.delay;setTimeout(function(){i.classList[r.operation].call(i.classList,r.cssClass)},n)}}})})}function P(t,e,r,n){var i=p(t);i.timeout=setTimeout(function(){if(k(t)){St(t,e,r);P(t,e,o(t,"kt-"+e),n)}},n)}function X(t){return location.hostname===t.hostname&&u(t,"href")&&!u(t,"href").startsWith("#")}function U(t,e,r){if(t.tagName==="A"&&X(t)||t.tagName==="FORM"){e.boosted=true;var n,i;if(t.tagName==="A"){n="get";i=u(t,"href")}else{var a=u(t,"method");n=a?a.toLowerCase():"get";i=u(t,"action")}B(t,n,i,e,r,true)}}function j(t){return t.tagName==="FORM"||f(t,'input[type="submit"], button')&&c(t,"form")!==null||t.tagName==="A"&&t.href&&t.href.indexOf("#")!==0}function B(i,a,o,t,u,s){var e=function(t){if(s||j(i))t.preventDefault();var e=p(t);var r=p(i);if(!e.handled){e.handled=true;if(u.once){if(r.triggeredOnce){return}else{r.triggeredOnce=true}}if(u.changed){if(r.lastValue===i.value){return}else{r.lastValue=i.value}}if(r.delayed){clearTimeout(r.delayed)}var n=function(){St(i,a,o,t.target)};if(u.delay){r.delayed=setTimeout(n,y(u.delay))}else{n()}}};t.trigger=u.trigger;t.eventListener=e;i.addEventListener(u.trigger,e)}function J(){if(!window["kuttyScrollHandler"]){var t=function(){m(s().querySelectorAll("[kt-trigger='reveal']"),function(t){z(t)})};window["kuttyScrollHandler"]=t;window.addEventListener("scroll",t)}}function z(t){var e=p(t);if(!e.revealed&&r(t)){e.revealed=true;St(t,e.verb,e.path)}}function K(t){if(!k(t)){t.sseSource.close();return true}}function V(e,t){var r={initializer:function(){new EventSource(t,r.config)},config:{withCredentials:true}};$(e,"initSSE.kutty",{config:r});var n=r.initializer();n.onerror=function(t){$(e,"sseError.kutty",{error:t,source:n});K(e)};p(e).sseSource=n}function G(t,e,r,n){var i=l(e,function(t){return t.sseSource});if(i){var a=function(){if(!K(i)){if(k(e)){St(e,r,n)}else{i.sseSource.removeEventListener(t,a)}}};i.sseSource.addEventListener(t,a)}else{$(e,"noSSESourceError.kutty")}}function _(t,e,r,n){if(!t.loaded){t.loaded=true;St(e,r,n)}}function W(r,n,i){var a=false;m(t,function(t){var e=o(r,"kt-"+t);if(e){a=true;n.path=e;n.verb=t;if(i.sseEvent){G(i.sseEvent,r,t,e)}else if(i.trigger==="revealed"){J();z(r)}else if(i.trigger==="load"){_(n,r,t,e)}else if(i.pollInterval){n.polling=true;P(r,t,e,i.pollInterval)}else{B(r,t,e,n,i)}}});return a}function Y(t){var e=p(t);if(!e.processed){e.processed=true;var r=D(t);var n=W(t,e,r);if(!n&&g(t,"kt-boost")==="true"){U(t,e,r)}var i=o(t,"kt-sse-source");if(i){V(t,i)}var a=o(t,"kt-classes");if(a){H(t,a)}}if(t.children){m(t.children,function(t){Y(t)})}}function Q(t,e,r){var n=g(t,"kt-error-url");if(n){var i=new XMLHttpRequest;i.open("POST",n);i.setRequestHeader("Content-Type","application/json;charset=UTF-8");i.send(JSON.stringify({elt:t.id,event:e,detail:r}))}}function Z(t,e){var r;if(window.CustomEvent&&typeof window.CustomEvent==="function"){r=new CustomEvent(t,{bubbles:true,cancelable:true,detail:e})}else{r=s().createEvent("CustomEvent");r.initCustomEvent(t,true,true,e)}return r}function $(t,e,r){r["elt"]=t;var n=Z(e,r);if(kutty.logger){kutty.logger(t,e,r);if(e.indexOf("Error")>0){Q(t,e,r)}}var i=t.dispatchEvent(n);var a=t.dispatchEvent(Z("all.kutty",{elt:t,originalDetail:r,originalEvent:n}));return i&&a}function n(t,e,r){var n,i,a;if(d(t)){wt(function(){n=s().body;i="all.kutty";a=t;n.addEventListener(i,a)})}else if(d(e)){wt(function(){n=s().body;i=t;a=e;n.addEventListener(i,a)})}else{n=t;i=e;a=r;n.addEventListener(i,a)}}function tt(){var t=s().querySelector(".kutty-history-elt");return t||s().body}function et(t,r){t=t.sort(function(t,e){return r[e]-r[t]});var e=0;m(t,function(t){e++;if(e>20){delete r[t];localStorage.removeItem(t)}})}function rt(t){var e=JSON.parse(localStorage.getItem("kt-history-timestamps"))||{};e[t]=Date.now();var r=Object.keys(e);if(r.length>20){et(r,e)}localStorage.setItem("kt-history-timestamps",JSON.stringify(e))}function nt(){var t=tt();var e=location.pathname+location.search;$(s().body,"historyUpdate.kutty",{path:e,historyElement:t});history.replaceState({},s().title,window.location.href);localStorage.setItem("kt-history:"+e,t.innerHTML);rt(e)}function it(t){history.pushState({},"",t)}function at(t){m(t,function(t){t.call()})}function ot(e){$(s().body,"historyCacheMiss.kutty",{path:e});var t=new XMLHttpRequest;t.open("GET",e,true);t.onload=function(){$(s().body,"historyCacheMissLoad.kutty",{path:e});if(this.status>=200&&this.status<400){var t=v(this.response);t=t.querySelector(".kutty-history-elt")||t;at(N(tt(),t))}}}function ut(){var t=location.pathname+location.search;$(s().body,"historyRestore.kutty",{path:t});var e=localStorage.getItem("kt-history:"+t);if(e){rt(t);at(N(tt(),v(e)))}else{ot(t)}}function st(t){return g(t,"kt-push-url")==="true"||t.tagName==="A"&&p(t).boosted}function lt(t){ct(t,"add")}function ft(t){ct(t,"remove")}function ct(t,e){var r=g(t,"kt-indicator");if(r){var n=s().querySelectorAll(r)}else{n=[t]}m(n,function(t){t.classList[e].call(t.classList,"kutty-request")})}function vt(t,e){for(var r=0;r0){r["swapStyle"]=n[0];for(var i=1;i=200&&this.status<400){if(this.status!==204){var i=this.response;if(!$(o,"beforeSwap.kutty",{xhr:f,target:s,response:i}))return;if(n){nt()}var a=bt(o);s.classList.add("kutty-swapping");var t=function(){try{var t=M(a.swapStyle,s,o,i);s.classList.remove("kutty-swapping");s.classList.add("kutty-settling");$(o,"afterSwap.kutty",{xhr:f,target:s});var e=function(){m(t,function(t){t.call()});s.classList.remove("kutty-settling");if(n){it(r||v);nt()}$(o,"afterSettle.kutty",{xhr:f,target:s})};if(a.settleDelay>0){setTimeout(e,a.settleDelay)}else{e()}}catch(t){$(o,"swapError.kutty",{xhr:f,response:f.response,status:f.status,target:s});throw t}};if(a.swapDelay>0){setTimeout(t,y(a.swapDelay))}else{t()}}}else{$(o,"responseError.kutty",{xhr:f,response:f.response,status:f.status,target:s})}}catch(t){$(o,"onLoadError.kutty",{xhr:f,response:f.response,status:f.status,target:s});throw t}finally{ft(o);u();$(o,"afterOnLoad.kutty",{xhr:f,response:f.response,status:f.status,target:s})}};f.onerror=function(){ft(o);$(o,"sendError.kutty",{xhr:f});u()};if(!$(o,"beforeRequest.kutty",{xhr:f,values:c,target:s}))return u();lt(o);f.send(t==="get"?null:ht(c))}function wt(t){if(s().readyState!=="loading"){t()}else{s().addEventListener("DOMContentLoaded",t)}}var Et=s().styleSheets[0];Et.insertRule(".kutty-indicator{opacity:0;transition: opacity 500ms ease-in;}\n"+".kutty-request .kutty-indicator{opacity:1}\n"+".kutty-request.kutty-indicator{opacity:1}\n",Et.cssRules.length);wt(function(){var t=s().body;Y(t);$(t,"load.kutty",{elt:t});window.onpopstate=function(){ut()}});function Ot(t){return eval(t)}function Lt(e){kutty.on("load.kutty",function(t){e(t.detail.elt)})}return{processElement:Y,on:n,onLoad:Lt,version:"0.0.1",_:Ot}}(); \ No newline at end of file diff --git a/dist/kutty.min.js.gz b/dist/kutty.min.js.gz index 134355a14f23a4eb93f8e867ad24e6db8a5a8abf..07de18ab8e67398a3b1ed2b5fde299b687e69eed 100644 GIT binary patch literal 4947 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
Xpc6bKUF7AJXGyt4|(dKnLlb2IErd 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 diff --git a/src/kutty.js b/src/kutty.js index 9d594853..6d671843 100644 --- a/src/kutty.js +++ b/src/kutty.js @@ -122,6 +122,11 @@ var kutty = kutty || (function () { return trigger.split(/\s+/); } + function addRule(rule) { + var sheet = getDocument().styleSheets[0]; + sheet.insertRule(rule, sheet.cssRules.length); + } + //==================================================================== // Node processing //==================================================================== @@ -642,7 +647,7 @@ var kutty = kutty || (function () { // History Support //==================================================================== function getHistoryElement() { - var historyElt = getDocument().querySelector('.kt-history-elt'); + var historyElt = getDocument().querySelector('.kutty-history-elt'); return historyElt || getDocument().body; } @@ -697,7 +702,7 @@ var kutty = kutty || (function () { triggerEvent(getDocument().body, "historyCacheMissLoad.kutty", {path: pathAndSearch}); if (this.status >= 200 && this.status < 400) { var fragment = makeFragment(this.response); - fragment = fragment.querySelector('.kt-history-elt') || fragment; + fragment = fragment.querySelector('.kutty-history-elt') || fragment; settleImmediately(swapInnerHTML(getHistoryElement(), fragment)); } }; @@ -1055,6 +1060,11 @@ var kutty = kutty || (function () { } } + // insert kutty-indicator css rules + addRule(".kutty-indicator{opacity:0;transition: opacity 200ms ease-in;}"); + addRule(".kutty-request .kutty-indicator{opacity:1}"); + addRule(".kutty-request.kutty-indicator{opacity:1}"); + // initialize the document ready(function () { var body = getDocument().body; diff --git a/test/browser-only.html b/test/browser-only.html index 21add4ed..7b4a6be4 100644 --- a/test/browser-only.html +++ b/test/browser-only.html @@ -27,7 +27,7 @@ Work Area
-
+
diff --git a/test/index.html b/test/index.html index aff53c4d..7c4867f4 100644 --- a/test/index.html +++ b/test/index.html @@ -40,7 +40,7 @@ Work Area
-
+
diff --git a/test/scratch.html b/test/scratch.html index 354d4442..54672080 100644 --- a/test/scratch.html +++ b/test/scratch.html @@ -43,7 +43,7 @@ Autorespond: +
diff --git a/www/_includes/demo_ui.html.liquid b/www/_includes/demo_ui.html.liquid index 5a5285e6..e61cd96a 100644 --- a/www/_includes/demo_ui.html.liquid +++ b/www/_includes/demo_ui.html.liquid @@ -5,13 +5,16 @@ bottom: 0; right: 0; left: 0; - max-height: 35vh; - height: 500px; + height: 50px; background-color: whitesmoke; border-top: 2px solid gray; overflow: scroll; margin: 0px; } + #demo-server-info.show { + max-height: 35vh; + height: 500px; + } #demo-activity { height:300px } @@ -23,9 +26,23 @@ #demo-canvas { margin-bottom: 500px; } + #request-info-toggler { + float: right; + } +
-
Server Requests
+
Server Requests ↑ Show
    diff --git a/www/_includes/layout.njk b/www/_includes/layout.njk index 3c5bf43c..2b2cb43a 100644 --- a/www/_includes/layout.njk +++ b/www/_includes/layout.njk @@ -35,21 +35,15 @@ docs
- attributes + reference
- events -
-
- headers -
-
- patterns + examples
+
github
-
diff --git a/www/attributes.md b/www/attributes.md deleted file mode 100644 index 8f17e3a7..00000000 --- a/www/attributes.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -layout: layout.njk -title: kutty - Attributes ---- - -## Attribute Reference - -| Attribute | Description | -|-----------|-------------| -| [kt-boost](/attributes/kt-boost) | converts anchors and forms to use AJAX requests -| [kt-classes](/attributes/kt-classes) | timed modification of classes on an element -| [kt-confirm](/attributes/kt-confirm) | shows a confim() dialog before issuing a request -| [kt-delete](/attributes/kt-delete) | issue a `DELETE` to the specified URL -| [kt-error-url](/attributes/kt-error-url) | a URL to send client-side errors to -| [kt-get](/attributes/kt-get) | issue a `GET` to the specified URL -| [kt-include](/attributes/kt-include) | include additional data in AJAX requests -| [kt-indicator](/attributes/kt-indicator) | the element to put the `kutty-request` class on during the AJAX request -| [kt-patch](/attributes/kt-patch) | TODO - Description -| [kt-params](/attributes/kt-params) | filter the parameters that will be submitted with a request -| [kt-post](/attributes/kt-post) | TODO - Description -| kt-prompt | TODO - Description -| kt-push-url | TODO - Description -| [kt-put](/attributes/kt-put) | TODO - Description -| kt-select | TODO - Description -| kt-sse-src | TODO - Description -| [kt-swap](/attributes/kt-swap) | TODO - Description -| kt-swap-oob | TODO - Description -| kt-target | TODO - Description -| kt-trigger | TODO - Description \ No newline at end of file diff --git a/www/attributes/kt-indicator.md b/www/attributes/kt-indicator.md index b017eb8a..3f9c0f93 100644 --- a/www/attributes/kt-indicator.md +++ b/www/attributes/kt-indicator.md @@ -1,22 +1,83 @@ --- layout: layout.njk -title: kutty - kt-include +title: kutty - kt-indicator --- -## `kt-include` +## `kt-indicator` -The `kt-include` attribute allows you to include additional data beyond the [standard](/docs/#forms) -values. +The `kt-indicator` attribute allows you to specify the element that will have the `kutty-request` class +added to it for the duration of the request. This can be used to show spinners or progress indicators +while the request is in flight. -The value of this attribute is a CSS query selector of additional elements to include the values of. +The value of this attribute is a CSS query selector of the element or elements to apply the class to. + +Here is an example with a spinner adjacent to the button: ```html - + +
+``` + +When a request is in flight, this will cause the `kutty-request` class to be added to the `#spinner` +image. The image also has the `kutty-indicator` class on it, which defines an opacity transition +that will show the spinner: + +```css + .kutty-indicator{ + opacity:0; + transition: opacity 500ms ease-in; + } + .kutty-request .kutty-indicator{ + opacity:1 + } + .kutty-request.kutty-indicator{ + opacity:1 + } +``` + +If you would prefer a different effect for showing the spinner you could define and use your own indicator +CSS. Here is an example that uses `display` rather than opacity: + +```css + .kutty-indicator{ + display:none; + } + .kutty-request .my-indicator{ + display:inline; + } + .kutty-request.my-indicator{ + display:inline; + } +``` + +Note that the target of the `ic-indicator` selector need not be the exact element that you +want to show: it can be any element in the parent hierarchy of the indicator. + +Finally, note that the `kutty-request` class by default is added to the element causing +the request, so you can place an indicator inside of that element and not need to explictly +call it out with the `ic-indicator` attribute: + +```html + ``` -In addition to the normal variables included with this request, the value of the element with the -id `hidden-value` will be included. +### Demo + +This simulates what a spinner might look like in that situation: + + ### Notes + +* In the absence of an explicit indicator, the `kutty-request` class will be added to the element triggering the + request \ No newline at end of file diff --git a/www/events.md b/www/events.md deleted file mode 100644 index 3f278d14..00000000 --- a/www/events.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -layout: layout.njk -title: kutty - Events ---- - -## Event Reference - -| Event | Description | -|-------|-------------| -| afterOnLoad.kutty | TODO - Description -| afterSettle.kutty | TODO - Description -| afterSettle.kutty | TODO - Description -| afterSwap.kutty | TODO - Description -| beforeOnLoad.kutty | TODO - Description -| beforeRequest.kutty | TODO - Description -| beforeSwap.kutty | TODO - Description -| historyCacheMiss.kutty | TODO - Description -| historyCacheMissLoad.kutty | TODO - Description -| historyRestore.kutty | TODO - Description -| historyUpdate.kutty | TODO - Description -| initSSE.kutty | TODO - Description -| load.kutty | TODO - Description -| noSSESourceError.kutty | TODO - Description -| onLoadError.kutty | TODO - Description -| oobErrorNoTarget.kutty | TODO - Description -| prompt.kutty | TODO - Description -| responseError.kutty | TODO - Description -| sendError.kutty | TODO - Description -| sseError.kutty | TODO - Description -| swapError.kutty | TODO - Description -| values.kutty | TODO - Description diff --git a/www/patterns.md b/www/examples.md similarity index 81% rename from www/patterns.md rename to www/examples.md index fa534bc2..045e2766 100644 --- a/www/patterns.md +++ b/www/examples.md @@ -11,4 +11,4 @@ You can copy and paste them and then adjust them for your needs. | Pattern | Description | |-----------|-------------| -| [Click To Edit](/patterns/click-to-edit) | Demonstrates inline editing of a data object +| [Click To Edit](/examples/click-to-edit) | Demonstrates inline editing of a data object diff --git a/www/patterns/click-to-edit.md b/www/examples/click-to-edit.md similarity index 100% rename from www/patterns/click-to-edit.md rename to www/examples/click-to-edit.md diff --git a/www/headers.md b/www/headers.md deleted file mode 100644 index 16a03b76..00000000 --- a/www/headers.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -layout: layout.njk -title: kutty - Headers ---- - -## HTTP Headers - -### Request Headers -| Header | Description | -|-------|-------------| -| X-HTTP-Method-Override | TODO - Description -| X-KT-Request | TODO - Description -| X-KT-Trigger-Id | TODO - Description -| X-KT-Trigger-Name | TODO - Description -| X-KT-Target-Id | TODO - Description -| X-KT-Current-URL | TODO - Description -| X-KT-Prompt | TODO - Description -| X-KT-Event-Target | TODO - Description -| X-KT-Active-Element | TODO - Description -| X-KT-Active-Element-Value | TODO - Description - -### Response Headers -| Header | Description | -|-------|-------------| -| X-KT-Trigger | TODO - Description -| X-KT-Push | TODO - Description diff --git a/www/img/bars.svg b/www/img/bars.svg new file mode 100644 index 00000000..7cb07e65 --- /dev/null +++ b/www/img/bars.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/www/js/kutty.js b/www/js/kutty.js index b0b03e30..6d671843 100644 --- a/www/js/kutty.js +++ b/www/js/kutty.js @@ -122,6 +122,11 @@ var kutty = kutty || (function () { return trigger.split(/\s+/); } + function addRule(rule) { + var sheet = getDocument().styleSheets[0]; + sheet.insertRule(rule, sheet.cssRules.length); + } + //==================================================================== // Node processing //==================================================================== @@ -642,7 +647,7 @@ var kutty = kutty || (function () { // History Support //==================================================================== function getHistoryElement() { - var historyElt = getDocument().querySelector('.kt-history-elt'); + var historyElt = getDocument().querySelector('.kutty-history-elt'); return historyElt || getDocument().body; } @@ -697,7 +702,7 @@ var kutty = kutty || (function () { triggerEvent(getDocument().body, "historyCacheMissLoad.kutty", {path: pathAndSearch}); if (this.status >= 200 && this.status < 400) { var fragment = makeFragment(this.response); - fragment = fragment.querySelector('.kt-history-elt') || fragment; + fragment = fragment.querySelector('.kutty-history-elt') || fragment; settleImmediately(swapInnerHTML(getHistoryElement(), fragment)); } }; @@ -736,7 +741,7 @@ var kutty = kutty || (function () { indicators = [elt]; } forEach(indicators, function(ic) { - ic.classList[action].call(ic.classList, "kutty-show-indicator"); + ic.classList[action].call(ic.classList, "kutty-request"); }); } @@ -1055,6 +1060,11 @@ var kutty = kutty || (function () { } } + // insert kutty-indicator css rules + addRule(".kutty-indicator{opacity:0;transition: opacity 200ms ease-in;}"); + addRule(".kutty-request .kutty-indicator{opacity:1}"); + addRule(".kutty-request.kutty-indicator{opacity:1}"); + // initialize the document ready(function () { var body = getDocument().body; diff --git a/www/reference.md b/www/reference.md new file mode 100644 index 00000000..eedcf563 --- /dev/null +++ b/www/reference.md @@ -0,0 +1,89 @@ +--- +layout: layout.njk +title: kutty - Attributes +--- + +## Attribute Reference + +| Attribute | Description | +|-----------|-------------| +| [kt-boost](/attributes/kt-boost) | converts anchors and forms to use AJAX requests +| [kt-classes](/attributes/kt-classes) | timed modification of classes on an element +| [kt-confirm](/attributes/kt-confirm) | shows a confim() dialog before issuing a request +| [kt-delete](/attributes/kt-delete) | issue a `DELETE` to the specified URL +| [kt-error-url](/attributes/kt-error-url) | a URL to send client-side errors to +| [kt-get](/attributes/kt-get) | issue a `GET` to the specified URL +| [kt-include](/attributes/kt-include) | include additional data in AJAX requests +| [kt-indicator](/attributes/kt-indicator) | the element to put the `kutty-request` class on during the AJAX request +| [kt-patch](/attributes/kt-patch) | TODO - Description +| [kt-params](/attributes/kt-params) | filter the parameters that will be submitted with a request +| [kt-post](/attributes/kt-post) | TODO - Description +| kt-prompt | TODO - Description +| kt-push-url | TODO - Description +| [kt-put](/attributes/kt-put) | TODO - Description +| kt-select | TODO - Description +| kt-sse-src | TODO - Description +| [kt-swap](/attributes/kt-swap) | TODO - Description +| kt-swap-oob | TODO - Description +| kt-target | TODO - Description +| kt-trigger | TODO - Description + +## CSS Class Reference + +| Attribute | Description | +|-----------|-------------| +| kutty-request | TODO +| kutty-indicator | TODO +| kutty-history-elt | TODO +| kutty-swapping | TODO +| kutty-settling | TODO + + +## HTTP Header Reference + +### Request Headers +| Header | Description | +|-------|-------------| +| X-HTTP-Method-Override | TODO - Description +| X-KT-Request | TODO - Description +| X-KT-Trigger-Id | TODO - Description +| X-KT-Trigger-Name | TODO - Description +| X-KT-Target-Id | TODO - Description +| X-KT-Current-URL | TODO - Description +| X-KT-Prompt | TODO - Description +| X-KT-Event-Target | TODO - Description +| X-KT-Active-Element | TODO - Description +| X-KT-Active-Element-Value | TODO - Description + +### Response Headers +| Header | Description | +|-------|-------------| +| X-KT-Trigger | TODO - Description +| X-KT-Push | TODO - Description + +## Event Reference + +| Event | Description | +|-------|-------------| +| afterOnLoad.kutty | TODO - Description +| afterSettle.kutty | TODO - Description +| afterSettle.kutty | TODO - Description +| afterSwap.kutty | TODO - Description +| beforeOnLoad.kutty | TODO - Description +| beforeRequest.kutty | TODO - Description +| beforeSwap.kutty | TODO - Description +| historyCacheMiss.kutty | TODO - Description +| historyCacheMissLoad.kutty | TODO - Description +| historyRestore.kutty | TODO - Description +| historyUpdate.kutty | TODO - Description +| initSSE.kutty | TODO - Description +| load.kutty | TODO - Description +| noSSESourceError.kutty | TODO - Description +| onLoadError.kutty | TODO - Description +| oobErrorNoTarget.kutty | TODO - Description +| prompt.kutty | TODO - Description +| responseError.kutty | TODO - Description +| sendError.kutty | TODO - Description +| sseError.kutty | TODO - Description +| swapError.kutty | TODO - Description +| values.kutty | TODO - Description