Element.toggleAttribute

#wejs 2018/8/21

icons
- https://design.firefox.com/photon/visuals/product-identity-assets.html
- https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Microsoft_Edge_logo.svg
- https://commons.wikimedia.org/wiki/File:Google_Chrome_icon_(2011).svg

Transcript

1. Element.toggleAttribute
   #wejs
   #wejs 2018/8/21 Jxck
   

   View Slide

2. Boolean Attributes
   ● 属性が有るか無いかで真偽となる属性
   ● つまり値はなんでも良い
   2
   
   toggle target
   
   toggle target
   
   toggle target
   
   toggle target
   

   View Slide

3. Boolean Attributes
   ● JS からはプロパティかメソッドから制御できる
   3
   // 各プロパティに対して
   target.disabled = true // or false
   // メソッド経由で操作
   target.setAttribute("disabled", "");
   // false を渡しても無効になるわけではない
   target.setAttribute("disabled", false);
   // 無効にするには消す
   target.removeAttribute("disabled");
   

   View Slide

4. Boolean Attributes
   ● 無効=削除 で直感的じゃ無い
   ● 操作に対称性がない
   4
   if(表示されてたら) {
   // 有効
   target.setAttribute("disabled", "");
   } else {
   // 無効
   target.removeAttribute("disabled");
   }
   

   View Slide

5. jQuery toggle()
   ● jQuery の toggle() は display 以外に複数関数を渡す書き方があった
   5
   // 1.8 以降はこの書き方は deprecated
   // display: none の切り替えのみに
   $target.toggle(
   () => {
   // 奇数回に呼び出される
   },
   () => {
   　// 偶数回に呼び出される
   });
   

   View Slide

6. toggleAttribute
   ● 顧客 開発者が本当に求めていたもの
   6
   // こう書きたい(true false)
   target.toggleAttribute("disabled");
   // もしくはこう(今どっちであっても false にする)
   target.toggleAttribute("disabled", false);
   

   View Slide

7. whatwg/dom issue #461
   7
   やろうぜ
   

   View Slide

8. whatwg/dom issue #461
   8
   やろう!!
   

   View Slide

9. Ship
   9
   ● Firefox
   ○ 61 をターゲット
   ○ https://groups.google.com/forum/#!msg/mozilla.dev.platform/wwU0TW80u1g/X_V3091yCAAJ
   ○ https://bugzilla.mozilla.org/show_bug.cgi?id=1469592
   ● Chrome
   ○ canary で使える
   ○ https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/mAWBTaANvmE/OgaCRH0
   4BAAJ
   ○ https://bugs.chromium.org/p/chromium/issues/detail?id=854960
   ● Safari
   ○ TP61 に入った
   ○ https://webkit.org/blog/8365/release-notes-for-safari-technology-preview-61/
   ○ https://trac.webkit.org/changeset/233475/webkit/
   ● Edge
   ○ 進捗不明(やってるっぽい)
   翌月には続々
   と実装が
   

   View Slide

10. see also
    10
    https://blog.jxck.io/entries/2018-07-20/toggle-attribute.html
    

    View Slide

11. Jack
    thanks
    

    View Slide