Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
weui - npm Package Compare versions
Comparing version 0.4.0 to 0.4.1
@@ -9,3 +9,3 @@ { | ||
| "main": "dist/style/weui.css", | ||
| "version": "0.4.0", | ||
| "version": "0.4.1", | ||
| "authors": [ | ||
@@ -12,0 +12,0 @@ "wechat ui team" |
@@ -0,1 +1,23 @@ | ||
| #### v0.4.1 (2016-04-06) | ||
| - 【修复】优化 demo，修复 demo 的若干 bug | ||
| - 【修复】修复搜索框上下边框位置的 bug | ||
| - 【修复】改进 navbar 高亮背景色过浅的问题 | ||
| - 【修复】修复 navbar 在 iOS 下无法点击的 bug | ||
| - 【修复】禁用 cssnano 插件压缩 css 时对 z-index 的转换，是 mask、toast、dialog 等有预设的 z-index | ||
| - 【修复】修复弹框内容在英文字符时溢出的 bug | ||
| - 【修复】修复 media-box 布局的 bug | ||
| - 【修复】修复 tab demo 页面出现滚动条的 bug | ||
| 详情参考: | ||
| - [22ba680](https://github.com/weui/weui/commit/22ba680) 优化 demo | ||
| - [169e18a](https://github.com/weui/weui/commit/169e18a) fixed `search bar` border-top & border-bottom position bug | ||
| - [7db3ca0](https://github.com/weui/weui/commit/7db3ca0) #295 fixed navbar active background-color | ||
| - [1a549ea](https://github.com/weui/weui/commit/1a549ea) improve navbar touched behavior on ios | ||
| - [6c1d7b5](https://github.com/weui/weui/commit/6c1d7b5) disable cssnano zindex | ||
| - [e32dc1a](https://github.com/weui/weui/commit/e32dc1a) add dialog content word wrap | ||
| - [b93306b](https://github.com/weui/weui/commit/b93306b) fix flexbox layout problem | ||
| - [2260e49](https://github.com/weui/weui/commit/2260e49) #244 修复 tab demo 页出滚动条的bug | ||
| #### v0.4.0 (2016-02-26) | ||
@@ -2,0 +24,0 @@ |
@@ -1,390 +0,241 @@ | ||
| /** | ||
| * Created by jf on 2015/9/11. | ||
| */ | ||
| $(function () { | ||
| var pageManager = { | ||
| $container: $('.js_container'), | ||
| _pageStack: [], | ||
| _configs: [], | ||
| _defaultPage: null, | ||
| _pageIndex: 1, | ||
| setDefault: function (defaultPage) { | ||
| this._defaultPage = this._find('name', defaultPage); | ||
| return this; | ||
| }, | ||
| init: function () { | ||
| var self = this; | ||
| var router = new Router({ | ||
| container: '#container', | ||
| enterTimeout: 250, | ||
| leaveTimeout: 250 | ||
| }); | ||
| $(window).on('hashchange', function () { | ||
| var state = history.state || {}; | ||
| var url = location.hash.indexOf('#') === 0 ? location.hash : '#'; | ||
| var page = self._find('url', url) || self._defaultPage; | ||
| if (state._pageIndex <= self._pageIndex || self._findInStack(url)) { | ||
| self._back(page); | ||
| } else { | ||
| self._go(page); | ||
| } | ||
| }); | ||
| // grid | ||
| var home = { | ||
| url: '/', | ||
| className: 'home', | ||
| render: function () { | ||
| return $('#tpl_home').html(); | ||
| } | ||
| }; | ||
| if (history.state && history.state._pageIndex) { | ||
| this._pageIndex = history.state._pageIndex; | ||
| } | ||
| // button | ||
| var button = { | ||
| url: '/button', | ||
| className: 'button', | ||
| render: function () { | ||
| return $('#tpl_button').html(); | ||
| } | ||
| }; | ||
| this._pageIndex--; | ||
| // cell | ||
| var cell = { | ||
| url: '/cell', | ||
| className: 'cell', | ||
| render: function () { | ||
| return $('#tpl_cell').html(); | ||
| } | ||
| }; | ||
| var url = location.hash.indexOf('#') === 0 ? location.hash : '#'; | ||
| var page = self._find('url', url) || self._defaultPage; | ||
| this._go(page); | ||
| return this; | ||
| // toast | ||
| var toast = { | ||
| url: '/toast', | ||
| className: 'toast', | ||
| render: function () { | ||
| return $('#tpl_toast').html(); | ||
| }, | ||
| push: function (config) { | ||
| this._configs.push(config); | ||
| return this; | ||
| bind: function () { | ||
| $('#container').on('click', '#showToast', function () { | ||
| $('#toast').show(); | ||
| setTimeout(function () { | ||
| $('#toast').hide(); | ||
| }, 2000); | ||
| }).on('click', '#showLoadingToast', function () { | ||
| $('#loadingToast').show(); | ||
| setTimeout(function () { | ||
| $('#loadingToast').hide(); | ||
| }, 2000); | ||
| }); | ||
| } | ||
| }; | ||
| // dialog | ||
| var dialog = { | ||
| url: '/dialog', | ||
| className: 'dialog', | ||
| render: function () { | ||
| return $('#tpl_dialog').html(); | ||
| }, | ||
| go: function (to) { | ||
| var config = this._find('name', to); | ||
| if (!config) { | ||
| return; | ||
| } | ||
| location.hash = config.url; | ||
| }, | ||
| _go: function (config) { | ||
| this._pageIndex ++; | ||
| history.replaceState && history.replaceState({_pageIndex: this._pageIndex}, '', location.href); | ||
| var html = $(config.template).html(); | ||
| var $html = $(html).addClass('slideIn').addClass(config.name); | ||
| this.$container.append($html); | ||
| this._pageStack.push({ | ||
| config: config, | ||
| dom: $html | ||
| bind: function () { | ||
| $('#container').on('click', '#showDialog1', function () { | ||
| $('#dialog1').show().on('click', '.weui_btn_dialog', function () { | ||
| $('#dialog1').off('click').hide(); | ||
| }); | ||
| }).on('click', '#showDialog2', function () { | ||
| $('#dialog2').show().on('click', '.weui_btn_dialog', function () { | ||
| $('#dialog2').off('click').hide(); | ||
| }); | ||
| }); | ||
| if (!config.isBind) { | ||
| this._bind(config); | ||
| } | ||
| } | ||
| }; | ||
| return this; | ||
| // progress | ||
| var progress = { | ||
| url: '/progress', | ||
| className: 'progress', | ||
| render: function () { | ||
| return $('#tpl_progress').html(); | ||
| }, | ||
| back: function () { | ||
| history.back(); | ||
| }, | ||
| _back: function (config) { | ||
| this._pageIndex --; | ||
| bind: function () { | ||
| $('#container').on('click', '#btnStartProgress', function () { | ||
| if ($(this).hasClass('weui_btn_disabled')) { | ||
| return; | ||
| } | ||
| var stack = this._pageStack.pop(); | ||
| if (!stack) { | ||
| return; | ||
| } | ||
| $(this).addClass('weui_btn_disabled'); | ||
| var url = location.hash.indexOf('#') === 0 ? location.hash : '#'; | ||
| var found = this._findInStack(url); | ||
| if (!found) { | ||
| var html = $(config.template).html(); | ||
| var $html = $(html).css('opacity', 1).addClass(config.name); | ||
| $html.insertBefore(stack.dom); | ||
| var progress = 0; | ||
| var $progress = $('.js_progress'); | ||
| if (!config.isBind) { | ||
| this._bind(config); | ||
| function next() { | ||
| $progress.css({width: progress + '%'}); | ||
| progress = ++progress % 100; | ||
| setTimeout(next, 30); | ||
| } | ||
| this._pageStack.push({ | ||
| config: config, | ||
| dom: $html | ||
| }); | ||
| } | ||
| stack.dom.addClass('slideOut').on('animationend', function () { | ||
| stack.dom.remove(); | ||
| }).on('webkitAnimationEnd', function () { | ||
| stack.dom.remove(); | ||
| next(); | ||
| }); | ||
| return this; | ||
| }, | ||
| _findInStack: function (url) { | ||
| var found = null; | ||
| for(var i = 0, len = this._pageStack.length; i < len; i++){ | ||
| var stack = this._pageStack[i]; | ||
| if (stack.config.url === url) { | ||
| found = stack; | ||
| break; | ||
| } | ||
| } | ||
| return found; | ||
| }, | ||
| _find: function (key, value) { | ||
| var page = null; | ||
| for (var i = 0, len = this._configs.length; i < len; i++) { | ||
| if (this._configs[i][key] === value) { | ||
| page = this._configs[i]; | ||
| break; | ||
| } | ||
| } | ||
| return page; | ||
| }, | ||
| _bind: function (page) { | ||
| var events = page.events || {}; | ||
| for (var t in events) { | ||
| for (var type in events[t]) { | ||
| this.$container.on(type, t, events[t][type]); | ||
| } | ||
| } | ||
| page.isBind = true; | ||
| } | ||
| }; | ||
| var home = { | ||
| name: 'home', | ||
| url: '#', | ||
| template: '#tpl_home', | ||
| events: { | ||
| '.js_grid': { | ||
| click: function (e) { | ||
| var id = $(this).data('id'); | ||
| pageManager.go(id); | ||
| } | ||
| } | ||
| // msg | ||
| var msg = { | ||
| url: '/msg', | ||
| className: 'msg', | ||
| render: function () { | ||
| return $('#tpl_msg').html(); | ||
| } | ||
| }; | ||
| var panel = { | ||
| name: 'panel', | ||
| url: '#panel', | ||
| template: '#tpl_panel' | ||
| }; | ||
| var button = { | ||
| name: 'button', | ||
| url: '#button', | ||
| template: '#tpl_button' | ||
| }; | ||
| var cell = { | ||
| name: 'cell', | ||
| url: '#cell', | ||
| template: '#tpl_cell', | ||
| events: { | ||
| '#showTooltips': { | ||
| click: function () { | ||
| var $tooltips = $('.js_tooltips'); | ||
| if ($tooltips.css('display') != 'none') { | ||
| return; | ||
| } | ||
| // 如果有`animation`, `position: fixed`不生效 | ||
| $('.page.cell').removeClass('slideIn'); | ||
| $tooltips.show(); | ||
| setTimeout(function () { | ||
| $tooltips.hide(); | ||
| }, 2000); | ||
| } | ||
| } | ||
| // article | ||
| var article = { | ||
| url: '/article', | ||
| className: 'article', | ||
| render: function () { | ||
| return $('#tpl_article').html(); | ||
| } | ||
| }; | ||
| var toast = { | ||
| name: 'toast', | ||
| url: '#toast', | ||
| template: '#tpl_toast', | ||
| events: { | ||
| '#showToast': { | ||
| click: function (e) { | ||
| var $toast = $('#toast'); | ||
| if ($toast.css('display') != 'none') { | ||
| return; | ||
| } | ||
| $toast.show(); | ||
| setTimeout(function () { | ||
| $toast.hide(); | ||
| }, 2000); | ||
| } | ||
| }, | ||
| '#showLoadingToast': { | ||
| click: function (e) { | ||
| var $loadingToast = $('#loadingToast'); | ||
| if ($loadingToast.css('display') != 'none') { | ||
| return; | ||
| } | ||
| // actionsheet | ||
| var actionsheet = { | ||
| url: '/actionsheet', | ||
| className: 'actionsheet', | ||
| render: function () { | ||
| return $('#tpl_actionsheet').html(); | ||
| }, | ||
| bind: function () { | ||
| $('#container').on('click', '#showActionSheet', function () { | ||
| var mask = $('#mask'); | ||
| var weuiActionsheet = $('#weui_actionsheet'); | ||
| weuiActionsheet.addClass('weui_actionsheet_toggle'); | ||
| mask.show().addClass('weui_fade_toggle').one('click', function () { | ||
| hideActionSheet(weuiActionsheet, mask); | ||
| }); | ||
| $('#actionsheet_cancel').one('click', function () { | ||
| hideActionSheet(weuiActionsheet, mask); | ||
| }); | ||
| weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd'); | ||
| $loadingToast.show(); | ||
| setTimeout(function () { | ||
| $loadingToast.hide(); | ||
| }, 2000); | ||
| 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(); | ||
| }) | ||
| } | ||
| } | ||
| }); | ||
| } | ||
| }; | ||
| var dialog = { | ||
| name: 'dialog', | ||
| url: '#dialog', | ||
| template: '#tpl_dialog', | ||
| events: { | ||
| '#showDialog1': { | ||
| click: function (e) { | ||
| var $dialog = $('#dialog1'); | ||
| $dialog.show(); | ||
| $dialog.find('.weui_btn_dialog').one('click', function () { | ||
| $dialog.hide(); | ||
| }); | ||
| } | ||
| }, | ||
| '#showDialog2': { | ||
| click: function (e) { | ||
| var $dialog = $('#dialog2'); | ||
| $dialog.show(); | ||
| $dialog.find('.weui_btn_dialog').one('click', function () { | ||
| $dialog.hide(); | ||
| }); | ||
| } | ||
| } | ||
| // icons | ||
| var icons = { | ||
| url: '/icons', | ||
| className: 'icons', | ||
| render: function () { | ||
| return $('#tpl_icons').html(); | ||
| } | ||
| }; | ||
| var progress = { | ||
| name: 'progress', | ||
| url: '#progress', | ||
| template: '#tpl_progress', | ||
| events: { | ||
| '#btnStartProgress': { | ||
| click: function () { | ||
| if ($(this).hasClass('weui_btn_disabled')) { | ||
| return; | ||
| } | ||
| $(this).addClass('weui_btn_disabled'); | ||
| var progress = 0; | ||
| var $progress = $('.js_progress'); | ||
| function next() { | ||
| $progress.css({width: progress + '%'}); | ||
| progress = ++progress % 100; | ||
| setTimeout(next, 30); | ||
| } | ||
| next(); | ||
| } | ||
| } | ||
| // panel | ||
| var panel = { | ||
| url: '/panel', | ||
| className: 'panel', | ||
| render: function () { | ||
| return $('#tpl_panel').html(); | ||
| } | ||
| }; | ||
| var msg = { | ||
| name: 'msg', | ||
| url: '#msg', | ||
| template: '#tpl_msg', | ||
| events: {} | ||
| }; | ||
| var article = { | ||
| name: 'article', | ||
| url: '#article', | ||
| template: '#tpl_article', | ||
| events: {} | ||
| }; | ||
| // tab | ||
| var tab = { | ||
| name: 'tab', | ||
| url: '#tab', | ||
| template: '#tpl_tab', | ||
| events: { | ||
| '.js_tab': { | ||
| click: function (){ | ||
| var id = $(this).data('id'); | ||
| pageManager.go(id); | ||
| } | ||
| } | ||
| url: '/tab', | ||
| className: 'tab', | ||
| render: function () { | ||
| return $('#tpl_tab').html(); | ||
| } | ||
| }; | ||
| // navbar | ||
| var navbar = { | ||
| name: 'navbar', | ||
| url: '#navbar', | ||
| template: '#tpl_navbar', | ||
| events: {} | ||
| url: '/navbar', | ||
| className: 'navbar', | ||
| render: function () { | ||
| return $('#tpl_navbar').html(); | ||
| } | ||
| }; | ||
| // tabbar | ||
| var tabbar = { | ||
| name: 'tabbar', | ||
| url: '#tabbar', | ||
| template: '#tpl_tabbar', | ||
| events: {} | ||
| url: '/tabbar', | ||
| className: 'tabbar', | ||
| render: function () { | ||
| return $('#tpl_tabbar').html(); | ||
| } | ||
| }; | ||
| var actionSheet = { | ||
| name: 'actionsheet', | ||
| url: '#actionsheet', | ||
| template: '#tpl_actionsheet', | ||
| events: { | ||
| '#showActionSheet': { | ||
| click: function () { | ||
| var mask = $('#mask'); | ||
| var weuiActionsheet = $('#weui_actionsheet'); | ||
| weuiActionsheet.addClass('weui_actionsheet_toggle'); | ||
| mask.show().addClass('weui_fade_toggle').one('click', function () { | ||
| hideActionSheet(weuiActionsheet, mask); | ||
| }); | ||
| $('#actionsheet_cancel').one('click', function () { | ||
| hideActionSheet(weuiActionsheet, mask); | ||
| }); | ||
| weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd'); | ||
| 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(); | ||
| }) | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| // searchbar | ||
| var searchbar = { | ||
| name:"searchbar", | ||
| url:"#searchbar", | ||
| template: '#tpl_searchbar', | ||
| events:{ | ||
| '#search_input':{ | ||
| focus:function(){ | ||
| //searchBar | ||
| var $weuiSearchBar = $('#search_bar'); | ||
| $weuiSearchBar.addClass('weui_search_focusing'); | ||
| }, | ||
| blur:function(){ | ||
| var $weuiSearchBar = $('#search_bar'); | ||
| $weuiSearchBar.removeClass('weui_search_focusing'); | ||
| if($(this).val()){ | ||
| $('#search_text').hide(); | ||
| }else{ | ||
| $('#search_text').show(); | ||
| } | ||
| }, | ||
| input:function(){ | ||
| var $searchShow = $("#search_show"); | ||
| if($(this).val()){ | ||
| $searchShow.show(); | ||
| }else{ | ||
| $searchShow.hide(); | ||
| } | ||
| url: '/searchbar', | ||
| className: 'searchbar', | ||
| render: function () { | ||
| return $('#tpl_searchbar').html(); | ||
| }, | ||
| bind: function () { | ||
| $('#container').on('focus', '#search_input', function () { | ||
| var $weuiSearchBar = $('#search_bar'); | ||
| $weuiSearchBar.addClass('weui_search_focusing'); | ||
| }).on('blur', '#search_input', function () { | ||
| var $weuiSearchBar = $('#search_bar'); | ||
| $weuiSearchBar.removeClass('weui_search_focusing'); | ||
| if ($(this).val()) { | ||
| $('#search_text').hide(); | ||
| } else { | ||
| $('#search_text').show(); | ||
| } | ||
| }, | ||
| "#search_cancel":{ | ||
| touchend:function(){ | ||
| $("#search_show").hide(); | ||
| $('#search_input').val(''); | ||
| }).on('input', '#search_input', function () { | ||
| var $searchShow = $("#search_show"); | ||
| if ($(this).val()) { | ||
| $searchShow.show(); | ||
| } else { | ||
| $searchShow.hide(); | ||
| } | ||
| }, | ||
| "#search_clear":{ | ||
| touchend:function(){ | ||
| $("#search_show").hide(); | ||
| $('#search_input').val(''); | ||
| } | ||
| } | ||
| }).on('touchend', '#search_cancel', function () { | ||
| $("#search_show").hide(); | ||
| $('#search_input').val(''); | ||
| }).on('touchend', '#search_clear', function () { | ||
| $("#search_show").hide(); | ||
| $('#search_input').val(''); | ||
| }); | ||
| } | ||
| }; | ||
| var icons = { | ||
| name: 'icons', | ||
| url: '#icons', | ||
| template: '#tpl_icons', | ||
| events: {} | ||
| }; | ||
| pageManager.push(home) | ||
| router.push(home) | ||
| .push(button) | ||
@@ -397,11 +248,28 @@ .push(cell) | ||
| .push(article) | ||
| .push(actionsheet) | ||
| .push(icons) | ||
| .push(panel) | ||
| .push(tab) | ||
| .push(navbar) | ||
| .push(tabbar) | ||
| .push(panel) | ||
| .push(actionSheet) | ||
| .push(icons) | ||
| .push(searchbar) | ||
| .setDefault('home') | ||
| .setDefault('/') | ||
| .init(); | ||
| // .container 设置了 overflow 属性, 导致 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug | ||
| // 相关 issue: https://github.com/weui/weui/issues/15 | ||
| // 解决方法: | ||
| // 0. .container 去掉 overflow 属性, 但此 demo 下会引发别的问题 | ||
| // 1. 参考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element | ||
| // Android 手机下, input 或 textarea 元素聚焦时, 主动滚一把 | ||
| if (/Android/gi.test(navigator.userAgent)) { | ||
| window.addEventListener('resize', function () { | ||
| if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') { | ||
| window.setTimeout(function () { | ||
| document.activeElement.scrollIntoViewIfNeeded(); | ||
| }, 0); | ||
| } | ||
| }) | ||
| } | ||
| }); |
@@ -39,3 +39,5 @@ | ||
| .pipe(browserSync.reload({stream: true})) | ||
| .pipe(nano()) | ||
| .pipe(nano({ | ||
| zindex: false | ||
| })) | ||
| .pipe(rename(function (path) { | ||
@@ -60,3 +62,5 @@ path.basename += '.min'; | ||
| .pipe(postcss([autoprefixer])) | ||
| .pipe(nano()) | ||
| .pipe(nano({ | ||
| zindex: false | ||
| })) | ||
| .pipe(gulp.dest(dist)) | ||
@@ -63,0 +67,0 @@ .pipe(browserSync.reload({stream: true})); |
| { | ||
| "name": "weui", | ||
| "version": "0.4.0", | ||
| "version": "0.4.1", | ||
| "description": "A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
@@ -1,2 +0,2 @@ | ||
| WeUI 为微信 Web 服务量身设计  | ||
| WeUI 为微信 Web 服务量身设计 [](https://travis-ci.org/weui/weui) | ||
| ==== | ||
@@ -8,2 +8,6 @@ | ||
| ## 视觉标准 | ||
| [WeUI-Sketch](https://github.com/weui/weui-sketch) | ||
| ## 使用 | ||
@@ -71,2 +75,3 @@ | ||
| - [i5ting/weui-practice](https://github.com/i5ting/weui-practice) | ||
| - [airyland/vux](https://github.com/airyland/vux) | ||
@@ -73,0 +78,0 @@ ## 文档 |
@@ -1,390 +0,241 @@ | ||
| /** | ||
| * Created by jf on 2015/9/11. | ||
| */ | ||
| $(function () { | ||
| var pageManager = { | ||
| $container: $('.js_container'), | ||
| _pageStack: [], | ||
| _configs: [], | ||
| _defaultPage: null, | ||
| _pageIndex: 1, | ||
| setDefault: function (defaultPage) { | ||
| this._defaultPage = this._find('name', defaultPage); | ||
| return this; | ||
| }, | ||
| init: function () { | ||
| var self = this; | ||
| var router = new Router({ | ||
| container: '#container', | ||
| enterTimeout: 250, | ||
| leaveTimeout: 250 | ||
| }); | ||
| $(window).on('hashchange', function () { | ||
| var state = history.state || {}; | ||
| var url = location.hash.indexOf('#') === 0 ? location.hash : '#'; | ||
| var page = self._find('url', url) || self._defaultPage; | ||
| if (state._pageIndex <= self._pageIndex || self._findInStack(url)) { | ||
| self._back(page); | ||
| } else { | ||
| self._go(page); | ||
| } | ||
| }); | ||
| // grid | ||
| var home = { | ||
| url: '/', | ||
| className: 'home', | ||
| render: function () { | ||
| return $('#tpl_home').html(); | ||
| } | ||
| }; | ||
| if (history.state && history.state._pageIndex) { | ||
| this._pageIndex = history.state._pageIndex; | ||
| } | ||
| // button | ||
| var button = { | ||
| url: '/button', | ||
| className: 'button', | ||
| render: function () { | ||
| return $('#tpl_button').html(); | ||
| } | ||
| }; | ||
| this._pageIndex--; | ||
| // cell | ||
| var cell = { | ||
| url: '/cell', | ||
| className: 'cell', | ||
| render: function () { | ||
| return $('#tpl_cell').html(); | ||
| } | ||
| }; | ||
| var url = location.hash.indexOf('#') === 0 ? location.hash : '#'; | ||
| var page = self._find('url', url) || self._defaultPage; | ||
| this._go(page); | ||
| return this; | ||
| // toast | ||
| var toast = { | ||
| url: '/toast', | ||
| className: 'toast', | ||
| render: function () { | ||
| return $('#tpl_toast').html(); | ||
| }, | ||
| push: function (config) { | ||
| this._configs.push(config); | ||
| return this; | ||
| bind: function () { | ||
| $('#container').on('click', '#showToast', function () { | ||
| $('#toast').show(); | ||
| setTimeout(function () { | ||
| $('#toast').hide(); | ||
| }, 2000); | ||
| }).on('click', '#showLoadingToast', function () { | ||
| $('#loadingToast').show(); | ||
| setTimeout(function () { | ||
| $('#loadingToast').hide(); | ||
| }, 2000); | ||
| }); | ||
| } | ||
| }; | ||
| // dialog | ||
| var dialog = { | ||
| url: '/dialog', | ||
| className: 'dialog', | ||
| render: function () { | ||
| return $('#tpl_dialog').html(); | ||
| }, | ||
| go: function (to) { | ||
| var config = this._find('name', to); | ||
| if (!config) { | ||
| return; | ||
| } | ||
| location.hash = config.url; | ||
| }, | ||
| _go: function (config) { | ||
| this._pageIndex ++; | ||
| history.replaceState && history.replaceState({_pageIndex: this._pageIndex}, '', location.href); | ||
| var html = $(config.template).html(); | ||
| var $html = $(html).addClass('slideIn').addClass(config.name); | ||
| this.$container.append($html); | ||
| this._pageStack.push({ | ||
| config: config, | ||
| dom: $html | ||
| bind: function () { | ||
| $('#container').on('click', '#showDialog1', function () { | ||
| $('#dialog1').show().on('click', '.weui_btn_dialog', function () { | ||
| $('#dialog1').off('click').hide(); | ||
| }); | ||
| }).on('click', '#showDialog2', function () { | ||
| $('#dialog2').show().on('click', '.weui_btn_dialog', function () { | ||
| $('#dialog2').off('click').hide(); | ||
| }); | ||
| }); | ||
| if (!config.isBind) { | ||
| this._bind(config); | ||
| } | ||
| } | ||
| }; | ||
| return this; | ||
| // progress | ||
| var progress = { | ||
| url: '/progress', | ||
| className: 'progress', | ||
| render: function () { | ||
| return $('#tpl_progress').html(); | ||
| }, | ||
| back: function () { | ||
| history.back(); | ||
| }, | ||
| _back: function (config) { | ||
| this._pageIndex --; | ||
| bind: function () { | ||
| $('#container').on('click', '#btnStartProgress', function () { | ||
| if ($(this).hasClass('weui_btn_disabled')) { | ||
| return; | ||
| } | ||
| var stack = this._pageStack.pop(); | ||
| if (!stack) { | ||
| return; | ||
| } | ||
| $(this).addClass('weui_btn_disabled'); | ||
| var url = location.hash.indexOf('#') === 0 ? location.hash : '#'; | ||
| var found = this._findInStack(url); | ||
| if (!found) { | ||
| var html = $(config.template).html(); | ||
| var $html = $(html).css('opacity', 1).addClass(config.name); | ||
| $html.insertBefore(stack.dom); | ||
| var progress = 0; | ||
| var $progress = $('.js_progress'); | ||
| if (!config.isBind) { | ||
| this._bind(config); | ||
| function next() { | ||
| $progress.css({width: progress + '%'}); | ||
| progress = ++progress % 100; | ||
| setTimeout(next, 30); | ||
| } | ||
| this._pageStack.push({ | ||
| config: config, | ||
| dom: $html | ||
| }); | ||
| } | ||
| stack.dom.addClass('slideOut').on('animationend', function () { | ||
| stack.dom.remove(); | ||
| }).on('webkitAnimationEnd', function () { | ||
| stack.dom.remove(); | ||
| next(); | ||
| }); | ||
| return this; | ||
| }, | ||
| _findInStack: function (url) { | ||
| var found = null; | ||
| for(var i = 0, len = this._pageStack.length; i < len; i++){ | ||
| var stack = this._pageStack[i]; | ||
| if (stack.config.url === url) { | ||
| found = stack; | ||
| break; | ||
| } | ||
| } | ||
| return found; | ||
| }, | ||
| _find: function (key, value) { | ||
| var page = null; | ||
| for (var i = 0, len = this._configs.length; i < len; i++) { | ||
| if (this._configs[i][key] === value) { | ||
| page = this._configs[i]; | ||
| break; | ||
| } | ||
| } | ||
| return page; | ||
| }, | ||
| _bind: function (page) { | ||
| var events = page.events || {}; | ||
| for (var t in events) { | ||
| for (var type in events[t]) { | ||
| this.$container.on(type, t, events[t][type]); | ||
| } | ||
| } | ||
| page.isBind = true; | ||
| } | ||
| }; | ||
| var home = { | ||
| name: 'home', | ||
| url: '#', | ||
| template: '#tpl_home', | ||
| events: { | ||
| '.js_grid': { | ||
| click: function (e) { | ||
| var id = $(this).data('id'); | ||
| pageManager.go(id); | ||
| } | ||
| } | ||
| // msg | ||
| var msg = { | ||
| url: '/msg', | ||
| className: 'msg', | ||
| render: function () { | ||
| return $('#tpl_msg').html(); | ||
| } | ||
| }; | ||
| var panel = { | ||
| name: 'panel', | ||
| url: '#panel', | ||
| template: '#tpl_panel' | ||
| }; | ||
| var button = { | ||
| name: 'button', | ||
| url: '#button', | ||
| template: '#tpl_button' | ||
| }; | ||
| var cell = { | ||
| name: 'cell', | ||
| url: '#cell', | ||
| template: '#tpl_cell', | ||
| events: { | ||
| '#showTooltips': { | ||
| click: function () { | ||
| var $tooltips = $('.js_tooltips'); | ||
| if ($tooltips.css('display') != 'none') { | ||
| return; | ||
| } | ||
| // 如果有`animation`, `position: fixed`不生效 | ||
| $('.page.cell').removeClass('slideIn'); | ||
| $tooltips.show(); | ||
| setTimeout(function () { | ||
| $tooltips.hide(); | ||
| }, 2000); | ||
| } | ||
| } | ||
| // article | ||
| var article = { | ||
| url: '/article', | ||
| className: 'article', | ||
| render: function () { | ||
| return $('#tpl_article').html(); | ||
| } | ||
| }; | ||
| var toast = { | ||
| name: 'toast', | ||
| url: '#toast', | ||
| template: '#tpl_toast', | ||
| events: { | ||
| '#showToast': { | ||
| click: function (e) { | ||
| var $toast = $('#toast'); | ||
| if ($toast.css('display') != 'none') { | ||
| return; | ||
| } | ||
| $toast.show(); | ||
| setTimeout(function () { | ||
| $toast.hide(); | ||
| }, 2000); | ||
| } | ||
| }, | ||
| '#showLoadingToast': { | ||
| click: function (e) { | ||
| var $loadingToast = $('#loadingToast'); | ||
| if ($loadingToast.css('display') != 'none') { | ||
| return; | ||
| } | ||
| // actionsheet | ||
| var actionsheet = { | ||
| url: '/actionsheet', | ||
| className: 'actionsheet', | ||
| render: function () { | ||
| return $('#tpl_actionsheet').html(); | ||
| }, | ||
| bind: function () { | ||
| $('#container').on('click', '#showActionSheet', function () { | ||
| var mask = $('#mask'); | ||
| var weuiActionsheet = $('#weui_actionsheet'); | ||
| weuiActionsheet.addClass('weui_actionsheet_toggle'); | ||
| mask.show().addClass('weui_fade_toggle').one('click', function () { | ||
| hideActionSheet(weuiActionsheet, mask); | ||
| }); | ||
| $('#actionsheet_cancel').one('click', function () { | ||
| hideActionSheet(weuiActionsheet, mask); | ||
| }); | ||
| weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd'); | ||
| $loadingToast.show(); | ||
| setTimeout(function () { | ||
| $loadingToast.hide(); | ||
| }, 2000); | ||
| 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(); | ||
| }) | ||
| } | ||
| } | ||
| }); | ||
| } | ||
| }; | ||
| var dialog = { | ||
| name: 'dialog', | ||
| url: '#dialog', | ||
| template: '#tpl_dialog', | ||
| events: { | ||
| '#showDialog1': { | ||
| click: function (e) { | ||
| var $dialog = $('#dialog1'); | ||
| $dialog.show(); | ||
| $dialog.find('.weui_btn_dialog').one('click', function () { | ||
| $dialog.hide(); | ||
| }); | ||
| } | ||
| }, | ||
| '#showDialog2': { | ||
| click: function (e) { | ||
| var $dialog = $('#dialog2'); | ||
| $dialog.show(); | ||
| $dialog.find('.weui_btn_dialog').one('click', function () { | ||
| $dialog.hide(); | ||
| }); | ||
| } | ||
| } | ||
| // icons | ||
| var icons = { | ||
| url: '/icons', | ||
| className: 'icons', | ||
| render: function () { | ||
| return $('#tpl_icons').html(); | ||
| } | ||
| }; | ||
| var progress = { | ||
| name: 'progress', | ||
| url: '#progress', | ||
| template: '#tpl_progress', | ||
| events: { | ||
| '#btnStartProgress': { | ||
| click: function () { | ||
| if ($(this).hasClass('weui_btn_disabled')) { | ||
| return; | ||
| } | ||
| $(this).addClass('weui_btn_disabled'); | ||
| var progress = 0; | ||
| var $progress = $('.js_progress'); | ||
| function next() { | ||
| $progress.css({width: progress + '%'}); | ||
| progress = ++progress % 100; | ||
| setTimeout(next, 30); | ||
| } | ||
| next(); | ||
| } | ||
| } | ||
| // panel | ||
| var panel = { | ||
| url: '/panel', | ||
| className: 'panel', | ||
| render: function () { | ||
| return $('#tpl_panel').html(); | ||
| } | ||
| }; | ||
| var msg = { | ||
| name: 'msg', | ||
| url: '#msg', | ||
| template: '#tpl_msg', | ||
| events: {} | ||
| }; | ||
| var article = { | ||
| name: 'article', | ||
| url: '#article', | ||
| template: '#tpl_article', | ||
| events: {} | ||
| }; | ||
| // tab | ||
| var tab = { | ||
| name: 'tab', | ||
| url: '#tab', | ||
| template: '#tpl_tab', | ||
| events: { | ||
| '.js_tab': { | ||
| click: function (){ | ||
| var id = $(this).data('id'); | ||
| pageManager.go(id); | ||
| } | ||
| } | ||
| url: '/tab', | ||
| className: 'tab', | ||
| render: function () { | ||
| return $('#tpl_tab').html(); | ||
| } | ||
| }; | ||
| // navbar | ||
| var navbar = { | ||
| name: 'navbar', | ||
| url: '#navbar', | ||
| template: '#tpl_navbar', | ||
| events: {} | ||
| url: '/navbar', | ||
| className: 'navbar', | ||
| render: function () { | ||
| return $('#tpl_navbar').html(); | ||
| } | ||
| }; | ||
| // tabbar | ||
| var tabbar = { | ||
| name: 'tabbar', | ||
| url: '#tabbar', | ||
| template: '#tpl_tabbar', | ||
| events: {} | ||
| url: '/tabbar', | ||
| className: 'tabbar', | ||
| render: function () { | ||
| return $('#tpl_tabbar').html(); | ||
| } | ||
| }; | ||
| var actionSheet = { | ||
| name: 'actionsheet', | ||
| url: '#actionsheet', | ||
| template: '#tpl_actionsheet', | ||
| events: { | ||
| '#showActionSheet': { | ||
| click: function () { | ||
| var mask = $('#mask'); | ||
| var weuiActionsheet = $('#weui_actionsheet'); | ||
| weuiActionsheet.addClass('weui_actionsheet_toggle'); | ||
| mask.show().addClass('weui_fade_toggle').one('click', function () { | ||
| hideActionSheet(weuiActionsheet, mask); | ||
| }); | ||
| $('#actionsheet_cancel').one('click', function () { | ||
| hideActionSheet(weuiActionsheet, mask); | ||
| }); | ||
| weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd'); | ||
| 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(); | ||
| }) | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| // searchbar | ||
| var searchbar = { | ||
| name:"searchbar", | ||
| url:"#searchbar", | ||
| template: '#tpl_searchbar', | ||
| events:{ | ||
| '#search_input':{ | ||
| focus:function(){ | ||
| //searchBar | ||
| var $weuiSearchBar = $('#search_bar'); | ||
| $weuiSearchBar.addClass('weui_search_focusing'); | ||
| }, | ||
| blur:function(){ | ||
| var $weuiSearchBar = $('#search_bar'); | ||
| $weuiSearchBar.removeClass('weui_search_focusing'); | ||
| if($(this).val()){ | ||
| $('#search_text').hide(); | ||
| }else{ | ||
| $('#search_text').show(); | ||
| } | ||
| }, | ||
| input:function(){ | ||
| var $searchShow = $("#search_show"); | ||
| if($(this).val()){ | ||
| $searchShow.show(); | ||
| }else{ | ||
| $searchShow.hide(); | ||
| } | ||
| url: '/searchbar', | ||
| className: 'searchbar', | ||
| render: function () { | ||
| return $('#tpl_searchbar').html(); | ||
| }, | ||
| bind: function () { | ||
| $('#container').on('focus', '#search_input', function () { | ||
| var $weuiSearchBar = $('#search_bar'); | ||
| $weuiSearchBar.addClass('weui_search_focusing'); | ||
| }).on('blur', '#search_input', function () { | ||
| var $weuiSearchBar = $('#search_bar'); | ||
| $weuiSearchBar.removeClass('weui_search_focusing'); | ||
| if ($(this).val()) { | ||
| $('#search_text').hide(); | ||
| } else { | ||
| $('#search_text').show(); | ||
| } | ||
| }, | ||
| "#search_cancel":{ | ||
| touchend:function(){ | ||
| $("#search_show").hide(); | ||
| $('#search_input').val(''); | ||
| }).on('input', '#search_input', function () { | ||
| var $searchShow = $("#search_show"); | ||
| if ($(this).val()) { | ||
| $searchShow.show(); | ||
| } else { | ||
| $searchShow.hide(); | ||
| } | ||
| }, | ||
| "#search_clear":{ | ||
| touchend:function(){ | ||
| $("#search_show").hide(); | ||
| $('#search_input').val(''); | ||
| } | ||
| } | ||
| }).on('touchend', '#search_cancel', function () { | ||
| $("#search_show").hide(); | ||
| $('#search_input').val(''); | ||
| }).on('touchend', '#search_clear', function () { | ||
| $("#search_show").hide(); | ||
| $('#search_input').val(''); | ||
| }); | ||
| } | ||
| }; | ||
| var icons = { | ||
| name: 'icons', | ||
| url: '#icons', | ||
| template: '#tpl_icons', | ||
| events: {} | ||
| }; | ||
| pageManager.push(home) | ||
| router.push(home) | ||
| .push(button) | ||
@@ -397,11 +248,28 @@ .push(cell) | ||
| .push(article) | ||
| .push(actionsheet) | ||
| .push(icons) | ||
| .push(panel) | ||
| .push(tab) | ||
| .push(navbar) | ||
| .push(tabbar) | ||
| .push(panel) | ||
| .push(actionSheet) | ||
| .push(icons) | ||
| .push(searchbar) | ||
| .setDefault('home') | ||
| .setDefault('/') | ||
| .init(); | ||
| // .container 设置了 overflow 属性, 导致 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug | ||
| // 相关 issue: https://github.com/weui/weui/issues/15 | ||
| // 解决方法: | ||
| // 0. .container 去掉 overflow 属性, 但此 demo 下会引发别的问题 | ||
| // 1. 参考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element | ||
| // Android 手机下, input 或 textarea 元素聚焦时, 主动滚一把 | ||
| if (/Android/gi.test(navigator.userAgent)) { | ||
| window.addEventListener('resize', function () { | ||
| if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') { | ||
| window.setTimeout(function () { | ||
| document.activeElement.scrollIntoViewIfNeeded(); | ||
| }, 0); | ||
| } | ||
| }) | ||
| } | ||
| }); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by6.1%
87
Worsened metrics
- Total package byte prevSize
- decreased by-0.34%
2100970
- Number of package files
- decreased by-0.72%
138
- Lines of code
- decreased by-7.22%
3236
No dependency changes