diff --git a/.npmignore b/.npmignore index fed6a87..e4ca61f 100644 --- a/.npmignore +++ b/.npmignore @@ -1,10 +1,12 @@ .travis.yml .drone.yml -examples/ test/ +homepage/ +examples/ +docs/ +assets/ Makefile .jshintrc .jshintignore coverage/ *.html -assets/ diff --git a/HISTORY.md b/HISTORY.md index f20f55e..3a056e0 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -1,3 +1,8 @@ +1.1.6 / 2015-07-08 +=================== + + * Tweak ES6 style + 1.1.2 / 2015-07-05 =================== diff --git a/assets/examples.css b/assets/examples.css index c93e0a3..29de83e 100644 --- a/assets/examples.css +++ b/assets/examples.css @@ -1,17 +1,19 @@ +::-webkit-scrollbar { + width: 2px; +} +::-webkit-scrollbar-thumb { + background: #000; +} .albumPanel { - position: relative; - font-family: "Microsoft Yahei", arial; - /* arial阻止文字抖动 */ - - font-size: 12px; - line-height: 1.5; - text-align: center; - margin: auto; - margin-top: 5px; - padding-bottom: 60px; - _zoom: 1; - /* 很重要，否则在设置其高度为auto时，容器不会展示 */ - + position: relative; + font-family: "Microsoft Yahei", arial; + font-size: 12px; + line-height: 1.5; + text-align: center; + margin: auto; + margin-top: 5px; + padding-bottom: 60px; + _zoom: 1; } .albumPanel .aP-hd i, .albumPanel .aP-hd b, @@ -20,397 +22,364 @@ .albumPanel .aP-collapse i, .albumPanel .aP-expand i, .albumPanel .aP-expand.absolute { - background: url(http://img01.taobaocdn.com/tps/i1/T1yONIFapgXXaw9EUt-1000-274.png) no-repeat -9999px -9999px; - _background-image: url(http://img02.taobaocdn.com/tps/i2/T1XhBKFoReXXaw9EUt-1000-274.png); + background: url(http://img01.taobaocdn.com/tps/i1/T1yONIFapgXXaw9EUt-1000-274.png) no-repeat -9999px -9999px; + _background-image: url(http://img02.taobaocdn.com/tps/i2/T1XhBKFoReXXaw9EUt-1000-274.png); } .albumPanel .aP-hd { - text-align: left; - color: #6d5c53; + text-align: left; + color: #6d5c53; } .albumPanel .aP-hd i { - background-position: -294px 0; - display: inline-block; - width: 18px; - height: 17px; - margin-bottom: -4px; - margin-right: 5px; + background-position: -294px 0; + display: inline-block; + width: 18px; + height: 17px; + margin-bottom: -4px; + margin-right: 5px; } .albumPanel .aP-hd b { - background-position: -294px -30px; - display: inline-block; - width: 127px; - height: 18px; - color: transparent; - margin-left: 15px; - vertical-align: middle; + background-position: -294px -30px; + display: inline-block; + width: 127px; + height: 18px; + color: transparent; + margin-left: 15px; + vertical-align: middle; } .albumPanel .aP-hd b s { - display: none; + display: none; } .albumPanel .aP-bd { - position: relative; - margin-left: -10px; + position: relative; + margin-left: -10px; } .albumPanel .album { - display: block; - overflow: hidden; - text-decoration: none; + display: block; + overflow: hidden; + text-decoration: none; } .albumPanel .album img { - border: none; + border: none; } .albumPanel .album .a-cont, .albumPanel .album .a-cover { - position: absolute; - left: 0; - top: 0; - -webkit-transition: opacity 0.3s ease-in; - -moz-transition: opacity 0.3s ease-in; - -ms-transition: opacity 0.3s ease-in; - -o-transition: opacity 0.3s ease-in; - transition: opacity 0.3s ease-in; + position: absolute; + left: 0; + top: 0; + -webkit-transition: opacity 0.3s ease-in; + -moz-transition: opacity 0.3s ease-in; + -ms-transition: opacity 0.3s ease-in; + -o-transition: opacity 0.3s ease-in; + transition: opacity 0.3s ease-in; } .albumPanel .album .a-cover { - opacity: 1; + opacity: 1; } .albumPanel .album .a-cont { - opacity: 0; + opacity: 0; } .albumPanel .album:hover { - text-decoration: none; + text-decoration: none; } .albumPanel .album:hover .a-cover { - opacity: 0; + opacity: 0; } .albumPanel .album:hover .a-cont { - opacity: 1; + opacity: 1; } .albumPanel .album:hover .a-mask i { - opacity: 1; - visibility: visible\9; - -webkit-transition: opacity 0.2s ease-in 0.3s; - -moz-transition: opacity 0.2s ease-in 0.3s; - -ms-transition: opacity 0.2s ease-in 0.3s; - -o-transition: opacity 0.2s ease-in 0.3s; - transition: opacity 0.2s ease-in 0.3s; + opacity: 1; + visibility: visible\9; + -webkit-transition: opacity 0.2s ease-in 0.3s; + -moz-transition: opacity 0.2s ease-in 0.3s; + -ms-transition: opacity 0.2s ease-in 0.3s; + -o-transition: opacity 0.2s ease-in 0.3s; + transition: opacity 0.2s ease-in 0.3s; } .albumPanel .album .a-mask { - position: absolute; - height: 100%; - width: 100%; - top: 0; - left: 0; - margin: 0; - padding: 0; + position: absolute; + height: 100%; + width: 100%; + top: 0; + left: 0; + margin: 0; + padding: 0; } .albumPanel .album .a-mask i { - display: block; - visibility: hidden\9; - opacity: 0; - left: 50%; - top: 40%; - position: absolute; + display: block; + visibility: hidden\9; + opacity: 0; + left: 50%; + top: 40%; + position: absolute; } .albumPanel .album .a-layer { - position: absolute; - left: 0; - bottom: 0; - height: 72px; - width: 100%; - margin: 0; - padding: 0; - background-image: -webkit-linear-gradient(top, rgba(240, 234, 228, 0.8) 0%,rgba(240, 234, 228, 1)17%); - background-image: -moz-linear-gradient(top, rgba(240, 234, 228, 0.8) 0%,rgba(240, 234, 228, 1)17%); - background-image: -ms-linear-gradient(top, rgba(240, 234, 228, 0.8) 0%,rgba(240, 234, 228, 1)17%); - background-image: -o-linear-gradient(top, rgba(240, 234, 228, 0.8) 0%,rgba(240, 234, 228, 1)17%); - background-image: linear-gradient(top, rgba(240, 234, 228, 0.8) 0%,rgba(240, 234, 228, 1)17%); - filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ccf0eae4,endcolorstr=#fff0eae4,gradientType=0); - -webkit-transition: all 0.3s ease-in; - -moz-transition: all 0.3s ease-in; - -ms-transition: all 0.3s ease-in; - -o-transition: all 0.3s ease-in; - transition: all 0.3s ease-in; + position: absolute; + left: 0; + bottom: 0; + height: 72px; + width: 100%; + margin: 0; + padding: 0; + background-image: -webkit-linear-gradient(top, rgba(240, 234, 228, 0.8) 0%,rgba(240, 234, 228, 1)17%); + background-image: -moz-linear-gradient(top, rgba(240, 234, 228, 0.8) 0%,rgba(240, 234, 228, 1)17%); + background-image: -ms-linear-gradient(top, rgba(240, 234, 228, 0.8) 0%,rgba(240, 234, 228, 1)17%); + background-image: -o-linear-gradient(top, rgba(240, 234, 228, 0.8) 0%,rgba(240, 234, 228, 1)17%); + background-image: linear-gradient(top, rgba(240, 234, 228, 0.8) 0%,rgba(240, 234, 228, 1)17%); + filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ccf0eae4,endcolorstr=#fff0eae4,gradientType=0); + -webkit-transition: all 0.3s ease-in; + -moz-transition: all 0.3s ease-in; + -ms-transition: all 0.3s ease-in; + -o-transition: all 0.3s ease-in; + transition: all 0.3s ease-in; } .albumPanel .album .a-layer .al-brand, .albumPanel .album .a-layer .al-title { - -webkit-transition: all 0.5s ease-in 0.1s; - -moz-transition: all 0.5s ease-in 0.1s; - -ms-transition: all 0.5s ease-in 0.1s; - -o-transition: all 0.5s ease-in 0.1s; - transition: all 0.5s ease-in 0.1s; + -webkit-transition: all 0.5s ease-in 0.1s; + -moz-transition: all 0.5s ease-in 0.1s; + -ms-transition: all 0.5s ease-in 0.1s; + -o-transition: all 0.5s ease-in 0.1s; + transition: all 0.5s ease-in 0.1s; } .albumPanel .album .a-layer .al-brand { - display: block; - margin: 0; - color: #6d5c53; - text-decoration: none; - line-height: 22px; + display: block; + margin: 0; + color: #6d5c53; + text-decoration: none; + line-height: 22px; } .albumPanel .album .a-layer .al-title { - display: inline-block; - color: #6d5c53; - text-decoration: none; - font-size: 16px; - line-height: 26px; - height: 26px; - min-width: 80%; - _width: 95%; - white-space: nowrap; - /* 可防止title过长导致count位置下降的问题发生 */ - - border-top: 1px dotted #a8a39f; - overflow: hidden; + display: inline-block; + color: #6d5c53; + text-decoration: none; + font-size: 16px; + line-height: 26px; + height: 26px; + min-width: 80%; + _width: 95%; + white-space: nowrap; + border-top: 1px dotted #a8a39f; + overflow: hidden; } .albumPanel .album .a-layer .al-count { - display: block; - color: #beb5ae; - text-decoration: none; + display: block; + color: #beb5ae; + text-decoration: none; } .albumPanel .album .a-more { - display: none; - position: absolute; - top: 0; - left: 0; - width: 100%; - margin: 0; - padding: 0; - height: 100%; - font-size: 16px; - line-height: 2.4; - letter-spacing: .3em; - font-family: arial; - background-color: #dbdbdb; - font-weight: bold; - text-decoration: none; - color: #000; - z-index: 1; - cursor: pointer; - background-position: 0 0; + display: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + margin: 0; + padding: 0; + height: 100%; + font-size: 16px; + line-height: 2.4; + letter-spacing: .3em; + font-family: arial; + background-color: #dbdbdb; + font-weight: bold; + text-decoration: none; + color: #000; + z-index: 1; + cursor: pointer; + background-position: 0 0; } .albumPanel .album:hover .a-mask { - filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00000000,endcolorstr=#FF000000,gradientType=0); - background-color: transparent; + filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00000000,endcolorstr=#FF000000,gradientType=0); + background-color: transparent; } .albumPanel .album:hover .a-layer { - background: none; - filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00000000,endcolorstr=#00000000,gradientType=0); + background: none; + filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00000000,endcolorstr=#00000000,gradientType=0); } .albumPanel .album:hover .a-layer .al-brand, .albumPanel .album:hover .a-layer .al-title { - color: white; + color: white; } .albumPanel .hasAlbums .album:last-child .a-more { - display: block; - -webkit-transition: all 0.2s ease-in 0s; - -moz-transition: all 0.2s ease-in 0s; - -ms-transition: all 0.2s ease-in 0s; - -o-transition: all 0.2s ease-in 0s; - transition: all 0.2s ease-in 0s; + display: block; + -webkit-transition: all 0.2s ease-in 0s; + -moz-transition: all 0.2s ease-in 0s; + -ms-transition: all 0.2s ease-in 0s; + -o-transition: all 0.2s ease-in 0s; + transition: all 0.2s ease-in 0s; } .albumPanel .hasAlbums .album:last-child:hover .a-more { - background-color: #999A99; -} -.albumPanel .hasAlbums .album-last-child { - /* 没有与:last-child合并，是因为IE8不识别:last-child，顾对其的css规则不解析 */ - + background-color: #999A99; } .albumPanel .hasAlbums .album-last-child .a-more { - display: block; - -webkit-transition: all 0.2s ease-in 0s; - -moz-transition: all 0.2s ease-in 0s; - -ms-transition: all 0.2s ease-in 0s; - -o-transition: all 0.2s ease-in 0s; - transition: all 0.2s ease-in 0s; + display: block; + -webkit-transition: all 0.2s ease-in 0s; + -moz-transition: all 0.2s ease-in 0s; + -ms-transition: all 0.2s ease-in 0s; + -o-transition: all 0.2s ease-in 0s; + transition: all 0.2s ease-in 0s; } .albumPanel .hasAlbums .album-last-child:hover .a-more { - background-color: #999A99; + background-color: #999A99; } .albumPanel .w1, .albumPanel .w2 { - position: absolute; - left: -450px\9; - top: 999999px\9; - -webkit-transform: translate(-450px, 999999px); - -moz-transform: translate(-450px, 999999px); - -ms-transform: translate(-450px, 999999px); - -o-transform: translate(-450px, 999999px); - transform: translate(-450px, 999999px); - -ms-transform: none; + position: absolute; + left: -450px\9; + top: 999999px\9; + -webkit-transform: translate(-450px, 999999px); + -moz-transform: translate(-450px, 999999px); + -ms-transform: translate(-450px, 999999px); + -o-transform: translate(-450px, 999999px); + transform: translate(-450px, 999999px); + -ms-transform: none; } .albumPanel .w1 { - width: 190px; - height: 240px; + width: 190px; + height: 240px; } .albumPanel .w1 img { - width: 190px; + width: 190px; } .albumPanel .w1 .al-brand { - padding-top: 3px; + padding-top: 3px; } .albumPanel .w1:hover .a-mask { - background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.1) 52%, rgba(0, 0, 0, 0.55) 67%,rgba(0, 0, 0, .7) 70%, rgba(0, 0, 0, 1) 81%); - background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.1) 52%, rgba(0, 0, 0, 0.55) 67%,rgba(0, 0, 0, .7) 70%, rgba(0, 0, 0, 1) 81%); - background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.1) 52%, rgba(0, 0, 0, 0.55) 67%,rgba(0, 0, 0, .7) 70%, rgba(0, 0, 0, 1) 81%); - background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.1) 52%, rgba(0, 0, 0, 0.55) 67%,rgba(0, 0, 0, .7) 70%, rgba(0, 0, 0, 1) 81%); - background-image: linear-gradient(top, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.1) 52%, rgba(0, 0, 0, 0.55) 67%,rgba(0, 0, 0, .7) 70%, rgba(0, 0, 0, 1) 81%); + background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.1) 52%, rgba(0, 0, 0, 0.55) 67%,rgba(0, 0, 0, .7) 70%, rgba(0, 0, 0, 1) 81%); + background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.1) 52%, rgba(0, 0, 0, 0.55) 67%,rgba(0, 0, 0, .7) 70%, rgba(0, 0, 0, 1) 81%); + background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.1) 52%, rgba(0, 0, 0, 0.55) 67%,rgba(0, 0, 0, .7) 70%, rgba(0, 0, 0, 1) 81%); + background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.1) 52%, rgba(0, 0, 0, 0.55) 67%,rgba(0, 0, 0, .7) 70%, rgba(0, 0, 0, 1) 81%); + background-image: linear-gradient(top, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.1) 52%, rgba(0, 0, 0, 0.55) 67%,rgba(0, 0, 0, .7) 70%, rgba(0, 0, 0, 1) 81%); } .albumPanel .w1:hover .a-mask i { - background-position: -292px -60px; - width: 78px; - height: 78px; - zoom: 0.5; - -moz-transform: scale(0.5); - margin-left: -40px; - /* 使用偶数，否则在chrome下hover时出现抖动 */ - - margin-left: -20px\9; - margin-top: -40px; - margin-top: -20px\9; + background-position: -292px -60px; + width: 78px; + height: 78px; + zoom: 0.5; + -moz-transform: scale(0.5); + margin-left: -40px; + margin-left: -20px\9; + margin-top: -40px; + margin-top: -20px\9; } .albumPanel .w2 { - width: 390px; - height: 490px; + width: 390px; + height: 490px; } .albumPanel .w2 img { - width: 390px; + width: 390px; } .albumPanel .w2 .a-layer { - padding: 28px 0 20px; + padding: 28px 0 20px; } .albumPanel .w2 .a-layer .al-title { - min-width: 60%; + min-width: 60%; } .albumPanel .w2:hover .a-mask { - background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 53%,rgba(0, 0, 0, 0.65) 74%,rgba(0, 0, 0, 1) 81%); - background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 53%,rgba(0, 0, 0, 0.65) 74%,rgba(0, 0, 0, 1) 81%); - background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 53%,rgba(0, 0, 0, 0.65) 74%,rgba(0, 0, 0, 1) 81%); - background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 53%,rgba(0, 0, 0, 0.65) 74%,rgba(0, 0, 0, 1) 81%); - background-image: linear-gradient(top, rgba(0, 0, 0, 0) 53%,rgba(0, 0, 0, 0.65) 74%,rgba(0, 0, 0, 1) 81%); + background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 53%,rgba(0, 0, 0, 0.65) 74%,rgba(0, 0, 0, 1) 81%); + background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 53%,rgba(0, 0, 0, 0.65) 74%,rgba(0, 0, 0, 1) 81%); + background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 53%,rgba(0, 0, 0, 0.65) 74%,rgba(0, 0, 0, 1) 81%); + background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 53%,rgba(0, 0, 0, 0.65) 74%,rgba(0, 0, 0, 1) 81%); + background-image: linear-gradient(top, rgba(0, 0, 0, 0) 53%,rgba(0, 0, 0, 0.65) 74%,rgba(0, 0, 0, 1) 81%); } .albumPanel .w2:hover .a-mask i { - background-position: -371px -56px; - width: 170px; - height: 170px; - zoom: 0.5; - -moz-transform: scale(0.5); - margin-left: -86px; - margin-left: -43px\9; - margin-top: -86px; - margin-top: -43px\9; + background-position: -371px -56px; + width: 170px; + height: 170px; + zoom: 0.5; + -moz-transform: scale(0.5); + margin-left: -86px; + margin-left: -43px\9; + margin-top: -86px; + margin-top: -43px\9; } .albumPanel .aP-expand, .albumPanel .aP-collapse { - background-image: url(about:blank); - display: block; - left: 0; - bottom: 0; - height: 60px; - width: 100%; - color: transparent; - font-size: 12px; - line-height: 36px; - text-decoration: none; - outline: none; - background-color: rgba(255, 255, 255, 0.7); - background: url(about:blank) transparent\0; - /* avoid IE9's DXImageTransform and rgba accumulation */ - - filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#b3ffffff,endcolorstr=#b3ffffff); - /* for IE6~9(startcolorstr=AARRGGBB) */ - - *zoom: 1; - /* trigger IE6/7 hasLayout */ - - -webkit-transition: background-color .2s ease-in 0s, color .2s ease-in 0s; - -moz-transition: background-color .2s ease-in 0s, color .2s ease-in 0s; - -ms-transition: background-color .2s ease-in 0s, color .2s ease-in 0s; - -o-transition: background-color .2s ease-in 0s, color .2s ease-in 0s; - transition: background-color .2s ease-in 0s, color .2s ease-in 0s; + background-image: url(about:blank); + display: block; + left: 0; + bottom: 0; + height: 60px; + width: 100%; + color: transparent; + font-size: 12px; + line-height: 36px; + text-decoration: none; + outline: none; + background-color: rgba(255, 255, 255, 0.7); + background: url(about:blank) transparent\0; + -webkit-transition: background-color .2s ease-in 0s, color .2s ease-in 0s; + -moz-transition: background-color .2s ease-in 0s, color .2s ease-in 0s; + -ms-transition: background-color .2s ease-in 0s, color .2s ease-in 0s; + -o-transition: background-color .2s ease-in 0s, color .2s ease-in 0s; + transition: background-color .2s ease-in 0s, color .2s ease-in 0s; } .albumPanel .aP-expand i, .albumPanel .aP-collapse i { - display: block; - margin: auto; - line-height: 25px; - width: 50px; - height: 50px; - margin-top: -26px; + display: block; + margin: auto; + line-height: 25px; + width: 50px; + height: 50px; + margin-top: -26px; } .albumPanel .aP-expand:hover, .albumPanel .aP-collapse:hover { - color: white; - text-decoration: none; - background-color: rgba(0, 0, 0, 0.5); - background: url(about:blank) transparent\0; - /* avoid IE9's DXImageTransform and rgba accumulation */ - - filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#80000000,endcolorstr=#80000000); - /* for IE6~9(startcolorstr=AARRGGBB) */ - - *zoom: 1; - /* trigger IE6/7 hasLayout */ - + color: white; + text-decoration: none; + background-color: rgba(0, 0, 0, 0.5); + background: url(about:blank) transparent\0; } .albumPanel .aP-collapse { - position: absolute; - z-index: 1; - opacity: 0; + position: absolute; + z-index: 1; + opacity: 0; } .albumPanel .aP-collapse i { - background-position: -201px -129px; - width: 76px; + background-position: -201px -129px; + width: 76px; } .albumPanel .aP-collapse:hover { - color: transparent; + color: transparent; } .albumPanel .aP-collapse:hover i { - background-position: -201px -194px; + background-position: -201px -194px; } .albumPanel .aP-expand { - position: fixed; - background-color: rgba(238, 238, 238, 0.7); - background: url(about:blank) transparent\0; - /* avoid IE9's DXImageTransform and rgba accumulation */ - - filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#b3eeeeee,endcolorstr=#b3eeeeee); - /* for IE6~9(startcolorstr=AARRGGBB) */ - - *zoom: 1; - /* trigger IE6/7 hasLayout */ - + position: fixed; + background-color: rgba(238, 238, 238, 0.7); } .albumPanel .aP-expand i { - background-position: -202px 0; + background-position: -202px 0; } .albumPanel .aP-expand:hover { - color: transparent; + color: transparent; } .albumPanel .aP-expand:hover i { - background-position: -202px -63px; + background-position: -202px -63px; } .fixedH { - height: 290px; - overflow: hidden; + height: 290px; + overflow: hidden; } .ie8 .albumPanel .al-count, .ks-ie8 .albumPanel .al-count, .ie9 .albumPanel .al-count, .ks-ie9 .albumPanel .al-count { - margin-top: -5px; + margin-top: -5px; } .ie8 .albumPanel .w1 .a-mask i, .ks-ie8 .albumPanel .w1 .a-mask i { - width: 39px; - height: 39px; - margin-top: 55px; - margin-left: 55px; + width: 39px; + height: 39px; + margin-top: 55px; + margin-left: 55px; } .ie8 .albumPanel .w2 .a-mask i, .ks-ie8 .albumPanel .w2 .a-mask i { - width: 85px; - height: 85px; - margin-top: 110px; - margin-left: 110px; + width: 85px; + height: 85px; + margin-top: 110px; + margin-left: 110px; } .ie6 .aP-expand, .ks-ie6 .aP-expand, @@ -424,48 +393,46 @@ .ks-ie7 .aP-collapse, .ie8 .aP-collapse, .ks-ie8 .aP-collapse { - text-indent: -99999px; - /* 解决文字重影（color:transparent IE8下失效）*/ - + text-indent: -99999px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { - /* retina screen */ - .albumPanel .aP-hd b s { - display: inline; - color: #6d5c53; - margin-left: 17px; - text-decoration: none; - background: white; - padding: 2px 0; - } - .albumPanel .aP-collapse { - color: #6d5c53; - } - .albumPanel .aP-collapse i { - background-position: -201px -151px; - margin-top: -5px; - } - .albumPanel .aP-collapse:hover { - color: #fff; - } - .albumPanel .aP-collapse:hover i { - background-position: -201px -216px; - } - .albumPanel .aP-expand { - color: #6d5c53; - } - .albumPanel .aP-expand i { - background-position: -202px -22px; - margin-top: -5px; - } - .albumPanel .aP-expand:hover { - color: #fff; - } - .albumPanel .aP-expand:hover i { - background-position: -202px -84px; - } + /* retina screen */ + .albumPanel .aP-hd b s { + display: inline; + color: #6d5c53; + margin-left: 17px; + text-decoration: none; + background: white; + padding: 2px 0; + } + .albumPanel .aP-collapse { + color: #6d5c53; + } + .albumPanel .aP-collapse i { + background-position: -201px -151px; + margin-top: -5px; + } + .albumPanel .aP-collapse:hover { + color: #fff; + } + .albumPanel .aP-collapse:hover i { + background-position: -201px -216px; + } + .albumPanel .aP-expand { + color: #6d5c53; + } + .albumPanel .aP-expand i { + background-position: -202px -22px; + margin-top: -5px; + } + .albumPanel .aP-expand:hover { + color: #fff; + } + .albumPanel .aP-expand:hover i { + background-position: -202px -84px; + } } .a-mask { - color: white; - font-size: 120px; + color: white; + font-size: 120px; } diff --git a/assets/examples.js b/assets/examples.js index 2ce52f2..5a98261 100644 --- a/assets/examples.js +++ b/assets/examples.js @@ -18316,45 +18316,47 @@ }, { key: 'renderChildren', value: function renderChildren() { + var _this = this; + return React.Children.map(this.props.children, function (child, childIndex) { - if (! ~child.props.className.indexOf(this.props.itemClassName)) { + if (! ~child.props.className.indexOf(_this.props.itemClassName)) { return; } - var childWidth = parseInt(child.props.style.width) + this.props.itemMargin; - var childHeight = parseInt(child.props.style.height) + this.props.itemMargin; + var childWidth = parseInt(child.props.style.width) + _this.props.itemMargin; + var childHeight = parseInt(child.props.style.height) + _this.props.itemMargin; - var calculatedPosition = this.sortManager.getPosition(childWidth, childHeight, this.containerStyle.height); + var calculatedPosition = _this.sortManager.getPosition(childWidth, childHeight, _this.containerStyle.height); - if (!this.fixedContainerHeight) { + if (!_this.fixedContainerHeight) { - if (calculatedPosition[1] + childHeight > this.containerStyle.height) { - this.containerStyle.height = calculatedPosition[1] + childHeight; + if (calculatedPosition[1] + childHeight > _this.containerStyle.height) { + _this.containerStyle.height = calculatedPosition[1] + childHeight; } } - var calculatedStyle = this.animationManager.generate(Util.extend({}, this.props, { + var calculatedStyle = _this.animationManager.generate(Util.extend({}, _this.props, { position: calculatedPosition, size: { width: childWidth, height: childHeight }, - containerHeight: this.containerStyle.height + containerHeight: _this.containerStyle.height })); - this.mixItemInlineStyle(calculatedStyle); + _this.mixItemInlineStyle(calculatedStyle); - this.props.onItemDidLayout.call(this, child); + _this.props.onItemDidLayout.call(_this, child); - if (childIndex + 1 === this.props.children.length) { - this.props.onContainerDidLayout.call(this); + if (childIndex + 1 === _this.props.children.length) { + _this.props.onContainerDidLayout.call(_this); } return React.cloneElement(child, { style: Util.extend({}, child.props.style, calculatedStyle) }); - }, this); + }); } }, { key: 'mixItemInlineStyle', @@ -18403,9 +18405,6 @@ }; module.exports = AutoResponsive; - module.exports.Util = Util; - module.exports.GridSort = GridSort; - module.exports.AnimationManager = AnimationManager; /***/ }, /* 159 */ @@ -19015,7 +19014,7 @@ _classCallCheck(this, WaterfallExampleComponent); _get(Object.getPrototypeOf(WaterfallExampleComponent.prototype), 'constructor', this).call(this, props); - this.bindEventMap(); + this.bindEventMapContent(); this.state = { styleList: styleList }; @@ -19024,11 +19023,13 @@ _inherits(WaterfallExampleComponent, _React$Component); _createClass(WaterfallExampleComponent, [{ - key: 'bindEventMap', - value: function bindEventMap() { - events.forEach((function (i) { - this[i] = this[i].bind(this); - }).bind(this)); + key: 'bindEventMapContent', + value: function bindEventMapContent() { + var _this = this; + + events.forEach(function (i) { + _this[i] = _this[i].bind(_this); + }); } }, { key: 'componentWillMount', @@ -19038,21 +19039,25 @@ }, { key: 'getData', value: function getData() { - Util.ajax('./data.json', (function (d) { + var _this2 = this; + + Util.ajax('./data.json', function (d) { var data = JSON.parse(d).data; - this.setState({ + _this2.setState({ data: data }); - }).bind(this)); + }); } }, { key: 'componentDidMount', value: function componentDidMount() { - window.addEventListener('resize', (function () { - this.setState({ - containerWidth: React.findDOMNode(this.refs.container).clientWidth + var _this3 = this; + + window.addEventListener('resize', function () { + _this3.setState({ + containerWidth: React.findDOMNode(_this3.refs.container).clientWidth }); - }).bind(this), false); + }, false); } }, { key: 'getAutoResponsiveProps', @@ -19085,8 +19090,8 @@ _extends({ ref: 'container' }, this.getAutoResponsiveProps()), this.state.data.map(function (i, index) { var style = { - width: i.w === 'w1' ? '190' : '390', - height: i.w === 'w1' ? '240' : '490' + width: i.w === 'w1' ? 190 : 390, + height: i.w === 'w1' ? 240 : 490 }; return React.createElement( 'a', @@ -19121,7 +19126,7 @@ ), React.createElement('p', { className: 'a-more j_ALMore' }) ); - }, this) + }) ) ); } diff --git a/assets/homepage.js b/assets/homepage.js index 8ec1dc0..7a9af12 100644 --- a/assets/homepage.js +++ b/assets/homepage.js @@ -94,9 +94,11 @@ _createClass(HomePage, [{ key: 'bindEventMapContext', value: function bindEventMapContext() { - events.forEach((function (i) { - this[i] = this[i].bind(this); - }).bind(this)); + var _this = this; + + events.forEach(function (i) { + _this[i] = _this[i].bind(_this); + }); } }, { key: 'componentWillMount', @@ -119,16 +121,17 @@ }, { key: 'getDocumentsData', value: function getDocumentsData() { - var that = this; + var _this2 = this; + this.currentLocale = this.state.locale; var counter = documentsList.length; this.setState({ loading: true }); - documentsList.forEach((function (name) { - Util.ajax('./docs/' + this.currentLocale + '/' + name + '.md', (function (data) { - var item = that.state.documentsList.slice(0); + documentsList.forEach(function (name) { + Util.ajax('./docs/' + _this2.currentLocale + '/' + name + '.md', function (data) { + var item = _this2.state.documentsList.slice(0); if (item.length === documentsList.length) { item.shift(); @@ -139,18 +142,18 @@ data: data }); - this.setState({ + _this2.setState({ documentsList: item }); if (counter === 1) { - this.setState({ + _this2.setState({ loading: false }); } counter--; - }).bind(this)); - }).bind(this)); + }); + }); } }, { key: 'scrollToAnchor', @@ -18522,45 +18525,47 @@ }, { key: 'renderChildren', value: function renderChildren() { + var _this = this; + return React.Children.map(this.props.children, function (child, childIndex) { - if (! ~child.props.className.indexOf(this.props.itemClassName)) { + if (! ~child.props.className.indexOf(_this.props.itemClassName)) { return; } - var childWidth = parseInt(child.props.style.width) + this.props.itemMargin; - var childHeight = parseInt(child.props.style.height) + this.props.itemMargin; + var childWidth = parseInt(child.props.style.width) + _this.props.itemMargin; + var childHeight = parseInt(child.props.style.height) + _this.props.itemMargin; - var calculatedPosition = this.sortManager.getPosition(childWidth, childHeight, this.containerStyle.height); + var calculatedPosition = _this.sortManager.getPosition(childWidth, childHeight, _this.containerStyle.height); - if (!this.fixedContainerHeight) { + if (!_this.fixedContainerHeight) { - if (calculatedPosition[1] + childHeight > this.containerStyle.height) { - this.containerStyle.height = calculatedPosition[1] + childHeight; + if (calculatedPosition[1] + childHeight > _this.containerStyle.height) { + _this.containerStyle.height = calculatedPosition[1] + childHeight; } } - var calculatedStyle = this.animationManager.generate(Util.extend({}, this.props, { + var calculatedStyle = _this.animationManager.generate(Util.extend({}, _this.props, { position: calculatedPosition, size: { width: childWidth, height: childHeight }, - containerHeight: this.containerStyle.height + containerHeight: _this.containerStyle.height })); - this.mixItemInlineStyle(calculatedStyle); + _this.mixItemInlineStyle(calculatedStyle); - this.props.onItemDidLayout.call(this, child); + _this.props.onItemDidLayout.call(_this, child); - if (childIndex + 1 === this.props.children.length) { - this.props.onContainerDidLayout.call(this); + if (childIndex + 1 === _this.props.children.length) { + _this.props.onContainerDidLayout.call(_this); } return React.cloneElement(child, { style: Util.extend({}, child.props.style, calculatedStyle) }); - }, this); + }); } }, { key: 'mixItemInlineStyle', @@ -18609,9 +18614,6 @@ }; module.exports = AutoResponsive; - module.exports.Util = Util; - module.exports.GridSort = GridSort; - module.exports.AnimationManager = AnimationManager; /***/ }, /* 159 */ @@ -19129,18 +19131,22 @@ _createClass(WaterfallSampleComponent, [{ key: 'bindEventMapContext', value: function bindEventMapContext() { - events.forEach((function (i) { - this[i] = this[i].bind(this); - }).bind(this)); + var _this = this; + + events.forEach(function (i) { + _this[i] = _this[i].bind(_this); + }); } }, { key: 'componentDidMount', value: function componentDidMount() { - window.addEventListener('resize', (function () { - this.setState({ - containerWidth: React.findDOMNode(this.refs.container).clientWidth + var _this2 = this; + + window.addEventListener('resize', function () { + _this2.setState({ + containerWidth: React.findDOMNode(_this2.refs.container).clientWidth }); - }).bind(this), false); + }, false); } }, { key: 'clickItemHandle', @@ -19171,16 +19177,18 @@ }, { key: 'render', value: function render() { + var _this3 = this; + return React.createElement( AutoResponsive, _extends({ ref: 'container' }, this.getAutoResponsiveProps()), arrayList.map(function (i) { return React.createElement( 'div', - { key: i, onClick: this.clickItemHandle, className: 'item', style: this.state.styleList[i] }, + { key: i, onClick: _this3.clickItemHandle, className: 'item', style: _this3.state.styleList[i] }, i ); - }, this) + }) ); } }]); @@ -19773,7 +19781,7 @@ module.exports = { "name": "autoresponsive-react", - "version": "1.1.4", + "version": "1.1.6", "description": "auto responsive grid layout library", "keywords": [ "react", @@ -19964,18 +19972,22 @@ _createClass(SimplestSampleComponent, [{ key: 'bindClickEventMap', value: function bindClickEventMap() { - buttons.forEach((function (i) { - this[i + 'ClickHandle'] = this[i + 'ClickHandle'].bind(this); - }).bind(this)); + var _this = this; + + buttons.forEach(function (i) { + _this[i + 'ClickHandle'] = _this[i + 'ClickHandle'].bind(_this); + }); } }, { key: 'componentDidMount', value: function componentDidMount() { - window.addEventListener('resize', (function () { - this.setState({ - containerWidth: React.findDOMNode(this.refs.container).clientWidth + var _this2 = this; + + window.addEventListener('resize', function () { + _this2.setState({ + containerWidth: React.findDOMNode(_this2.refs.container).clientWidth }); - }).bind(this), false); + }, false); } }, { key: 'appendClickHandle', @@ -20065,13 +20077,15 @@ }, { key: 'renderButtons', value: function renderButtons() { - return buttons.map((function (i) { + var _this3 = this; + + return buttons.map(function (i) { return React.createElement( 'button', - { type: 'button', onClick: this[i + 'ClickHandle'], className: 'btn btn-default' }, + { type: 'button', onClick: _this3[i + 'ClickHandle'], className: 'btn btn-default' }, i ); - }).bind(this)); + }); } }, { key: 'render', @@ -20145,26 +20159,30 @@ this.state = { classNames: ['markdown'] }; - this.bindEventMap(); + this.bindEventMapContext(); } _inherits(MarkdownComponent, _React$Component); _createClass(MarkdownComponent, [{ - key: 'bindEventMap', - value: function bindEventMap() { - events.forEach((function (i) { - this[i] = this[i].bind(this); - }).bind(this)); + key: 'bindEventMapContext', + value: function bindEventMapContext() { + var _this = this; + + events.forEach(function (i) { + _this[i] = _this[i].bind(_this); + }); } }, { key: 'componentWillMount', value: function componentWillMount() { - setTimeout((function () { - this.setState({ + var _this2 = this; + + setTimeout(function () { + _this2.setState({ classNames: ['markdown', 'fadeIn'] }); - }).bind(this), 0); + }, 0); } }, { key: 'clickHandler', diff --git a/examples/waterfall.js b/examples/waterfall.js index fccd08c..fc7c036 100644 --- a/examples/waterfall.js +++ b/examples/waterfall.js @@ -44,16 +44,16 @@ arrayList.map(function(i) { class WaterfallExampleComponent extends React.Component { constructor(props) { super(props); - this.bindEventMap(); + this.bindEventMapContent(); this.state = { styleList: styleList }; } - bindEventMap() { - events.forEach(function(i) { + bindEventMapContent() { + events.forEach(i => { this[i] = this[i].bind(this); - }.bind(this)); + }); } componentWillMount() { @@ -61,20 +61,20 @@ class WaterfallExampleComponent extends React.Component { } getData() { - Util.ajax('./data.json', function(d) { + Util.ajax('./data.json', d => { let data = JSON.parse(d).data; this.setState({ data: data }); - }.bind(this)); + }); } componentDidMount() { - window.addEventListener('resize', function() { + window.addEventListener('resize', () => { this.setState({ containerWidth: React.findDOMNode(this.refs.container).clientWidth }); - }.bind(this), false); + }, false); } getAutoResponsiveProps() { @@ -97,10 +97,10 @@ class WaterfallExampleComponent extends React.Component {
{ - this.state.data.map(function(i, index) { + this.state.data.map((i, index) => { let style = { - width: i.w === 'w1' ? '190' : '390', - height: i.w === 'w1' ? '240' : '490' + width: i.w === 'w1' ? 190 : 390, + height: i.w === 'w1' ? 240 : 490 }; return ( @@ -115,7 +115,7 @@ class WaterfallExampleComponent extends React.Component {

); - }, this) + }) }
diff --git a/homepage/index.js b/homepage/index.js index 466d655..8893db9 100644 --- a/homepage/index.js +++ b/homepage/index.js @@ -32,9 +32,9 @@ class HomePage extends React.Component { } bindEventMapContext() { - events.forEach(function(i) { + events.forEach(i => { this[i] = this[i].bind(this); - }.bind(this)); + }); } componentWillMount() { @@ -54,16 +54,15 @@ class HomePage extends React.Component { } getDocumentsData() { - let that = this; this.currentLocale = this.state.locale; let counter = documentsList.length; this.setState({ loading: true }); - documentsList.forEach(function(name) { - Util.ajax(`./docs/${this.currentLocale}/${name}.md`, function(data) { - let item = that.state.documentsList.slice(0); + documentsList.forEach(name => { + Util.ajax(`./docs/${this.currentLocale}/${name}.md`, data => { + let item = this.state.documentsList.slice(0); if (item.length === documentsList.length) { item.shift(); @@ -84,8 +83,8 @@ class HomePage extends React.Component { }); } counter--; - }.bind(this)); - }.bind(this)); + }); + }); } scrollToAnchor() { @@ -177,4 +176,4 @@ HomePage.defaultProps = { locale: Util.getUrlParams('locale') || 'en' }; -React.render(, document.body); +React.render(, document.body); diff --git a/homepage/layout.js b/homepage/layout.js index f056147..28e6611 100644 --- a/homepage/layout.js +++ b/homepage/layout.js @@ -19,9 +19,9 @@ class LayoutComponent extends React.Component { render() { return (
- + {this.props.children} - +
); } diff --git a/homepage/markdown.js b/homepage/markdown.js index 038456a..531a70d 100644 --- a/homepage/markdown.js +++ b/homepage/markdown.js @@ -30,21 +30,21 @@ class MarkdownComponent extends React.Component { this.state = { classNames: ['markdown'] }; - this.bindEventMap(); + this.bindEventMapContext(); } - bindEventMap() { - events.forEach(function(i) { + bindEventMapContext() { + events.forEach(i => { this[i] = this[i].bind(this); - }.bind(this)); + }); } componentWillMount() { - setTimeout(function() { + setTimeout(() => { this.setState({ classNames: ['markdown', 'fadeIn'] }); - }.bind(this), 0); + }, 0); } clickHandler(e) { diff --git a/homepage/simplest.js b/homepage/simplest.js index 40d0480..dc2fea9 100644 --- a/homepage/simplest.js +++ b/homepage/simplest.js @@ -47,17 +47,17 @@ class SimplestSampleComponent extends React.Component { } bindClickEventMap() { - buttons.forEach(function(i) { + buttons.forEach(i => { this[`${i}ClickHandle`] = this[`${i}ClickHandle`].bind(this); - }.bind(this)); + }); } componentDidMount() { - window.addEventListener('resize', function() { + window.addEventListener('resize', () => { this.setState({ containerWidth: React.findDOMNode(this.refs.container).clientWidth }); - }.bind(this), false); + }, false); } appendClickHandle(e) { @@ -135,9 +135,9 @@ class SimplestSampleComponent extends React.Component { } renderButtons() { - return buttons.map(function(i) { + return buttons.map(i => { return ; - }.bind(this)); + }); } render() { diff --git a/homepage/waterfall.js b/homepage/waterfall.js index 372fe19..c86b857 100644 --- a/homepage/waterfall.js +++ b/homepage/waterfall.js @@ -50,17 +50,17 @@ class WaterfallSampleComponent extends React.Component { } bindEventMapContext() { - events.forEach(function(i) { + events.forEach(i => { this[i] = this[i].bind(this); - }.bind(this)); + }); } componentDidMount() { - window.addEventListener('resize', function() { + window.addEventListener('resize', () => { this.setState({ containerWidth: React.findDOMNode(this.refs.container).clientWidth }); - }.bind(this), false); + }, false); } clickItemHandle(e) { @@ -91,9 +91,9 @@ class WaterfallSampleComponent extends React.Component { return ( { - arrayList.map(function(i) { + arrayList.map(i => { return
{i}
; - }, this) + }) } ); diff --git a/lib/index.js b/lib/index.js index e5c4bf4..ca7bc98 100644 --- a/lib/index.js +++ b/lib/index.js @@ -66,7 +66,7 @@ class AutoResponsive extends React.Component { } renderChildren() { - return React.Children.map(this.props.children, function(child, childIndex) { + return React.Children.map(this.props.children, (child, childIndex) => { if (!~child.props.className.indexOf(this.props.itemClassName)) { return; @@ -104,7 +104,7 @@ class AutoResponsive extends React.Component { return React.cloneElement(child, { style: Util.extend({}, child.props.style, calculatedStyle) }); - }, this); + }); } mixItemInlineStyle(s) { @@ -147,6 +147,3 @@ AutoResponsive.defaultProps = { }; module.exports = AutoResponsive; -module.exports.Util = Util; -module.exports.GridSort = GridSort; -module.exports.AnimationManager = AnimationManager; diff --git a/package.json b/package.json index 995bb14..65ff022 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "autoresponsive-react", - "version": "1.1.4", + "version": "1.1.6", "description": "auto responsive grid layout library", "keywords": [ "react",