From ac24bb801db37aec13e7e9710b4044305ca38e06 Mon Sep 17 00:00:00 2001 From: Rahul-Sagore Date: Fri, 12 Feb 2016 08:12:15 +0530 Subject: [PATCH 001/101] fix: snackbar container center aligned --- src/snackbar/_snackbar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/snackbar/_snackbar.scss b/src/snackbar/_snackbar.scss index 09e9c6da6..bc85be009 100644 --- a/src/snackbar/_snackbar.scss +++ b/src/snackbar/_snackbar.scss @@ -43,7 +43,7 @@ border-radius: 2px; } &--active { - transform: translate(0, 0); + transform: translate(-50%, 0); pointer-events: auto; transition: transform 0.25s $animation-curve-linear-out-slow-in; } From 60d213474165b6cb2b04beabc888211d14707252 Mon Sep 17 00:00:00 2001 From: Rahul-Sagore Date: Fri, 12 Feb 2016 08:52:42 +0530 Subject: [PATCH 002/101] Initial position snackbar center aligned --- src/snackbar/_snackbar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/snackbar/_snackbar.scss b/src/snackbar/_snackbar.scss index bc85be009..8f500f15b 100644 --- a/src/snackbar/_snackbar.scss +++ b/src/snackbar/_snackbar.scss @@ -28,7 +28,7 @@ display: flex; font-family: $preferred_font; will-change: transform; - transform: translate(0, 80px); + transform: translate(-50%, 80px); transition: transform 0.25s $animation-curve-fast-out-linear-in; pointer-events: none; @media(max-width: $snackbar-tablet-breakpoint - 1) { From f0baa7a2b5484c8b11c7d215f0e06ef5c21c071f Mon Sep 17 00:00:00 2001 From: Rahul-Sagore Date: Fri, 12 Feb 2016 10:34:02 +0530 Subject: [PATCH 003/101] gupl build command run --- src/snackbar/_snackbar.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/snackbar/_snackbar.scss b/src/snackbar/_snackbar.scss index 8f500f15b..3a05f6d6d 100644 --- a/src/snackbar/_snackbar.scss +++ b/src/snackbar/_snackbar.scss @@ -79,3 +79,4 @@ } } } + From 41c577555d2c8bb94ead0b967211b92af53abb4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= Date: Fri, 12 Feb 2016 11:40:49 +0000 Subject: [PATCH 004/101] Fix card text width. Potentially breaking change for styling. We may end up reimplementing cards, but merging this small fix now gives us a nice baseline anyway. Fixes #1396. --- src/card/_card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/card/_card.scss b/src/card/_card.scss index 8bd7cbd43..c77bf80be 100644 --- a/src/card/_card.scss +++ b/src/card/_card.scss @@ -83,7 +83,7 @@ line-height: $card-supporting-text-line-height; overflow: hidden; padding: $card-vertical-padding $card-horizontal-padding; - width: 90%; + box-sizing: border-box; } .mdl-card__actions { From 2f8a8b0441d652b5de70c7817d286402fd2b5be3 Mon Sep 17 00:00:00 2001 From: Jonathan Garbee Date: Sat, 13 Feb 2016 07:30:49 -0500 Subject: [PATCH 005/101] Add contributor note about the branch split. --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index bcde59249..0604d2386 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,8 @@ static content websites. It doesn't rely on any JavaScript frameworks or libraries. Optimized for cross-device use, gracefully degrades in older browsers, and offers an experience that is accessible from the get-go. +> **Important note for contributors** - The master branch now has breaking V2 changes. As such it can not be merged into `mdl-1.1`. If you are making a contribution to 1.1, then please send pull requests directly to that branch. We will routinely merge that back into master. Thank you! + ## Use MDL on your site? **This document is targeted at developers that will contribute to or compile From 99d3ea700cc3c2c66cf9fcf7555e2d63bd1b6fcc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= Date: Mon, 15 Feb 2016 12:04:20 +0000 Subject: [PATCH 006/101] Updating autoprefixer config and README for V2.0 supported browsers. Using current stable version for evergreen browsers, IE11 for compatibility, and Safari/iOS Safari version 8. --- README.md | 16 +++++++++++----- gulpfile.babel.js | 16 +++++++--------- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index f28914dfd..cf34633d3 100644 --- a/README.md +++ b/README.md @@ -24,12 +24,18 @@ MDL. If you are looking to use MDL on your website or web app please head to ## Browser Support -| IE9 | IE10 | IE11 | Chrome | Opera | Firefox | Safari | Chrome (Android) | Mobile Safari | -|-----|------|------|--------|-------|---------|--------|------------------|---------------| -| B | A | A | A | A | A | A | A | A | +Supported evergreen browsers: -A-grade browsers are fully supported. B-grade browsers will gracefully degrade -to our CSS-only experience. +- Chrome +- Edge +- Firefox +- Opera + +Supported versioned browsers: + +- Internet Explorer 11 +- Safari 8 +- Mobile Safari 8 ## Getting Started diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 6bd08c948..205c1bd84 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -56,15 +56,13 @@ const banner = ['/**', let codeFiles = ''; const AUTOPREFIXER_BROWSERS = [ - 'ie >= 10', - 'ie_mob >= 10', - 'ff >= 30', - 'chrome >= 34', - 'safari >= 7', - 'opera >= 23', - 'ios >= 7', - 'android >= 4.4', - 'bb >= 10' + 'ie >= 11', + 'edge >= 20', + 'ff >= 44', + 'chrome >= 48', + 'safari >= 8', + 'opera >= 35', + 'ios >= 8' ]; const SOURCES = [ From cc96059db4910abb4c6b54feff85a9fb6a16d25c Mon Sep 17 00:00:00 2001 From: alex Date: Mon, 15 Feb 2016 17:05:50 +0100 Subject: [PATCH 007/101] Deploy to staging only when pushed to master --- .drone.sec | 2 +- .drone.yml | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.drone.sec b/.drone.sec index 0e426a7a3..724f6903b 100644 --- a/.drone.sec +++ b/.drone.sec @@ -1 +1 @@ -eyJhbGciOiJSU0EtT0FFUCIsImVuYyI6IkExMjhHQ00ifQ.GYHLUbhMM5FLCG5x51gi1q1DgFfua7YeIJxrbNYLm3S260BhF0FZ4whmPYOzJ78K-vJD588wjh3S_XOoOoutDKXFJeEScqZAjrP9p718-YrFvcUxBOeN-xHRezFFhSuHBDbCPpRpsJQzWm1wQDu5scIIZktYdMt9BMiI9fXjqAdfQ0gNV19vsftJwjOMkoToUHfvCLrVR6EIVZIVTfVamLZgML06WJz5UShT6O40U9VdYES3cYQtDj4nUXpvXLlge_Tb6l8SYLfo4WlJ7hkyJFTncUd6MJ4Z-kQY20yA_7eg6HP_Kqeunc-Y8dj_s-7hRUfgAcpwKvUdq4SUI5ZMkA.8-W2m3R2Ct09r7H5.tqlmsQiUqXfTPWEBxO7Antm14zgXlaWqIcyfEyo1_uHxtPktjepo7IelYYvifsqcXId9JXcamSunxUTF91Z7MHwjankmNIBcHxPbygDH2tATmxHDisSN1CwzmaDziPghLYp8uPrmd-UuzkY3JR4A3xbwCqSpP0So1MZzNoSLpnAhJyGYaVgJhL4GrMdtj37hVU5YR7b52sTuaBNtqHDouME2bCJq2SCv9D0O-MCgW0VObwO9RGu7Lga7hAuJvZNZSxlBTsx9XOIrd-blRSagf3D8kRnaa6eQzSGkILgmg4ikxBiwsfhqZ00UIWv-UfxlQ1EUhxhLA6G9GfzyJEsRCoD_XwevHrN6ypIZar5arEBUI6n2YPhJBnS-1-ya03KglWXZ4EskE5wPoNCOyG00WVpZUVNqm2MXA_IzOlpckm4SbfwwDh_1E9bIS5RSyI44RtQwI2bqdCoQKpfvpnS5lbgzGo7vhA2JG9EKzk6j-zQTlVipq6bBOhnjsO_6vvmOBvsFBw7StHDjcz7fudDGvBVapTgIiwtwQPRDIvwN52dd8--LkP9yEMKwUOyp0BWazXeit4dN-x39aPT4efI_w0uAkiBacEQWUsvjLkhrtmQAplLVPwO96oHu7A6tL5RjVA4aGgjPj7kKRU2EO5x0k36VYSSETmhF0URmb9DFvQFSV10rePt3kEhdDSgEblQOImckzVdo7icLp1bsJg575o03Bu04dJeJJhcPn0vrdfdaS-7VJXg-ipyGrKzGTp1UYVnMnHODKm5iHW-GLgoLavOJ7rbYqS8X6zD1d2ptW_zYgYRYAwGpE8BJwqNDFQTi8q3HmaXOGKkKBDkbRxq46k-4-qGAc5S7qmddVzoYArlLaT_suUccY4CjlykyuULKFUoB4OiP7lA9ilpp2l3cit4sETROtkSULy00tGsVQ6Zr_CkAiuRNksV-DJa5JjvtzyThm88Kqulz9Mabe6W-9wtWjOim7n4x8WdcZEll2m-PpRTOsjpL2oKhv37TE-SVpqVYv4djJgOpfd4JEEErEnrlEg4cjIFAZeB1fuoKDF8hm978b6hTOFqrqI7UAynnP9MKXOMaKtxcEmfHSkhMHCl7oPvtsKs2yhRVhYwk3UOgjo5A2ZP1YqLneW81T8W2cd9qqQyOCCEc7ERA9h8sG1t-WlvxOwSGOS6Uh1cZzbYuTCChvfK7Nopk7SejSuA0OfLY7-WaUXXeu-hRkghAdJTaf-N_a4oi8MKauk_rG8lfpS3O94_Wjj5fX-taBfjxfiWJ3HIMAbb2wvCcrHlosWAy64QhxK3jU1ItgJ9C_ENZtc7KLf3R_d0t-BsBN3cmzigboOaJgGRpF7UuKssPpkgn6qcTIdQkzFsQ7ciWIvd53StxyD7ImI_2Q5yRSnPosFAeBTu55aU04FJcpPOZADBondsEWu-9mOR1uOz3xt7MYlhNwEtvvh7xlpHN0Au19eJYxqzuiwyVh1k-X13Z5lTuclsp1GTq1Rk5kCDyI6QgGNWAnZ9tc-UngHp6iRz0sgKk8v-jnHazJoNKMoXpxOb_1kR_RrIedMAG2h-ku1D4I9mPhjytNuQUW_OB-BM6cO3kU5WSJ6QHUulxPmOPoLwOuy8LooCKq9fFJOFObRnC1M16bwv1sFwW1Btn815VbLi4lCb35KeY1VXQ_OIYe7oI1x0nuTuJC_pLTWn6B4BOqGJNIkVbHBsWgUxWU6vRCqZT7CeTed0oXoAbICJOXBICjWzDK-JqZqixPxV21s2gm6pIr9G3AMGEtJx3yj38AV0PAMr35ODLnPeFJznY-gQGLJW0hcJXocfEbQye_7ZYa-cyTGGsoWyNhR6cXavbxaO2LPggIOQCxpMn3I-N0pNINPjZeP3okTdTWSaFIbyM_s-a8UPLqV-UtBBHj8qkMm3bQXu8-H6cofVMNfW9-pKTRKXNnaweWPafOd6Rl-EnRsQJS0K110iLg3TJi8tIqS9XT5Oh_0Q_ouas3bHSG1UVTWrSv4uaWq67nSYVqA5N0p4gJyOvnrdBtTzHDDk9n2JwjUN5YmNpPKEXVq7yeq46lPSapVd52hSWV9NUftFh9CFavPVSjFwarXXpR6O0379M8Pux-g55kIxVP802RwVITnYQjfyqg2HYCxmvEKgtfb4RjE9RZw78LcwFakyjdDk5k4jjpJOBYI4W68MauMNRbJxiMQn2E38abNksQh0R5LflnAz3a0Gm0WpGEtK4F1aOt9rES7HNiSIqGHGRukLzfs8XR7vwIFHYQ_--e5MZSdjsI0ty3NxYziqEAgrd3KFkaMe1xRVOaeSdg7WgTD6qUXeFLCMO4euoi6WIR7nKQjlOEPZGuMQ_pW1kLiL9oynJusjuJQp1GFKvUqGNotP1tqIdz64V9vUeICO22-g_BCuQmOQ9kbyRfBAeLAk27gfMWWiT4hExR-r_jc-gt_X67fTMsJzO-jK4QO3nzavEM10C85LfGxNI9AjLy77XPSmtz1mkwXbftoV_NxVcNSVYQ9DeVCp-_L0YE7gFy_uNUI6KZDEBzHqOzqEp8yIMY91E3YfNVJqW17puUO7gE13Egk_x8KZFwS25SjKhwzGUoOkiKG0yM5Dgli0QFgXmy00jaY1l3bV9a6JdKEqEsh2kxlxItiBdLivTNb37AXEGM_1PFP9QikZ9w8rdzUfForw60zSCAtR_RSjO0YLP7RrXumIaXsSL8_JqQxqVEl_0FQ2j3M3ENlchnUbUnUDn-5n-mg6EQ3mm3episTPVszfMKS44jTskwRWKNfGxcdRp3nD9K80ZFKeVCXBMziOpfDHCrmbFCskdZA67GRGYDAAzAocyL5WgzUGsF7bLQfiSnHjgmafD8FsSZpdwS4zmDtCWazxnde5kpvr_-WXrBk8qQgJcfNJfCqTn0wUM3Bum4r6FJX9acq8DdX7JwRGR-7felujjmNYwnjLWgaHbHx9Impq_VMstCFAkx-nwNoO1f6qhP4igAGNDvJFF6hYT9tcSeg6_7ttUedOBxjiLgpWx2yQQSLh8mmo-2fDXupsKT7a4D1-FuKCjCFb_QDEITCej1XLbiT2wpxt38Ovd94ebGqcjuT3nOa338M6kIo4k6s12Qltt4v0kEPXJkx2tSrlBN7gqp0mmIVsHpuPnV3nC7UDv0Frv7GJByL1Vl0y7zlN1-l4u3V119F05zmn4.nhu7BppDPbNrsewSDoihWg \ No newline at end of file +eyJhbGciOiJSU0EtT0FFUCIsImVuYyI6IkExMjhHQ00ifQ.IMU-nZWxI5VX9M2qXpnm_RCJBkWsrwUPayegJRJmxbFULdKddGOvWrj9MVcXKtKjtr_TIVkv4hl7B_nFPdyuzncAv-IPPFqh2ZwAG1Gd04Idaypwb6Ih91ghSWIVCD3l_zmVh2vUSVq2QS6fNf20sI7rg13Bg58_q7HHQSjbJYioEv-TrqL_NohpiADtjsf7dm5SW6K0hYkLr30CuHxoqAH5zD_fMgu3aGS81SCqe-Zb8Yq20FkcfQC6xvg9jgtYLZK7KCdFsTWUXXThy7JWGOAgXpDrD9H3R6ufVxE0WxVXUi-H5VCugQ-zInqo2Xb7BQqFFEXP0qGjzvZJfyZu_A.Jyqqy8dL-X9kGXFm.SClrZgrO6A3I9sH0RCHctsflY8Gkgtq28L7RE2dYFArK1ykUcmZd0nZM0WyhJM-IYE4xvtEHIrx9AZ-r7USsqT4fXgpz781WyhckHz_pyNMLlX5XhNh7q8o2NnWbMklEQj_LCbC_IhCMzX0_fonxN82WwtBivTj4PLutMajMmFO73TBBdeZswqmWv4NyOk6YZQiDUUtxXx2_oXiGuKx0IXEG0a7Onm_ByBkc2UO1dYtea4i8qjpWI9yIJaVOigGvLJPWHWtWD7sYpyurPIgigzlCtRtntquoRlSDrbGTQeY1aoRmcyhkyZENTC5-8T1L_NwG3z3vN8OGfLW0PpfvJartAsTnwqcjvRp4eEkVOtDX6HsP8fsxwIYZYx-yCLzz2SaYwdwpeXOLNkwUe_55vdoBv5Um-6Ntg-m6FhI_AomnFIkmd8qCsWdCa0jCtcJTqYP9Cgk8-DWHs2Q7WSTvy3IfPzEtX-cGbqKqG1UgPBdhv4xPm6AkifcwMZiruhdyorFpkPxV34iFVuoVw-gWy8Qcuk7q1AhR9yetVPqDEHViC-szypbzIqgavq2EFIkdU1WALkZw9sklRUFYjVYpG9GLvR9qHOzqdf3lnYhERA_J78Gci_8AaRM1_xjRQRqvsJRDS5Q-BVIosRswGpbYOPPq8HnACkvawuulXO509auE0urjxDkn13Ox8sNFwE7Eysp85HA81XBaFmtkksHLX_nn2bCAlqyXJlxN8oAN7Xl28qbozfalLtjszWpVPRs9xAKwzzLYFJNe3zoSjCDIp9maIsLlTQtQEibBi35EFfEDyfkN3QFBkP_bxi2ZJ76nGT_qU4JkBWK4vA8j05JSlxLopc4GWa9QqYyS5inU2xrx5bELGU-Zz5NdUDgponijvRP-BRLNSRv5ce5seHo5uG3-fo2X68gvSNrCz1R1bJJ1kuy7-Unu2Xunl_Q486m3ivaQNfRadKPAaGnf889XBrZILWB2cHlE-nJqz7hBiYiMAlqrtn9Ypsco-sb7zdJfsu-U8wT5BS5MQzzwUEZcemNiO6Yl7SqqGBcbl1ViWNSCjISIhewcNr4L7-7I7WT3EkoM6sWKi2r-PaKeWfJAqNEKKvk5xZ9MkRONzCwlRqfUPIJJV_zqR4dyvQYglzlgO4kemdsEmvX49Syz4GPW1euJHND46ejLJFJO1S1WQkSCJ1q5nHonmguOzFkJaC7KOo5Ty9aRTpF5OzUALCRLH7CS-BzsHBgtCXULnl4tptpc-4gKqXz2ACyMouD7QDzWl7gMM6mteMT83hyJcS8Ua44GZriQ5Cy5CH2GmMGh4n48cAqHsYF-znDbf46mAkDTKdCDKmlERdgXBToZKNyoWD1TzMjJzVzn6dEBEsVGeRDmvJp6VLHaJWQNFnacXQPxGa19baa9LNJNttT5zUxZCV84NJTjVlAI63COmnDF9pqaRwHsqP-GUJvmTJLAFKK9Llwpl3HyObPBx_fEIQHthOmDh7Iqk7F1k_qs4ZAoloHqKMpuxS9Nhk1DwGwjD4EsatCLMY-n2WwmmPrO1XhPlnZJrOXQumjn3DZARxVCHqwsQZ-wckZRHHwADhCDsEahZpIJjwVqUqfFvl6ZsDNrwSntGDh492waTzozv9pEp9MURPTUE1yxA5MQ85Jecor9MLxeUSwIZsrw3Td93lXe4JRfFT3n4uttg6nZcsdrZRTjMRhWgiHkRvP8hs6LWJOcFuyWtDScNO942K-SqZefLsSIzkQA_ytkIYZzaYP9vVUf4fWq8jOvrZuCHGi36UdcwURkDqUusFs_Ur-UNOeTOeUobRBwabJGhkZdz-hZaMrv8-JSAAl7ntg6rOl6Lgu9CUbRgYJApz2RdoTqWvm9bSuizrO9d2fBIiOV4MmB_xI11Mbn52OAMl9PWTPTd9L1IXyScr7nVdbMOqsie2wjH9JT_urKJ0uQBPCSbKFjxdxq09eWZ_sxKwLAk9g4LVmq4iUikT1cw6eleacOgh-TOdEZkxTU64BbH1JnWhYvlBTUr4LB6oEP6fkTcvSED-V7alczT8vomLLE_z9hsMx23GRI-hDGB0jOgMRXmyl25Wy6OCPVPIeTyjGR4V5UbKGsYYkbF6s_GqpU-orzH_xdBhmaX9CpWPyHCBezfkBFSUJsFBlhrfkqUMcjt4jexrvRKFlfWo4e6ikQgqSPMwrljIslRWMR2yXiuFK4WnKOQLiPXNL_4GOt_rAozN_NfVMxrOPO6KubYhPi7668_ajoRW8KvCZrYZFtYvmhTo-K-HJ_S8Z8dUyUSj-ZYJylSCzUe6hHp2JLa8NeHj_RlXCIyGITn5MSWITC2wHlkunCkBPM17B5F48i1pLmvlMuR8KqTkrNW9JuReoH0qb5Z4NBVwHLDWyPEh9rZZEmoCvHvqGffzuIRU-H3NVksCsJWLuZbYu7inJ0A5ggv8_gYN2JeYFW_TX5CuVsPKSPoQvLqtZL5r8J3RPtxWAOA9jZom-Y4dAGHBQ6LUesVCrkYzDraHkoi4CQjEPv1QYwrJFqjCaIeYL33NP6ZC8Bfazs45JX7PChzEeBZ0VpEh6XaFX3sp_2oQZbtunHz08sCqrzwUCZnB4vy_wiK67x-eoSQJVkz0gtV6DrQitwnKgF3LQvcHtad8SVgdRnM8s7xjEsNNspv60SqMfzNq14xGlgUmyPcXROiwl4vTj-TNjHejZY6ndK6KXe-0fc59bYWDCHrLkWsjhNSzIiQKCJmOTROPY-bRZDoRjlX6avnikhG2_1v_F0mg6eZGHNEie9nMExGyPMZyK1uXsNNrxysRsyJNYpGBtfUVyg_V0oGqyxBkBBXofm7EAlsr3CQ-JDo-xu-DewTh789oiaQTbtfzQtbicHkIAHPimJg-m4XLcTfh5HznWZTjfKWStSnXNCsu0DKYQjQHN0nEhniNaRZ3whuB9lLcJLDA5Nsk1wnKwYjqW_zqOXOp1wgjzMrfss0iMk0EHS5j15lVzpNAZQgiO6iWoYjsPriyBFtPtUIppx_XCp5N_SzjPd4nQhZSnv5hYCmuhYUfpHjppnWmJpIi0qMNlXFP4SM1q2p77xa4MREo6HgztCXHyvovWIt5NofaUT6Evg08ZU_PWg6vzyGCqA4KZUxarlogi5NHUB0zrGTyqH6KNpgNaa4ImOj0CO8b8JTW4wBhrLe8Mv08FCkLrGyLLT.RkKo3HIFtS6tx_bnvosSbQ \ No newline at end of file diff --git a/.drone.yml b/.drone.yml index 1521f641e..9c689b200 100644 --- a/.drone.yml +++ b/.drone.yml @@ -29,6 +29,7 @@ publish: when: repo: google/material-design-lite branch: master + event: push auth_key: > $$SERVICE_ACCOUNT_KEY source: dist From 1a68ec9026661e563552ec421d377f096ef2fc60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= Date: Tue, 16 Feb 2016 16:01:00 +0000 Subject: [PATCH 008/101] Removing requestAnimationFrame polyfill now we've dropped IE9. --- docs/_assets/customizer.js | 6 ++--- gulpfile.babel.js | 2 -- src/menu/menu.js | 2 +- src/ripple/ripple.js | 4 +-- src/third_party/rAF.js | 50 -------------------------------------- test/index.html | 7 +++--- 6 files changed, 10 insertions(+), 61 deletions(-) delete mode 100644 src/third_party/rAF.js diff --git a/docs/_assets/customizer.js b/docs/_assets/customizer.js index 33a69d26d..26459deb1 100644 --- a/docs/_assets/customizer.js +++ b/docs/_assets/customizer.js @@ -86,7 +86,7 @@ function init() { mc.template = this.responseText; mc.highlightField('Indigo'); mc.highlightField('Pink'); - window.requestAnimationFrame(function() { + requestAnimationFrame(function() { mc.updateCDN(); mc.updateStylesheet(); }); @@ -369,7 +369,7 @@ MaterialCustomizer = (function() { } this.highlightField(g.getAttribute('data-color')); this.wheel.setAttribute('class', ''); - window.requestAnimationFrame(function() { + requestAnimationFrame(function() { this.updateCDN(); this.updateStylesheet(); }.bind(this)); @@ -385,7 +385,7 @@ MaterialCustomizer = (function() { /* falls through */ case 0: this.highlightField(g.getAttribute('data-color')); - window.requestAnimationFrame(function() { + requestAnimationFrame(function() { this.wheel.setAttribute('class', 'hide-nonaccents'); }.bind(this)); break; diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 205c1bd84..274e606ed 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -68,8 +68,6 @@ const AUTOPREFIXER_BROWSERS = [ const SOURCES = [ // Component handler 'src/mdlComponentHandler.js', - // Polyfills/dependencies - 'src/third_party/**/*.js', // Base components 'src/button/button.js', 'src/checkbox/checkbox.js', diff --git a/src/menu/menu.js b/src/menu/menu.js index de5b3b996..dd7665fe6 100644 --- a/src/menu/menu.js +++ b/src/menu/menu.js @@ -399,7 +399,7 @@ // Wait for the next frame, turn on animation, and apply the final clip. // Also make it visible. This triggers the transitions. - window.requestAnimationFrame(function() { + requestAnimationFrame(function() { this.element_.classList.add(this.CssClasses_.IS_ANIMATING); this.element_.style.clip = 'rect(0 ' + width + 'px ' + height + 'px 0)'; this.container_.classList.add(this.CssClasses_.IS_VISIBLE); diff --git a/src/ripple/ripple.js b/src/ripple/ripple.js index c39ed8ad1..e7787a846 100644 --- a/src/ripple/ripple.js +++ b/src/ripple/ripple.js @@ -109,7 +109,7 @@ } this.setRippleXY(x, y); this.setRippleStyles(true); - window.requestAnimationFrame(this.animFrameHandler.bind(this)); + requestAnimationFrame(this.animFrameHandler.bind(this)); } }; @@ -240,7 +240,7 @@ */ this.animFrameHandler = function() { if (this.frameCount_-- > 0) { - window.requestAnimationFrame(this.animFrameHandler.bind(this)); + requestAnimationFrame(this.animFrameHandler.bind(this)); } else { this.setRippleStyles(false); } diff --git a/src/third_party/rAF.js b/src/third_party/rAF.js deleted file mode 100644 index d2e8d7774..000000000 --- a/src/third_party/rAF.js +++ /dev/null @@ -1,50 +0,0 @@ -// Source: https://github.com/darius/requestAnimationFrame/blob/master/requestAnimationFrame.js -// Adapted from https://gist.github.com/paulirish/1579671 which derived from -// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ -// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating - -// requestAnimationFrame polyfill by Erik Möller. -// Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon - -// MIT license - -(function() { -'use strict'; - -if (!Date.now) { - /** - * Date.now polyfill. - * @return {number} the current Date - */ - Date.now = function() { return new Date().getTime(); }; - Date['now'] = Date.now; -} - -var vendors = ['webkit', 'moz']; -for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) { - var vp = vendors[i]; - window.requestAnimationFrame = window[vp + 'RequestAnimationFrame']; - window.cancelAnimationFrame = (window[vp + 'CancelAnimationFrame'] || - window[vp + 'CancelRequestAnimationFrame']); - window['requestAnimationFrame'] = window.requestAnimationFrame; - window['cancelAnimationFrame'] = window.cancelAnimationFrame; -} - -if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || !window.requestAnimationFrame || !window.cancelAnimationFrame) { - var lastTime = 0; - /** - * requestAnimationFrame polyfill. - * @param {!Function} callback the callback function. - */ - window.requestAnimationFrame = function(callback) { - var now = Date.now(); - var nextTime = Math.max(lastTime + 16, now); - return setTimeout(function() { callback(lastTime = nextTime); }, - nextTime - now); - }; - window.cancelAnimationFrame = clearTimeout; - window['requestAnimationFrame'] = window.requestAnimationFrame; - window['cancelAnimationFrame'] = window.cancelAnimationFrame; -} - -})(); diff --git a/test/index.html b/test/index.html index 0d74360b5..7a3661446 100644 --- a/test/index.html +++ b/test/index.html @@ -15,9 +15,6 @@ - - - - - - + - - - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + - + diff --git a/test/unit/spinner.js b/test/unit/spinner.js index 33ff276dd..76782f888 100644 --- a/test/unit/spinner.js +++ b/test/unit/spinner.js @@ -16,59 +16,57 @@ describe('MaterialSpinner', function () { + function createSpinner() { + var layerHtml = '' + + '' + + ''; + + var spinner = document.createElement('div'); + spinner.className = 'mdl-spinner'; + for (var i = 0; i < 4; i++) { + var layer = document.createElement('div'); + layer.className = 'mdl-spinner__layer'; + layer.innerHTML = layerHtml; + } + + return spinner; + } + it('should be globally available', function () { expect(MaterialSpinner).to.be.a('function'); }); it('should upgrade successfully', function () { - var el = document.createElement('div'); - componentHandler.upgradeElement(el, 'MaterialSpinner'); - expect($(el)).to.have.data('upgraded', ',MaterialSpinner'); - }); - - it('should be a widget', function () { - var el = document.createElement('div'); - componentHandler.upgradeElement(el, 'MaterialSpinner'); - expect(el.MaterialSpinner).to.be.a('object'); + var el = createSpinner(); + var spinner = new MaterialSpinner(el); + expect(spinner).to.be.an.instanceof(MaterialSpinner); + expect(el.classList.contains('mdl-spinner--is-upgraded')).to.be.true; }); - it('should have public methods available', function() { - var el = document.createElement('div'); - componentHandler.upgradeElement(el, 'MaterialSpinner'); - var methods = [ - 'start', - 'stop', - ]; - methods.forEach(function(item) { - expect(el.MaterialSpinner[item]).to.be.a('function'); - }); + it('should have public properties available', function() { + var el = createSpinner(); + var spinner = new MaterialSpinner(el); + expect(spinner.active).to.not.be.undefined; }); it('should start successfully', function () { - var el = document.createElement('div'); - componentHandler.upgradeElement(el, 'MaterialSpinner'); - el.MaterialSpinner.start(); - expect($(el)).to.have.class('is-active'); + var el = createSpinner(); + var spinner = new MaterialSpinner(el); + spinner.active = true; + expect(el.classList.contains('is-active')).to.be.true; }); it('should stop successfully', function () { - var el = document.createElement('div'); - componentHandler.upgradeElement(el, 'MaterialSpinner'); - el.MaterialSpinner.start(); - el.MaterialSpinner.stop(); - expect($(el)).to.not.have.class('is-active'); - }); - - it('should create layers successfully', function () { - var el = document.createElement('div'); - componentHandler.upgradeElement(el, 'MaterialSpinner'); - var html = el.innerHTML; - expect(html).to.contain('mdl-spinner__layer'); - expect(html).to.contain('mdl-spinner__layer-1'); - expect(html).to.contain('mdl-spinner__layer-2'); - expect(html).to.contain('mdl-spinner__layer-3'); - expect(html).to.contain('mdl-spinner__layer-4'); - expect(html).to.contain('mdl-spinner__circle'); + var el = createSpinner(); + var spinner = new MaterialSpinner(el); + spinner.active = true; + spinner.active = false; + expect(el.classList.contains('is-active')).to.be.false; }); - }); From 26b1594b894a822d609945c21d03643e17ecee4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= Date: Thu, 2 Jun 2016 14:23:31 +0100 Subject: [PATCH 056/101] Significantly simplify spinner markup --- src/spinner/_spinner.scss | 178 ++++++++---------- src/spinner/snippets/spinner-default.html | 44 +---- .../snippets/spinner-single-color.html | 8 +- test/unit/spinner.js | 19 +- 4 files changed, 98 insertions(+), 151 deletions(-) diff --git a/src/spinner/_spinner.scss b/src/spinner/_spinner.scss index e08a284b5..b0b088848 100644 --- a/src/spinner/_spinner.scss +++ b/src/spinner/_spinner.scss @@ -38,29 +38,33 @@ width: 100%; height: 100%; opacity: 0; + white-space: nowrap; + + .mdl-spinner.is-active & { + animation-name: mdl-spinner__fill-unfill-rotate; + animation-duration: 4 * $spinner-arc-time; + animation-timing-function: $animation-curve-fast-out-slow-in; + animation-iteration-count: infinite; + opacity: 1; + } } @for $i from 1 through length($spinner-colors) { - .mdl-spinner__layer:nth-of-type(#{length($spinner-colors)}n+#{$i}) { + .mdl-spinner__layer:nth-of-type(#{$i}) { border-color: nth($spinner-colors, $i); .mdl-spinner--single-color & { border-color: $spinner-single-color; } - .mdl-spinner.mdl-spinner--single-color.is-active & { - opacity: 1; - animation: - mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time) - $animation-curve-fast-out-slow-in infinite both; + .mdl-spinner.is-active & { + animation-name: mdl-spinner__fill-unfill-rotate, + mdl-spinner__layer-#{$i}-fade-in-out; } - .mdl-spinner.is-active & { - animation: - mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time) - $animation-curve-fast-out-slow-in infinite both, - mdl-spinner__layer-#{$i}-fade-in-out #{' '} (4 * $spinner-arc-time) - $animation-curve-fast-out-slow-in infinite both; + .mdl-spinner.mdl-spinner--single-color.is-active & { + opacity: 1; + animation-name: mdl-spinner__fill-unfill-rotate; } } } @@ -76,121 +80,101 @@ to { transform: rotate(4 * $spinner-arc-size); } } -/** -* HACK: Even though the intention is to have the current .mdl-spinner__layer-N -* at `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome -* to do proper subpixel rendering for the elements being animated. This is -* especially visible in Chrome 39 on Ubuntu 14.04. See: -* -* - https://github.com/Polymer/paper-spinner/issues/9 -* - https://code.google.com/p/chromium/issues/detail?id=436255 -*/ @keyframes mdl-spinner__layer-1-fade-in-out { - from { opacity: 1; } - 25% { opacity: 1; } - 26% { opacity: 0; } - 89% { opacity: 0; } - 90% { opacity: 1; } - 100% { opacity: 1; } + 0% { opacity: 1 } + 25% { opacity: 1 } + 26% { opacity: 0 } + 89% { opacity: 0 } + 90% { opacity: 1 } + to { opacity: 1 } } @keyframes mdl-spinner__layer-2-fade-in-out { - from { opacity: 0; } - 15% { opacity: 0; } - 25% { opacity: 1; } - 50% { opacity: 1; } - 51% { opacity: 0; } + 0% { opacity: 0 } + 15% { opacity: 0 } + 25% { opacity: 1 } + 50% { opacity: 1 } + 51% { opacity: 0 } + to { opacity: 0 } } @keyframes mdl-spinner__layer-3-fade-in-out { - from { opacity: 0; } - 40% { opacity: 0; } - 50% { opacity: 1; } - 75% { opacity: 1; } - 76% { opacity: 0; } + 0% { opacity: 0 } + 40% { opacity: 0 } + 50% { opacity: 1 } + 75% { opacity: 1 } + 76% { opacity: 0 } + to { opacity: 0 } } @keyframes mdl-spinner__layer-4-fade-in-out { - from { opacity: 0; } - 65% { opacity: 0; } - 75% { opacity: 1; } - 90% { opacity: 1; } - 100% { opacity: 0; } + 0% { opacity: 0 } + 65% { opacity: 0 } + 75% { opacity: 1 } + 90% { opacity: 1 } + to { opacity: 0 } } -/** -* Patch the gap that appear between the two adjacent -* div.mdl-spinner__circle-clipper while the spinner is rotating -* (appears on Chrome 38, Safari 7.1, and IE 11). -* -* Update: the gap no longer appears on Chrome when .mdl-spinner__layer-N's -* opacity is 0.99, but still does on Safari and IE. -*/ -.mdl-spinner__gap-patch { - position: absolute; - box-sizing: border-box; - top: 0; - left: 45%; - width: 10%; - height: 100%; - overflow: hidden; - border-color: inherit; - - & .mdl-spinner__circle { - width: 1000%; - left: -450%; - } -} - -.mdl-spinner__circle-clipper { - box-sizing: border-box; +.mdl-spinner__clip { display: inline-block; position: relative; - flex-grow: 50; + flex-grow: 1; height: 100%; overflow: hidden; border-color: inherit; - - & .mdl-spinner__circle { - width: 200%; - } } -.mdl-spinner__circle { +.mdl-spinner__layer::after, +.mdl-spinner__clip::after { + content: ''; box-sizing: border-box; - height: 100%; + position: absolute; + top: 0; border-width: $spinner-stroke-width; - border-style: solid; border-color: inherit; - border-bottom-color: transparent !important; border-radius: 50%; - animation: none; +} - position: absolute; - top: 0; - right: 0; +/** + * Patch the gap that appear between the two adjacent div.mdl-spinner__clip + * while the spinner is rotating (appears on Chrome 50, Safari 9.1.1, and Edge). + */ +.mdl-spinner__layer::after { + left: 45%; + width: 10%; + border-top-style: solid; +} + +.mdl-spinner__clip::after { bottom: 0; - left: 0; + width: 200%; + border-style: solid; + border-bottom-color: transparent !important; - .mdl-spinner__left & { - border-right-color: transparent !important; - transform: rotate(129deg); + .mdl-spinner.is-active & { + animation-duration: $spinner-arc-time; + animation-timing-function: $animation-curve-fast-out-slow-in; + animation-iteration-count: infinite; + } +} - .mdl-spinner.is-active & { - animation: mdl-spinner__left-spin $spinner-arc-time - $animation-curve-fast-out-slow-in infinite both; - } +.mdl-spinner__clip:nth-of-type(1)::after { + left: 0; + border-right-color: transparent !important; + transform: rotate(129deg); + + .mdl-spinner.is-active & { + animation-name: mdl-spinner__left-spin; } +} - .mdl-spinner__right & { - left: -100%; - border-left-color: transparent !important; - transform: rotate(-129deg); +.mdl-spinner__clip:nth-of-type(2)::after { + left: -100%; + border-left-color: transparent !important; + transform: rotate(-129deg); - .mdl-spinner.is-active & { - animation: mdl-spinner__right-spin $spinner-arc-time - $animation-curve-fast-out-slow-in infinite both; - } + .mdl-spinner.is-active & { + animation-name: mdl-spinner__right-spin; } } diff --git a/src/spinner/snippets/spinner-default.html b/src/spinner/snippets/spinner-default.html index 867cc2468..af1e1e1cb 100644 --- a/src/spinner/snippets/spinner-default.html +++ b/src/spinner/snippets/spinner-default.html @@ -1,47 +1,19 @@ diff --git a/src/spinner/snippets/spinner-single-color.html b/src/spinner/snippets/spinner-single-color.html index a75aed656..11847bf69 100644 --- a/src/spinner/snippets/spinner-single-color.html +++ b/src/spinner/snippets/spinner-single-color.html @@ -1,11 +1,7 @@ diff --git a/test/unit/spinner.js b/test/unit/spinner.js index 76782f888..e1505e55e 100644 --- a/test/unit/spinner.js +++ b/test/unit/spinner.js @@ -17,24 +17,19 @@ describe('MaterialSpinner', function () { function createSpinner() { - var layerHtml = '' + - '' + - ''; - var spinner = document.createElement('div'); spinner.className = 'mdl-spinner'; for (var i = 0; i < 4; i++) { var layer = document.createElement('div'); layer.className = 'mdl-spinner__layer'; - layer.innerHTML = layerHtml; + var left = document.createElement('div'); + left.className = 'mdl-spinner__clip'; + var right = document.createElement('div'); + right.className = 'mdl-spinner__clip'; + layer.appendChild(left); + layer.appendChild(right); + spinner.appendChild(layer); } - return spinner; } From e007586ba6553b31d3e78a95333d345a598f73d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= Date: Mon, 6 Jun 2016 17:29:04 +0100 Subject: [PATCH 057/101] Add buildDom() method to components and base class. This methods creates the DOM structure for a new component and returns it, so that the user can attach it to the page. --- src/checkbox/checkbox.js | 54 ++++++++++++++++++++++++++++++++++++++++ src/component.js | 15 +++++++++++ src/menu/menu.js | 29 +++++++++++++++++++++ src/radio/radio.js | 54 ++++++++++++++++++++++++++++++++++++++++ src/switch/switch.js | 54 ++++++++++++++++++++++++++++++++++++++++ test/unit/checkbox.js | 2 +- test/unit/radio.js | 4 +-- test/unit/switch.js | 2 +- 8 files changed, 210 insertions(+), 4 deletions(-) diff --git a/src/checkbox/checkbox.js b/src/checkbox/checkbox.js index 476eca329..4ad8dd735 100644 --- a/src/checkbox/checkbox.js +++ b/src/checkbox/checkbox.js @@ -55,6 +55,59 @@ class MaterialCheckbox extends MaterialComponent { this.init_(); } + /** + * Generates an ID for a new checkbox. Keeps a counter to ensure uniqueness. + * @return {string} The generated ID. + */ + static generateId_() { + MaterialCheckbox.autoCounter_ = (MaterialCheckbox.autoCounter_ || 0) + 1; + return `mdlcheckbox-${MaterialCheckbox.autoCounter_}`; + } + + /** + * Creates the DOM subtree for a new checkbox. + * + * Options: + * - {string} id: The ID to use on the input element. + * - {string} text: The text to use on the checkbox. + * - {boolean} checked: Whether the checkbox should initially be checked. + * - {boolean} disabled: Whether the checkbox should initially be disabled. + * + * @return {Element} The DOM subtree for the component. + * @export + */ + static buildDom(/** { id: string, text: string, checked: boolean, + disabled: boolean }= */ { + id = MaterialCheckbox.generateId_(), + text = '', + checked = false, + disabled = false + } = {}) { + let root = document.createElement('label'); + let input = document.createElement('input'); + let label = document.createElement('span'); + root.htmlFor = id; + root.classList.add(MaterialCheckbox.cssClasses_.ROOT); + input.type = 'checkbox'; + input.id = id; + input.classList.add(MaterialCheckbox.cssClasses_.INPUT); + input.checked = checked; + input.disabled = disabled; + root.appendChild(input); + label.classList.add(MaterialCheckbox.cssClasses_.LABEL); + label.text = text; + root.appendChild(label); + + // Ensure correct first render. + if (checked) { + root.classList.add(MaterialCheckbox.cssClasses_.IS_CHECKED); + } + if (disabled) { + root.classList.add(MaterialCheckbox.cssClasses_.IS_DISABLED); + } + return root; + } + /** * CSS classes used in this component. * @@ -66,6 +119,7 @@ class MaterialCheckbox extends MaterialComponent { ROOT: 'mdl-checkbox', JS: 'mdl-js-checkbox', INPUT: 'mdl-checkbox__input', + LABEL: 'mdl-checkbox__label', IS_FOCUSED: 'is-focused', IS_DISABLED: 'is-disabled', diff --git a/src/component.js b/src/component.js index ca3fe88c4..c0e78fc6e 100644 --- a/src/component.js +++ b/src/component.js @@ -30,6 +30,21 @@ class MaterialComponent { // eslint-disable-line no-unused-vars this.root_ = root; } + /* eslint-disable valid-jsdoc, no-unused-vars */ + /** + * Creates the DOM subtree for a new component. + * Greatly simplifies programmatic component creation. + * + * @param {Object} options Component options (component-specific). + * @return {Element} The DOM subtree for the component. + * @export + */ + static buildDom(options) { + // Empty in base class. Throw error if not correctly overriden. + throw new Error('Should be implemented in components.'); + } + /* eslint-enable valid-jsdoc, no-unused-vars */ + // eslint-disable-next-line valid-jsdoc /** * CSS classes used in this component. diff --git a/src/menu/menu.js b/src/menu/menu.js index 8ab361ac8..444460b5e 100644 --- a/src/menu/menu.js +++ b/src/menu/menu.js @@ -63,6 +63,35 @@ class MaterialMenu extends MaterialComponent { this.init_(); } + /** + * Creates the DOM subtree for a new switch. + * + * Options: + * - {Array} items: The text for the items to add to the menu. + * + * @return {Element} The DOM subtree for the component. + * @export + */ + static buildDom(/** {items: Array}= */ { + items = [] + } = {}) { + let root = document.createElement('div'); + root.classList.add(MaterialMenu.cssClasses_.ROOT); + + let list = document.createElement('ul'); + list.classList.add(MaterialMenu.cssClasses_.LIST); + root.appendChild(list); + + for (let i = 0; i < items.length; i++) { + let item = document.createElement('li'); + item.classList.add(MaterialMenu.cssClasses_.ITEM); + item.textContent = items[i]; + list.appendChild(item); + } + + return root; + } + /** * Number constants used in this component. * diff --git a/src/radio/radio.js b/src/radio/radio.js index c13b5041e..f9f073aec 100644 --- a/src/radio/radio.js +++ b/src/radio/radio.js @@ -54,6 +54,59 @@ class MaterialRadio extends MaterialComponent { this.init_(); } + /** + * Generates an ID for a new Radio. Keeps a counter to ensure uniqueness. + * @return {string} The generated ID. + */ + static generateId_() { + MaterialRadio.autoCounter_ = (MaterialRadio.autoCounter_ || 0) + 1; + return `mdlradio-${MaterialRadio.autoCounter_}`; + } + + /** + * Creates the DOM subtree for a new radio. + * + * Options: + * - {string} id: The ID to use on the input element. + * - {string} text: The text to use on the radio. + * - {boolean} checked: Whether the radio should initially be checked. + * - {boolean} disabled: Whether the radio should initially be disabled. + * + * @return {Element} The DOM subtree for the component. + * @export + */ + static buildDom(/** { id: string, text: string, checked: boolean, + disabled: boolean }= */ { + id = MaterialRadio.generateId_(), + text = '', + checked = false, + disabled = false + } = {}) { + let root = document.createElement('label'); + let input = document.createElement('input'); + let label = document.createElement('span'); + root.htmlFor = id; + root.classList.add(MaterialRadio.cssClasses_.ROOT); + input.type = 'radio'; + input.id = id; + input.classList.add(MaterialRadio.cssClasses_.INPUT); + input.checked = checked; + input.disabled = disabled; + root.appendChild(input); + label.classList.add(MaterialRadio.cssClasses_.LABEL); + label.text = text; + root.appendChild(label); + + // Ensure correct first render. + if (checked) { + root.classList.add(MaterialRadio.cssClasses_.IS_CHECKED); + } + if (disabled) { + root.classList.add(MaterialRadio.cssClasses_.IS_DISABLED); + } + return root; + } + /** * CSS classes used in this component. * @@ -66,6 +119,7 @@ class MaterialRadio extends MaterialComponent { ROOT: 'mdl-radio', JS: 'mdl-js-radio', INPUT: 'mdl-radio__input', + LABEL: 'mdl-radio__label', IS_FOCUSED: 'is-focused', IS_DISABLED: 'is-disabled', diff --git a/src/switch/switch.js b/src/switch/switch.js index 4aecfe4b9..77b132736 100644 --- a/src/switch/switch.js +++ b/src/switch/switch.js @@ -55,6 +55,59 @@ class MaterialSwitch extends MaterialComponent { this.init_(); } + /** + * Generates an ID for a new switch. Keeps a counter to ensure uniqueness. + * @return {string} The generated ID. + */ + static generateId_() { + MaterialSwitch.autoCounter_ = (MaterialSwitch.autoCounter_ || 0) + 1; + return `mdlswitch-${MaterialSwitch.autoCounter_}`; + } + + /** + * Creates the DOM subtree for a new switch. + * + * Options: + * - {string} id: The ID to use on the input element. + * - {string} text: The text to use on the switch. + * - {boolean} checked: Whether the switch should initially be checked. + * - {boolean} disabled: Whether the switch should initially be disabled. + * + * @return {Element} The DOM subtree for the component. + * @export + */ + static buildDom(/** { id: string, text: string, checked: boolean, + disabled: boolean }= */ { + id = MaterialSwitch.generateId_(), + text = '', + checked = false, + disabled = false + } = {}) { + let root = document.createElement('label'); + let input = document.createElement('input'); + let label = document.createElement('span'); + root.htmlFor = id; + root.classList.add(MaterialSwitch.cssClasses_.ROOT); + input.type = 'checkbox'; + input.id = id; + input.classList.add(MaterialSwitch.cssClasses_.INPUT); + input.checked = checked; + input.disabled = disabled; + root.appendChild(input); + label.classList.add(MaterialSwitch.cssClasses_.LABEL); + label.text = text; + root.appendChild(label); + + // Ensure correct first render. + if (checked) { + root.classList.add(MaterialSwitch.cssClasses_.IS_CHECKED); + } + if (disabled) { + root.classList.add(MaterialSwitch.cssClasses_.IS_DISABLED); + } + return root; + } + /** * CSS classes used in this component. * @@ -66,6 +119,7 @@ class MaterialSwitch extends MaterialComponent { ROOT: 'mdl-switch', JS: 'mdl-js-switch', INPUT: 'mdl-switch__input', + LABEL: 'mdl-switch__label', IS_FOCUSED: 'is-focused', IS_DISABLED: 'is-disabled', diff --git a/test/unit/checkbox.js b/test/unit/checkbox.js index 6bf7857da..cb173ced8 100644 --- a/test/unit/checkbox.js +++ b/test/unit/checkbox.js @@ -20,7 +20,7 @@ describe('MaterialCheckbox', function () { var label = document.createElement('label'); var input = document.createElement('input'); var labelText = document.createElement('span'); - label.for = 'testCheckbox'; + label.htmlFor = 'testCheckbox'; label.className = 'mdl-checkbox'; input.type = 'checkbox'; input.id = 'testCheckbox'; diff --git a/test/unit/radio.js b/test/unit/radio.js index 006812ac7..fa6b307bc 100644 --- a/test/unit/radio.js +++ b/test/unit/radio.js @@ -20,10 +20,10 @@ describe('MaterialRadio', function () { var label = document.createElement('label'); var input = document.createElement('input'); var labelText = document.createElement('span'); - label.for = 'testCheckbox'; + label.htmlFor = 'testRadio'; label.className = 'mdl-radio'; input.type = 'radio'; - input.id = 'testCheckbox'; + input.id = 'testRadio'; input.className = 'mdl-radio__input'; label.appendChild(input); labelText.className = 'mdl-radio__label'; diff --git a/test/unit/switch.js b/test/unit/switch.js index 77afcb114..91a6bcffe 100644 --- a/test/unit/switch.js +++ b/test/unit/switch.js @@ -20,7 +20,7 @@ describe('MaterialSwitch', function () { var label = document.createElement('label'); var input = document.createElement('input'); var labelText = document.createElement('span'); - label.for = 'testSwitch'; + label.htmlFor = 'testSwitch'; label.className = 'mdl-switch'; input.type = 'checkbox'; input.id = 'testSwitch'; From 03a98e0acb61e2cc9af35dea173173aa1d7cf957 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= Date: Tue, 7 Jun 2016 14:58:50 +0100 Subject: [PATCH 058/101] Adding tests for buildDom() --- test/unit/checkbox.js | 30 ++++++++++++++++++++++++++++++ test/unit/menu.js | 22 ++++++++++++++++++++++ test/unit/radio.js | 30 ++++++++++++++++++++++++++++++ test/unit/switch.js | 30 ++++++++++++++++++++++++++++++ 4 files changed, 112 insertions(+) diff --git a/test/unit/checkbox.js b/test/unit/checkbox.js index cb173ced8..088d14416 100644 --- a/test/unit/checkbox.js +++ b/test/unit/checkbox.js @@ -43,6 +43,36 @@ describe('MaterialCheckbox', function () { expect(el.classList.contains('mdl-checkbox--is-upgraded')).to.be.true; }); + describe('.buildDom()', function () { + it('should return a valid DOM with no parameters', function() { + var el = MaterialCheckbox.buildDom(); + expect(el).to.be.an.instanceof(Element); + var sw = new MaterialCheckbox(el); + expect(sw).to.be.an.instanceof(MaterialCheckbox); + }); + + it('should return a valid DOM with a provided id', function() { + var el = MaterialCheckbox.buildDom({ + id: 'testId' + }); + expect(el).to.be.an.instanceof(Element); + expect(el.querySelector('#testId')).to.not.be.null; + var sw = new MaterialCheckbox(el); + expect(sw).to.be.an.instanceof(MaterialCheckbox); + }); + + it('should return a valid DOM with a provided text', function() { + var el = MaterialCheckbox.buildDom({ + text: 'Test checkbox' + }); + expect(el).to.be.an.instanceof(Element); + expect(el.querySelector('.mdl-checkbox__label').text).to + .equal('Test checkbox'); + var sw = new MaterialCheckbox(el); + expect(sw).to.be.an.instanceof(MaterialCheckbox); + }); + }); + it('should get checked class after being checked', function() { var el = createCheckbox(); var checkbox = new MaterialCheckbox(el); diff --git a/test/unit/menu.js b/test/unit/menu.js index 951f8ced8..807582f17 100644 --- a/test/unit/menu.js +++ b/test/unit/menu.js @@ -45,6 +45,28 @@ describe('MaterialMenu', function () { expect(function() { new MaterialMenu(el) }).to.throw(Error); }); + describe('.buildDom()', function () { + it('should return a valid DOM with no parameters', function() { + var el = MaterialMenu.buildDom(); + expect(el).to.be.an.instanceof(Element); + var sw = new MaterialMenu(el); + expect(sw).to.be.an.instanceof(MaterialMenu); + }); + + it('should return a valid DOM with a provided list of items', function() { + var testItems = ['foo', 'bar', 'foobar']; + var el = MaterialMenu.buildDom({ + items: testItems + }); + expect(el).to.be.an.instanceof(Element); + var items = el.querySelectorAll('.mdl-menu__item'); + expect(items.length).to.be.equal(3); + for (var i = 0; i < items.length; i++) { + expect(items[i].textContent).to.be.equal(testItems[i]); + } + }); + }); + it('should start the showing animation on show()', function(done) { var el = createMenu(); var menu = new MaterialMenu(el); diff --git a/test/unit/radio.js b/test/unit/radio.js index fa6b307bc..2713bd228 100644 --- a/test/unit/radio.js +++ b/test/unit/radio.js @@ -43,6 +43,36 @@ describe('MaterialRadio', function () { expect(el.classList.contains('mdl-radio--is-upgraded')).to.be.true; }); + describe('.buildDom()', function () { + it('should return a valid DOM with no parameters', function() { + var el = MaterialRadio.buildDom(); + expect(el).to.be.an.instanceof(Element); + var sw = new MaterialRadio(el); + expect(sw).to.be.an.instanceof(MaterialRadio); + }); + + it('should return a valid DOM with a provided id', function() { + var el = MaterialRadio.buildDom({ + id: 'testId' + }); + expect(el).to.be.an.instanceof(Element); + expect(el.querySelector('#testId')).to.not.be.null; + var sw = new MaterialRadio(el); + expect(sw).to.be.an.instanceof(MaterialRadio); + }); + + it('should return a valid DOM with a provided text', function() { + var el = MaterialRadio.buildDom({ + text: 'Test radio' + }); + expect(el).to.be.an.instanceof(Element); + expect(el.querySelector('.mdl-radio__label').text).to + .equal('Test radio'); + var sw = new MaterialRadio(el); + expect(sw).to.be.an.instanceof(MaterialRadio); + }); + }); + it('should get checked class after being checked', function() { var el = createRadio(); var radio = new MaterialRadio(el); diff --git a/test/unit/switch.js b/test/unit/switch.js index 91a6bcffe..82bcc7fde 100644 --- a/test/unit/switch.js +++ b/test/unit/switch.js @@ -43,6 +43,36 @@ describe('MaterialSwitch', function () { expect(el.classList.contains('mdl-switch--is-upgraded')).to.be.true; }); + describe('.buildDom()', function () { + it('should return a valid DOM with no parameters', function() { + var el = MaterialSwitch.buildDom(); + expect(el).to.be.an.instanceof(Element); + var sw = new MaterialSwitch(el); + expect(sw).to.be.an.instanceof(MaterialSwitch); + }); + + it('should return a valid DOM with a provided id', function() { + var el = MaterialSwitch.buildDom({ + id: 'testId' + }); + expect(el).to.be.an.instanceof(Element); + expect(el.querySelector('#testId')).to.not.be.null; + var sw = new MaterialSwitch(el); + expect(sw).to.be.an.instanceof(MaterialSwitch); + }); + + it('should return a valid DOM with a provided text', function() { + var el = MaterialSwitch.buildDom({ + text: 'Test switch' + }); + expect(el).to.be.an.instanceof(Element); + expect(el.querySelector('.mdl-switch__label').text).to + .equal('Test switch'); + var sw = new MaterialSwitch(el); + expect(sw).to.be.an.instanceof(MaterialSwitch); + }); + }); + it('should get checked class after being checked', function() { var el = createSwitch(); var sw = new MaterialSwitch(el); From cd80030090f681322b253298a24f46506a799d27 Mon Sep 17 00:00:00 2001 From: Jonathan Garbee Date: Wed, 8 Jun 2016 11:06:12 -0400 Subject: [PATCH 059/101] Remove data table js. --- gulpfile.babel.js | 1 - src/data-table/data-table.js | 184 ----------------------------------- 2 files changed, 185 deletions(-) delete mode 100644 src/data-table/data-table.js diff --git a/gulpfile.babel.js b/gulpfile.babel.js index b602ca77a..909b9c090 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -82,7 +82,6 @@ const SOURCES = [ // 'src/tooltip/tooltip.js', // Complex components (which reuse base components) // 'src/layout/layout.js', - // 'src/data-table/data-table.js', // And finally, the ripples // 'src/ripple/ripple.js' ]; diff --git a/src/data-table/data-table.js b/src/data-table/data-table.js deleted file mode 100644 index 3accb5c47..000000000 --- a/src/data-table/data-table.js +++ /dev/null @@ -1,184 +0,0 @@ -/** - * @license - * Copyright 2015 Google Inc. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -(function() { - 'use strict'; - - /** - * Class constructor for Data Table Card MDL component. - * Implements MDL component design pattern defined at: - * https://github.com/jasonmayes/mdl-component-design-pattern - * - * @constructor - * @param {Element} element The element that will be upgraded. - */ - var MaterialDataTable = function MaterialDataTable(element) { - this.element_ = element; - - // Initialize instance. - this.init(); - }; - - window['MaterialDataTable'] = MaterialDataTable; - - /** - * Store constants in one place so they can be updated easily. - * - * @enum {string | number} - * @private - */ - MaterialDataTable.prototype.Constant_ = { - // None at the moment. - }; - - /** - * Store strings for class names defined by this component that are used in - * JavaScript. This allows us to simply change it in one place should we - * decide to modify at a later date. - * - * @enum {string} - * @private - */ - MaterialDataTable.prototype.CssClasses_ = { - DATA_TABLE: 'mdl-data-table', - SELECTABLE: 'mdl-data-table--selectable', - SELECT_ELEMENT: 'mdl-data-table__select', - IS_SELECTED: 'is-selected', - IS_UPGRADED: 'is-upgraded' - }; - - /** - * Generates and returns a function that toggles the selection state of a - * single row (or multiple rows). - * - * @param {Element} checkbox Checkbox that toggles the selection state. - * @param {Element} row Row to toggle when checkbox changes. - * @param {(Array|NodeList)=} optRows Rows to toggle when checkbox changes. - * @return {?function()} a function to toggle the selection state of the row(s). - * @private - */ - MaterialDataTable.prototype.selectRow_ = function(checkbox, row, optRows) { - if (row) { - return function() { - if (checkbox.checked) { - row.classList.add(this.CssClasses_.IS_SELECTED); - } else { - row.classList.remove(this.CssClasses_.IS_SELECTED); - } - }.bind(this); - } - - if (optRows) { - return function() { - var i; - var el; - if (checkbox.checked) { - for (i = 0; i < optRows.length; i++) { - el = optRows[i].querySelector('td').querySelector('.mdl-checkbox'); - el['MaterialCheckbox'].check(); - optRows[i].classList.add(this.CssClasses_.IS_SELECTED); - } - } else { - for (i = 0; i < optRows.length; i++) { - el = optRows[i].querySelector('td').querySelector('.mdl-checkbox'); - el['MaterialCheckbox'].uncheck(); - optRows[i].classList.remove(this.CssClasses_.IS_SELECTED); - } - } - }.bind(this); - } - - return null; - }; - - /** - * Creates a checkbox for a single or or multiple rows and hooks up the - * event handling. - * - * @param {Element} row Row to toggle when checkbox changes. - * @param {(Array|NodeList)=} optRows Rows to toggle when checkbox changes. - * @return {Element} the created parent label. - * @private - */ - MaterialDataTable.prototype.createCheckbox_ = function(row, optRows) { - var label = document.createElement('label'); - var labelClasses = [ - 'mdl-checkbox', - 'mdl-js-checkbox', - 'mdl-js-ripple-effect', - this.CssClasses_.SELECT_ELEMENT - ]; - label.className = labelClasses.join(' '); - var checkbox = document.createElement('input'); - checkbox.type = 'checkbox'; - checkbox.classList.add('mdl-checkbox__input'); - - if (row) { - checkbox.checked = row.classList.contains(this.CssClasses_.IS_SELECTED); - checkbox.addEventListener('change', this.selectRow_(checkbox, row)); - } else if (optRows) { - checkbox.addEventListener('change', - this.selectRow_(checkbox, null, optRows)); - } - - label.appendChild(checkbox); - componentHandler.upgradeElement(label, 'MaterialCheckbox'); - return label; - }; - - /** - * Initialize element. - */ - MaterialDataTable.prototype.init = function() { - if (this.element_) { - var firstHeader = this.element_.querySelector('th'); - var bodyRows = Array.prototype.slice.call( - this.element_.querySelectorAll('tbody tr')); - var footRows = Array.prototype.slice.call( - this.element_.querySelectorAll('tfoot tr')); - var rows = bodyRows.concat(footRows); - - if (this.element_.classList.contains(this.CssClasses_.SELECTABLE)) { - var th = document.createElement('th'); - var headerCheckbox = this.createCheckbox_(null, rows); - th.appendChild(headerCheckbox); - firstHeader.parentElement.insertBefore(th, firstHeader); - - for (var i = 0; i < rows.length; i++) { - var firstCell = rows[i].querySelector('td'); - if (firstCell) { - var td = document.createElement('td'); - if (rows[i].parentNode.nodeName.toUpperCase() === 'TBODY') { - var rowCheckbox = this.createCheckbox_(rows[i]); - td.appendChild(rowCheckbox); - } - rows[i].insertBefore(td, firstCell); - } - } - this.element_.classList.add(this.CssClasses_.IS_UPGRADED); - } - } - }; - - // The component registers itself. It can assume componentHandler is available - // in the global scope. - componentHandler.register({ - constructor: MaterialDataTable, - classAsString: 'MaterialDataTable', - cssClass: 'mdl-js-data-table' - }); -})(); From c5915619687c761b38e5dd77e2dd98ba7c76d301 Mon Sep 17 00:00:00 2001 From: Jonathan Garbee Date: Thu, 9 Jun 2016 12:22:03 -0400 Subject: [PATCH 060/101] Remove resets and direct targets. --- src/_variables.scss | 7 - src/material-design-lite.scss | 2 - src/resets/_h5bp.scss | 289 -------------------------------- src/resets/_mobile.scss | 25 --- src/resets/_resets.scss | 55 ------ src/typography/_typography.scss | 102 ----------- 6 files changed, 480 deletions(-) delete mode 100644 src/resets/_h5bp.scss delete mode 100644 src/resets/_mobile.scss delete mode 100644 src/resets/_resets.scss diff --git a/src/_variables.scss b/src/_variables.scss index 4c1c76818..6f9efb81c 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -121,13 +121,6 @@ $color-accent-contrast: $color-dark-contrast !default; $text-color-primary: rgba-tpl($color-black, 0.87) !default; $text-link-color: $color-accent !default; -// Define whether to target elements directly for typographic enhancements. -// Turning this off means you need to use mdl-* classes more often. -// Other components may also fail to adhere to MD without these rules. -// It is strongly recommended you leave this as true. - -$target-elements-directly: true !default; - /* ========== Components ========== */ /* ========== Standard Buttons ========== */ diff --git a/src/material-design-lite.scss b/src/material-design-lite.scss index ccbad1488..f38589d04 100644 --- a/src/material-design-lite.scss +++ b/src/material-design-lite.scss @@ -20,8 +20,6 @@ @import "variables"; @import "mixins"; -// Resets and dependencies -@import "resets/resets"; @import "typography/typography"; // Components diff --git a/src/resets/_h5bp.scss b/src/resets/_h5bp.scss deleted file mode 100644 index e42fe3e9b..000000000 --- a/src/resets/_h5bp.scss +++ /dev/null @@ -1,289 +0,0 @@ -/** - * Copyright 2015 Google Inc. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -@import "../variables"; - -/* - * What follows is the result of much research on cross-browser styling. - * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, - * Kroc Camen, and the H5BP dev community and team. - */ - -/* ========================================================================== - Base styles: opinionated defaults - ========================================================================== */ - -html { - color: $text-color-primary; - font-size: 1em; - line-height: 1.4; -} - -/* - * Remove text-shadow in selection highlight: - * https://twitter.com/miketaylr/status/12228805301 - * - * These selection rule sets have to be separate. - * Customize the background color to match your design. - */ - -::selection { - background: #b3d4fc; - text-shadow: none; -} - -/* - * A better looking default horizontal rule - */ - -hr { - display: block; - height: 1px; - border: 0; - border-top: 1px solid #ccc; - margin: 1em 0; - padding: 0; -} - -/* - * Remove the gap between audio, canvas, iframes, - * images, videos and the bottom of their containers: - * https://github.com/h5bp/html5-boilerplate/issues/440 - */ - -audio, -canvas, -iframe, -img, -svg, -video { - vertical-align: middle; -} - -/* - * Remove default fieldset styles. - */ - -fieldset { - border: 0; - margin: 0; - padding: 0; -} - -/* - * Allow only vertical resizing of textareas. - */ - -textarea { - resize: vertical; -} - -/* ========================================================================== - Browser Upgrade Prompt - ========================================================================== */ - -.browserupgrade { - margin: 0.2em 0; - background: #ccc; - color: #000; - padding: 0.2em 0; -} - -/* ========================================================================== - Author's custom styles - ========================================================================== */ - - - - - - - - - - - - - - - - - -/* ========================================================================== - Helper classes - ========================================================================== */ - -/* - * Hide visually and from screen readers: - */ - -.hidden { - display: none !important; -} - -/* - * Hide only visually, but have it available for screen readers: - * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility - */ - -.visuallyhidden { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -/* - * Extends the .visuallyhidden class to allow the element - * to be focusable when navigated to via the keyboard: - * https://www.drupal.org/node/897638 - */ - -.visuallyhidden.focusable:active, -.visuallyhidden.focusable:focus { - clip: auto; - height: auto; - margin: 0; - overflow: visible; - position: static; - width: auto; -} - -/* - * Hide visually and from screen readers, but maintain layout - */ - -.invisible { - visibility: hidden; -} - -/* - * Clearfix: contain floats - * - * For modern browsers - * 1. The space content is one way to avoid an Opera bug when the - * `contenteditable` attribute is included anywhere else in the document. - * Otherwise it causes space to appear at the top and bottom of elements - * that receive the `clearfix` class. - * 2. The use of `table` rather than `block` is only necessary if using - * `:before` to contain the top-margins of child elements. - */ - -.clearfix:before, -.clearfix:after { - content: " "; /* 1 */ - display: table; /* 2 */ -} - -.clearfix:after { - clear: both; -} - -/* ========================================================================== - EXAMPLE Media Queries for Responsive Design. - These examples override the primary ('mobile first') styles. - Modify as content requires. - ========================================================================== */ - -@media only screen and (min-width: 35em) { - /* Style adjustments for viewports that meet the condition */ -} - -@media print, - (min-resolution: 1.25dppx), - (min-resolution: 120dpi) { - /* Style adjustments for high resolution devices */ -} - -/* ========================================================================== - Print styles. - Inlined to avoid the additional HTTP request: - http://www.phpied.com/delay-loading-your-print-css/ - ========================================================================== */ - -@media print { - *, - *:before, - *:after, - *:first-letter { - background: transparent !important; - color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */ - box-shadow: none !important; - } - - a, - a:visited { - text-decoration: underline; - } - - a[href]:after { - content: " (" attr(href) ")"; - } - - abbr[title]:after { - content: " (" attr(title) ")"; - } - - /* - * Don't show links that are fragment identifiers, - * or use the `javascript:` pseudo protocol - */ - - a[href^="#"]:after, - a[href^="javascript:"]:after { - content: ""; - } - - pre, - blockquote { - border: 1px solid #999; - page-break-inside: avoid; - } - - /* - * Printing Tables: - * http://css-discuss.incutio.com/wiki/Printing_Tables - */ - - thead { - display: table-header-group; - } - - tr, - img { - page-break-inside: avoid; - } - - img { - max-width: 100% !important; - } - - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - - h2, - h3 { - page-break-after: avoid; - } -} diff --git a/src/resets/_mobile.scss b/src/resets/_mobile.scss deleted file mode 100644 index efa20dd11..000000000 --- a/src/resets/_mobile.scss +++ /dev/null @@ -1,25 +0,0 @@ -/** - * Copyright 2015 Google Inc. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - - -/* Remove the unwanted box around FAB buttons */ -/* More info: http://goo.gl/IPwKi */ -a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu, -.mdl-icon-toggle, .mdl-item, .mdl-radio, .mdl-slider, .mdl-switch, .mdl-tabs__tab { - - -webkit-tap-highlight-color: transparent; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -} diff --git a/src/resets/_resets.scss b/src/resets/_resets.scss deleted file mode 100644 index dba3d0e1e..000000000 --- a/src/resets/_resets.scss +++ /dev/null @@ -1,55 +0,0 @@ -/** - * Copyright 2015 Google Inc. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -@import "h5bp"; -@import "mobile"; - -/* - * Make html take up the entire screen - * Then set touch-action to avoid touch delay on mobile IE - */ -html { - width: 100%; - height: 100%; - -ms-touch-action: manipulation; - touch-action: manipulation; -} - -/* -* Make body take up the entire screen -* Remove body margin so layout containers don't cause extra overflow. -*/ -body { - width: 100%; - min-height: 100%; - margin: 0; -} - -/* - * Main display reset for IE support. - * Source: http://weblog.west-wind.com/posts/2015/Jan/12/main-HTML5-Tag-not-working-in-Internet-Explorer-91011 - */ -main { - display: block; -} - -/* -* Apply no display to elements with the hidden attribute. -* IE 9 and 10 support. -*/ -*[hidden] { - display: none !important; -} diff --git a/src/typography/_typography.scss b/src/typography/_typography.scss index 3b0e889bf..da80caf90 100644 --- a/src/typography/_typography.scss +++ b/src/typography/_typography.scss @@ -14,108 +14,6 @@ * limitations under the License. */ -@import "../variables"; -@import "../mixins"; - -@if $target-elements-directly == true { - html, body { - font-family: $performance_font; - font-size: 14px; - font-weight: 400; - line-height: 20px; - } - - h1, h2, h3, h4, h5, h6, p { - margin: 0; - padding: 0; - } - - /** - * Styles for HTML elements - */ - - h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { - @include typo-display-3($colorContrast: true); - - font-size: 0.6em; - } - - h1 { - @include typo-display-3; - - margin-top: 24px; - margin-bottom: 24px; - } - - h2 { - @include typo-display-2; - - margin-top: 24px; - margin-bottom: 24px; - } - - h3 { - @include typo-display-1; - - margin-top: 24px; - margin-bottom: 24px; - } - - h4 { - @include typo-headline; - - margin-top: 24px; - margin-bottom: 16px; - } - - h5 { - @include typo-title; - - margin-top: 24px; - margin-bottom: 16px; - } - - h6 { - @include typo-subhead; - - margin-top: 24px; - margin-bottom: 16px; - } - - p { - @include typo-body-1; - - margin-bottom: 16px; - } - - a { - color: $text-link-color; - font-weight: 500; - } - - blockquote { - @include typo-blockquote; - } - - mark { - background-color: #f4ff81; - } - - dt { - font-weight: 700; - } - - address { - @include typo-caption; - - font-style: normal; - } - - ul, ol { - @include typo-body-1; - } -} - /** * Class Name Styles */ From 10e520e46a4e20d5b3a1af8b67f0745133cd8952 Mon Sep 17 00:00:00 2001 From: Jonathan Garbee Date: Fri, 10 Jun 2016 13:39:22 -0400 Subject: [PATCH 061/101] Remove stuff that isn't needed in the primary readme right now. Move contributing stuff up and expand on current branches. --- README.md | 118 ++++++------------------------------------------------ 1 file changed, 13 insertions(+), 105 deletions(-) diff --git a/README.md b/README.md index b0024a737..652078bc2 100644 --- a/README.md +++ b/README.md @@ -7,14 +7,25 @@ [![Dependency Status](https://david-dm.org/google/material-design-lite.svg)](https://david-dm.org/google/material-design-lite) > An implementation of [Material Design](http://www.google.com/design/spec/material-design/introduction.html) -components in vanilla CSS, JS, and HTML +components in vanilla CSS, JS, and HTML. Material Design Lite (MDL) lets you add a Material Design look and feel to your static content websites. It doesn't rely on any JavaScript frameworks or libraries. Optimized for cross-device use, gracefully degrades in older browsers, and offers an experience that is accessible from the get-go. -> **Important note for contributors** - The master branch now has breaking V2 changes. As such it can not be merged into `mdl-1.1`. If you are making a contribution to 1.1, then please send pull requests directly to that branch. We will routinely merge that back into master. Thank you! +## Want to contribute? + +If you found a bug, have any questions or want to contribute. Follow our +[guidelines](https://github.com/google/material-design-lite/blob/master/CONTRIBUTING.md), +and help improve the Material Design Lite. For more information visit our +[wiki](https://github.com/google/material-design-lite/wiki). + +If you are submitting a bug fix, please send those into `mdl-1.1` currently. +For adding new components, send those pull requests into `mdl-1.2`. + +The `master` branch is where we are working on 2.0. +It is currently **highly** experimental and no support building or using it will be provided. ## Use MDL on your site? @@ -37,8 +48,6 @@ Supported versioned browsers: - Safari 8 - Mobile Safari 8 -## Getting Started - ### Download / Clone Clone the repo using Git: @@ -64,92 +73,6 @@ git reset --hard > Remember, the master branch is considered unstable. Do not use this in production. Use a tagged state of the repository, npm, or bower for stability! -### What's included - -In the repo you'll find the following directories and files. - -| File/Folder | Provides | -|-----------------|------------------------------------------------| -| CONTRIBUTING.md | MDL contribution guidelines. | -| docs | Files for the documentation site. | -| gulpfile.js | gulp configuration for MDL. | -| LICENSE | Project license information. | -| package.json | npm package information. | -| README.md | Details for quickly understanding the project. | -| src | Source code for MDL components. | -| templates | Example templates. | -| test | Project test files. | - -### Build - -To get started modifying the components or the docs, first install the necessary -dependencies, from the root of the project: - -```bash -npm install && npm install -g gulp -``` - -> MDL requires NodeJS 0.12. - -Next, run the following one-liner to compile the components and the docs and -spawn a local instance of the documentation site: - -```bash -gulp all && gulp serve -``` - -Most changes made to files inside the `src` or the `docs` directory will cause -the page to reload. This page can also be loaded up on physical devices thanks -to BrowserSync. - -To build a production version of the components, run: - -```bash -gulp -``` - -This will clean the `dist` folder and rebuild the assets for serving. - -### Templates - -The `templates/` subdirectory contains a few exemplary usages of MDL. Templates -have their own, quasi-separate gulp pipeline and can be compiled with -`gulp templates`. The templates use the vanilla MDL JS and -[themed](http://www.getmdl.io/customize/index.html) CSS files. Extraneous styles -are kept in a separate CSS file. Use `gulp serve` to take a look at the -templates: - -* [Blog Template](http://www.getmdl.io/templates/blog) -* [Dashboard Template](http://www.getmdl.io/templates/dashboard) -* [Text Heavy Webpage Template](http://www.getmdl.io/templates/text-only) -* [Stand Alone Article Template](http://www.getmdl.io/templates/article) -* [Android.com MDL Skin Template](http://www.getmdl.io/templates/android-dot-com) -* [Portfolio Template](http://www.getmdl.io/templates/portfolio) - -> Templates are not officially supported in IE9 and legacy browsers that do not -pass the minimum-requirements defined in our -[cutting-the-mustard test](https://github.com/google/material-design-lite/blob/87c48c22416c3e83850f7711365b2a43ba19c5ce/src/mdlComponentHandler.js#L336-L349). - -The templates refer to CDN hosted versions of the libraries. If you'd like to -test the templates against locally built MDL libraries you need to run the -`templates:localtestingoverride` gulp task before running `gulp serve`: - -```bash -gulp all && gulp templates:localtestingoverride && gulp serve -``` - -> Beware as any changes to the `templates` directory will automatically revert -the templates local testing overrides. In this case make sure you run the -`templates:localtestingoverride` gulp task again or modify the `watch()` -function in the gulp file. - -## Versioning - -For transparency into our release cycle and in striving to maintain backward -compatibility, Material Design Lite is maintained under -[the Semantic Versioning guidelines](http://semver.org/). Sometimes we screw up, -but we'll adhere to those rules whenever possible. - ## Feature requests If you find MDL doesn't contain a particular component you think would be @@ -159,21 +82,6 @@ Please keep in mind that one of the goals of MDL is to adhere to the Material Design specs and therefore some requests might not be within the scope of this project. -## Want to contribute? - -If you found a bug, have any questions or want to contribute. Follow our -[guidelines](https://github.com/google/material-design-lite/blob/master/CONTRIBUTING.md), -and help improve the Material Design Lite. For more information visit our -[wiki](https://github.com/google/material-design-lite/wiki). - -## Do you include any features that a framework comes with? - -Material Design Lite is focused on delivering a vanilla CSS/JS/HTML library of -components. We are not a framework. If you are building a single-page app and -require features like two-way data-binding, templating, CSS scoping and so -forth, we recommend trying out the excellent -[Polymer](http://polymer-project.org) project. - ## License © Google, 2015. Licensed under an From 8a68d5d680353fda203ffbb7941ff8a031ab74f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= Date: Mon, 13 Jun 2016 15:04:20 +0100 Subject: [PATCH 062/101] Make buildDom a private method called from the constructor --- src/checkbox/checkbox.js | 39 ++++++++++-------------------------- src/component.js | 28 +++++++++++++++++--------- src/menu/menu.js | 28 +++++++++----------------- src/radio/radio.js | 43 ++++++++++++---------------------------- src/switch/switch.js | 39 ++++++++++-------------------------- test/unit/checkbox.js | 32 ++++-------------------------- test/unit/menu.js | 24 ++++------------------ test/unit/radio.js | 32 ++++-------------------------- test/unit/switch.js | 32 ++++-------------------------- 9 files changed, 77 insertions(+), 220 deletions(-) diff --git a/src/checkbox/checkbox.js b/src/checkbox/checkbox.js index 4ad8dd735..34301fee9 100644 --- a/src/checkbox/checkbox.js +++ b/src/checkbox/checkbox.js @@ -24,13 +24,13 @@ class MaterialCheckbox extends MaterialComponent { /** * Initialize checkbox from a DOM node. * - * @param {Element} root The element being upgraded. + * @param {Element=} optRoot The element being upgraded. */ - constructor(root) { - super(root); + constructor(optRoot) { + super(optRoot); // Check if the root has the right class. - if (!root.classList.contains(this.constructor.cssClasses_.ROOT)) { + if (!this.root_.classList.contains(this.constructor.cssClasses_.ROOT)) { throw new Error('MaterialCheckbox missing ' + `${this.constructor.cssClasses_.ROOT} class.`); } @@ -65,46 +65,27 @@ class MaterialCheckbox extends MaterialComponent { } /** - * Creates the DOM subtree for a new checkbox. - * - * Options: - * - {string} id: The ID to use on the input element. - * - {string} text: The text to use on the checkbox. - * - {boolean} checked: Whether the checkbox should initially be checked. - * - {boolean} disabled: Whether the checkbox should initially be disabled. + * Creates the DOM subtree for a new component. + * Greatly simplifies programmatic component creation. * + * @protected + * @nocollapse * @return {Element} The DOM subtree for the component. - * @export */ - static buildDom(/** { id: string, text: string, checked: boolean, - disabled: boolean }= */ { - id = MaterialCheckbox.generateId_(), - text = '', - checked = false, - disabled = false - } = {}) { + static buildDom_() { let root = document.createElement('label'); let input = document.createElement('input'); let label = document.createElement('span'); + let id = MaterialCheckbox.generateId_(); root.htmlFor = id; root.classList.add(MaterialCheckbox.cssClasses_.ROOT); input.type = 'checkbox'; input.id = id; input.classList.add(MaterialCheckbox.cssClasses_.INPUT); - input.checked = checked; - input.disabled = disabled; root.appendChild(input); label.classList.add(MaterialCheckbox.cssClasses_.LABEL); - label.text = text; root.appendChild(label); - // Ensure correct first render. - if (checked) { - root.classList.add(MaterialCheckbox.cssClasses_.IS_CHECKED); - } - if (disabled) { - root.classList.add(MaterialCheckbox.cssClasses_.IS_DISABLED); - } return root; } diff --git a/src/component.js b/src/component.js index c0e78fc6e..34ea9ffcd 100644 --- a/src/component.js +++ b/src/component.js @@ -20,30 +20,30 @@ * * @export */ -class MaterialComponent { // eslint-disable-line no-unused-vars +class MaterialComponent { /** * Initialize component from a DOM node. * - * @param {Element} root The element being upgraded. + * @param {Element=} optRoot The element being upgraded. If none, a new DOM + * subtree gets created for the component. */ - constructor(root) { - this.root_ = root; + constructor(optRoot) { + this.root_ = optRoot || this.constructor.buildDom_(); } - /* eslint-disable valid-jsdoc, no-unused-vars */ + // eslint-disable-next-line valid-jsdoc /** * Creates the DOM subtree for a new component. * Greatly simplifies programmatic component creation. * - * @param {Object} options Component options (component-specific). + * @protected + * @nocollapse * @return {Element} The DOM subtree for the component. - * @export */ - static buildDom(options) { + static buildDom_() { // Empty in base class. Throw error if not correctly overriden. throw new Error('Should be implemented in components.'); } - /* eslint-enable valid-jsdoc, no-unused-vars */ // eslint-disable-next-line valid-jsdoc /** @@ -98,6 +98,16 @@ class MaterialComponent { // eslint-disable-line no-unused-vars `${this.constructor.cssClasses_.ROOT}--is-upgraded`); } + /** + * Returns the root element for the component. + * + * @return {Element} The root element for the component. + * @export + */ + get root() { + return this.root_; + } + /** * Attach all listeners to the DOM. * diff --git a/src/menu/menu.js b/src/menu/menu.js index 444460b5e..fd20e399a 100644 --- a/src/menu/menu.js +++ b/src/menu/menu.js @@ -24,13 +24,13 @@ class MaterialMenu extends MaterialComponent { /** * Initialize checkbox from a DOM node. * - * @param {Element} root The element being upgraded. + * @param {Element=} optRoot The element being upgraded. */ - constructor(root) { - super(root); + constructor(optRoot) { + super(optRoot); // Check if the root has the right class. - if (!root.classList.contains(this.constructor.cssClasses_.ROOT)) { + if (!this.root_.classList.contains(this.constructor.cssClasses_.ROOT)) { throw new Error('MaterialMenu missing ' + `${this.constructor.cssClasses_.ROOT} class.`); } @@ -64,17 +64,14 @@ class MaterialMenu extends MaterialComponent { } /** - * Creates the DOM subtree for a new switch. - * - * Options: - * - {Array} items: The text for the items to add to the menu. + * Creates the DOM subtree for a new component. + * Greatly simplifies programmatic component creation. * + * @protected + * @nocollapse * @return {Element} The DOM subtree for the component. - * @export */ - static buildDom(/** {items: Array}= */ { - items = [] - } = {}) { + static buildDom_() { let root = document.createElement('div'); root.classList.add(MaterialMenu.cssClasses_.ROOT); @@ -82,13 +79,6 @@ class MaterialMenu extends MaterialComponent { list.classList.add(MaterialMenu.cssClasses_.LIST); root.appendChild(list); - for (let i = 0; i < items.length; i++) { - let item = document.createElement('li'); - item.classList.add(MaterialMenu.cssClasses_.ITEM); - item.textContent = items[i]; - list.appendChild(item); - } - return root; } diff --git a/src/radio/radio.js b/src/radio/radio.js index f9f073aec..74d5cadd5 100644 --- a/src/radio/radio.js +++ b/src/radio/radio.js @@ -18,25 +18,27 @@ /** * The MaterialRadio class wraps a Material Design radio component. * + * @extends {MaterialComponent} * @export */ class MaterialRadio extends MaterialComponent { /** * Initialize radio from a DOM node. * - * @param {Element} root The element being upgraded. + * @param {Element=} optRoot The element being upgraded. */ - constructor(root) { - super(root); + constructor(optRoot) { + super(optRoot); // Check if the root has the right class. - if (!root.classList.contains(this.constructor.cssClasses_.ROOT)) { + if (!this.root_.classList.contains(this.constructor.cssClasses_.ROOT)) { throw new Error('MaterialRadio missing ' + `${this.constructor.cssClasses_.ROOT} class.`); } // Look for required sub-nodes in the root's DOM. - this.input_ = root.querySelector(`.${MaterialRadio.cssClasses_.INPUT}`); + this.input_ = + this.root_.querySelector(`.${MaterialRadio.cssClasses_.INPUT}`); if (!this.input_) { throw new Error( `MaterialRadio missing ${MaterialRadio.cssClasses_.INPUT} node.`); @@ -64,46 +66,27 @@ class MaterialRadio extends MaterialComponent { } /** - * Creates the DOM subtree for a new radio. - * - * Options: - * - {string} id: The ID to use on the input element. - * - {string} text: The text to use on the radio. - * - {boolean} checked: Whether the radio should initially be checked. - * - {boolean} disabled: Whether the radio should initially be disabled. + * Creates the DOM subtree for a new component. + * Greatly simplifies programmatic component creation. * + * @protected + * @nocollapse * @return {Element} The DOM subtree for the component. - * @export */ - static buildDom(/** { id: string, text: string, checked: boolean, - disabled: boolean }= */ { - id = MaterialRadio.generateId_(), - text = '', - checked = false, - disabled = false - } = {}) { + static buildDom_() { let root = document.createElement('label'); let input = document.createElement('input'); let label = document.createElement('span'); + let id = MaterialRadio.generateId_(); root.htmlFor = id; root.classList.add(MaterialRadio.cssClasses_.ROOT); input.type = 'radio'; input.id = id; input.classList.add(MaterialRadio.cssClasses_.INPUT); - input.checked = checked; - input.disabled = disabled; root.appendChild(input); label.classList.add(MaterialRadio.cssClasses_.LABEL); - label.text = text; root.appendChild(label); - // Ensure correct first render. - if (checked) { - root.classList.add(MaterialRadio.cssClasses_.IS_CHECKED); - } - if (disabled) { - root.classList.add(MaterialRadio.cssClasses_.IS_DISABLED); - } return root; } diff --git a/src/switch/switch.js b/src/switch/switch.js index 77b132736..9dc00f34e 100644 --- a/src/switch/switch.js +++ b/src/switch/switch.js @@ -24,13 +24,13 @@ class MaterialSwitch extends MaterialComponent { /** * Initialize checkbox from a DOM node. * - * @param {Element} root The element being upgraded. + * @param {Element=} optRoot The element being upgraded. */ - constructor(root) { - super(root); + constructor(optRoot) { + super(optRoot); // Check if the root has the right class. - if (!root.classList.contains(this.constructor.cssClasses_.ROOT)) { + if (!this.root_.classList.contains(this.constructor.cssClasses_.ROOT)) { throw new Error('MaterialSwitch missing ' + `${this.constructor.cssClasses_.ROOT} class.`); } @@ -65,46 +65,27 @@ class MaterialSwitch extends MaterialComponent { } /** - * Creates the DOM subtree for a new switch. - * - * Options: - * - {string} id: The ID to use on the input element. - * - {string} text: The text to use on the switch. - * - {boolean} checked: Whether the switch should initially be checked. - * - {boolean} disabled: Whether the switch should initially be disabled. + * Creates the DOM subtree for a new component. + * Greatly simplifies programmatic component creation. * + * @protected + * @nocollapse * @return {Element} The DOM subtree for the component. - * @export */ - static buildDom(/** { id: string, text: string, checked: boolean, - disabled: boolean }= */ { - id = MaterialSwitch.generateId_(), - text = '', - checked = false, - disabled = false - } = {}) { + static buildDom_() { let root = document.createElement('label'); let input = document.createElement('input'); let label = document.createElement('span'); + let id = MaterialSwitch.generateId_(); root.htmlFor = id; root.classList.add(MaterialSwitch.cssClasses_.ROOT); input.type = 'checkbox'; input.id = id; input.classList.add(MaterialSwitch.cssClasses_.INPUT); - input.checked = checked; - input.disabled = disabled; root.appendChild(input); label.classList.add(MaterialSwitch.cssClasses_.LABEL); - label.text = text; root.appendChild(label); - // Ensure correct first render. - if (checked) { - root.classList.add(MaterialSwitch.cssClasses_.IS_CHECKED); - } - if (disabled) { - root.classList.add(MaterialSwitch.cssClasses_.IS_DISABLED); - } return root; } diff --git a/test/unit/checkbox.js b/test/unit/checkbox.js index 088d14416..f76d0849a 100644 --- a/test/unit/checkbox.js +++ b/test/unit/checkbox.js @@ -43,34 +43,10 @@ describe('MaterialCheckbox', function () { expect(el.classList.contains('mdl-checkbox--is-upgraded')).to.be.true; }); - describe('.buildDom()', function () { - it('should return a valid DOM with no parameters', function() { - var el = MaterialCheckbox.buildDom(); - expect(el).to.be.an.instanceof(Element); - var sw = new MaterialCheckbox(el); - expect(sw).to.be.an.instanceof(MaterialCheckbox); - }); - - it('should return a valid DOM with a provided id', function() { - var el = MaterialCheckbox.buildDom({ - id: 'testId' - }); - expect(el).to.be.an.instanceof(Element); - expect(el.querySelector('#testId')).to.not.be.null; - var sw = new MaterialCheckbox(el); - expect(sw).to.be.an.instanceof(MaterialCheckbox); - }); - - it('should return a valid DOM with a provided text', function() { - var el = MaterialCheckbox.buildDom({ - text: 'Test checkbox' - }); - expect(el).to.be.an.instanceof(Element); - expect(el.querySelector('.mdl-checkbox__label').text).to - .equal('Test checkbox'); - var sw = new MaterialCheckbox(el); - expect(sw).to.be.an.instanceof(MaterialCheckbox); - }); + it('should build a valid DOM with no parameters', function() { + var checkbox = new MaterialCheckbox(); + expect(checkbox).to.be.an.instanceof(MaterialCheckbox); + expect(checkbox.root).to.be.an.instanceof(Element); }); it('should get checked class after being checked', function() { diff --git a/test/unit/menu.js b/test/unit/menu.js index 807582f17..8b0f69e0d 100644 --- a/test/unit/menu.js +++ b/test/unit/menu.js @@ -45,26 +45,10 @@ describe('MaterialMenu', function () { expect(function() { new MaterialMenu(el) }).to.throw(Error); }); - describe('.buildDom()', function () { - it('should return a valid DOM with no parameters', function() { - var el = MaterialMenu.buildDom(); - expect(el).to.be.an.instanceof(Element); - var sw = new MaterialMenu(el); - expect(sw).to.be.an.instanceof(MaterialMenu); - }); - - it('should return a valid DOM with a provided list of items', function() { - var testItems = ['foo', 'bar', 'foobar']; - var el = MaterialMenu.buildDom({ - items: testItems - }); - expect(el).to.be.an.instanceof(Element); - var items = el.querySelectorAll('.mdl-menu__item'); - expect(items.length).to.be.equal(3); - for (var i = 0; i < items.length; i++) { - expect(items[i].textContent).to.be.equal(testItems[i]); - } - }); + it('should build a valid DOM with no parameters', function() { + var menu = new MaterialMenu(); + expect(menu).to.be.an.instanceof(MaterialMenu); + expect(menu.root).to.be.an.instanceof(Element); }); it('should start the showing animation on show()', function(done) { diff --git a/test/unit/radio.js b/test/unit/radio.js index 2713bd228..da32ff025 100644 --- a/test/unit/radio.js +++ b/test/unit/radio.js @@ -43,34 +43,10 @@ describe('MaterialRadio', function () { expect(el.classList.contains('mdl-radio--is-upgraded')).to.be.true; }); - describe('.buildDom()', function () { - it('should return a valid DOM with no parameters', function() { - var el = MaterialRadio.buildDom(); - expect(el).to.be.an.instanceof(Element); - var sw = new MaterialRadio(el); - expect(sw).to.be.an.instanceof(MaterialRadio); - }); - - it('should return a valid DOM with a provided id', function() { - var el = MaterialRadio.buildDom({ - id: 'testId' - }); - expect(el).to.be.an.instanceof(Element); - expect(el.querySelector('#testId')).to.not.be.null; - var sw = new MaterialRadio(el); - expect(sw).to.be.an.instanceof(MaterialRadio); - }); - - it('should return a valid DOM with a provided text', function() { - var el = MaterialRadio.buildDom({ - text: 'Test radio' - }); - expect(el).to.be.an.instanceof(Element); - expect(el.querySelector('.mdl-radio__label').text).to - .equal('Test radio'); - var sw = new MaterialRadio(el); - expect(sw).to.be.an.instanceof(MaterialRadio); - }); + it('should build a valid DOM with no parameters', function() { + var radio = new MaterialRadio(); + expect(radio).to.be.an.instanceof(MaterialRadio); + expect(radio.root).to.be.an.instanceof(Element); }); it('should get checked class after being checked', function() { diff --git a/test/unit/switch.js b/test/unit/switch.js index 82bcc7fde..95f132ed0 100644 --- a/test/unit/switch.js +++ b/test/unit/switch.js @@ -43,34 +43,10 @@ describe('MaterialSwitch', function () { expect(el.classList.contains('mdl-switch--is-upgraded')).to.be.true; }); - describe('.buildDom()', function () { - it('should return a valid DOM with no parameters', function() { - var el = MaterialSwitch.buildDom(); - expect(el).to.be.an.instanceof(Element); - var sw = new MaterialSwitch(el); - expect(sw).to.be.an.instanceof(MaterialSwitch); - }); - - it('should return a valid DOM with a provided id', function() { - var el = MaterialSwitch.buildDom({ - id: 'testId' - }); - expect(el).to.be.an.instanceof(Element); - expect(el.querySelector('#testId')).to.not.be.null; - var sw = new MaterialSwitch(el); - expect(sw).to.be.an.instanceof(MaterialSwitch); - }); - - it('should return a valid DOM with a provided text', function() { - var el = MaterialSwitch.buildDom({ - text: 'Test switch' - }); - expect(el).to.be.an.instanceof(Element); - expect(el.querySelector('.mdl-switch__label').text).to - .equal('Test switch'); - var sw = new MaterialSwitch(el); - expect(sw).to.be.an.instanceof(MaterialSwitch); - }); + it('should build a valid DOM with no parameters', function() { + var sw = new MaterialSwitch(); + expect(sw).to.be.an.instanceof(MaterialSwitch); + expect(sw.root).to.be.an.instanceof(Element); }); it('should get checked class after being checked', function() { From d62e7dd06fd2d7a1ecfff30c4ff69454f5135310 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= Date: Tue, 14 Jun 2016 11:38:57 +0100 Subject: [PATCH 063/101] Rmove IDs from checkbox, switch and radio DOM structures. Shouldn't be necessary, since the association with the parent label is implicit. --- src/checkbox/checkbox.js | 12 ------------ src/checkbox/snippets/check-off.html | 4 ++-- src/checkbox/snippets/check-on.html | 4 ++-- src/radio/radio.js | 12 ------------ src/radio/snippets/radio-off.html | 4 ++-- src/radio/snippets/radio-on.html | 4 ++-- src/switch/snippets/switch-off.html | 4 ++-- src/switch/snippets/switch-on.html | 4 ++-- src/switch/switch.js | 12 ------------ test/unit/checkbox.js | 2 -- test/unit/radio.js | 2 -- test/unit/switch.js | 2 -- 12 files changed, 12 insertions(+), 54 deletions(-) diff --git a/src/checkbox/checkbox.js b/src/checkbox/checkbox.js index 34301fee9..27000da04 100644 --- a/src/checkbox/checkbox.js +++ b/src/checkbox/checkbox.js @@ -55,15 +55,6 @@ class MaterialCheckbox extends MaterialComponent { this.init_(); } - /** - * Generates an ID for a new checkbox. Keeps a counter to ensure uniqueness. - * @return {string} The generated ID. - */ - static generateId_() { - MaterialCheckbox.autoCounter_ = (MaterialCheckbox.autoCounter_ || 0) + 1; - return `mdlcheckbox-${MaterialCheckbox.autoCounter_}`; - } - /** * Creates the DOM subtree for a new component. * Greatly simplifies programmatic component creation. @@ -76,11 +67,8 @@ class MaterialCheckbox extends MaterialComponent { let root = document.createElement('label'); let input = document.createElement('input'); let label = document.createElement('span'); - let id = MaterialCheckbox.generateId_(); - root.htmlFor = id; root.classList.add(MaterialCheckbox.cssClasses_.ROOT); input.type = 'checkbox'; - input.id = id; input.classList.add(MaterialCheckbox.cssClasses_.INPUT); root.appendChild(input); label.classList.add(MaterialCheckbox.cssClasses_.LABEL); diff --git a/src/checkbox/snippets/check-off.html b/src/checkbox/snippets/check-off.html index 6756515d0..9551dd2b8 100644 --- a/src/checkbox/snippets/check-off.html +++ b/src/checkbox/snippets/check-off.html @@ -1,5 +1,5 @@ -