Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
@taufik-nurrohman
taufik-nurrohman committed Jan 3, 2021
1 parent 10d6d11 commit bfc2b06
Show file tree
Hide file tree
Showing 8 changed files with 99 additions and 69 deletions.
38 changes: 19 additions & 19 deletions .source/-/index.mjs
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import {D, R, W, fromElement, getAttribute, getElement, getElements, getName, getNext, getText, hasAttribute, hasParent, isWindow, letElement, setChildLast, setElement, setNext, setPrev, theHistory, theLocation, theScript, toElement} from '@taufik-nurrohman/document';
import {eventPreventDefault, off as offEvent, on as onEvent} from '@taufik-nurrohman/event';
import {fromValue} from '@taufik-nurrohman/from';
import {fromStates, fromValue} from '@taufik-nurrohman/from';
import {fire as fireHook, hooks, off as offHook, on as onHook} from '@taufik-nurrohman/hook';
import {isBoolean, isFunction, isInstance, isObject, isSet} from '@taufik-nurrohman/is';
import {toPattern} from '@taufik-nurrohman/pattern';
import {toCaseLower, toCaseUpper, toValue} from '@taufik-nurrohman/to';
import {getOffset, setScroll} from '@taufik-nurrohman/rect';
import {toCaseLower, toCaseUpper, toCount, toObjectCount, toValue} from '@taufik-nurrohman/to';

let name = '%(rollup.output.name)',

Expand All @@ -19,10 +20,6 @@ let name = '%(rollup.output.name)',

B, H;

function getCount(ofArray) {
return ofArray.length;
}

function getEventName(node) {
return isForm(node) ? 'submit' : 'click';
}
Expand All @@ -34,13 +31,13 @@ function getHash(ref) {
function getLinks(scope) {
let id, out = {}, link,
links = getElements('link[rel=dns-prefetch],link[rel=preconnect],link[rel=prefetch],link[rel=preload],link[rel=prerender]', scope), toSave;
for (let i = 0, j = getCount(links); i < j; ++i) {
for (let i = 0, j = toCount(links); i < j; ++i) {
if (isLinkForF3H(link = links[i])) {
continue;
}
link.id = (id = link.id || name + ':' + toID(getAttribute(link, 'href') || getText(link)));
out[id] = (toSave = fromElement(link));
out[id][getCount(toSave) - 1].href = link.href; // Use the resolved URL!
out[id][toCount(toSave) - 1].href = link.href; // Use the resolved URL!
}
return out;
}
Expand All @@ -52,28 +49,28 @@ function getRef() {
function getScripts(scope) {
let id, out = {}, script,
scripts = getElements('script', scope), toSave;
for (let i = 0, j = getCount(scripts); i < j; ++i) {
for (let i = 0, j = toCount(scripts); i < j; ++i) {
if (isScriptForF3H(script = scripts[i])) {
continue;
}
script.id = (id = script.id || name + ':' + toID(getAttribute(script, 'src') || getText(script)));
out[id] = (toSave = fromElement(script));
out[id][getCount(toSave) - 1].src = script.src; // Use the resolved URL!
out[id][toCount(toSave) - 1].src = script.src; // Use the resolved URL!
}
return out;
}

function getStyles(scope) {
let id, out = {}, style,
styles = getElements('link[rel=stylesheet],style', scope), toSave;
for (let i = 0, j = getCount(styles); i < j; ++i) {
for (let i = 0, j = toCount(styles); i < j; ++i) {
if (isStyleForF3H(style = styles[i])) {
continue;
}
style.id = (id = style.id || name + ':' + toID(getAttribute(style, 'href') || getText(style)));
out[id] = (toSave = fromElement(style));
if ('link' === toSave[0]) {
out[id][getCount(toSave) - 1].href = style.href; // Use the resolved URL!
out[id][toCount(toSave) - 1].href = style.href; // Use the resolved URL!
}
}
return out;
Expand Down Expand Up @@ -133,7 +130,9 @@ function letSlashEnd(ref) {

// <https://stackoverflow.com/a/8831937/1163000>
function toID(text) {
let out = 0, c, i, j = getCount(text);
let c, i,
j = toCount(text),
out = 0;
if (0 === j) {
return out;
}
Expand Down Expand Up @@ -186,7 +185,7 @@ function F3H(source = D, state = {}) {
return $;
}

$.state = state = Object.assign({}, F3H.state, true === state ? {
$.state = state = fromStates(F3H.state, true === state ? {
cache: state
} : (state || {}));

Expand Down Expand Up @@ -216,7 +215,7 @@ function F3H(source = D, state = {}) {
styles = null;

// Store current instance to `F3H.instances`
F3H.instances[source.id || source.name || getCount(Object.keys(F3H.instances))] = $;
F3H.instances[source.id || source.name || toObjectCount(F3H.instances)] = $;

// Mark current DOM as active to prevent duplicate instance
source[name] = 1;
Expand Down Expand Up @@ -434,8 +433,9 @@ function F3H(source = D, state = {}) {
if (!node) {
return;
}
R.scrollLeft = B.scrollLeft = node.offsetLeft;
R.scrollTop = B.scrollTop = node.offsetTop;
let theOffset = getOffset(node);
setScroll(B, theOffset);
setScroll(R, theOffset);
}

// Scroll to the first element with `id` or `name` attribute that has the same value as location hash
Expand Down Expand Up @@ -509,12 +509,12 @@ function F3H(source = D, state = {}) {
let t = this, q,
href = t.href,
action = t.action,
ref = href || action,
ref = letSlashEnd(href || action),
type = toCaseUpper(t.method || GET);
if (GET === type) {
if (isForm(t)) {
q = (new URLSearchParams(new FormData(t))) + "";
ref = letSlashEnd(ref.split(/[?&#]/)[0]) + (q ? '?' + q : "");
ref = ref.split(/[?&#]/)[0] + (q ? '?' + q : "");
}
// Immediately change the URL if turbo feature is enabled
if (state.turbo) {
Expand Down
7 changes: 4 additions & 3 deletions .source/-/index.pug
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,9 @@ block content
| &lt;/script&gt;
| &lt;/body&gt;
| &lt;/html&gt;
h3 CommonJS
h3 Node.js
p Functions and methods in this application are mostly native JavaScript and are intended for use by the browser. Node.js doesn&rsquo;t know about the DOM, so this kind of practice will probably be used more often to build new browser packages than to be used directly in the Node.js server.
h4 CommonJS
pre: code
| const F3H = require('@taufik-nurrohman/f3h');
|
Expand All @@ -112,8 +114,7 @@ block content
| to = response.querySelector('main');
| from.innerHTML = to.innerHTML;
| });
h3 ECMAScript
p Functions and methods in this application are mostly native JavaScript and are intended for use by the browser. Node.js doesn&rsquo;t know about the DOM, so this kind of practice will probably be used more often to build new browser packages than to be used directly in the Node.js server.
h4 ECMAScript
pre: code
| import F3H from '@taufik-nurrohman/f3h';
|
Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Contribute
Release Notes
-------------

### 1.1.5, 1.1.6, 1.1.7, 1.1.8, 1.1.9
### 1.1.5, 1.1.6, 1.1.7, 1.1.8, 1.1.9, 1.1.10

- Maintenance.

Expand Down
8 changes: 4 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html><html dir="ltr"><head><meta charset="utf-8"><meta content="#000" name="theme-color"><meta content="width=device-width" name="viewport"><meta content="Load pages asynchronously using AJAX while maintaining the principles of progressive enhancement." name="description"><title>Fetch 1.1.9</title><style>* {
<!DOCTYPE html><html dir="ltr"><head><meta charset="utf-8"><meta content="#000" name="theme-color"><meta content="width=device-width" name="viewport"><meta content="Load pages asynchronously using AJAX while maintaining the principles of progressive enhancement." name="description"><title>Fetch 1.1.10</title><style>* {
box-sizing: border-box;
}
:root {
Expand Down Expand Up @@ -49,7 +49,7 @@
border: 1px dashed;
margin-top: 0;
padding: .75em 1em;
}</style></head><body><p>Do you like this project? Please support my <a href="https://github.com/mecha-cms">Mecha CMS</a> project too. Thank you!</p><header><h1>Fetch 1.1.9</h1><p>You can read <abbr title="Fetch">F3H</abbr> as how you would read <abbr title="Accessibility">A11Y</abbr> and <abbr title="Internationalization">I18N</abbr>.</p><p>Your job is to make a website that works traditionally: clicking on a link will direct you to a new page, sending and uploading data through a form will store it to the web storage. After you finish making it, this application will serve as a feature enhancer, which is, to enable AJAX features to your traditional web pages automatically, so that your web pages can load faster because you can specify which parts of the destination page you want to load into the current page.</p><hr></header><main><p>Progressive enhancement is a design principle that is focused in ensuring the availability of web page content in the most limited conditions, and if possible, to provide the most advanced features when the conditions are supportive. By enhancing features while maintaining the basic functions of HTML pages, this concept will ensure that if your advanced JavaScript features cannot work optimally under certain conditions, then at least the web page content that you want to provide is still accessible to most users.</p><p><a href="example-1/index.html" target="_blank"><b>Demo</b></a></p><h2>Features</h2><ul><li>Light-weight, no dependencies. It uses vanilla JavaScript.</li><li>Simple <abbr title="Application Programming Interface">API</abbr>. Easy to master.</li><li>Accessible AJAX response as HTML elements (by default).</li><li>Instant click with native HTML5 Prefetch, improved by the power of JavaScript.</li><li>Progressively enhanced. If at any time the JavaScript fails to load, or if users are using an old web browser, or if users decide to disable the JavaScript features, or if some third-party JavaScript makes this application fail to work, your website will still be able to work as when it didn&rsquo;t have any AJAX features.</li></ul><h2>Usage</h2><h3>Browser</h3><p>With the basic knowledge of accessing the DOM and manipulating it using JavaScript, you can use this application like a pro.</p><pre><code>&lt;!DOCTYPE html&gt;
}</style></head><body><p>Do you like this project? Please support my <a href="https://github.com/mecha-cms">Mecha CMS</a> project too. Thank you!</p><header><h1>Fetch 1.1.10</h1><p>You can read <abbr title="Fetch">F3H</abbr> as how you would read <abbr title="Accessibility">A11Y</abbr> and <abbr title="Internationalization">I18N</abbr>.</p><p>Your job is to make a website that works traditionally: clicking on a link will direct you to a new page, sending and uploading data through a form will store it to the web storage. After you finish making it, this application will serve as a feature enhancer, which is, to enable AJAX features to your traditional web pages automatically, so that your web pages can load faster because you can specify which parts of the destination page you want to load into the current page.</p><hr></header><main><p>Progressive enhancement is a design principle that is focused in ensuring the availability of web page content in the most limited conditions, and if possible, to provide the most advanced features when the conditions are supportive. By enhancing features while maintaining the basic functions of HTML pages, this concept will ensure that if your advanced JavaScript features cannot work optimally under certain conditions, then at least the web page content that you want to provide is still accessible to most users.</p><p><a href="example-1/index.html" target="_blank"><b>Demo</b></a></p><h2>Features</h2><ul><li>Light-weight, no dependencies. It uses vanilla JavaScript.</li><li>Simple <abbr title="Application Programming Interface">API</abbr>. Easy to master.</li><li>Accessible AJAX response as HTML elements (by default).</li><li>Instant click with native HTML5 Prefetch, improved by the power of JavaScript.</li><li>Progressively enhanced. If at any time the JavaScript fails to load, or if users are using an old web browser, or if users decide to disable the JavaScript features, or if some third-party JavaScript makes this application fail to work, your website will still be able to work as when it didn&rsquo;t have any AJAX features.</li></ul><h2>Usage</h2><h3>Browser</h3><p>With the basic knowledge of accessing the DOM and manipulating it using JavaScript, you can use this application like a pro.</p><pre><code>&lt;!DOCTYPE html&gt;
&lt;html dir="ltr"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
Expand All @@ -68,7 +68,7 @@
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><h3>CommonJS</h3><pre><code>const F3H = require('@taufik-nurrohman/f3h');
&lt;/html&gt;</code></pre><h3>Node.js</h3><p>Functions and methods in this application are mostly native JavaScript and are intended for use by the browser. Node.js doesn&rsquo;t know about the DOM, so this kind of practice will probably be used more often to build new browser packages than to be used directly in the Node.js server.</p><h4>CommonJS</h4><pre><code>const F3H = require('@taufik-nurrohman/f3h');

const f3h = new F3H;

Expand All @@ -77,7 +77,7 @@
let from = document.querySelector('main'),
to = response.querySelector('main');
from.innerHTML = to.innerHTML;
});</code></pre><h3>ECMAScript</h3><p>Functions and methods in this application are mostly native JavaScript and are intended for use by the browser. Node.js doesn&rsquo;t know about the DOM, so this kind of practice will probably be used more often to build new browser packages than to be used directly in the Node.js server.</p><pre><code>import F3H from '@taufik-nurrohman/f3h';
});</code></pre><h4>ECMAScript</h4><pre><code>import F3H from '@taufik-nurrohman/f3h';

const f3h = new F3H;

Expand Down
67 changes: 47 additions & 20 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -353,6 +353,14 @@
node.addEventListener(name, then, options);
};

var fromStates = function fromStates() {
for (var _len = arguments.length, lot = new Array(_len), _key = 0; _key < _len; _key++) {
lot[_key] = arguments[_key];
}

return Object.assign.apply(Object, [{}].concat(lot));
};

function fire(name, data) {
var $ = this;

Expand Down Expand Up @@ -424,6 +432,16 @@
return new RegExp(pattern, isSet(opt) ? opt : 'g');
};

var getOffset = function getOffset(node) {
return [node.offsetLeft, node.offsetTop];
};

var setScroll = function setScroll(node, data) {
node.scrollLeft = data[0];
node.scrollTop = data[1];
return node;
};

var toCaseLower$1 = function toCaseLower(x) {
return x.toLowerCase();
};
Expand All @@ -432,6 +450,10 @@
return x.toUpperCase();
};

var toCount = function toCount(x) {
return x.length;
};

var toNumber$1 = function toNumber(x, base) {
if (base === void 0) {
base = 10;
Expand All @@ -440,6 +462,14 @@
return base ? parseInt(x, base) : parseFloat(x);
};

var toObjectCount = function toObjectCount(x) {
return toCount(toObjectKeys(x));
};

var toObjectKeys = function toObjectKeys(x) {
return Object.keys(x);
};

var toValue$1 = function toValue(x) {
if (isArray(x)) {
return x.map(function (v) {
Expand Down Expand Up @@ -476,10 +506,6 @@
B,
H;

function getCount(ofArray) {
return ofArray.length;
}

function getEventName(node) {
return isForm(node) ? 'submit' : 'click';
}
Expand All @@ -495,14 +521,14 @@
links = getElements('link[rel=dns-prefetch],link[rel=preconnect],link[rel=prefetch],link[rel=preload],link[rel=prerender]', scope),
toSave;

for (var i = 0, j = getCount(links); i < j; ++i) {
for (var i = 0, j = toCount(links); i < j; ++i) {
if (isLinkForF3H(link = links[i])) {
continue;
}

link.id = id = link.id || name + ':' + toID(getAttribute(link, 'href') || getText(link));
out[id] = toSave = fromElement(link);
out[id][getCount(toSave) - 1].href = link.href; // Use the resolved URL!
out[id][toCount(toSave) - 1].href = link.href; // Use the resolved URL!
}

return out;
Expand All @@ -519,14 +545,14 @@
scripts = getElements('script', scope),
toSave;

for (var i = 0, j = getCount(scripts); i < j; ++i) {
for (var i = 0, j = toCount(scripts); i < j; ++i) {
if (isScriptForF3H(script = scripts[i])) {
continue;
}

script.id = id = script.id || name + ':' + toID(getAttribute(script, 'src') || getText(script));
out[id] = toSave = fromElement(script);
out[id][getCount(toSave) - 1].src = script.src; // Use the resolved URL!
out[id][toCount(toSave) - 1].src = script.src; // Use the resolved URL!
}

return out;
Expand All @@ -539,7 +565,7 @@
styles = getElements('link[rel=stylesheet],style', scope),
toSave;

for (var i = 0, j = getCount(styles); i < j; ++i) {
for (var i = 0, j = toCount(styles); i < j; ++i) {
if (isStyleForF3H(style = styles[i])) {
continue;
}
Expand All @@ -548,7 +574,7 @@
out[id] = toSave = fromElement(style);

if ('link' === toSave[0]) {
out[id][getCount(toSave) - 1].href = style.href; // Use the resolved URL!
out[id][toCount(toSave) - 1].href = style.href; // Use the resolved URL!
}
}

Expand Down Expand Up @@ -614,10 +640,10 @@


function toID(text) {
var out = 0,
c,
var c,
i,
j = getCount(text);
j = toCount(text),
out = 0;

if (0 === j) {
return out;
Expand Down Expand Up @@ -685,7 +711,7 @@
return $;
}

$.state = state = Object.assign({}, F3H.state, true === state ? {
$.state = state = fromStates(F3H.state, true === state ? {
cache: state
} : state || {});
$.source = source;
Expand All @@ -712,7 +738,7 @@
status = null,
styles = null; // Store current instance to `F3H.instances`

F3H.instances[source.id || source.name || getCount(Object.keys(F3H.instances))] = $; // Mark current DOM as active to prevent duplicate instance
F3H.instances[source.id || source.name || toObjectCount(F3H.instances)] = $; // Mark current DOM as active to prevent duplicate instance

source[name] = 1;

Expand Down Expand Up @@ -948,8 +974,9 @@
return;
}

R.scrollLeft = B.scrollLeft = node.offsetLeft;
R.scrollTop = B.scrollTop = node.offsetTop;
var theOffset = getOffset(node);
setScroll(B, theOffset);
setScroll(R, theOffset);
} // Scroll to the first element with `id` or `name` attribute that has the same value as location hash


Expand Down Expand Up @@ -1034,13 +1061,13 @@
q,
href = t.href,
action = t.action,
ref = href || action,
ref = letSlashEnd(href || action),
type = toCaseUpper(t.method || GET);

if (GET === type) {
if (isForm(t)) {
q = new URLSearchParams(new FormData(t)) + "";
ref = letSlashEnd(ref.split(/[?&#]/)[0]) + (q ? '?' + q : "");
ref = ref.split(/[?&#]/)[0] + (q ? '?' + q : "");
} // Immediately change the URL if turbo feature is enabled


Expand Down Expand Up @@ -1212,6 +1239,6 @@
'JSON': responseTypeJSON
}
};
F3H.version = '1.1.9';
F3H.version = '1.1.10';
return F3H;
});
Loading

0 comments on commit bfc2b06

Please sign in to comment.