From f7c9650a56923466d50383f753859d625ecbf9f5 Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Wed, 30 Aug 2017 06:28:48 +0800 Subject: [PATCH] Update --- _drafts/deprecated/jquery-mobile-events.md | 28 ++++++++ _includes/2017/related-posts.html | 1 + jquery.md | 82 ++++++++++------------ js-appcache.md | 38 +++++----- js-fetch.md | 24 +++++-- js-speech.md | 13 +++- 6 files changed, 117 insertions(+), 69 deletions(-) create mode 100644 _drafts/deprecated/jquery-mobile-events.md diff --git a/_drafts/deprecated/jquery-mobile-events.md b/_drafts/deprecated/jquery-mobile-events.md new file mode 100644 index 000000000..5806458cc --- /dev/null +++ b/_drafts/deprecated/jquery-mobile-events.md @@ -0,0 +1,28 @@ +--- +title: jQuery mobile events +category: JavaScript libraries +--- + +### Mobile events + +For support for `tap`, `swipe`, `swipeLeft`, et al, use +[jquery.mobile.event.js][m]. Be sure to set `$.support.touch` first. + +To get `$.support.touch` (and family), use this from +[jquery.mobile.support.js][s]: + + $.extend($.support, { + orientation: "orientation" in window && "onorientationchange" in window, + touch: "ontouchend" in document, + cssTransitions: "WebKitTransitionEvent" in window, + pushState: "pushState" in history && "replaceState" in history, + mediaquery: $.mobile.media( "only all" ), + cssPseudoElement: !!propExists( "content" ), + touchOverflow: !!propExists( "overflowScrolling" ), + boxShadow: !!propExists( "boxShadow" ) && !bb, + scrollTop: ( "pageXOffset" in window || "scrollTop" in document.documentElement || "scrollTop" in fakeBody[ 0 ] ) && !webos && !operamini, + dynamicBaseTag: baseTagTest() + }); + +[m]:https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.event.js +[s]:https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.support.js diff --git a/_includes/2017/related-posts.html b/_includes/2017/related-posts.html index fb8d41bb9..1b5fcd20c 100644 --- a/_includes/2017/related-posts.html +++ b/_includes/2017/related-posts.html @@ -2,6 +2,7 @@ | where: "category", include.page.category | where_exp: "page", "page.url != include.page.url" | where_exp: "page", "page.deprecated != true" + | where_exp: "page", "page.redirect_to == null" | sort: "weight", "last" %} {% assign top_pages = site.pages diff --git a/jquery.md b/jquery.md index cc30e7b82..993e0e571 100644 --- a/jquery.md +++ b/jquery.md @@ -1,63 +1,55 @@ --- title: jQuery category: JavaScript libraries +layout: 2017/sheet +tags: [WIP] +weight: -1 --- ### Traversing - .children() - .closest('div') - .filter(':selected') - .find('div') - .has('div') +```js +$('.box') + .children() + .closest('div') + .filter(':selected') + .find('div') + .has('div') + .first() + .next('div') + .nextUntil('div') +``` - .first() +## Advanced features ### Extending selectors - // $(":inline") - $.expr[':'].inline = function(a) { - return $(a).css('display') === 'inline'; - }; +```js +$.expr[':'].inline = function (el) { + return $(el).css('display') === 'inline' +} +``` + +Enables `$(':inline')` ### Extend CSS properties - $.cssHooks.someCSSProp = { - get: function(elem, computed, extra) { - }, - set: function(elem, value) { - } - }; +```js +$.cssHooks.someCSSProp = { + get: function (elem, computed, extra) { + }, + set: function (elem, value) { + } +} - // Disable "px" - $.cssNumber["someCSSProp"] = true; +// Disable "px" +$.cssNumber["someCSSProp"] = true +``` ### fn.animate() hooks - $.fn.step.someWhatever = function(fx) { - // ... - } - -### Mobile events - -For support for `tap`, `swipe`, `swipeLeft`, et al, use -[jquery.mobile.event.js][m]. Be sure to set `$.support.touch` first. - -To get `$.support.touch` (and family), use this from -[jquery.mobile.support.js][s]: - - $.extend($.support, { - orientation: "orientation" in window && "onorientationchange" in window, - touch: "ontouchend" in document, - cssTransitions: "WebKitTransitionEvent" in window, - pushState: "pushState" in history && "replaceState" in history, - mediaquery: $.mobile.media( "only all" ), - cssPseudoElement: !!propExists( "content" ), - touchOverflow: !!propExists( "overflowScrolling" ), - boxShadow: !!propExists( "boxShadow" ) && !bb, - scrollTop: ( "pageXOffset" in window || "scrollTop" in document.documentElement || "scrollTop" in fakeBody[ 0 ] ) && !webos && !operamini, - dynamicBaseTag: baseTagTest() - }); - -[m]:https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.event.js -[s]:https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.support.js +```js +$.fn.step.someWhatever = function(fx) { + // ... +} +``` diff --git a/js-appcache.md b/js-appcache.md index bcf6335f5..6a2f958ef 100644 --- a/js-appcache.md +++ b/js-appcache.md @@ -1,27 +1,33 @@ --- title: applicationCache category: JavaScript +layout: 2017/sheet --- +## Reference +{: .-one-column} + ### applicationCache checking - if (window.applicationCache){ - // "Naturally" reload when an update is available - var reload = false; - window.applicationCache.addEventListener('updateready', function(){ - if (window.applicationCache.status == window.applicationCache.UPDATEREADY){ - window.applicationCache.swapCache(); - reload = true; - } - }, false); +```js +if (window.applicationCache) { + // "Naturally" reload when an update is available + var reload = false - setInterval(function(){ - try { // There's nothing to update for first-time load, browser freaks out :/ - window.applicationCache.update(); - } catch (e){} - }, 1000*60*60); // Every hour + window.applicationCache.addEventListener('updateready', () => { + if (window.applicationCache.status === window.applicationCache.UPDATEREADY) { + window.applicationCache.swapCache() + reload = true } + }, false) -### Reference + setInterval(() => { + try { + // There's nothing to update for first-time load, browser freaks out :/ + window.applicationCache.update() + } catch (e) { } + }, 1000 * 60 * 60) // Every hour +} +``` - * https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache +This is a deprecated HTML feature. See: [Using the application cache](https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache) _(developer.mozilla.org)_ diff --git a/js-fetch.md b/js-fetch.md index 379ebf918..382ebb756 100644 --- a/js-fetch.md +++ b/js-fetch.md @@ -1,13 +1,22 @@ --- title: fetch() category: JavaScript +layout: 2017/sheet +weight: -3 --- +### Fetch +{: .-prime} + ```js fetch('/data.json') .then(response => response.json()) + .then(data => { + console.log(data) + }) .catch(err => ...) ``` +{: data-line="4"} ### Response @@ -21,7 +30,9 @@ fetch('/data.json') res.redirected //=> false res.ok //=> true res.url //=> 'http://site.com/data.json' - res.type //=> 'basic' ('cors' 'default' 'error' 'opaque' 'opaqueredirect') + res.type //=> 'basic' + // ('cors' 'default' 'error' + // 'opaque' 'opaqueredirect') res.headers.get('Content-Type') }) @@ -47,8 +58,6 @@ fetch('/data.json', { ### Catching errors -Non-2xx responses are still successful requests. Use another function to turn them to errors. - ```js fetch('/data.json') .then(checkStatus) @@ -66,13 +75,18 @@ function checkStatus (res) { } ``` -## Using with node.js +Non-2xx responses are still successful requests. Use another function to turn them to errors. + +### Using with node.js ```js -var fetch = require('isomorphic-fetch') +const fetch = require('isomorphic-fetch') ``` +See: [isomorphic-fetch](https://npmjs.com/package/isomorphic-fetch) _(npmjs.com)_ + ## References +{: .-one-column} - - diff --git a/js-speech.md b/js-speech.md index 81e58a32c..552c9fc07 100644 --- a/js-speech.md +++ b/js-speech.md @@ -1,8 +1,13 @@ --- title: JavaScript speech synthesis -category: Ruby +category: JavaScript +layout: 2017/sheet +weight: -1 --- +## SpeechSynthesisUtterance +{: .-one-column} + ```js function speak (message) { var msg = new SpeechSynthesisUtterance(message) @@ -12,6 +17,8 @@ function speak (message) { } ``` -## Reference +```js +speak('Hello, world') +``` -* +See: [SpeechSynthesisUtterance](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance) _(developer.mozilla.org)_