weui - npm Package Compare versions

Comparing version 0.2.0 to 0.2.2

dist/example/example.js

@@ -6,3 +6,3 @@ /**
 $(function () {
-    // 页面栈
+    // page stack
     var stack = [];
@@ -12,6 +12,28 @@ var $container = $('.js_container');
         var id = $(this).data('id');
+        go(id);
+    });
+
+    // location.hash = '#hash1' 和点击后退都会触发`hashchange`，这个demo页面只关心后退
+    $(window).on('hashchange', function (e) {
+        if (/#.+/gi.test(e.newURL)) {
+            return;
+        }
+        var $top = stack.pop();
+        if (!$top) {
+            return;
+        }
+        $top.addClass('slideOut').on('animationend', function () {
+            $top.remove();
+        }).on('webkitAnimationEnd', function () {
+            $top.remove();
+        });
+    });
+
+    function go(id){
         var $tpl = $($('#tpl_' + id).html()).addClass('slideIn').addClass(id);
         $container.append($tpl);
         stack.push($tpl);
-        history.pushState({id: id}, '', '#' + id);
+        // why not use `history.pushState`, https://github.com/weui/weui/issues/26
+        //history.pushState({id: id}, '', '#' + id);
+        location.hash = '#' + id;
 
@@ -30,18 +52,8 @@ $($tpl).on('webkitAnimationEnd', function (){
         }
+    }
 
-    });
+    if (/#.*/gi.test(location.href)) {
+        go(location.hash.slice(1));
+    }
 
-    // webkit will fired popstate on page loaded
-    $(window).on('popstate', function () {
-        var $top = stack.pop();
-        if (!$top) {
-            return;
-        }
-        $top.addClass('slideOut').on('animationend', function () {
-            $top.remove();
-        }).on('webkitAnimationEnd', function () {
-            $top.remove();
-        });
-    });
-
     // toast
@@ -63,3 +75,3 @@ $container.on('click', '#showToast', function () {
         $('#dialog1').show();
-        $('#dialog1').find('.btn_weui_dialog').on('click', function () {
+        $('#dialog1').find('.weui_btn_dialog').on('click', function () {
             $('#dialog1').hide();
@@ -70,6 +82,28 @@ });
         $('#dialog2').show();
-        $('#dialog2').find('.btn_weui_dialog').on('click', function () {
+        $('#dialog2').find('.weui_btn_dialog').on('click', function () {
             $('#dialog2').hide();
         });
-    })
+    });
+
+    function hideActionSheet(weuiActionsheet, mask) {
+        weuiActionsheet.removeClass('weui_actionsheet_toggle');
+        mask.removeClass('weui_fade_toggle');
+        weuiActionsheet.on('transitionend', function () {
+            mask.hide();
+        }).on('webkitTransitionEnd', function () {
+            mask.hide();
+        })
+    }
+    $container.on('click','#showActionSheet', function () {
+        var mask = $('#mask');
+        var weuiActionsheet = $('#weui_actionsheet');
+        weuiActionsheet.addClass('weui_actionsheet_toggle');
+        mask.show().addClass('weui_fade_toggle').click(function () {
+            hideActionSheet(weuiActionsheet, mask);
+        });
+        $('#actionsheet_cancel').click(function () {
+            hideActionSheet(weuiActionsheet, mask);
+        });
+        weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd');
+    });
 });

gulpfile.js

 var yargs = require('yargs').argv;
 var gulp = require('gulp');
-var chokidar = require('chokidar');
 var less = require('gulp-less');
@@ -8,35 +7,48 @@ var minify = require('gulp-minify-css');
 var rename = require('gulp-rename');
+var sourcemaps = require('gulp-sourcemaps');
+var browserSync = require('browser-sync');
 
-var express = require('express');
-
+var option = {base: 'src'};
 var dist = __dirname + '/dist';
 
-gulp.task('release', function(){
+gulp.task('source', function(){
+    gulp.src('src/example/**/*.!(less)', option)
+        .pipe(gulp.dest(dist))
+        .pipe(browserSync.reload({stream: true}));
+});
 
-    var option = {base: 'src'};
+gulp.task('styles', ['source'], function () {
+    gulp.src('src/example/example.less', option)
+        .pipe(less().on('error', function (e){
+            console.error(e.message);
+            this.emit('end');
+        }))
+        .pipe(autoprefixer())
+        .pipe(minify())
+        .pipe(gulp.dest(dist))
+        .pipe(browserSync.reload({stream: true}));
 
-    gulp.src('src/example/**/**', option)
-        .pipe(gulp.dest(dist));
-
-    gulp.src('src/example/**/*.less', option)
-    .pipe(less())
-    .pipe(gulp.dest(dist));
-
     gulp.src('src/style/weui.less', option)
-        .pipe(less().on('error', function (e){
+        .pipe(sourcemaps.init())
+        .pipe(less().on('error', function (e) {
             console.error(e.message);
             this.emit('end');
         }))
+        .pipe(sourcemaps.write())
         .pipe(autoprefixer())
         .pipe(gulp.dest(dist))
         .pipe(minify())
-        .pipe(rename(function (path){
+        .pipe(rename(function (path) {
             path.basename += '.min';
         }))
-        .pipe(gulp.dest(dist));
+        .pipe(gulp.dest(dist))
+        .pipe(browserSync.reload({stream: true}));
 });
 
+gulp.task('release', ['styles']);
+
 gulp.task('watch', function () {
-    chokidar.watch('src/**/*.*').on('all', function () {
-        gulp.run('release');
+    gulp.watch('src/**/*.less', ['styles']);
+    gulp.watch('src/example/**/*.{html,js}', ['source'], function () {
+        browserSync.reload();
     });
@@ -46,9 +58,15 @@ });
 gulp.task('server', function () {
-    var app = express();
-    var port = yargs.p || yargs.port || 8080;
-    app.use(express.static(dist));
-    app.listen(port, function () {
-        port = port === 80 ? '' : ':' + port;
-        var url = 'http://127.0.0.1' + port;
-        console.log(url);
+    yargs.p = yargs.p || 8080;
+    browserSync.init({
+        server: {
+            baseDir: "./dist"
+        },
+        ui: {
+            port: yargs.p + 1,
+            weinre: {
+                port: yargs.p + 2
+            }
+        },
+        port: yargs.p,
+        startPath: '/example'
     });
@@ -62,12 +80,10 @@ });
 //  -p: 服务器启动端口，默认8080
-gulp.task('default', function () {
-    if (yargs.w){
-        gulp.start('release');
+gulp.task('default', ['release'], function () {
+    if (yargs.s) {
+        gulp.start('server');
+    }
+
+    if (yargs.w) {
         gulp.start('watch');
-    }else{
-        gulp.start('release');
     }
-    if (yargs.s){
-        gulp.start('server');
-    }
 });

package.json

 {
   "name": "weui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "wechat mobile ui",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "gulp -ws",
+    "test": "gulp release"
   },
@@ -12,4 +13,3 @@ "author": "wechat ui team",
   "devDependencies": {
-    "chokidar": "^1.0.5",
-    "express": "^4.11.2",
+    "browser-sync": "^2.9.11",
     "gulp": "^3.8.10",
@@ -21,4 +21,5 @@ "gulp-autoprefixer": "^2.3.1",
     "gulp-replace": "^0.5.2",
+    "gulp-sourcemaps": "^1.6.0",
     "yargs": "^1.3.3"
   }
 }

README.md

@@ -1,2 +0,2 @@
-weui 为微信 Web 服务量身设计
+WeUI 为微信 Web 服务量身设计  ![](https://travis-ci.org/weui/weui.svg?branch=master)
 ====
@@ -6,16 +6,7 @@
 
-WeUI是一套同微信原生视觉体验一致的基础样式库，为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含`button`、`cell`、`dialog`、`toast`、`article`、`icon`等各式元素。
+WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含`button`、`cell`、`dialog`、 `progress`、 `toast`、`article`、`icon`等各式元素。
 
 ## 使用
 
-### 方法一（推荐）：
-
-推荐使用微信提供的CDN链接，在微信客户端6.2.5及以上版本，由微信离线缓存，无需进行网络请求。
-
-```
-<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/0.2.0/weui.css"/>
-```
-
-
-#### 方法二：
+#### 方法一：
 使用`bower`进行安装
@@ -26,3 +17,3 @@ ```
 
-#### 方法三：
+#### 方法二：
 使用`npm`进行安装
@@ -42,3 +33,3 @@ ```
 ```
-运行`gulp -ws`命令，会监听`src`目录下所有文件的变更，并且默认会在`8080`端口启动一个express服务器，然后在浏览器打开 `http://localhost:8080/example`。
+运行`gulp -ws`命令，会监听`src`目录下所有文件的变更，并且默认会在`8080`端口启动服务器，然后在浏览器打开 `http://localhost:8080/example`。
 
@@ -52,2 +43,11 @@
 
+[http://weui.github.io/weui/](http://weui.github.io/weui)
+
+
+## 第三方扩展
+
+- [kevyu/weui-sass](https://github.com/kevyu/weui-sass)
+- [n7best/react-weui](https://github.com/n7best/react-weui)
+- [aidenzou/vue-weui](https://github.com/aidenzou/vue-weui)
+
 ## Button
@@ -82,3 +82,3 @@
 
-`cell`由thumnail`weui_cell_hd`、body`weui_cell_bd`、accessory`weui_cell_ft`三部分组成，`cell`采用自适应布局，在需要自适应的部分加上class`weui_cell_primary`即可：
+`cell`由thumbnail`weui_cell_hd`、body`weui_cell_bd`、accessory`weui_cell_ft`三部分组成，`cell`采用自适应布局，在需要自适应的部分加上class`weui_cell_primary`即可：
 
@@ -110,3 +110,5 @@ ![](./dist/example/snapshot/cell.png)
     <a class="weui_cell" href="javascript:;">
-        <div class="weui_cell_hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
+        <div class="weui_cell_hd">
+            <img src="" alt="icon" style="width:20px;margin-right:5px;display:block">
+        </div>
         <div class="weui_cell_bd weui_cell_primary">
@@ -120,3 +122,5 @@ <p>cell standard</p>
     <a class="weui_cell" href="javascript:;">
-        <div class="weui_cell_hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
+        <div class="weui_cell_hd">
+            <img src="" alt="icon" style="width:20px;margin-right:5px;display:block">
+        </div>
         <div class="weui_cell_bd weui_cell_primary">
@@ -146,4 +150,4 @@ <p>cell standard</p>
         <div class="weui_dialog_ft">
-            <a href="javascript:;" class="btn_weui_dialog default">取消</a>
-            <a href="javascript:;" class="btn_weui_dialog primary">确定</a>
+            <a href="javascript:;" class="weui_btn_dialog default">取消</a>
+            <a href="javascript:;" class="weui_btn_dialog primary">确定</a>
         </div>
@@ -162,3 +166,3 @@ </div>
         <div class="weui_dialog_ft">
-            <a href="javascript:;" class="btn_weui_dialog primary">确定</a>
+            <a href="javascript:;" class="weui_btn_dialog primary">确定</a>
         </div>
@@ -169,3 +173,19 @@ </div>
 
+## Progress
 
+progress用于上传、下载等耗时并且需要显示进度的场景，用户可以随时中断该操作。
+
+![](./dist/example/snapshot/progress.png)
+
+```html
+<div class="weui_progress">
+    <div class="weui_progress_bar">
+        <div class="weui_progress_inner_bar" style="width: 50%;"></div>
+    </div>
+    <a href="javascript:;" class="weui_progress_opr">
+        <i class="weui_icon_cancel"></i>
+    </a>
+</div>
+```
+
 ## Toast
@@ -268,3 +288,24 @@
 ```
+## ActionSheet
+`ActionSheet`用于显示包含一系列可交互的动作集合，包括说明、跳转等。由底部弹出，一般用于响应用户对页面的点击。
 
+![](./dist/example/snapshot/actionSheet.png)
+
+```html
+<div id="actionSheet_wrap">
+    <div class="weui_mask_transition" id="mask"></div>
+    <div class="weui_actionsheet" id="weui_actionsheet">
+        <div class="weui_actionsheet_menu">
+            <div class="weui_actionsheet_cell">示例菜单</div>
+            <div class="weui_actionsheet_cell">示例菜单</div>
+            <div class="weui_actionsheet_cell">示例菜单</div>
+            <div class="weui_actionsheet_cell">示例菜单</div>
+        </div>
+        <div class="weui_actionsheet_action">
+            <div class="weui_actionsheet_cell" id="actionsheet_cancel">取消</div>
+        </div>
+    </div>
+</div>
+```
+
 ## Icon
@@ -290,2 +331,4 @@
     <i class="weui_icon_download"></i>
+    <i class="weui_icon_info_circle"></i>
+    <i class="weui_icon_cancel"></i>
 </div>
@@ -292,0 +335,0 @@ ```

src/example/example.js

@@ -6,3 +6,3 @@ /**
 $(function () {
-    // 页面栈
+    // page stack
     var stack = [];
@@ -12,6 +12,28 @@ var $container = $('.js_container');
         var id = $(this).data('id');
+        go(id);
+    });
+
+    // location.hash = '#hash1' 和点击后退都会触发`hashchange`，这个demo页面只关心后退
+    $(window).on('hashchange', function (e) {
+        if (/#.+/gi.test(e.newURL)) {
+            return;
+        }
+        var $top = stack.pop();
+        if (!$top) {
+            return;
+        }
+        $top.addClass('slideOut').on('animationend', function () {
+            $top.remove();
+        }).on('webkitAnimationEnd', function () {
+            $top.remove();
+        });
+    });
+
+    function go(id){
         var $tpl = $($('#tpl_' + id).html()).addClass('slideIn').addClass(id);
         $container.append($tpl);
         stack.push($tpl);
-        history.pushState({id: id}, '', '#' + id);
+        // why not use `history.pushState`, https://github.com/weui/weui/issues/26
+        //history.pushState({id: id}, '', '#' + id);
+        location.hash = '#' + id;
 
@@ -30,18 +52,8 @@ $($tpl).on('webkitAnimationEnd', function (){
         }
+    }
 
-    });
+    if (/#.*/gi.test(location.href)) {
+        go(location.hash.slice(1));
+    }
 
-    // webkit will fired popstate on page loaded
-    $(window).on('popstate', function () {
-        var $top = stack.pop();
-        if (!$top) {
-            return;
-        }
-        $top.addClass('slideOut').on('animationend', function () {
-            $top.remove();
-        }).on('webkitAnimationEnd', function () {
-            $top.remove();
-        });
-    });
-
     // toast
@@ -63,3 +75,3 @@ $container.on('click', '#showToast', function () {
         $('#dialog1').show();
-        $('#dialog1').find('.btn_weui_dialog').on('click', function () {
+        $('#dialog1').find('.weui_btn_dialog').on('click', function () {
             $('#dialog1').hide();
@@ -70,6 +82,28 @@ });
         $('#dialog2').show();
-        $('#dialog2').find('.btn_weui_dialog').on('click', function () {
+        $('#dialog2').find('.weui_btn_dialog').on('click', function () {
             $('#dialog2').hide();
         });
-    })
+    });
+
+    function hideActionSheet(weuiActionsheet, mask) {
+        weuiActionsheet.removeClass('weui_actionsheet_toggle');
+        mask.removeClass('weui_fade_toggle');
+        weuiActionsheet.on('transitionend', function () {
+            mask.hide();
+        }).on('webkitTransitionEnd', function () {
+            mask.hide();
+        })
+    }
+    $container.on('click','#showActionSheet', function () {
+        var mask = $('#mask');
+        var weuiActionsheet = $('#weui_actionsheet');
+        weuiActionsheet.addClass('weui_actionsheet_toggle');
+        mask.show().addClass('weui_fade_toggle').click(function () {
+            hideActionSheet(weuiActionsheet, mask);
+        });
+        $('#actionsheet_cancel').click(function () {
+            hideActionSheet(weuiActionsheet, mask);
+        });
+        weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd');
+    });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1976104

increased by221.72%

Number of package files

99

increased by7.61%

Lines of code

2029

increased by24.71%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

337

increased by14.63%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes