├── LICENSE ├── README.md ├── alert-view ├── README.md ├── dist │ └── index.min.js ├── example │ ├── _index.html │ ├── css │ │ └── index.css │ └── js │ │ ├── index.js │ │ └── index.min.js ├── legoflow.json ├── package.json ├── shell.js └── src │ ├── _index.html │ ├── css │ └── index.css │ ├── js │ ├── export │ │ ├── alert-view.js │ │ ├── module │ │ │ └── util.js │ │ └── style │ │ │ └── index.scss │ └── index.js │ └── sass │ ├── _img.scss │ ├── base │ ├── _base.scss │ ├── _flexible.scss │ ├── _normalize.scss │ ├── _orientation.scss │ └── _tool.scss │ └── index.scss ├── anti-hijack ├── README.md ├── dist │ └── index.min.js ├── example │ ├── assets │ │ └── index.min.js │ ├── css │ │ └── index.css │ ├── index.html │ └── js │ │ ├── index.js │ │ └── index.min.js ├── legoflow.json ├── package.json ├── shell.js └── src │ ├── assets │ └── index.min.js │ ├── css │ └── index.css │ ├── index.html │ ├── js │ ├── export │ │ ├── anti-hijack.js │ │ └── module │ │ │ ├── black-list.js │ │ │ ├── report.js │ │ │ ├── util.js │ │ │ ├── white-list.js │ │ │ └── white-list.yy.js │ └── index.js │ └── sass │ ├── _img.scss │ ├── base │ ├── _base.scss │ ├── _flexible.scss │ ├── _normalize.scss │ ├── _orientation.scss │ └── _tool.scss │ └── index.scss ├── app-call ├── README.md ├── dist │ └── index.min.js ├── example │ ├── _index.html │ ├── css │ │ └── index.css │ └── js │ │ ├── index.js │ │ └── index.min.js ├── legoflow.json ├── package.json ├── shell.js └── src │ ├── _index.html │ ├── css │ └── index.css │ ├── js │ ├── export │ │ ├── app-call.js │ │ ├── img │ │ │ ├── share-tips.png │ │ │ └── swipe-down.png │ │ ├── module │ │ │ ├── delegate.js │ │ │ └── util.js │ │ └── style.scss │ └── index.js │ └── sass │ ├── _img.scss │ ├── base │ ├── _base.scss │ ├── _flexible.scss │ ├── _normalize.scss │ ├── _orientation.scss │ └── _tool.scss │ └── index.scss ├── image-loader ├── README.md ├── dist │ └── index.min.js ├── example │ ├── _index.html │ ├── css │ │ └── index.css │ └── js │ │ ├── index.js │ │ └── index.min.js ├── legoflow.json ├── package.json ├── shell.js └── src │ ├── _index.html │ ├── css │ └── index.css │ ├── js │ ├── export │ │ └── image-loader.js │ ├── index.js │ └── legolib │ └── sass │ ├── _img.scss │ ├── base │ ├── _base.scss │ ├── _mixins.scss │ ├── _normalize.scss │ ├── _print.scss │ ├── _reset.scss │ ├── _utility.scss │ └── _variable.scss │ └── index.scss ├── lego-storage ├── README.md ├── dist │ └── index.min.js ├── example │ ├── _index.html │ ├── assets │ │ └── read-file.html │ ├── css │ │ └── main.css │ └── js │ │ ├── index.js │ │ ├── index.min.js │ │ ├── test-1.js │ │ └── test-2.js ├── legoflow.json ├── package.json ├── shell.js └── src │ ├── _index.html │ ├── assets │ └── read-file.html │ ├── css │ └── main.css │ ├── js │ ├── export │ │ └── legoStorage.js │ ├── index.js │ ├── test-1.js │ └── test-2.js │ └── sass │ ├── _img.scss │ ├── base │ ├── _base.scss │ ├── _flexible.scss │ ├── _normalize.scss │ ├── _orientation.scss │ ├── _reset.scss │ └── _tool.scss │ └── main.scss ├── loading-controller ├── README.md ├── dist │ └── index.min.js ├── example │ ├── _index.html │ ├── css │ │ └── index.css │ ├── img │ │ └── loading.gif │ └── js │ │ ├── index.js │ │ └── index.min.js ├── legoflow.json ├── package.json ├── shell.js └── src │ ├── _index.html │ ├── css │ └── index.css │ ├── img │ └── loading.gif │ ├── js │ ├── export │ │ ├── img │ │ │ └── loading.png │ │ ├── loading-controller.js │ │ ├── style │ │ │ └── loading.scss │ │ └── tpl │ │ │ ├── body.tpl │ │ │ └── body.tpl.js │ └── index.js │ └── sass │ ├── _img.scss │ ├── base │ ├── _base.scss │ ├── _mixins.scss │ ├── _normalize.scss │ ├── _print.scss │ ├── _reset.scss │ ├── _utility.scss │ └── _variable.scss │ └── index.scss ├── page-slider ├── README.md ├── dist │ └── index.min.js ├── example │ ├── _index.html │ ├── css │ │ └── index.css │ └── js │ │ ├── index.js │ │ └── index.min.js ├── legoflow.json ├── package.json ├── shell.js └── src │ ├── _index.html │ ├── css │ └── index.css │ ├── js │ ├── export │ │ └── page-slider.js │ └── index.js │ └── sass │ ├── _img.scss │ ├── base │ ├── _base.scss │ ├── _flexible.scss │ ├── _normalize.scss │ ├── _orientation.scss │ └── _tool.scss │ └── index.scss ├── smart-viewport ├── README.md ├── dist │ ├── _index.html │ ├── assets │ │ ├── smart-viewport.js │ │ └── smart-viewport.min.js │ ├── css │ │ └── main.css │ ├── index.js │ └── index.min.js ├── legoflow.json ├── package.json └── src │ ├── _index.html │ ├── assets │ ├── smart-viewport.js │ └── smart-viewport.min.js │ ├── css │ └── main.css │ ├── js │ └── main.js │ └── sass │ ├── _img.scss │ ├── base │ ├── _base.scss │ ├── _flexible.scss │ ├── _normalize.scss │ ├── _orientation.scss │ ├── _reset.scss │ └── _tool.scss │ └── main.scss ├── tab-view-swiper ├── README.md ├── dist │ └── index.min.js ├── example │ ├── _index.html │ ├── css │ │ └── main.css │ ├── js │ │ ├── index.min.js │ │ └── main.js │ └── test.html ├── legoflow.json ├── package.json ├── shell.js └── src │ ├── _index.html │ ├── css │ └── main.css │ ├── js │ ├── export │ │ ├── img │ │ │ └── base64 │ │ │ │ └── icon-more.png │ │ ├── lego-tabView.js │ │ ├── module │ │ │ ├── animate.js │ │ │ ├── swiper.min.js │ │ │ └── util.js │ │ ├── style │ │ │ ├── _images.scss │ │ │ ├── _swiper.scss │ │ │ └── index.scss │ │ └── tpl │ │ │ ├── nav.tpl │ │ │ └── nav.tpl.js │ ├── fastclick │ │ └── 1.0.6 │ │ │ └── fastclick.js │ └── main.js │ ├── sass │ ├── _img.scss │ ├── base │ │ ├── _base.scss │ │ ├── _flexible.scss │ │ ├── _normalize.scss │ │ ├── _orientation.scss │ │ ├── _reset.scss │ │ └── _tool.scss │ └── main.scss │ └── test.html ├── tab-view ├── README.md ├── dist │ └── index.min.js ├── example │ ├── _index.html │ ├── css │ │ └── main.css │ └── js │ │ ├── index.min.js │ │ └── main.js ├── legoflow.json ├── package.json ├── shell.js └── src │ ├── _index.html │ ├── css │ └── main.css │ ├── js │ ├── export │ │ ├── img │ │ │ └── base64 │ │ │ │ └── icon-more.png │ │ ├── module │ │ │ ├── animate.js │ │ │ └── util.js │ │ ├── style │ │ │ ├── _images.scss │ │ │ └── index.scss │ │ ├── tab-view.js │ │ └── tpl │ │ │ ├── nav.tpl │ │ │ └── nav.tpl.js │ ├── fastclick │ │ └── 1.0.6 │ │ │ └── fastclick.js │ └── main.js │ └── sass │ ├── _img.scss │ ├── base │ ├── _base.scss │ ├── _flexible.scss │ ├── _normalize.scss │ ├── _orientation.scss │ ├── _reset.scss │ └── _tool.scss │ └── main.scss ├── toast ├── README.md ├── dist │ └── index.min.js ├── example │ ├── _index.html │ ├── css │ │ └── index.css │ └── js │ │ ├── index.js │ │ └── index.min.js ├── legoflow.json ├── package.json ├── shell.js └── src │ ├── _index.html │ ├── css │ └── index.css │ ├── js │ ├── export │ │ ├── style.scss │ │ └── toast.js │ └── index.js │ └── sass │ ├── _img.scss │ ├── base │ ├── _base.scss │ ├── _flexible.scss │ ├── _normalize.scss │ ├── _orientation.scss │ └── _tool.scss │ └── index.scss ├── util ├── README.md ├── dist │ └── lego-util.min.js ├── examples │ ├── _index.html │ └── js │ │ ├── index.js │ │ └── lego-util.min.js ├── legoflow.json ├── package.json └── src │ ├── _index.html │ └── js │ ├── export │ ├── module │ │ ├── debounce.js │ │ ├── get-absolute-url.js │ │ ├── get-appVersion.js │ │ ├── get-ie-version.js │ │ ├── get-type.js │ │ ├── get-url-param.js │ │ ├── get-userAgent.js │ │ ├── get-vendor.js │ │ ├── is-android-phone.js │ │ ├── is-android-tablet.js │ │ ├── is-android.js │ │ ├── is-blackberry.js │ │ ├── is-chrome.js │ │ ├── is-desktop.js │ │ ├── is-edge.js │ │ ├── is-empty-object.js │ │ ├── is-event-support.js │ │ ├── is-iOS.js │ │ ├── is-iPad.js │ │ ├── is-iPhone.js │ │ ├── is-iPod.js │ │ ├── is-ie.js │ │ ├── is-linux.js │ │ ├── is-mac.js │ │ ├── is-mobile.js │ │ ├── is-safari.js │ │ ├── is-tablet.js │ │ ├── is-touch-device.js │ │ ├── is-wechat-browser.js │ │ ├── is-windows-phone.js │ │ ├── is-windows-tablet.js │ │ ├── is-windows.js │ │ └── throttle.js │ └── util.js │ └── index.js ├── waiting ├── README.md ├── dist │ └── index.min.js ├── example │ ├── _index.html │ ├── css │ │ └── index.css │ └── js │ │ ├── index.js │ │ └── index.min.js ├── legoflow.json ├── package.json ├── shell.js └── src │ ├── _index.html │ ├── css │ └── index.css │ ├── js │ ├── export │ │ ├── style.scss │ │ ├── tpl │ │ │ ├── index.tpl │ │ │ └── index.tpl.js │ │ └── waiting.js │ └── index.js │ └── sass │ ├── _img.scss │ ├── base │ ├── _base.scss │ ├── _flexible.scss │ ├── _normalize.scss │ ├── _orientation.scss │ └── _tool.scss │ └── index.scss └── wechat-share ├── README.md ├── dist └── index.min.js ├── example ├── _index.html ├── css │ └── main.css └── js │ ├── index.js │ └── index.min.js ├── legoflow.json ├── package.json ├── shell.js └── src ├── _index.html ├── css └── main.css ├── js ├── export │ ├── module │ │ └── util.js │ └── wechat-share.js └── index.js └── sass ├── _img.scss ├── base ├── _base.scss ├── _flexible.scss ├── _normalize.scss ├── _orientation.scss ├── _reset.scss └── _tool.scss └── main.scss /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 YY UED 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # legolib 2 | 3 | ## 说明 4 | 5 | 面向移动端的轻量级前端 Components，提供易用、可靠的解决方案。 6 | 已集成到LegoFlow，只需要在编辑项目里面勾选使用logolib就会在`src/js`文件夹下显示legolib组件 7 | 8 | * 支持 CMD/AMD/CommonJS 规范，同时支持 `script` 外链引入使用； 9 | * 移动优先； 10 | 11 | 12 | ## 组件列表 13 | 14 | |组件名|说明| 15 | |----|----| 16 | |app-call|Web页面唤起 APP| 17 | |anti-hijack|防 HTTP 劫持| 18 | |wechat-share|微信分享 JSSDK 封装| 19 | |tab-view|移动端tabView导航栏| 20 | |tab-view-swiper|移动端 TabView 导航栏，支持 swiper 滑动| 21 | |image-loader|轻巧的图片预加载| 22 | |loading-controller|更快更好用的 loading| 23 | |page-slider|页面滚动控制器| 24 | |alert-view|模态弹窗| 25 | |toast|toast提示| 26 | |waiting|等待提示| 27 | |util|常用工具集| 28 | |smart-viewport|[智能 viewport](https://github.com/yyued/legolib/tree/master/smart-viewport)| 29 | 30 | 31 | -------------------------------------------------------------------------------- /alert-view/README.md: -------------------------------------------------------------------------------- 1 | # alert-view 2 | 3 | ## 说明 4 | 模拟ios原生confirm和alert 5 | * 支持**外链**或者**ADM/CMD/commonJS**等多种形式； 6 | * 本组件使用 [legoFlow](https://legoflow.com/) 进行开发构建； 7 | * 本组件无第三方插件依赖； 8 | 9 | ## DEMO 10 | 11 | ![qrcode](https://user-images.githubusercontent.com/1295348/33514811-1f657a96-d795-11e7-8bbc-649afe698dbe.jpg) 12 | 13 | 14 | ## 使用 15 | 16 | ### 模块引入方式 17 | 18 | ```javascript 19 | import AlertView from 'legolib/alert-view/index.js'; 20 | 21 | var modal = new AlertView(); 22 | 23 | // alert modal 24 | modal.alert({ 25 | title: '', 26 | text: '', 27 | confirm: function() { 28 | } 29 | }); 30 | 31 | // confirm modal 32 | modal.confirm({ 33 | title: '', 34 | text: '', 35 | confirm: function() { 36 | }, 37 | cancel: function() { 38 | } 39 | }); 40 | ``` 41 | 42 | ### 外链引入方式 43 | 44 | 全局实例：`LegoAlertView` 45 | 46 | ```html 47 | 48 | 49 | var modal = new LegoAlertView(); 50 | ``` 51 | 52 | 53 | 54 | ## API 55 | ### 参数 56 | | 参数 | 类型 | 默认值 | 必填 | 说明 | 57 | | ------------- |------------- | ----- |-----|-----| 58 | | title | String | |否 |标题 | 59 | | text | String | |是 |文本| 60 | | extraClass | String | |否 |给lego-modal的根节点.lego-modal附加1或多个自定义class| 61 | | okButton | String | 确定 |是 |确定按钮的文案| 62 | | cancelButton | String | 取消 |是 |取消按钮的文案| 63 | | confirm | Function | |否 | 击确认的回调函数| 64 | | cancel | Function | |否 | 击取消的回调函数| 65 | -------------------------------------------------------------------------------- /alert-view/example/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | index 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /alert-view/legoflow.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.51", 3 | "type": "clean", 4 | "assets": "", 5 | "es6": true, 6 | "webp": false, 7 | "legolib": false, 8 | "https": false, 9 | "hot": false, 10 | "isUglifyJs": true, 11 | "isPackVueStyle": false, 12 | "vue@2.1": false, 13 | "watch": [], 14 | "publicPath": "", 15 | "packImgSize": "", 16 | "packCommon": "", 17 | "other": "", 18 | "dist": "", 19 | "output": "", 20 | "shell": "./shell.js", 21 | "alias": {}, 22 | "global": {}, 23 | "externals": {}, 24 | "proxy": {}, 25 | "ts": {}, 26 | "cache": "timestamp", 27 | "user.dev.args": {}, 28 | "user.build.args": {}, 29 | "env": {}, 30 | "build.move": [], 31 | "build.env": "", 32 | "build.zip": "", 33 | "img.folder": "", 34 | "html.folder": "", 35 | "js.folder": "", 36 | "export.folder": "" 37 | } 38 | -------------------------------------------------------------------------------- /alert-view/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lego-alertView", 3 | "version": "0.1.0", 4 | "repository": {}, 5 | "author": "UED.Vicky", 6 | "license": "MIT" 7 | } -------------------------------------------------------------------------------- /alert-view/shell.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | 5 | module.exports = ( param ) => { 6 | const { fs, del, folder, messager, args, gulp, shell } = param; 7 | 8 | const dist = path.resolve( folder, './dist' ); 9 | const example = path.resolve( folder, './example' ); 10 | 11 | fs.copySync( dist, example, { overwrite: true } ); 12 | 13 | del([ dist ], { force: true }, () => { 14 | gulp.src( `${ example }/js/*.min.js `) 15 | .pipe( gulp.dest( dist ) ) 16 | .on( 'end', ( ) => { 17 | messager.success(); 18 | }) 19 | }); 20 | } 21 | -------------------------------------------------------------------------------- /alert-view/src/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | index 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /alert-view/src/js/export/module/util.js: -------------------------------------------------------------------------------- 1 | let util = { 2 | // animationend的兼容 3 | animationEnd() { 4 | let body = document.body || document.documentElement; 5 | let style = body.style; 6 | let animEndEventNames = { 7 | WebkitAnimation : 'webkitAnimationEnd', 8 | animation : 'animationend' 9 | }; 10 | 11 | for (var name in animEndEventNames) { 12 | if (typeof style[name] === 'string') { 13 | return animEndEventNames[name]; 14 | } 15 | } 16 | } 17 | } 18 | 19 | module.exports = util; 20 | -------------------------------------------------------------------------------- /alert-view/src/js/index.js: -------------------------------------------------------------------------------- 1 | import LegoModal from './export/alert-view'; 2 | 3 | var modal = new LegoModal(); 4 | 5 | document.getElementById('confirm').addEventListener('click', function(){ 6 | modal.confirm({ 7 | title: '提示', 8 | text: '确认要彻底删除该记录？', 9 | okButton: '必须的', 10 | cancelButton: '再想想', 11 | confirm: function() { 12 | modal.alert({ 13 | title: '提示', 14 | text: '记录已删除！', 15 | confirm: function() { 16 | console.log('alert') 17 | } 18 | }); 19 | }, 20 | cancel: function() { 21 | console.log('cancel'); 22 | } 23 | }); 24 | }, false) 25 | 26 | document.getElementById('alert').addEventListener('click', function(){ 27 | modal.alert({ 28 | title: '提示', 29 | text: '网络异常，请重试！', 30 | // okButton: 'good', 31 | extraClass: 'ext-red', 32 | confirm: function() { 33 | console.log('alert') 34 | } 35 | }); 36 | }, false) 37 | -------------------------------------------------------------------------------- /alert-view/src/sass/_img.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyued/legolib/4c6a33b0f3c7d74ba2dafbd2e14a360693fdb1c7/alert-view/src/sass/_img.scss -------------------------------------------------------------------------------- /alert-view/src/sass/base/_base.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // 引入css 适配方案 4 | @import "flexible"; 5 | 6 | // 引入重置样式 7 | @import "normalize"; 8 | 9 | // 引入工具类 10 | @import "tool"; 11 | 12 | /* 全局设置 */ 13 | *, 14 | *:before, 15 | *:after{ 16 | font-family: "San Francisco", "Helvetica Neue", Helvetica, sans-serif; 17 | font-weight: 300; 18 | -webkit-box-sizing: border-box; 19 | -moz-box-sizing: border-box; 20 | box-sizing: border-box; 21 | -webkit-appearance: none; 22 | appearance: none; 23 | -webkit-tap-highlight-color: rgba(0,0,0,0); 24 | } 25 | 26 | /* 设置基本html,body样式 */ 27 | html,body{ 28 | margin: 0 auto; 29 | padding: 0; 30 | } 31 | 32 | /* 设置图片最大宽度 */ 33 | img{ 34 | max-width: 100%; 35 | } 36 | 37 | /* 清除默认按钮表现形式 */ 38 | button{ 39 | -webkit-appearance: none; 40 | appearance: none; 41 | } 42 | 43 | /* 设置表格默认样式 */ 44 | table { 45 | border-collapse: collapse; 46 | border-spacing: 0; 47 | } 48 | 49 | /* 文本域禁止拖拉放大 */ 50 | textarea { 51 | resize: none; 52 | } 53 | 54 | a { 55 | text-decoration: none; 56 | color: currentColor; 57 | } 58 | 59 | img { 60 | vertical-align: top; 61 | } 62 | 63 | i, em { 64 | font-style: normal; 65 | } 66 | 67 | ol, ul, li, menu { 68 | list-style: none outside none; 69 | } 70 | 71 | fieldset, iframe, abbr, acronym { 72 | border: 0 none; 73 | } 74 | 75 | dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, hr, 76 | article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 77 | margin: 0; 78 | padding: 0; 79 | } 80 | 81 | del { 82 | text-decoration:line-through; 83 | } 84 | -------------------------------------------------------------------------------- /alert-view/src/sass/base/_flexible.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Lego纯CSS自适应方案 4 | 5 | 1，设计稿尺寸 6 | 7 | 默认设计稿宽带 750px，可通过变量 $psd-size 进行修改 8 | 9 | 2，对应的 meta 标签写法： 10 | 11 | 12 | 3，px to rem 需要用到小学算术 13 | 14 | 100px = 1rem / 1px = 0.01rem 15 | 16 | Notes: 17 | 18 | 断点参考：http://screensiz.es/phone 19 | 20 | 横屏断点：384px, 480px, 533px, 568px, 640px, 667px, 699px, 736px 21 | 某些手机厂商系统的虚拟SmartBar会改变Screen的值，又是坑，建议统一横屏提示规避 22 | 23 | 避免使用 min-device-width 24 | https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=zh-cn#min-device-width- 25 | 26 | __Changelog__ 27 | 2016.05.04：添加 393px 699px 断点，小米note 1080 屏幕，DPR=2.75 28 | 29 | */ 30 | 31 | // 定义基准数 32 | $base-fontSize: 100px !default; 33 | 34 | // 定义设计稿尺寸 35 | $psd-size: 750px !default; 36 | 37 | // 定义竖屏断点 38 | $responsives: 320px, 360px, 375px, 393px, 400px, 414px; 39 | 40 | // 定义根元素font-size 41 | @mixin rem($values){ 42 | font-size: $values * $base-fontSize / $psd-size; 43 | } 44 | 45 | // 遍历输出断点 46 | @each $responsive in $responsives{ 47 | @media only screen and (min-width: #{$responsive}) { 48 | html{ @include rem($responsive);} 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /alert-view/src/sass/base/_tool.scss: -------------------------------------------------------------------------------- 1 | /* @name: 转为REM单位fn 2 | * @ps: 默认宽度为750px 3 | */ 4 | @function toRem($px , $width: 750px) { 5 | // 动态尺寸单位 6 | $ppr: $width / 16 / 1rem; 7 | @return ($px / $ppr); 8 | } 9 | 10 | /* @name: 上下左右居中 (未知高度) 11 | * @ps: 需要设置父元素 display:table 12 | */ 13 | @mixin centers{ 14 | display:table-cell; 15 | vertical-align:middle; 16 | } 17 | 18 | /* @name: 上下左右居中 （确定高度）*/ 19 | @mixin centersHight{ 20 | position: absolute; 21 | left: 0; 22 | right: 0; 23 | top: 0; 24 | bottom: 0; 25 | margin: auto; 26 | } 27 | 28 | /* 29 | * @name: 文字溢出显示省略号 30 | * @ps: 需要设置宽度 31 | */ 32 | @mixin ellipsis{ 33 | white-space: nowrap; 34 | word-wrap: normal; 35 | overflow: hidden; 36 | text-overflow: ellipsis; 37 | text-align: left; 38 | } 39 | 40 | /* @name: 强制不换行 */ 41 | @mixin nowrap{ 42 | white-space: nowrap; 43 | word-wrap: normal; 44 | word-break: keep-all; 45 | } 46 | 47 | /* @name: 清除浮动 */ 48 | @mixin clearFix{ 49 | overflow: hidden; 50 | clear: both; 51 | } 52 | 53 | /* 54 | * @name: 三角形 55 | * @param: $size 大小 56 | * @param: $color 颜色 57 | * @param: $type {string} 类型 (up || down || left || right || topleft || topright || bottomleft || bottomright) 58 | */ 59 | @mixin triangle( 60 | $size: 50px, 61 | $type: up, 62 | $color: #6699FF 63 | ){ 64 | width: 0; 65 | height: 0; 66 | @if $type == up { 67 | border-left: $size/2 solid transparent; 68 | border-right: $size/2 solid transparent; 69 | border-bottom: $size solid $color; 70 | }@else if $type == down { 71 | border-left: $size/2 solid transparent; 72 | border-right: $size/2 solid transparent; 73 | border-top: $size solid $color; 74 | }@else if $type == left { 75 | border-top: $size/2 solid transparent; 76 | border-right: $size/2 solid $color; 77 | border-bottom: $size solid transparent; 78 | }@else if $type == right { 79 | border-top: $size/2 solid transparent; 80 | border-left: $size/2 solid $color; 81 | border-bottom: $size solid transparent; 82 | }@else if $type == topleft { 83 | border-top: $size solid $color; 84 | border-right: $size solid transparent; 85 | }@else if $type == topright { 86 | border-top: $size solid $color; 87 | border-left: $size solid transparent; 88 | }@else if $type == bottomleft { 89 | border-bottom: $size solid $color; 90 | border-right: $size solid transparent; 91 | }@else if $type == bottomright { 92 | border-bottom: $size solid $color; 93 | border-left: $size solid transparent; 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /alert-view/src/sass/index.scss: -------------------------------------------------------------------------------- 1 | @import "base/base"; // 基础scss模块 2 | // @import "img"; 3 | body { 4 | font-size: 16px; 5 | } 6 | button { 7 | margin: 20px 0 20px 20px; 8 | } 9 | .ui-btn { 10 | display: block; 11 | vertical-align: middle; 12 | *vertical-align: auto; 13 | *display: inline; 14 | zoom: 1; 15 | padding: 10px 20px; 16 | font-size: 12px; 17 | border-radius: 4px; 18 | color: #fff; 19 | background-color: #288ad6; 20 | border-color: #288ad6; 21 | width: auto; 22 | line-height: 1; 23 | border: 1px solid; 24 | cursor: pointer; 25 | text-align: center; 26 | vertical-align: middle; 27 | *overflow: visible; 28 | user-select: none; 29 | transition: all 0.2s ease-in-out 30 | } 31 | .ui-btn:active { 32 | outline: 0; 33 | -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.08); 34 | -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.08); 35 | box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.08) 36 | } 37 | -------------------------------------------------------------------------------- /anti-hijack/README.md: -------------------------------------------------------------------------------- 1 | # AntiHijack 2 | 3 | ## 说明 4 | 5 | AntiHijack是一个可以拦截http劫持的web component。其核心防御原理如下： 6 | 7 | * 重写 `document.write`、`window.open`、`setAttribute`，拦截可疑代码； 8 | * 锁死 `call` 和 `apply`，防止盗用和重写； 9 | * 拦截 `iframe`重定向劫持； 10 | * `MutationObserver`监听DOM树变化，扫描 `img`、`script`、`iframe`、`object`、`a`，修正漏洞，拦截可疑代码； 11 | * 域名白名单匹配； 12 | * xss过滤； 13 | 14 | ---- 15 | 16 | * 支持**外链**或者**ADM/CMD/commonJS**等多种形式； 17 | * 本组件使用 [legoFlow](https://legoflow.com/) 进行开发、构建； 18 | * 本组件无第三方插件依赖； 19 | 20 | ## DEMO 21 | 22 | [DEMO](https://legox.org/assets/legolib/anti-hijack/index.html) 23 | 24 | ## 使用 25 | 26 | **注意：为了最大化的防劫持，请将脚本放在头部（尽量靠最前面）。`script`与`iframe`使用白名单机制，也就是请确保你页面上所有的`script`和`iframe`的域名都存在于白名单中，请根据需求的实际情况完善白名单** 27 | 28 | ### 模块引入方式 29 | 30 | ````javascript 31 | import antiHijack from 'legolib/anti-hijack/index.js'; 32 | 33 | new antiHijack({ 34 | reportUrl: 'http://xxx.com/xxx.png', // 劫持上报接口，通常是一个图片链接 35 | blackList: ['61.160.200.252'], // 自定义黑名单 36 | whiteList: ['yy.com'] // 自定义白名单 37 | }); 38 | ```` 39 | 40 | ### 外链引入方式 41 | 42 | 全局实例：`LegoAntiHijack` 43 | 44 | ```html 45 | 46 | 47 | new LegoAntiHijack(config); 48 | ``` 49 | 50 | ## API 51 | 52 | |参数|类型|说明| 53 | | ------| ------ | ------ | 54 | |blackList|Array|自定义黑名单| 55 | |whiteList|Array|自定义白名单| 56 | |reportUrl|string|自定义上报接口| 57 | 58 | 59 | ### 附：默认的黑白名单 60 | 61 | ````javascript 62 | // 默认白名单 63 | [ 64 | 'yy.com', 65 | 'duowan.com', 66 | 'baidu.com', 67 | 'qq.com', 68 | 'weibo.com', 69 | 'sina.com.cn', 70 | 'sinaimg.cn', 71 | 'sinajs.cn', 72 | 'google-analytics.com' 73 | ] 74 | 75 | // 默认黑名单 76 | [ 77 | '120.80.57.123', 78 | '61.160.200.252' 79 | ] 80 | ```` 81 | 82 | ## 兼容性 83 | 84 | 可在所有浏览器引用，包括IE6；但IE8（含）以下不会执行，IE9-IE10仅支持部分拦截； 85 | 86 | -------------------------------------------------------------------------------- /anti-hijack/legoflow.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.51", 3 | "type": "clean", 4 | "assets": "", 5 | "es6": true, 6 | "webp": false, 7 | "legolib": false, 8 | "https": false, 9 | "hot": false, 10 | "isUglifyJs": true, 11 | "isPackVueStyle": false, 12 | "vue@2.1": false, 13 | "watch": [], 14 | "publicPath": "", 15 | "packImgSize": "", 16 | "packCommon": "", 17 | "other": "", 18 | "dist": "", 19 | "output": "", 20 | "shell": "./shell.js", 21 | "alias": {}, 22 | "global": {}, 23 | "externals": {}, 24 | "proxy": {}, 25 | "ts": {}, 26 | "cache": "timestamp", 27 | "user.dev.args": {}, 28 | "user.build.args": {}, 29 | "env": {}, 30 | "build.move": [], 31 | "build.env": "", 32 | "build.zip": "", 33 | "img.folder": "", 34 | "html.folder": "", 35 | "js.folder": "", 36 | "export.folder": "" 37 | } 38 | -------------------------------------------------------------------------------- /anti-hijack/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lego-antiHijack", 3 | "version": "0.1.1", 4 | "repository": {}, 5 | "author": "UED.David", 6 | "license": "MIT" 7 | } -------------------------------------------------------------------------------- /anti-hijack/shell.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | 5 | module.exports = ( param ) => { 6 | const { fs, del, folder, messager, args, gulp, shell } = param; 7 | 8 | const dist = path.resolve( folder, './dist' ); 9 | const example = path.resolve( folder, './example' ); 10 | 11 | fs.copySync( dist, example, { overwrite: true } ); 12 | 13 | del([ dist ], { force: true }, () => { 14 | gulp.src( `${ example }/js/*.min.js `) 15 | .pipe( gulp.dest( dist ) ) 16 | .on( 'end', ( ) => { 17 | messager.success(); 18 | }) 19 | }); 20 | } 21 | -------------------------------------------------------------------------------- /anti-hijack/src/js/export/module/black-list.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file : 黑名单 3 | * @author : David 4 | * @update : 2016-08-04 20:38:22 5 | */ 6 | 7 | 8 | module.exports = [ 9 | '120.80.57.123', 10 | '61.160.200.252' 11 | ]; 12 | -------------------------------------------------------------------------------- /anti-hijack/src/js/export/module/report.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file : 数据上报 3 | * @author : David 4 | * @update : 2016-08-04 20:38:22 5 | */ 6 | 7 | let util = require('./util.js'); 8 | 9 | module.exports = { 10 | 11 | // 存放报告队列数组 12 | queueArray: [], 13 | 14 | /** 15 | * 推送报告到数组队列 16 | * 页面加载完毕之前推动到上报队列，页面加载完毕之后的可疑劫持行为直接上上报 17 | * 18 | * @param {string} type 劫持类型 19 | * @param {string} url URL 20 | * @param {string} code 风险代码 21 | */ 22 | pushQueue(type, url, code, remark) { 23 | // console.log(this.queueArray) 24 | if (!this.queueArray) { 25 | this.sendHijack(type, url, code, remark); 26 | } 27 | else { 28 | this.queueArray.push({ 29 | type : type, 30 | url : url, 31 | code : code, 32 | remark : remark 33 | }); 34 | } 35 | }, 36 | 37 | /** 38 | * hijack统计上报 39 | * 40 | * @param {string} type 劫持类型 41 | * @param {string} url URL 42 | * @param {string} code 风险代码 43 | */ 44 | sendHijack(type='', hijackUrl='', hijackCode='', remark='') { 45 | let hijackType = type.toLowerCase(); 46 | let url = encodeURIComponent(document.location.href); 47 | let time = Math.round(new Date().getTime()/1000); 48 | let uid = util.getUrlParam('uid'); 49 | let ua = encodeURIComponent(navigator.userAgent); 50 | let dw = window.screen.width + 'x' + window.screen.height; //屏幕分辨率 51 | let version = '0.1.1'; 52 | let reportInfo = `time=${time}&uid=${uid}&ua=${ua}&dw=${dw}&url=${url}&version=${version}&hijackType=${encodeURIComponent(hijackType)}&hijackUrl=${encodeURIComponent(hijackUrl)}&hijackCode=${encodeURIComponent(hijackCode)}&remark=${encodeURIComponent(remark)}`; 53 | let reportUrl = this.reportUrl||'//ylog.hiido.com/c.gif?act=webhttphijack'; 54 | 55 | reportUrl += reportUrl.indexOf('?') < 0 ? `?${reportInfo}` : `&${reportInfo}`; 56 | new Image().src = reportUrl; 57 | }, 58 | 59 | // 初始化 60 | init(config) { 61 | this.reportUrl = config.reportUrl; 62 | window.addEventListener('load', () => { 63 | // console.log(this.queueArray); 64 | this.queueArray.forEach((value, index) => { 65 | this.sendHijack(value.type, value.url, value.code, value.remark); 66 | }); 67 | this.queueArray = null; 68 | }); 69 | } 70 | 71 | }; 72 | 73 | -------------------------------------------------------------------------------- /anti-hijack/src/js/export/module/util.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file : 工具函数 3 | * @author : David 4 | * @update : 2016-08-04 20:38:22 5 | */ 6 | 7 | module.exports = { 8 | 9 | /** 10 | * 获取url中指定参数的值 11 | * @param {string} name 需要获取的参数名 12 | * @param {string} url 需要被处理的url，默认为当前url 13 | * @return {string} 对应的参数值 14 | */ 15 | getUrlParam(name, url) { 16 | let re = new RegExp('[\\?&#]' + name + '=([^&#]+)', 'gi'); 17 | let ma = encodeURIComponent(url || location.href).match(re); 18 | let strArr; 19 | 20 | if (ma && ma.length > 0) { 21 | strArr = (ma[ma.length-1]).split("="); 22 | if (strArr && strArr.length > 1) { 23 | return strArr[1]; 24 | } 25 | return '' 26 | } 27 | return ''; 28 | }, 29 | 30 | /** 31 | * 合并两个数组，重复项只留一个 32 | * @param {array} arr1 数组1 33 | * @param {array} arr2 数组2 34 | * @return {array} 合并后的数组 35 | */ 36 | mergeArray(arr1, arr2) { 37 | for (var i = 0; i < arr1.length; i++) { 38 | for (var j = 0; j < arr2.length; j++) { 39 | if (arr1[i] === arr2[j]) { 40 | arr1.splice(i, 1); // 利用splice函数删除元素，从第i个位置，截取长度为1的元素 41 | } 42 | } 43 | } 44 | for (var i = 0; i < arr2.length; i++) { 45 | arr1.push(arr2[i]); 46 | } 47 | return arr1; 48 | }, 49 | 50 | /** 51 | * 判断是否为数组 52 | * @param {array} arg 数组1 53 | * @return {Boolean} true || false 54 | */ 55 | isArray(arg) { 56 | if (!Array.isArray) { 57 | return Object.prototype.toString.call(arg) === '[object Array]'; 58 | } else { 59 | return Array.isArray(arg); 60 | } 61 | }, 62 | 63 | /** 64 | * 获取IE版本号 65 | * @return {number} IE版本号，例如IE6则返回6 66 | */ 67 | getIEVersion() { 68 | var rv = -1; 69 | if (navigator.appName == 'Microsoft Internet Explorer') { 70 | var ua = navigator.userAgent; 71 | var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})"); 72 | if (re.exec(ua) != null) 73 | rv = parseFloat(RegExp.$1); 74 | } else if (navigator.appName == 'Netscape') { 75 | var ua = navigator.userAgent; 76 | var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})"); //for IE 11 77 | if (re.exec(ua) != null) 78 | rv = parseFloat(RegExp.$1); 79 | } 80 | return rv; 81 | } 82 | }; 83 | -------------------------------------------------------------------------------- /anti-hijack/src/js/export/module/white-list.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file : 白名单 3 | * @author : David 4 | * @update : 2017-10-27 14:14:35 5 | */ 6 | 7 | 8 | module.exports = [ 9 | 'yy.com', 10 | 'duowan.com', 11 | 'baidu.com', 12 | 'qq.com', 13 | 'weibo.com', 14 | 'sina.com.cn', 15 | 'sinaimg.cn', 16 | 'sinajs.cn', 17 | 'apple.com', 18 | 'google-analytics.com', 19 | 'cnzz.com' 20 | ]; 21 | 22 | -------------------------------------------------------------------------------- /anti-hijack/src/js/export/module/white-list.yy.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file : 白名单 3 | * @author : David 4 | * @update : 2017-10-27 14:14:35 5 | */ 6 | 7 | 8 | module.exports = [ 9 | 'yy.com', 10 | 'yypm.com', 11 | 'duowan.com', 12 | 'duowan.cn', 13 | 'dwstatic.com', 14 | 'yystatic.com', 15 | 'huanju.cn', 16 | 'huanju.net', 17 | 'huanjuyun.com', 18 | 'hiido.com', 19 | 'hiido.cn', 20 | 'huya.com', 21 | 'msstatic.com', 22 | 'mezhibo.com', 23 | 'zhiniu8.com', 24 | 'zbisq.com', 25 | '100.com', 26 | '5253.com', 27 | '4366.com', 28 | '1931.com', 29 | 'sealdsp.com', 30 | 'yuanyuantv.com', 31 | 'ruixueys.com', 32 | 'yyclouds.com', 33 | 'kuaikuai.cn', 34 | 'up24.com', 35 | 'bigo.tv', 36 | 'bigolive.cn', 37 | 'baidu.com', 38 | 'qq.com', 39 | 'weibo.com', 40 | 'sina.com.cn', 41 | 'sinaimg.cn', 42 | 'sinajs.cn', 43 | 'apple.com', 44 | 'google-analytics.com', 45 | 'cnzz.com', 46 | 'gov.cn' 47 | ]; 48 | 49 | -------------------------------------------------------------------------------- /anti-hijack/src/js/index.js: -------------------------------------------------------------------------------- 1 | 2 | import antiHijack from './export/anti-hijack.js'; 3 | 4 | new antiHijack({ 5 | whiteList: ['yy.com'], 6 | blackList: ['51.la','61.160.200.252',], 7 | // reportUrl: 'http://s1.yy.com/ued_web_static/common/img/blank.png' 8 | }); -------------------------------------------------------------------------------- /anti-hijack/src/sass/_img.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyued/legolib/4c6a33b0f3c7d74ba2dafbd2e14a360693fdb1c7/anti-hijack/src/sass/_img.scss -------------------------------------------------------------------------------- /anti-hijack/src/sass/base/_base.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // 引入css 适配方案 4 | @import "flexible"; 5 | 6 | // 引入重置样式 7 | @import "normalize"; 8 | 9 | // 引入工具类 10 | @import "tool"; 11 | 12 | /* 全局设置 */ 13 | *, 14 | *:before, 15 | *:after{ 16 | font-family: "San Francisco", "Helvetica Neue", Helvetica, sans-serif; 17 | font-weight: 300; 18 | -webkit-box-sizing: border-box; 19 | -moz-box-sizing: border-box; 20 | box-sizing: border-box; 21 | -webkit-appearance: none; 22 | appearance: none; 23 | -webkit-tap-highlight-color: rgba(0,0,0,0); 24 | } 25 | 26 | /* 设置基本html,body样式 */ 27 | html,body{ 28 | margin: 0 auto; 29 | padding: 0; 30 | } 31 | 32 | /* 设置图片最大宽度 */ 33 | img{ 34 | max-width: 100%; 35 | } 36 | 37 | /* 清除默认按钮表现形式 */ 38 | button{ 39 | -webkit-appearance: none; 40 | appearance: none; 41 | } 42 | 43 | /* 设置表格默认样式 */ 44 | table { 45 | border-collapse: collapse; 46 | border-spacing: 0; 47 | } 48 | 49 | /* 文本域禁止拖拉放大 */ 50 | textarea { 51 | resize: none; 52 | } 53 | 54 | a { 55 | text-decoration: none; 56 | color: currentColor; 57 | } 58 | 59 | img { 60 | vertical-align: top; 61 | } 62 | 63 | i, em { 64 | font-style: normal; 65 | } 66 | 67 | ol, ul, li, menu { 68 | list-style: none outside none; 69 | } 70 | 71 | fieldset, iframe, abbr, acronym { 72 | border: 0 none; 73 | } 74 | 75 | dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, hr, 76 | article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 77 | margin: 0; 78 | padding: 0; 79 | } 80 | 81 | del { 82 | text-decoration:line-through; 83 | } 84 | -------------------------------------------------------------------------------- /anti-hijack/src/sass/base/_flexible.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Lego纯CSS自适应方案 4 | 5 | 1，设计稿尺寸 6 | 7 | 默认设计稿宽带 750px，可通过变量 $psd-size 进行修改 8 | 9 | 2，对应的 meta 标签写法： 10 | 11 | 12 | 3，px to rem 需要用到小学算术 13 | 14 | 100px = 1rem / 1px = 0.01rem 15 | 16 | Notes: 17 | 18 | 断点参考：http://screensiz.es/phone 19 | 20 | 横屏断点：384px, 480px, 533px, 568px, 640px, 667px, 699px, 736px 21 | 某些手机厂商系统的虚拟SmartBar会改变Screen的值，又是坑，建议统一横屏提示规避 22 | 23 | 避免使用 min-device-width 24 | https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=zh-cn#min-device-width- 25 | 26 | __Changelog__ 27 | 2016.05.04：添加 393px 699px 断点，小米note 1080 屏幕，DPR=2.75 28 | 29 | */ 30 | 31 | // 定义基准数 32 | $base-fontSize: 100px !default; 33 | 34 | // 定义设计稿尺寸 35 | $psd-size: 750px !default; 36 | 37 | // 定义竖屏断点 38 | $responsives: 320px, 360px, 375px, 393px, 400px, 414px; 39 | 40 | // 定义根元素font-size 41 | @mixin rem($values){ 42 | font-size: $values * $base-fontSize / $psd-size; 43 | } 44 | 45 | // 遍历输出断点 46 | @each $responsive in $responsives{ 47 | @media only screen and (min-width: #{$responsive}) { 48 | html{ @include rem($responsive);} 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /anti-hijack/src/sass/base/_tool.scss: -------------------------------------------------------------------------------- 1 | /* @name: 转为REM单位fn 2 | * @ps: 默认宽度为750px 3 | */ 4 | @function toRem($px , $width: 750px) { 5 | // 动态尺寸单位 6 | $ppr: $width / 16 / 1rem; 7 | @return ($px / $ppr); 8 | } 9 | 10 | /* @name: 上下左右居中 (未知高度) 11 | * @ps: 需要设置父元素 display:table 12 | */ 13 | @mixin centers{ 14 | display:table-cell; 15 | vertical-align:middle; 16 | } 17 | 18 | /* @name: 上下左右居中 （确定高度）*/ 19 | @mixin centersHight{ 20 | position: absolute; 21 | left: 0; 22 | right: 0; 23 | top: 0; 24 | bottom: 0; 25 | margin: auto; 26 | } 27 | 28 | /* 29 | * @name: 文字溢出显示省略号 30 | * @ps: 需要设置宽度 31 | */ 32 | @mixin ellipsis{ 33 | white-space: nowrap; 34 | word-wrap: normal; 35 | overflow: hidden; 36 | text-overflow: ellipsis; 37 | text-align: left; 38 | } 39 | 40 | /* @name: 强制不换行 */ 41 | @mixin nowrap{ 42 | white-space: nowrap; 43 | word-wrap: normal; 44 | word-break: keep-all; 45 | } 46 | 47 | /* @name: 清除浮动 */ 48 | @mixin clearFix{ 49 | overflow: hidden; 50 | clear: both; 51 | } 52 | 53 | /* 54 | * @name: 三角形 55 | * @param: $size 大小 56 | * @param: $color 颜色 57 | * @param: $type {string} 类型 (up || down || left || right || topleft || topright || bottomleft || bottomright) 58 | */ 59 | @mixin triangle( 60 | $size: 50px, 61 | $type: up, 62 | $color: #6699FF 63 | ){ 64 | width: 0; 65 | height: 0; 66 | @if $type == up { 67 | border-left: $size/2 solid transparent; 68 | border-right: $size/2 solid transparent; 69 | border-bottom: $size solid $color; 70 | }@else if $type == down { 71 | border-left: $size/2 solid transparent; 72 | border-right: $size/2 solid transparent; 73 | border-top: $size solid $color; 74 | }@else if $type == left { 75 | border-top: $size/2 solid transparent; 76 | border-right: $size/2 solid $color; 77 | border-bottom: $size solid transparent; 78 | }@else if $type == right { 79 | border-top: $size/2 solid transparent; 80 | border-left: $size/2 solid $color; 81 | border-bottom: $size solid transparent; 82 | }@else if $type == topleft { 83 | border-top: $size solid $color; 84 | border-right: $size solid transparent; 85 | }@else if $type == topright { 86 | border-top: $size solid $color; 87 | border-left: $size solid transparent; 88 | }@else if $type == bottomleft { 89 | border-bottom: $size solid $color; 90 | border-right: $size solid transparent; 91 | }@else if $type == bottomright { 92 | border-bottom: $size solid $color; 93 | border-left: $size solid transparent; 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /anti-hijack/src/sass/index.scss: -------------------------------------------------------------------------------- 1 | @import "base/base"; // 基础scss模块 2 | @import "img"; -------------------------------------------------------------------------------- /app-call/example/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | index1 12 | 13 | 25 | 26 | 27 |
正在打开...
28 |
29 | 30 |
31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /app-call/legoflow.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.51", 3 | "type": "clean", 4 | "assets": "", 5 | "es6": true, 6 | "webp": false, 7 | "legolib": false, 8 | "https": false, 9 | "hot": false, 10 | "isUglifyJs": true, 11 | "isPackVueStyle": false, 12 | "vue@2.1": false, 13 | "watch": [], 14 | "publicPath": "", 15 | "packImgSize": "", 16 | "packCommon": "", 17 | "other": "", 18 | "dist": "", 19 | "output": "", 20 | "shell": "./shell.js", 21 | "alias": {}, 22 | "global": {}, 23 | "externals": {}, 24 | "proxy": {}, 25 | "ts": {}, 26 | "cache": "timestamp", 27 | "user.dev.args": {}, 28 | "user.build.args": {}, 29 | "env": {}, 30 | "build.move": [], 31 | "build.env": "", 32 | "build.zip": "", 33 | "img.folder": "", 34 | "html.folder": "", 35 | "js.folder": "", 36 | "export.folder": "" 37 | } 38 | -------------------------------------------------------------------------------- /app-call/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lego-appCall", 3 | "version": "0.1.0", 4 | "repository": {}, 5 | "author": "UED.Wilson", 6 | "license": "MIT" 7 | } -------------------------------------------------------------------------------- /app-call/shell.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | 5 | module.exports = ( param ) => { 6 | const { fs, del, folder, messager, args, gulp, shell } = param; 7 | 8 | const dist = path.resolve( folder, './dist' ); 9 | const example = path.resolve( folder, './example' ); 10 | 11 | fs.copySync( dist, example, { overwrite: true } ); 12 | 13 | del([ dist ], { force: true }, () => { 14 | gulp.src( `${ example }/js/*.min.js `) 15 | .pipe( gulp.dest( dist ) ) 16 | .on( 'end', ( ) => { 17 | messager.success(); 18 | }) 19 | }); 20 | } 21 | -------------------------------------------------------------------------------- /app-call/src/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | index1 12 | 13 | 25 | 26 | 27 |
正在打开...
28 |
29 | 30 |
31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /app-call/src/js/export/img/share-tips.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyued/legolib/4c6a33b0f3c7d74ba2dafbd2e14a360693fdb1c7/app-call/src/js/export/img/share-tips.png -------------------------------------------------------------------------------- /app-call/src/js/export/img/swipe-down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyued/legolib/4c6a33b0f3c7d74ba2dafbd2e14a360693fdb1c7/app-call/src/js/export/img/swipe-down.png -------------------------------------------------------------------------------- /app-call/src/js/export/module/delegate.js: -------------------------------------------------------------------------------- 1 | if (!Element.prototype.matches) { 2 | Element.prototype.matches = 3 | Element.prototype.matchesSelector || 4 | Element.prototype.webkitMatchesSelector || 5 | function(s) { 6 | var matches = (this.document || this.ownerDocument).querySelectorAll(s), 7 | i = matches.length; 8 | while (--i >= 0 && matches.item(i) !== this) {} 9 | return i > -1; 10 | }; 11 | } 12 | 13 | module.exports = function delegate ( selector, handler, counter ) { 14 | if (counter) { 15 | let callback = function ( event ) { 16 | counter--; 17 | if (!counter) { 18 | this.removeEventListener(event.type, callback, false); 19 | } 20 | for (let target = event.target; target && target != this; target = target.parentNode) { 21 | if (target.matches(selector)) { 22 | return handler.apply(target, arguments); 23 | } 24 | } 25 | }; 26 | return callback; 27 | } 28 | 29 | return function ( event ) { 30 | for (let target = event.target; target && target != this; target = target.parentNode) { 31 | if (target.matches(selector)) { 32 | return handler.apply(target, arguments); 33 | } 34 | } 35 | }; 36 | } 37 | -------------------------------------------------------------------------------- /app-call/src/js/export/module/util.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @author: wilson（wuweishuan@yy.com） 3 | * @update: 2016.09.19 16:00 4 | */ 5 | 6 | var userAgent = 'navigator' in window && 'userAgent' in navigator && navigator.userAgent.toLowerCase() || ''; 7 | 8 | let util = { 9 | /** 10 | * 检测当前环境是否为iPhone 11 | * 12 | * @return {boolean} true|false 13 | */ 14 | isiPhone () { 15 | return /iphone/i.test(userAgent); 16 | }, 17 | 18 | /** 19 | * 检测当前环境是否为iPad 20 | * 21 | * @return {boolean} true|false 22 | */ 23 | isiPad () { 24 | return /ipad/i.test(userAgent); 25 | }, 26 | 27 | /** 28 | * 检测当前环境是否为iPod 29 | * 30 | * @return {boolean} true|false 31 | */ 32 | 33 | isiPod () { 34 | return /ipod/i.test(userAgent); 35 | }, 36 | 37 | /** 38 | * 检测当前环境是否为iOS 39 | * 40 | * @return {boolean} true|false 41 | */ 42 | 43 | isiOS () { 44 | return this.isiPhone() || this.isiPad() || this.isiPod(); 45 | }, 46 | /** 47 | * 检测当前环境是否为Android 48 | * 49 | * @return {boolean} true|false 50 | */ 51 | 52 | isAndroid () { 53 | return /android/i.test(userAgent); 54 | }, 55 | 56 | isSafari() { 57 | var ua = navigator.userAgent; 58 | // IOS系统 && !chrome && 开头必须为Mozilla && 结尾为Safari/xxx.xx 59 | if ( (/ OS \d/.test(ua)) && (!~ua.indexOf('CriOS')) && (!ua.indexOf('Mozilla')) && (/Safari\/[\d\.]+$/.test(ua)) ) { 60 | return true; 61 | } 62 | return false; 63 | }, 64 | 65 | /** 66 | * 检测当前环境ios版本 67 | * 68 | * @return {number} 69 | */ 70 | iosVersion () { 71 | var version = userAgent.match(/os (\d+)_(\d+)_?(\d+)?/); 72 | console.log(version) 73 | return this.isiOS()?(version?parseInt(version[1], 10):0):0; 74 | }, 75 | 76 | /** 77 | * 检测是否在微信浏览器中 78 | * 79 | * @return {boolean} true|false 80 | */ 81 | isWechat (){ 82 | return (/micromessenger/i).test(userAgent); 83 | }, 84 | 85 | /** 86 | * 检测是否在qq中 87 | * 88 | * @return {boolean} true|false 89 | */ 90 | isQq (){ 91 | return (/qq\//i).test(userAgent); 92 | }, 93 | } 94 | 95 | export default util; 96 | 97 | -------------------------------------------------------------------------------- /app-call/src/js/export/style.scss: -------------------------------------------------------------------------------- 1 | .smartBannerTips, 2 | .appCallTips { 3 | position: fixed; 4 | left: 0; 5 | top: 0; 6 | width: 100%; 7 | height: 100%; 8 | background-color: rgba(0, 0, 0, 0.8); 9 | z-index: 9999; 10 | } 11 | 12 | .appCallTips-img { 13 | position: absolute; 14 | top: 10px; 15 | right: 30px; 16 | width: 150px; 17 | height: 175px; 18 | background-image: url(./img/share-tips.png); 19 | background-size: 100% 100%; 20 | } 21 | .smartBannerTips-content { 22 | margin-top: 10px; 23 | text-align: center; 24 | font-size: 17px; 25 | color: #fff; 26 | } 27 | .swipe-down { 28 | display: inline-block; 29 | vertical-align: bottom; 30 | margin: 0 0 -3px 10px; 31 | width: 32px; 32 | height: 32px; 33 | background-image: url(./img/swipe-down.png); 34 | background-size: 100% 100%; 35 | } 36 | -------------------------------------------------------------------------------- /app-call/src/js/index.js: -------------------------------------------------------------------------------- 1 | import appCall from './export/app-call.js'; 2 | 3 | let sid = getUrlParam('sid'); 4 | let ssid = getUrlParam('ssid'); 5 | let action = getUrlParam('action'); 6 | let _uriScheme = getUrlParam('_uriScheme'); 7 | let downloadUrl = '//yijian.yy.com/mobile.html'; 8 | let schemaUrl = 'onepiece://'; 9 | 10 | // 兼容旧的跳转 11 | if (sid && ssid) { 12 | schemaUrl = schemaUrl + 'Channel/Live/' + sid + '/' + ssid; 13 | } 14 | else { 15 | schemaUrl = action?decodeURIComponent(action):schemaUrl; 16 | } 17 | 18 | 19 | if(_uriScheme){ 20 | new appCall({ 21 | schemaUrl : schemaUrl, 22 | androidDownloadUrl : downloadUrl, 23 | iOSDownloadUrl : downloadUrl, 24 | }) 25 | } 26 | 27 | function getUrlParam(name, url) { 28 | var paramReg = new RegExp("[\\?&#]" + name + "=([^&#]+)","gi"); 29 | var paramMatch = (url || location.href).match(paramReg); 30 | var paramResult = []; 31 | 32 | if (paramMatch && paramMatch.length > 0) { 33 | paramResult = (paramMatch[paramMatch.length-1]).split("="); 34 | if (paramResult && paramResult.length > 1) { 35 | return paramResult[1]; 36 | } 37 | return '' 38 | } 39 | return ''; 40 | } 41 | -------------------------------------------------------------------------------- /app-call/src/sass/_img.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyued/legolib/4c6a33b0f3c7d74ba2dafbd2e14a360693fdb1c7/app-call/src/sass/_img.scss -------------------------------------------------------------------------------- /app-call/src/sass/base/_base.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // 引入css 适配方案 4 | @import "flexible"; 5 | 6 | // 引入重置样式 7 | @import "normalize"; 8 | 9 | // 引入工具类 10 | @import "tool"; 11 | 12 | /* 全局设置 */ 13 | *, 14 | *:before, 15 | *:after{ 16 | font-family: "San Francisco", "Helvetica Neue", Helvetica, sans-serif; 17 | font-weight: 300; 18 | -webkit-box-sizing: border-box; 19 | -moz-box-sizing: border-box; 20 | box-sizing: border-box; 21 | -webkit-appearance: none; 22 | appearance: none; 23 | -webkit-tap-highlight-color: rgba(0,0,0,0); 24 | } 25 | 26 | /* 设置基本html,body样式 */ 27 | html,body{ 28 | margin: 0 auto; 29 | padding: 0; 30 | } 31 | 32 | /* 设置图片最大宽度 */ 33 | img{ 34 | max-width: 100%; 35 | } 36 | 37 | /* 清除默认按钮表现形式 */ 38 | button{ 39 | -webkit-appearance: none; 40 | appearance: none; 41 | } 42 | 43 | /* 设置表格默认样式 */ 44 | table { 45 | border-collapse: collapse; 46 | border-spacing: 0; 47 | } 48 | 49 | /* 文本域禁止拖拉放大 */ 50 | textarea { 51 | resize: none; 52 | } 53 | 54 | a { 55 | text-decoration: none; 56 | color: currentColor; 57 | } 58 | 59 | img { 60 | vertical-align: top; 61 | } 62 | 63 | i, em { 64 | font-style: normal; 65 | } 66 | 67 | ol, ul, li, menu { 68 | list-style: none outside none; 69 | } 70 | 71 | fieldset, iframe, abbr, acronym { 72 | border: 0 none; 73 | } 74 | 75 | dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, hr, 76 | article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 77 | margin: 0; 78 | padding: 0; 79 | } 80 | 81 | del { 82 | text-decoration:line-through; 83 | } 84 | -------------------------------------------------------------------------------- /app-call/src/sass/base/_flexible.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Lego纯CSS自适应方案 4 | 5 | 1，设计稿尺寸 6 | 7 | 默认设计稿宽带 750px，可通过变量 $psd-size 进行修改 8 | 9 | 2，对应的 meta 标签写法： 10 | 11 | 12 | 3，px to rem 需要用到小学算术 13 | 14 | 100px = 1rem / 1px = 0.01rem 15 | 16 | Notes: 17 | 18 | 断点参考：http://screensiz.es/phone 19 | 20 | 横屏断点：384px, 480px, 533px, 568px, 640px, 667px, 699px, 736px 21 | 某些手机厂商系统的虚拟SmartBar会改变Screen的值，又是坑，建议统一横屏提示规避 22 | 23 | 避免使用 min-device-width 24 | https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=zh-cn#min-device-width- 25 | 26 | __Changelog__ 27 | 2016.05.04：添加 393px 699px 断点，小米note 1080 屏幕，DPR=2.75 28 | 29 | */ 30 | 31 | // 定义基准数 32 | $base-fontSize: 100px !default; 33 | 34 | // 定义设计稿尺寸 35 | $psd-size: 750px !default; 36 | 37 | // 定义竖屏断点 38 | $responsives: 320px, 360px, 375px, 393px, 400px, 414px; 39 | 40 | // 定义根元素font-size 41 | @mixin rem($values){ 42 | font-size: $values * $base-fontSize / $psd-size; 43 | } 44 | 45 | // 遍历输出断点 46 | @each $responsive in $responsives{ 47 | @media only screen and (min-width: #{$responsive}) { 48 | html{ @include rem($responsive);} 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /app-call/src/sass/index.scss: -------------------------------------------------------------------------------- 1 | @import "base/base"; // 基础scss模块 2 | @import "img"; -------------------------------------------------------------------------------- /image-loader/README.md: -------------------------------------------------------------------------------- 1 | # image-loader 2 | 3 | ## 说明 4 | LegoImgLoader 用于预加载图片、显示图片、加载进度和加载完成后的回调，同时可以显示加载失败的图片和当加载失败时尝试重新加载的次数。 5 | * 支持**外链**或者**ADM/CMD/commonJS**等多种形式； 6 | * 本组件使用 [legoFlow](https://legoflow.com/) 进行开发构建； 7 | * 本组件无第三方插件依赖； 8 | 9 | ## DEMO 10 | 11 | [DEMO](https://legox.org/assets/legolib/image-loader/index.html) 12 | 13 | ## 使用 14 | 15 | ### 模块引入方式 16 | 17 | ```javascript 18 | import ImgLoader from 'legolib/image-loader/index.js'; 19 | var arr = ['xxx.jpg', 'xxxx.jpg']; 20 | new ImgLoader(arr, { 21 | try : 2, 22 | progress : function(count, total, src) { 23 | }, 24 | complete : function(time,errImgs) { 25 | } 26 | }); 27 | ``` 28 | 29 | ### 外链引入方式 30 | 31 | 全局实例：`LegoImageLoader` 32 | 33 | ```html 34 | 35 | 36 | new LegoImageLoader(arr, { 37 | try : 2, 38 | progress : function(count, total, src) { 39 | }, 40 | complete : function(time,errImgs) { 41 | } 42 | }); 43 | ``` 44 | 45 | 46 | ### 简易回调模式 47 | 48 | 者第二个参数为函数，表示所有图片加载完成后的回调 49 | 50 | ```javascript 51 | new LegoImgLoader(arr, function(time) { 52 | console.log('oncomplete:all source loaded:',arguments); 53 | console.log('

加载完成,总共耗时:'+time+'ms

'); 54 | }); 55 | ``` 56 | 57 | ## API 58 | |参数名|类型|注释| 59 | |------|-----|-------| 60 | |arr|Array|预加载的图片数组| 61 | |try|Number|图片失败尝试加载的次数，默认是3| 62 | |progress|Function|加载完每一张图片的回调函数，参数`count`：当前加载到第几张；`total`：所有图片的总数；`src`： 当前加载的图片| 63 | |complete|Function|加载完所有图片的回调函数，参数`time`：加载所有图片耗时；参数`errImgs`：加载失败的图片| 64 | -------------------------------------------------------------------------------- /image-loader/legoflow.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.51", 3 | "type": "PC", 4 | "assets": "", 5 | "es6": true, 6 | "webp": false, 7 | "legolib": false, 8 | "https": false, 9 | "hot": false, 10 | "isUglifyJs": true, 11 | "isPackVueStyle": false, 12 | "vue@2.1": false, 13 | "watch": [], 14 | "publicPath": "", 15 | "packImgSize": "", 16 | "packCommon": "", 17 | "other": "", 18 | "dist": "", 19 | "output": "", 20 | "shell": "./shell.js", 21 | "alias": {}, 22 | "global": {}, 23 | "externals": {}, 24 | "proxy": {}, 25 | "ts": {}, 26 | "cache": "timestamp", 27 | "user.dev.args": {}, 28 | "user.build.args": {}, 29 | "env": {}, 30 | "build.move": [], 31 | "build.env": "", 32 | "build.zip": "", 33 | "img.folder": "", 34 | "html.folder": "", 35 | "js.folder": "", 36 | "export.folder": "" 37 | } 38 | -------------------------------------------------------------------------------- /image-loader/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lego-imgLoader", 3 | "version": "0.1.2", 4 | "repository": {}, 5 | "author": "UED.Vicky", 6 | "license": "MIT" 7 | } -------------------------------------------------------------------------------- /image-loader/shell.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | 5 | module.exports = ( param ) => { 6 | const { fs, del, folder, messager, args, gulp, shell } = param; 7 | 8 | const dist = path.resolve( folder, './dist' ); 9 | const example = path.resolve( folder, './example' ); 10 | 11 | fs.copySync( dist, example, { overwrite: true } ); 12 | 13 | del([ dist ], { force: true }, () => { 14 | gulp.src( `${ example }/js/*.min.js `) 15 | .pipe( gulp.dest( dist ) ) 16 | .on( 'end', ( ) => { 17 | messager.success(); 18 | }) 19 | }); 20 | } 21 | -------------------------------------------------------------------------------- /image-loader/src/js/index.js: -------------------------------------------------------------------------------- 1 | var LegoImgLoader = require('./export/image-loader.js'); 2 | // import LegoImgLoader from './export/image-loader.js'; 3 | 4 | var arr = [ 5 | 'http://img.dwstatic.com/www/1605/326487013743/1462867118922.jpg', 6 | 'http://img2.dwstatic.com/www/1607/332156260726/1468201777561.png', 7 | 'http://img4.dwstatic.com/www/1607/331553311031/1467598667542.png', 8 | 'http://img4.dwstatic.com/www/1512/313433690773/1512180053920.jpg', 9 | 'http://img2.dwstatic.com/www/1512/313433717915/1512197015168.jpg', 10 | 'http://img2.dwstatic.com/www/1712/376153051669/1512197872817.jpg' 11 | ]; 12 | 13 | new LegoImgLoader(arr, { 14 | try: 1, 15 | progress: function(count, total, src) { 16 | console.log('progress:single loaded:', arguments); 17 | var progress = count/total*100 + '%'; 18 | document.getElementById('progress-bar').innerHTML = progress; 19 | document.getElementById('progress-bar').style.width = progress; 20 | $('body').append('

' + src + '
加载中。。。'+ progress +'%

'); 21 | }, 22 | complete: function(time, errorImgs) { 23 | console.log('complete:all source loaded:',arguments); 24 | $('body').append('

加载完成,总共耗时:'+time+'ms

加载失败的图片：'+errorImgs+'

'); 25 | } 26 | }) 27 | -------------------------------------------------------------------------------- /image-loader/src/js/legolib: -------------------------------------------------------------------------------- 1 | /Applications/LegoFlow.app/Contents/Resources/app/legolib -------------------------------------------------------------------------------- /image-loader/src/sass/_img.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyued/legolib/4c6a33b0f3c7d74ba2dafbd2e14a360693fdb1c7/image-loader/src/sass/_img.scss -------------------------------------------------------------------------------- /image-loader/src/sass/base/_base.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* 3 | * @file: 基础设施 4 | * @update: 2015-06-03 17:28:19 5 | */ 6 | 7 | @import "variable"; // 变量配置 8 | @import "mixins"; 9 | @import "normalize"; 10 | @import "reset"; // 重置 11 | @import "utility"; // 工具 12 | @import "print"; // 打印 13 | -------------------------------------------------------------------------------- /image-loader/src/sass/base/_print.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* 3 | * @file: 打印样式 4 | * @update: 2015-06-03 16:49:29 5 | * @source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css 6 | */ 7 | 8 | @media print, 9 | (min-resolution: 1.25dppx), 10 | (min-resolution: 120dpi) { 11 | /* Style adjustments for high resolution devices */ 12 | } 13 | 14 | /* ========================================================================== 15 | Print styles. 16 | Inlined to avoid the additional HTTP request: 17 | http://www.phpied.com/delay-loading-your-print-css/ 18 | ========================================================================== */ 19 | 20 | @media print { 21 | *, 22 | *:before, 23 | *:after { 24 | background: transparent !important; 25 | color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */ 26 | box-shadow: none !important; 27 | text-shadow: none !important; 28 | } 29 | 30 | a, 31 | a:visited { 32 | text-decoration: underline; 33 | } 34 | 35 | a[href]:after { 36 | content: " (" attr(href) ")"; 37 | } 38 | 39 | abbr[title]:after { 40 | content: " (" attr(title) ")"; 41 | } 42 | 43 | /* 44 | * Don't show links that are fragment identifiers, 45 | * or use the `javascript:` pseudo protocol 46 | */ 47 | 48 | a[href^="#"]:after, 49 | a[href^="javascript:"]:after { 50 | content: ""; 51 | } 52 | 53 | pre, 54 | blockquote { 55 | border: 1px solid #999; 56 | page-break-inside: avoid; 57 | } 58 | 59 | /* 60 | * Printing Tables: 61 | * http://css-discuss.incutio.com/wiki/Printing_Tables 62 | */ 63 | 64 | thead { 65 | display: table-header-group; 66 | } 67 | 68 | tr, 69 | img { 70 | page-break-inside: avoid; 71 | } 72 | 73 | img { 74 | max-width: 100% !important; 75 | } 76 | 77 | p, 78 | h2, 79 | h3 { 80 | orphans: 3; 81 | widows: 3; 82 | } 83 | 84 | h2, 85 | h3 { 86 | page-break-after: avoid; 87 | } 88 | 89 | .u-printHide { 90 | display: none !important; 91 | } 92 | 93 | } 94 | -------------------------------------------------------------------------------- /image-loader/src/sass/base/_reset.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* 3 | * @file: 重置样式 4 | * @update: 2016-07-27 14:34:24 5 | */ 6 | 7 | body { 8 | font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; 9 | color: $base-text-color; 10 | overflow-y: auto; 11 | -webkit-font-smoothing: subpixel-antialiased; 12 | } 13 | a { 14 | text-decoration: none; 15 | color: nth($base-link-color, 1); 16 | &:hover { 17 | text-decoration: $base-link-decoration; 18 | color: nth($base-link-color, 2); 19 | } 20 | } 21 | 22 | /* 去除现代浏览器图片底部的空隙 */ 23 | img { 24 | vertical-align: top; 25 | } 26 | em { 27 | font-style: normal; 28 | } 29 | ol, ul, menu { 30 | list-style: none outside none; 31 | } 32 | fieldset, iframe { 33 | border: 0 none; 34 | } 35 | dl, dt, dd, ul, ol, li, 36 | h1, h2, h3, h4, h5, h6, 37 | pre, code, blockquote, 38 | form, fieldset, legend, input, button, textarea, 39 | th, td, hr, p, 40 | article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 41 | margin: 0; 42 | padding: 0; 43 | } 44 | 45 | /* IE6 7 8(q) bug 显示为行内表现 */ 46 | iframe { 47 | display: block; 48 | } 49 | 50 | /* IE bug fixed: th 不继承 text-align */ 51 | th { 52 | text-align: inherit; 53 | } 54 | 55 | /* 修正表单元素不继承父级字体族的问题 */ 56 | input, button, select, textarea { 57 | font-family: $base-font-family; 58 | } 59 | 60 | /** 61 | * 移除 IE6-11 中默认的垂直滚动条 62 | * 禁止水平拖动，防止破坏布局 63 | */ 64 | textarea { 65 | @include resizable(vertical); 66 | } 67 | 68 | /** 69 | * 修正 Firefox 19+ Placeholder 设置了opacity 的问题 70 | */ 71 | input::-moz-placeholder, 72 | textarea::-moz-placeholder { 73 | color: darkGray; 74 | opacity: 1; 75 | } 76 | 77 | /* 一致的 del 样式 */ 78 | del { 79 | text-decoration: line-through; 80 | } 81 | 82 | abbr { 83 | cursor: help; 84 | } 85 | 86 | /* pre允许溢出滚动 */ 87 | pre { 88 | overflow: auto; 89 | } 90 | 91 | /* 以下为排版样式 */ 92 | 93 | hr { 94 | height: 10px; 95 | margin-bottom: .8em; 96 | border: 0; 97 | border-bottom: 1px solid #cfcfcf; 98 | } 99 | 100 | blockquote { 101 | position: relative; 102 | padding: 0 15px; 103 | margin: 15px 0; 104 | border-left: 4px solid #ddd; 105 | color: #999; 106 | } 107 | 108 | -------------------------------------------------------------------------------- /image-loader/src/sass/base/_variable.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | /* 4 | * @file: 全局变量配置 5 | * @update: 2016-07-27 10:51:13 6 | */ 7 | 8 | /* 排版配置 */ 9 | 10 | /* 11 | * 字体策略 12 | * 1. 默认：使用无衬线体，OSX中文使用苹方与冬青黑体，Windows中文使用微软雅黑，Linux中文使用文泉雅黑； 13 | * 2. 黑体：通过字体辅助类.u-heiti 或者 @extend %u-heiti来调用； 14 | * 3. 宋体：通过字体辅助类.u-songti 或者 @extend %u-songti来调用； 15 | * 3. 楷体：通过字体辅助类.u-kaiti 或者 @extend %u-kaiti来调用； 16 | * 4. 参考链接：http://www.zhihu.com/question/19911793 http://zenozeng.github.io/fonts.css/ 17 | */ 18 | $base-font-size : 12px !default; // 字号 19 | $base-font-family : "San Francisco", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif !default; // 字体族 20 | $base-font-weight : 300 !default; // 字重 21 | $base-line-height : 1.5 !default; // 行高 22 | $base-link-decoration : underline !default; // 链接下划线 23 | 24 | /* 颜色配置 */ 25 | $base-text-color : #333 !default; // 文本颜色 26 | $base-bg-color : #fff !default; // 背景颜色 27 | $base-link-color : #333 #fa0 !default; // 链接颜色[default，hover] 28 | 29 | -------------------------------------------------------------------------------- /image-loader/src/sass/index.scss: -------------------------------------------------------------------------------- 1 | @import "base/base"; // 基础scss模块 2 | @import "img"; 3 | -------------------------------------------------------------------------------- /lego-storage/example/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Lego Storage 12 | 13 | 14 | 15 |
16 |
17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /lego-storage/example/assets/read-file.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Read File 11 | 12 | 13 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /lego-storage/example/js/test-1.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * @project : lego-storage 3 | * @version : 0.0.1 4 | * @author : UED.fanyuanjing 5 | * @update : 2017-12-08 6:20:24 pm 6 | */ !function(t){function e(r){if(o[r])return o[r].exports;var n=o[r]={exports:{},id:r,loaded:!1};return t[r].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var o={};return e.m=t,e.c=o,e.p="./js/",e(0)}([function(t,e){console.log("test-1"),console.log($),$("#test-1").text("test - 1")}]); -------------------------------------------------------------------------------- /lego-storage/example/js/test-2.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * @project : lego-storage 3 | * @version : 0.0.1 4 | * @author : UED.fanyuanjing 5 | * @update : 2017-12-08 6:20:24 pm 6 | */ !function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return e[o].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="./js/",t(0)}([function(e,t){console.log(2222),document.getElementById("test-2").innerHTML="test - 2"}]); -------------------------------------------------------------------------------- /lego-storage/legoflow.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.51", 3 | "type": "mobile", 4 | "assets": "", 5 | "es6": true, 6 | "webp": false, 7 | "legolib": false, 8 | "https": false, 9 | "hot": false, 10 | "isUglifyJs": true, 11 | "isPackVueStyle": false, 12 | "vue@2.1": false, 13 | "watch": [], 14 | "publicPath": "", 15 | "packImgSize": "", 16 | "packCommon": "", 17 | "other": "", 18 | "dist": "", 19 | "output": "", 20 | "shell": "./shell.js", 21 | "alias": { 22 | }, 23 | "global": { 24 | }, 25 | "externals": {}, 26 | "proxy": {}, 27 | "ts": {}, 28 | "cache": "timestamp", 29 | "user.dev.args": {}, 30 | "user.build.args": {}, 31 | "env": {}, 32 | "build.move": [], 33 | "build.env": "", 34 | "build.zip": "", 35 | "img.folder": "", 36 | "html.folder": "", 37 | "js.folder": "", 38 | "export.folder": "" 39 | } 40 | -------------------------------------------------------------------------------- /lego-storage/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lego-storage", 3 | "version": "0.0.1", 4 | "repository": {}, 5 | "author": "UED.fanyuanjing", 6 | "license": "MIT" 7 | } -------------------------------------------------------------------------------- /lego-storage/shell.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | 5 | module.exports = ( param ) => { 6 | const { fs, del, folder, messager, args, gulp, shell } = param; 7 | 8 | const dist = path.resolve( folder, './dist' ); 9 | const example = path.resolve( folder, './example' ); 10 | 11 | fs.copySync( dist, example, { overwrite: true } ); 12 | 13 | del([ dist ], { force: true }, () => { 14 | gulp.src( `${ example }/js/*.min.js `) 15 | .pipe( gulp.dest( dist ) ) 16 | .on( 'end', ( ) => { 17 | messager.success(); 18 | }) 19 | }); 20 | } 21 | -------------------------------------------------------------------------------- /lego-storage/src/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Lego Storage 12 | 13 | 14 | 15 |
16 |
17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /lego-storage/src/assets/read-file.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Read File 11 | 12 | 13 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /lego-storage/src/js/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // import debug from './modules/mobile.debug'; 4 | // debug(); 5 | 6 | let config = { 7 | 'iframeWindow': '//s1.yy.com/ued_web_static/lib/lego-storage/read-file.html', 8 | 'assets': { 9 | 'trailer': { 10 | version: '1.0.1', 11 | // type : 'delay', 12 | url: 'http://s1.yy.com/ued_web_static/project/yy8/trailer/1.0.1/js/main.js', 13 | }, 14 | 'nav': { 15 | version: '1.0.1', 16 | url: 'http://s1.yy.com/ued_web_static/project/yy8/nav/1.0.1/js/main.js', 17 | }, 18 | 'zepto': { 19 | version: '1.0.0', 20 | url: 'http://assets.dwstatic.com/base/zepto/zepto.min.js', 21 | }, 22 | 'test-1': { 23 | version: '0.0.1', 24 | type: 'delay', 25 | url: 'http://172.25.154.120:3000/js/test-1.js', 26 | }, 27 | 'vue': { 28 | version: '1.10.21', 29 | // type : 'delay', 30 | url: 'http://assets.dwstatic.com/base/vue/1.0.21/vue.min.js', 31 | }, 32 | } 33 | } 34 | 35 | import LegoStorage from './export/legoStorage'; 36 | 37 | let legoStorage = new LegoStorage(config, true); 38 | 39 | // 清除原有 40 | legoStorage.clear('trailer', () => { 41 | console.log('clear finish ...'); 42 | legoStorage.init(() => { 43 | console.log('初始化成功'); 44 | }); 45 | }); 46 | 47 | // legoStorage.clear(() => { 48 | // console.log('clear finish ...'); 49 | // legoStorage.init(() => { 50 | // console.log('初始化成功'); 51 | // // console.log(Vue); 52 | // // console.log(Swiper); 53 | // }); 54 | // }); 55 | 56 | // legoStorage.init(() => { 57 | // console.log('初始化成功', Vue); 58 | // }); 59 | -------------------------------------------------------------------------------- /lego-storage/src/js/test-1.js: -------------------------------------------------------------------------------- 1 | console.log('test-1'); 2 | console.log($); 3 | $('#test-1').text('test - 1'); 4 | -------------------------------------------------------------------------------- /lego-storage/src/js/test-2.js: -------------------------------------------------------------------------------- 1 | console.log(2222); 2 | document.getElementById('test-2').innerHTML = 'test - 2'; 3 | -------------------------------------------------------------------------------- /lego-storage/src/sass/_img.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyued/legolib/4c6a33b0f3c7d74ba2dafbd2e14a360693fdb1c7/lego-storage/src/sass/_img.scss -------------------------------------------------------------------------------- /lego-storage/src/sass/base/_base.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * 基础模块 & 全局变量配置 3 | * 4 | */ 5 | 6 | // 文本配置 7 | $b-font-size : 14px !default; 8 | $b-font-family : "San Francisco", "Helvetica Neue", Helvetica, sans-serif !default; 9 | $b-font-weight : 300 !default; 10 | $b-line-height : 1.5 !default; 11 | $b-link-decoration : underline !default; 12 | 13 | // 颜色配置 14 | $c-text : #333 !default; 15 | $c-background : #fff !default; 16 | $c-link : #333 #fa0 !default; 17 | 18 | // 基础模块 19 | @import "normalize"; 20 | @import "reset"; 21 | @import "flexible"; 22 | // @import "orientation"; 23 | @import "tool"; 24 | 25 | // todo: 横屏提示在安卓弹出键盘时被触发 -------------------------------------------------------------------------------- /lego-storage/src/sass/base/_flexible.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | 纯 CSS 自适应方案 4 | 5 | 1，设计稿尺寸 6 | 7 | 默认设计稿宽带 750px，可通过变量 $psd-size 进行修改 8 | 9 | 2，对应的 meta 标签写法： 10 | 11 | 12 | 13 | 3，px to rem 需要用到小学算术 14 | 15 | 100px = 1rem / 1px = 0.01rem 16 | 17 | Notes: 18 | 19 | 断点参考： 20 | http://screensiz.es/phone 21 | http://mydevice.io/devices/#sortSmartphones 22 | 23 | 横屏断点：384px, 480px, 533px, 568px, 640px, 667px, 699px, 736px 24 | 某些手机厂商系统的虚拟 SmartBar 会改变 Screen 的值，又是坑，建议统一横屏提示规避 25 | 26 | 避免使用 min-device-width 27 | https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=zh-cn#min-device-width- 28 | 29 | Changelog: 30 | 31 | 2016.05.04：添加 393px 699px 断点，小米note 1080 屏幕，DPR=2.75 32 | 2016.11.11: 参考 http://mydevice.io/devices/#sortSmartphones 添加部分安卓手机宽度 33 | 34 | */ 35 | 36 | // 定义基准数 37 | $base-fontSize: 100px !default; 38 | 39 | // 定义设计稿尺寸 40 | $psd-size: 750px !default; 41 | 42 | // 定义竖屏断点 43 | $responsives: 320px, 346px, 360px, 375px, 384px, 390px, 393px, 400px, 412px, 414px, 432px; 44 | 45 | // 定义根元素font-size 46 | @mixin rem($values){ 47 | font-size: $values * $base-fontSize / $psd-size; 48 | } 49 | 50 | // 遍历输出断点 51 | @each $responsive in $responsives{ 52 | @media only screen and (min-width: #{$responsive}) { 53 | html{ @include rem($responsive);} 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /lego-storage/src/sass/base/_reset.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @file: 重置样式 3 | */ 4 | 5 | /* 全局设置 */ 6 | *, 7 | *:before, 8 | *:after{ 9 | font-family: "San Francisco", "Helvetica Neue", Helvetica, sans-serif; 10 | font-weight: 300; 11 | box-sizing: border-box; 12 | appearance: none; 13 | -webkit-tap-highlight-color: rgba(0,0,0,0); 14 | } 15 | 16 | /* 设置基本html,body样式 */ 17 | html,body{ 18 | margin: 0 auto; 19 | padding: 0; 20 | } 21 | 22 | /* 设置图片最大宽度 */ 23 | img{ 24 | max-width: 100%; 25 | } 26 | 27 | /* 清除默认按钮表现形式 */ 28 | button{ 29 | -webkit-appearance: none; 30 | appearance: none; 31 | } 32 | 33 | /* 设置表格默认样式 */ 34 | table { 35 | border-collapse: collapse; 36 | border-spacing: 0; 37 | } 38 | 39 | /* 文本域禁止拖拉放大 */ 40 | textarea { 41 | resize: none; 42 | } 43 | 44 | a { 45 | text-decoration: none; 46 | color: currentColor; 47 | } 48 | 49 | img { 50 | vertical-align: top; 51 | } 52 | 53 | i, em { 54 | font-style: normal; 55 | } 56 | 57 | ol, ul, li, menu { 58 | list-style: none outside none; 59 | } 60 | 61 | fieldset, iframe, abbr, acronym { 62 | border: 0 none; 63 | } 64 | 65 | dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, hr, 66 | article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 67 | margin: 0; 68 | padding: 0; 69 | } 70 | 71 | del { 72 | text-decoration:line-through; 73 | } 74 | -------------------------------------------------------------------------------- /lego-storage/src/sass/main.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @import "base/base"; 4 | @import "img"; 5 | 6 | body { 7 | font: $b-font-weight #{$b-font-size}/#{$b-line-height} $b-font-family; 8 | color: $c-text; 9 | a { 10 | text-decoration: none; 11 | color: nth($c-link, 1); 12 | &:hover { 13 | text-decoration: underline; 14 | color: nth($c-link, 2); 15 | } 16 | } 17 | } 18 | 19 | // Coding... -------------------------------------------------------------------------------- /loading-controller/README.md: -------------------------------------------------------------------------------- 1 | # loading-controller 2 | 3 | ## 说明 4 | 5 | 简单易用的页面加载loading，可控制加载进度。 6 | 7 | - 支持**外链**或者**ADM/CMD/commonJS**等多种形式； 8 | * 本组件使用 [legoFlow](https://legoflow.com/) 进行开发构建； 9 | - 本组件无第三方插件依赖； 10 | - 本组件兼容`ie8+` 11 | 12 | ## DEMO 13 | 14 | [DEMO](https://legox.org/assets/legolib/loading-controller/index.html) 15 | 16 | 17 | ## 使用 18 | 19 | ### 模块引入方式 20 | 21 | ```javascript 22 | var LegoLoading = require('legolib/loading-controller/index.js'); 23 | var config = { 24 | theme : 'default', 25 | text : '当前进度：${progress}', 26 | progress : function (progress) { 27 | console.log('当前的百分比为: ' + progress); 28 | }, 29 | complete : function () { 30 | console.log('已经完成') 31 | } 32 | } 33 | var loading = new LegoLoading(config); 34 | loading.start(); 35 | loading.done(); 36 | ``` 37 | 38 | 39 | ### 外链引入方式 40 | 41 | 全局实例：`LegoLoadingController` 42 | 43 | ```html 44 | 45 | 46 | var loading = new LegoLoadingController(); 47 | loading.start(); 48 | loading.done(); 49 | ``` 50 | 51 | 52 | ## API 53 | 54 | ### 方法 55 | 56 | #### `start()` 57 | 58 | 开始执行loading； 59 | 60 | ```javascript 61 | loading.start(); 62 | ``` 63 | 64 | #### `done()` 65 | 66 | done方法使当前的loading进度设置到100%； 67 | 68 | ```javascript 69 | loading.done(); 70 | ``` 71 | 72 | ### 参数 73 | 74 | `var loading = new LegoLoading(config)`; 75 | 76 | 配置项 | 类型 | 默认值 | 说明 77 | ---------- | -------- | ------------ | ---------------------------------------------------- 78 | `theme` | String | `default` | **可选值：** `default`：默认样式，提供一个默认样式名`ext-legoLoadingDefault`；`clean`：不生成任何的dom结构，只提供一个progress的数值返回；或者其他自定义样式名 79 | `text` | String | 空 | 显示的文字，当text中包含`${progress}`的时候，会自动替换为当前的进度百分比 80 | `progress` | Function | 无 | 进度回调函数，每一次进度改变的时候都会执行。**参数：** `progress`：当前进度 81 | `complete` | Function | 无 | 进度为100%时候的回调 82 | 83 | ## 更换样式 84 | 85 | 在新建对象的时候，提供一个`theme`的参数用于设置自定义样式，传入参数即可。 86 | -------------------------------------------------------------------------------- /loading-controller/example/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | index 11 | 12 | 13 | 14 |
15 | 16 | 17 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /loading-controller/example/img/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyued/legolib/4c6a33b0f3c7d74ba2dafbd2e14a360693fdb1c7/loading-controller/example/img/loading.gif -------------------------------------------------------------------------------- /loading-controller/legoflow.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.51", 3 | "type": "PC", 4 | "assets": "", 5 | "es6": true, 6 | "webp": false, 7 | "legolib": false, 8 | "https": false, 9 | "hot": false, 10 | "isUglifyJs": true, 11 | "isPackVueStyle": false, 12 | "vue@2.1": false, 13 | "watch": [], 14 | "publicPath": "", 15 | "packImgSize": "", 16 | "packCommon": "", 17 | "other": "", 18 | "dist": "", 19 | "output": "", 20 | "shell": "./shell.js", 21 | "alias": {}, 22 | "global": {}, 23 | "externals": {}, 24 | "proxy": {}, 25 | "ts": {}, 26 | "cache": "timestamp", 27 | "user.dev.args": {}, 28 | "user.build.args": {}, 29 | "env": {}, 30 | "build.move": [], 31 | "build.env": "", 32 | "build.zip": "", 33 | "img.folder": "", 34 | "html.folder": "", 35 | "js.folder": "", 36 | "export.folder": "" 37 | } 38 | -------------------------------------------------------------------------------- /loading-controller/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lego-loadingController", 3 | "version": "0.0.1", 4 | "repository": {}, 5 | "author": "UED.jianjun", 6 | "license": "MIT" 7 | } -------------------------------------------------------------------------------- /loading-controller/shell.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | 5 | module.exports = ( param ) => { 6 | const { fs, del, folder, messager, args, gulp, shell } = param; 7 | 8 | const dist = path.resolve( folder, './dist' ); 9 | const example = path.resolve( folder, './example' ); 10 | 11 | fs.copySync( dist, example, { overwrite: true } ); 12 | 13 | del([ dist ], { force: true }, () => { 14 | gulp.src( `${ example }/js/*.min.js `) 15 | .pipe( gulp.dest( dist ) ) 16 | .on( 'end', ( ) => { 17 | messager.success(); 18 | }) 19 | }); 20 | } 21 | -------------------------------------------------------------------------------- /loading-controller/src/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | index 11 | 12 | 13 | 14 |
15 | 16 | 17 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /loading-controller/src/img/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyued/legolib/4c6a33b0f3c7d74ba2dafbd2e14a360693fdb1c7/loading-controller/src/img/loading.gif -------------------------------------------------------------------------------- /loading-controller/src/js/export/img/loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyued/legolib/4c6a33b0f3c7d74ba2dafbd2e14a360693fdb1c7/loading-controller/src/js/export/img/loading.png -------------------------------------------------------------------------------- /loading-controller/src/js/export/style/loading.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | 4 | .legoLoading{ 5 | background-color: #fff; 6 | position: fixed; 7 | left: 0; 8 | top: 0; 9 | right: 0; 10 | bottom: 0; 11 | transition: opacity ease .4s; 12 | font-size: 0; 13 | text-align: center; 14 | z-index: 1000000; 15 | &.is-legoLoadingComplete{ 16 | opacity: 0; 17 | filter: alpha(opacity = 0) 18 | } 19 | &.ext-legoLoadingDefault{ 20 | .legoLoading__con{ 21 | width: 120px; 22 | } 23 | .legoLoading__loader{ 24 | width: 50px; 25 | height: 50px; 26 | background-image: url('https://s1.yy.com/ued_web_static/common/img/loading2.gif'); 27 | background-size: 100% 100%; 28 | margin-left: auto; 29 | margin-right: auto; 30 | } 31 | } 32 | } 33 | .legoLoading__content{ 34 | display: inline-block; 35 | _display: inline; 36 | vertical-align: middle; 37 | text-align: center; 38 | 39 | } 40 | .legoLoading__pos{ 41 | width: 0; 42 | height: 100%; 43 | display: inline-block; 44 | vertical-align: middle; 45 | } 46 | .legoLoading__icon { 47 | img{ 48 | width: 100%; 49 | height: 100%; 50 | } 51 | } 52 | .legoLoading__text{ 53 | font-size: 12px; 54 | line-height: 25px; 55 | } 56 | -------------------------------------------------------------------------------- /loading-controller/src/js/export/tpl/body.tpl: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | {{ if ($data.text != '') }} 5 |
6 | {{ $data.text }} 7 |
8 | {{ /if }} 9 |
10 | 11 | -------------------------------------------------------------------------------- /loading-controller/src/js/export/tpl/body.tpl.js: -------------------------------------------------------------------------------- 1 | /*TMODJS:{"version":150,"md5":"f9dc98a80aabbb6a063fb40ca1dc24c7"}*/ 2 | template("/Users/liveme/Sites/git@legolib-dev/loading-controller/src/js/export/tpl/body",function(a){"use strict";var b=this,c=(b.$helpers,b.$escape),d="";return d+='
',""!=a.text&&(d+='
',d+=c(a.text),d+="
"),d+='
',new String(d)}); -------------------------------------------------------------------------------- /loading-controller/src/js/index.js: -------------------------------------------------------------------------------- 1 | 2 | var LegoLoading = require('./export/loading-controller'); 3 | 4 | window.onload=function(){ 5 | var time = new Date().getTime(); 6 | window.loading = new LegoLoading({ 7 | // theme:'clean', 8 | text:'当前进度：${progress}', 9 | progress:function (progress) { 10 | console.log(progress); 11 | document.querySelector('.line').style['width'] = document.body.clientWidth * (progress / 100 ) + 'px'; 12 | document.querySelector('.line').innerHTML=progress; 13 | if(progress == 90){ 14 | console.log('总时间'+(new Date().getTime() - time) / 1000); 15 | } 16 | }, 17 | complete: function () { 18 | console.log('已经完成') 19 | }, 20 | debug:true 21 | }) 22 | 23 | loading.start(); 24 | // loading.done(); 25 | } 26 | -------------------------------------------------------------------------------- /loading-controller/src/sass/_img.scss: -------------------------------------------------------------------------------- 1 | // ----------------------------------------------- 2 | %loading { 3 | width: 100px; 4 | height: 100px; 5 | background-image: url('../img/loading.gif'); 6 | background-size: contain; 7 | background-repeat: no-repeat; 8 | } 9 | %loading.gif { 10 | width: 100px; 11 | height: 100px; 12 | background-image: url('../img/loading.gif'); 13 | background-size: contain; 14 | background-repeat: no-repeat; 15 | } 16 | // ----------------------------------------------- 17 | -------------------------------------------------------------------------------- /loading-controller/src/sass/base/_base.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* 3 | * @file: 基础设施 4 | * @update: 2015-06-03 17:28:19 5 | */ 6 | 7 | @import "variable"; // 变量配置 8 | @import "mixins"; 9 | @import "normalize"; 10 | @import "reset"; // 重置 11 | @import "utility"; // 工具 12 | @import "print"; // 打印 13 | -------------------------------------------------------------------------------- /loading-controller/src/sass/base/_print.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* 3 | * @file: 打印样式 4 | * @update: 2015-06-03 16:49:29 5 | * @source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css 6 | */ 7 | 8 | @media print, 9 | (min-resolution: 1.25dppx), 10 | (min-resolution: 120dpi) { 11 | /* Style adjustments for high resolution devices */ 12 | } 13 | 14 | /* ========================================================================== 15 | Print styles. 16 | Inlined to avoid the additional HTTP request: 17 | http://www.phpied.com/delay-loading-your-print-css/ 18 | ========================================================================== */ 19 | 20 | @media print { 21 | *, 22 | *:before, 23 | *:after { 24 | background: transparent !important; 25 | color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */ 26 | box-shadow: none !important; 27 | text-shadow: none !important; 28 | } 29 | 30 | a, 31 | a:visited { 32 | text-decoration: underline; 33 | } 34 | 35 | a[href]:after { 36 | content: " (" attr(href) ")"; 37 | } 38 | 39 | abbr[title]:after { 40 | content: " (" attr(title) ")"; 41 | } 42 | 43 | /* 44 | * Don't show links that are fragment identifiers, 45 | * or use the `javascript:` pseudo protocol 46 | */ 47 | 48 | a[href^="#"]:after, 49 | a[href^="javascript:"]:after { 50 | content: ""; 51 | } 52 | 53 | pre, 54 | blockquote { 55 | border: 1px solid #999; 56 | page-break-inside: avoid; 57 | } 58 | 59 | /* 60 | * Printing Tables: 61 | * http://css-discuss.incutio.com/wiki/Printing_Tables 62 | */ 63 | 64 | thead { 65 | display: table-header-group; 66 | } 67 | 68 | tr, 69 | img { 70 | page-break-inside: avoid; 71 | } 72 | 73 | img { 74 | max-width: 100% !important; 75 | } 76 | 77 | p, 78 | h2, 79 | h3 { 80 | orphans: 3; 81 | widows: 3; 82 | } 83 | 84 | h2, 85 | h3 { 86 | page-break-after: avoid; 87 | } 88 | 89 | .u-printHide { 90 | display: none !important; 91 | } 92 | 93 | } 94 | -------------------------------------------------------------------------------- /loading-controller/src/sass/base/_reset.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* 3 | * @file: 重置样式 4 | * @update: 2016-07-27 14:34:24 5 | */ 6 | 7 | body { 8 | font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; 9 | color: $base-text-color; 10 | overflow-y: auto; 11 | -webkit-font-smoothing: subpixel-antialiased; 12 | } 13 | a { 14 | text-decoration: none; 15 | color: nth($base-link-color, 1); 16 | &:hover { 17 | text-decoration: $base-link-decoration; 18 | color: nth($base-link-color, 2); 19 | } 20 | } 21 | 22 | /* 去除现代浏览器图片底部的空隙 */ 23 | img { 24 | vertical-align: top; 25 | } 26 | em { 27 | font-style: normal; 28 | } 29 | ol, ul, menu { 30 | list-style: none outside none; 31 | } 32 | fieldset, iframe { 33 | border: 0 none; 34 | } 35 | dl, dt, dd, ul, ol, li, 36 | h1, h2, h3, h4, h5, h6, 37 | pre, code, blockquote, 38 | form, fieldset, legend, input, button, textarea, 39 | th, td, hr, p, 40 | article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 41 | margin: 0; 42 | padding: 0; 43 | } 44 | 45 | /* IE6 7 8(q) bug 显示为行内表现 */ 46 | iframe { 47 | display: block; 48 | } 49 | 50 | /* IE bug fixed: th 不继承 text-align */ 51 | th { 52 | text-align: inherit; 53 | } 54 | 55 | /* 修正表单元素不继承父级字体族的问题 */ 56 | input, button, select, textarea { 57 | font-family: $base-font-family; 58 | } 59 | 60 | /** 61 | * 移除 IE6-11 中默认的垂直滚动条 62 | * 禁止水平拖动，防止破坏布局 63 | */ 64 | textarea { 65 | @include resizable(vertical); 66 | } 67 | 68 | /** 69 | * 修正 Firefox 19+ Placeholder 设置了opacity 的问题 70 | */ 71 | input::-moz-placeholder, 72 | textarea::-moz-placeholder { 73 | color: darkGray; 74 | opacity: 1; 75 | } 76 | 77 | /* 一致的 del 样式 */ 78 | del { 79 | text-decoration: line-through; 80 | } 81 | 82 | abbr { 83 | cursor: help; 84 | } 85 | 86 | /* pre允许溢出滚动 */ 87 | pre { 88 | overflow: auto; 89 | } 90 | 91 | /* 以下为排版样式 */ 92 | 93 | hr { 94 | height: 10px; 95 | margin-bottom: .8em; 96 | border: 0; 97 | border-bottom: 1px solid #cfcfcf; 98 | } 99 | 100 | blockquote { 101 | position: relative; 102 | padding: 0 15px; 103 | margin: 15px 0; 104 | border-left: 4px solid #ddd; 105 | color: #999; 106 | } 107 | 108 | -------------------------------------------------------------------------------- /loading-controller/src/sass/base/_variable.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | /* 4 | * @file: 全局变量配置 5 | * @update: 2016-07-27 10:51:13 6 | */ 7 | 8 | /* 排版配置 */ 9 | 10 | /* 11 | * 字体策略 12 | * 1. 默认：使用无衬线体，OSX中文使用苹方与冬青黑体，Windows中文使用微软雅黑，Linux中文使用文泉雅黑； 13 | * 2. 黑体：通过字体辅助类.u-heiti 或者 @extend %u-heiti来调用； 14 | * 3. 宋体：通过字体辅助类.u-songti 或者 @extend %u-songti来调用； 15 | * 3. 楷体：通过字体辅助类.u-kaiti 或者 @extend %u-kaiti来调用； 16 | * 4. 参考链接：http://www.zhihu.com/question/19911793 http://zenozeng.github.io/fonts.css/ 17 | */ 18 | $base-font-size : 12px !default; // 字号 19 | $base-font-family : "San Francisco", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif !default; // 字体族 20 | $base-font-weight : 300 !default; // 字重 21 | $base-line-height : 1.5 !default; // 行高 22 | $base-link-decoration : underline !default; // 链接下划线 23 | 24 | /* 颜色配置 */ 25 | $base-text-color : #333 !default; // 文本颜色 26 | $base-bg-color : #fff !default; // 背景颜色 27 | $base-link-color : #333 #fa0 !default; // 链接颜色[default，hover] 28 | 29 | -------------------------------------------------------------------------------- /loading-controller/src/sass/index.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* 3 | * @file: 入口SASS 4 | * @author: 5 | * @update: 6 | */ 7 | @import "base/base"; // 样式基础设置 8 | @import "img"; // sprites切片占位符 9 | * { 10 | margin: 0; 11 | padding: 0; 12 | } 13 | body { 14 | // background-color: #000; 15 | text-align: center; 16 | } 17 | .line { 18 | width: 0; 19 | height: 20px; 20 | background: linear-gradient(left, red,blue); 21 | position: absolute; 22 | left: 0; 23 | top: 0; 24 | color: #fff; 25 | } 26 | -------------------------------------------------------------------------------- /page-slider/README.md: -------------------------------------------------------------------------------- 1 | # page-slider 2 | 3 | ## 说明 4 | 5 | 简单的页面滚动控制器，监听页面垂直和水平方向的滚动。 6 | 7 | * 支持**外链**或者**ADM/CMD/commonJS**等多种形式； 8 | * 本组件使用 [legoFlow](https://legoflow.com/) 进行开发构建； 9 | * 本组件无第三方插件依赖； 10 | 11 | ## DEMO 12 | 13 | ![qrcode](https://user-images.githubusercontent.com/1295348/33515389-7e9da846-d79d-11e7-8925-379be5532f4a.jpg) 14 | 15 | 16 | ## 使用 17 | 18 | 页面结构： 19 | 20 | ````html 21 |
22 |
23 |

111

24 |
25 |
26 |

222

27 |
28 |
29 |

333

30 |
31 |
32 | ```` 33 | 34 | ### 模块引入方式 35 | 36 | ````javascript 37 | import Slider from 'legolib/page-slider/index.js'; 38 | 39 | var pageslider = new Slider({ 40 | container: ".page", 41 | direction: "y", 42 | onSlide: function(current, previous, direction) { 43 | var previousSection = this.children[previous]; // 滑动前的section 44 | var currentSection = this.children[current]; // 滑动后（当前）的section 45 | var scrollTimer = null; 46 | previousSection.classList.add("is-out"); 47 | if (scrollTimer) { 48 | clearTimeout(scrollTimer); 49 | } 50 | scrollTimer = setTimeout(function() { 51 | previousSection.classList.remove("is-in") 52 | }, 700); 53 | currentSection.classList.add("is-in"); 54 | currentSection.classList.remove("is-out"); 55 | } 56 | }); 57 | ```` 58 | 59 | 60 | ### 外链引入方式 61 | 62 | 全局实例：`LegoPageSlider` 63 | 64 | ```html 65 | 66 | 67 | var modal = new LegoPageSlider(config); 68 | ``` 69 | 70 | 71 | ## API 72 | 73 | ### 配置项 74 | 75 | |参数名|类型|是否必填|默认值|说明| 76 | | ------| ------ | ------ | ------ | ------ | 77 | |`container`|`string`|是|`.page`|页面外部容器的选择器| 78 | |`direction`|`string`|否|`y`|滑动方向，有两个可选值：`y`表示垂直方向滑动、`x`表示水平方向滑动| 79 | |`onSlide`|`function`|否|无|滑动回调监听，有三个返回值：`current`表示当前section索引值、`previous`表示上一个section索引值、`direction`表示滑动方向（`up、down、left、right`）| 80 | 81 | -------------------------------------------------------------------------------- /page-slider/legoflow.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.51", 3 | "type": "clean", 4 | "assets": "", 5 | "es6": true, 6 | "webp": false, 7 | "legolib": false, 8 | "https": false, 9 | "hot": false, 10 | "isUglifyJs": true, 11 | "isPackVueStyle": false, 12 | "vue@2.1": false, 13 | "watch": [], 14 | "publicPath": "", 15 | "packImgSize": "", 16 | "packCommon": "", 17 | "other": "", 18 | "dist": "", 19 | "output": "", 20 | "shell": "./shell.js", 21 | "alias": {}, 22 | "global": {}, 23 | "externals": {}, 24 | "proxy": {}, 25 | "ts": {}, 26 | "cache": "timestamp", 27 | "user.dev.args": {}, 28 | "user.build.args": {}, 29 | "env": {}, 30 | "build.move": [], 31 | "build.env": "", 32 | "build.zip": "", 33 | "img.folder": "", 34 | "html.folder": "", 35 | "js.folder": "", 36 | "export.folder": "" 37 | } 38 | -------------------------------------------------------------------------------- /page-slider/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lego-pageSlider", 3 | "version": "0.1.1", 4 | "repository": {}, 5 | "author": "UED.David", 6 | "license": "MIT" 7 | } -------------------------------------------------------------------------------- /page-slider/shell.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | 5 | module.exports = ( param ) => { 6 | const { fs, del, folder, messager, args, gulp, shell } = param; 7 | 8 | const dist = path.resolve( folder, './dist' ); 9 | const example = path.resolve( folder, './example' ); 10 | 11 | fs.copySync( dist, example, { overwrite: true } ); 12 | 13 | del([ dist ], { force: true }, () => { 14 | gulp.src( `${ example }/js/*.min.js `) 15 | .pipe( gulp.dest( dist ) ) 16 | .on( 'end', ( ) => { 17 | messager.success(); 18 | }) 19 | }); 20 | } 21 | -------------------------------------------------------------------------------- /page-slider/src/js/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file : 业务逻辑demo 3 | * @author : David 4 | * @update : 2016-08-04 20:38:22 5 | */ 6 | 7 | 8 | import Slider from './export/page-slider.js'; 9 | 10 | var pageslider = new Slider({ 11 | container: ".page", 12 | direction: "y", 13 | onSlide: function(current, previous, direction) { 14 | 15 | var previousSection = this.children[previous]; // 滑动前的section 16 | var currentSection = this.children[current]; // 滑动后（当前）的section 17 | var scrollTimer = null; 18 | 19 | console.log(direction); 20 | 21 | previousSection.classList.add("is-out"); 22 | 23 | if (scrollTimer) { 24 | clearTimeout(scrollTimer); 25 | } 26 | scrollTimer = setTimeout(function() { 27 | previousSection.classList.remove("is-in") 28 | }, 700); 29 | 30 | currentSection.classList.add("is-in"); 31 | currentSection.classList.remove("is-out"); 32 | 33 | } 34 | }); 35 | 36 | -------------------------------------------------------------------------------- /page-slider/src/sass/_img.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyued/legolib/4c6a33b0f3c7d74ba2dafbd2e14a360693fdb1c7/page-slider/src/sass/_img.scss -------------------------------------------------------------------------------- /page-slider/src/sass/base/_base.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // 引入css 适配方案 4 | @import "flexible"; 5 | 6 | // 引入重置样式 7 | @import "normalize"; 8 | 9 | // 引入工具类 10 | @import "tool"; 11 | 12 | /* 全局设置 */ 13 | *, 14 | *:before, 15 | *:after{ 16 | font-family: "San Francisco", "Helvetica Neue", Helvetica, sans-serif; 17 | font-weight: 300; 18 | -webkit-box-sizing: border-box; 19 | -moz-box-sizing: border-box; 20 | box-sizing: border-box; 21 | -webkit-appearance: none; 22 | appearance: none; 23 | -webkit-tap-highlight-color: rgba(0,0,0,0); 24 | } 25 | 26 | /* 设置基本html,body样式 */ 27 | html,body{ 28 | margin: 0 auto; 29 | padding: 0; 30 | } 31 | 32 | /* 设置图片最大宽度 */ 33 | img{ 34 | max-width: 100%; 35 | } 36 | 37 | /* 清除默认按钮表现形式 */ 38 | button{ 39 | -webkit-appearance: none; 40 | appearance: none; 41 | } 42 | 43 | /* 设置表格默认样式 */ 44 | table { 45 | border-collapse: collapse; 46 | border-spacing: 0; 47 | } 48 | 49 | /* 文本域禁止拖拉放大 */ 50 | textarea { 51 | resize: none; 52 | } 53 | 54 | a { 55 | text-decoration: none; 56 | color: currentColor; 57 | } 58 | 59 | img { 60 | vertical-align: top; 61 | } 62 | 63 | i, em { 64 | font-style: normal; 65 | } 66 | 67 | ol, ul, li, menu { 68 | list-style: none outside none; 69 | } 70 | 71 | fieldset, iframe, abbr, acronym { 72 | border: 0 none; 73 | } 74 | 75 | dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, hr, 76 | article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 77 | margin: 0; 78 | padding: 0; 79 | } 80 | 81 | del { 82 | text-decoration:line-through; 83 | } 84 | -------------------------------------------------------------------------------- /page-slider/src/sass/base/_flexible.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Lego纯CSS自适应方案 4 | 5 | 1，设计稿尺寸 6 | 7 | 默认设计稿宽带 750px，可通过变量 $psd-size 进行修改 8 | 9 | 2，对应的 meta 标签写法： 10 | 11 | 12 | 3，px to rem 需要用到小学算术 13 | 14 | 100px = 1rem / 1px = 0.01rem 15 | 16 | Notes: 17 | 18 | 断点参考：http://screensiz.es/phone 19 | 20 | 横屏断点：384px, 480px, 533px, 568px, 640px, 667px, 699px, 736px 21 | 某些手机厂商系统的虚拟SmartBar会改变Screen的值，又是坑，建议统一横屏提示规避 22 | 23 | 避免使用 min-device-width 24 | https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=zh-cn#min-device-width- 25 | 26 | __Changelog__ 27 | 2016.05.04：添加 393px 699px 断点，小米note 1080 屏幕，DPR=2.75 28 | 29 | */ 30 | 31 | // 定义基准数 32 | $base-fontSize: 100px !default; 33 | 34 | // 定义设计稿尺寸 35 | $psd-size: 750px !default; 36 | 37 | // 定义竖屏断点 38 | $responsives: 320px, 360px, 375px, 393px, 400px, 414px; 39 | 40 | // 定义根元素font-size 41 | @mixin rem($values){ 42 | font-size: $values * $base-fontSize / $psd-size; 43 | } 44 | 45 | // 遍历输出断点 46 | @each $responsive in $responsives{ 47 | @media only screen and (min-width: #{$responsive}) { 48 | html{ @include rem($responsive);} 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /page-slider/src/sass/index.scss: -------------------------------------------------------------------------------- 1 | @import "base/base"; // 基础scss模块 2 | @import "img"; -------------------------------------------------------------------------------- /smart-viewport/README.md: -------------------------------------------------------------------------------- 1 | # SmartViewPort 2 | 3 | ## 说明 4 | 适用于固定viewport宽度的移动端适配方案，根据环境动态设置viewport宽度，主要对Android4.4以下做兼容处理。 5 | 固定viewport宽度的方案目前为止用着都很顺，最明显的好处有两个： 6 | 7 | 1. 简单直观，直接按照设计稿1:1对应，设计稿是30px，CSS就写30px，不用额外运算； 8 | 2. 避免各种小数点，1px边框等问题的复杂化； 9 | 10 | 11 | ## DEMO 12 | 13 | ![qrcode](https://user-images.githubusercontent.com/1295348/33514576-455a9e1a-d791-11e7-8008-e1349c4e26c3.jpg) 14 | 15 | 16 | ## 使用 17 | 18 | 在`head`标签的最上面通过内联方式添加SmartViewPort脚本即可，建议压缩处理。注意，HTML上不需要也不要写meta viewport，不然有可能会导致部分Android刚打开页面时产生抖动。 19 | 20 | ```html 21 | 22 | 23 | 24 | 25 | 28 | 29 | 30 | 31 | 32 | 33 | SmartViewPort 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | ``` 47 | 48 | 默认viewport宽度是**750**，如需自定义，可在`new SmartViewPort`时传入宽度： 49 | 50 | ```javascript 51 | new SmartViewPort(1334); 52 | ``` 53 | 54 | 55 | ## API 56 | ### 构造方法 57 | | 方法 | 参数 | 参数类型 | 默认值 | 说明 | 58 | | ------------- |------------- | -----| -----| -----| 59 | | SmartViewPort| width| Number | 750 | viewport宽度 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /smart-viewport/dist/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 10 | 11 | 12 | 13 | SmartViewPort 14 | 15 | 16 | 17 | 18 | 19 |
20 |
750x100
21 |
375x100
22 |
375x100
23 |
250x100
24 |
250x100
25 |
250x100
26 |
27 | 28 |
29 |

24px: 简体中文 English 1234567890

30 |

28px: 简体中文 English 1234567890

31 |

32px: 简体中文 English 1234567890

32 |

36px: 简体中文 English 1234567890

33 |

40px: 简体中文 English 1234567890

34 |
35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /smart-viewport/dist/assets/smart-viewport.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * SmartViewPort 3 | * @desc: 适用于固定viewport宽度的移动端适配方案，根据环境动态设置viewport宽度，主要对安卓4.4以下做兼容处理 4 | */ 5 | 6 | var SmartViewPort = function(width){ 7 | var realWidth = width || 750; 8 | var isAndroid = /Android (\d+\.\d+)/.test(navigator.userAgent); 9 | var viewportScript = document.querySelector('[name="viewport"]'); 10 | if (viewportScript) { 11 | document.head.removeChild(viewportScript); 12 | } 13 | if (isAndroid) { 14 | var version = parseFloat(RegExp.$1); 15 | if (version > 2.3 && version < 4.4) { 16 | var phoneScale = parseInt(window.screen.width) / realWidth; 17 | var content = "width=" + realWidth + ", minimum-scale=" + phoneScale + ", maximum-scale = " + phoneScale + ", target-densitydpi=device-dpi"; 18 | this.setContent(content); 19 | } 20 | else { 21 | var content = "width=" + realWidth + ", user-scalable=no"; 22 | this.setContent(content); 23 | } 24 | } 25 | else { 26 | var content = "width=" + realWidth + ", user-scalable=no"; 27 | this.setContent(content); 28 | }; 29 | } 30 | SmartViewPort.prototype.setContent = function(content){ 31 | var tag = document.createElement("meta"); 32 | tag.name = "viewport"; 33 | tag.content = content; 34 | document.getElementsByTagName("head")[0].appendChild(tag); 35 | }; 36 | new SmartViewPort(); -------------------------------------------------------------------------------- /smart-viewport/dist/assets/smart-viewport.min.js: -------------------------------------------------------------------------------- 1 | var SmartViewPort=function(e){var t=e||750,n=/Android (\d+\.\d+)/.test(navigator.userAgent),a=document.querySelector('[name="viewport"]');if(a&&document.head.removeChild(a),n){var r=parseFloat(RegExp.$1);if(r>2.3&&4.4>r){var i=parseInt(window.screen.width)/t,o="width="+t+", minimum-scale="+i+", maximum-scale = "+i+", target-densitydpi=device-dpi";this.setContent(o)}else{var o="width="+t+", user-scalable=no";this.setContent(o)}}else{var o="width="+t+", user-scalable=no";this.setContent(o)}};SmartViewPort.prototype.setContent=function(e){var t=document.createElement("meta");t.name="viewport",t.content=e,document.getElementsByTagName("head")[0].appendChild(t)},new SmartViewPort; -------------------------------------------------------------------------------- /smart-viewport/dist/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * SmartViewPort 3 | * @desc: 适用于固定viewport宽度的移动端适配方案，根据环境动态设置viewport宽度，主要对安卓4.4以下做兼容处理 4 | */ 5 | 6 | var SmartViewPort = function(width){ 7 | var realWidth = width || 750; 8 | var isAndroid = /Android (\d+\.\d+)/.test(navigator.userAgent); 9 | var viewportScript = document.querySelector('[name="viewport"]'); 10 | if (viewportScript) { 11 | document.head.removeChild(viewportScript); 12 | } 13 | if (isAndroid) { 14 | var version = parseFloat(RegExp.$1); 15 | if (version > 2.3 && version < 4.4) { 16 | var phoneScale = parseInt(window.screen.width) / realWidth; 17 | var content = "width=" + realWidth + ", minimum-scale=" + phoneScale + ", maximum-scale = " + phoneScale + ", target-densitydpi=device-dpi"; 18 | this.setContent(content); 19 | } 20 | else { 21 | var content = "width=" + realWidth + ", user-scalable=no"; 22 | this.setContent(content); 23 | } 24 | } 25 | else { 26 | var content = "width=" + realWidth + ", user-scalable=no"; 27 | this.setContent(content); 28 | }; 29 | } 30 | SmartViewPort.prototype.setContent = function(content){ 31 | var tag = document.createElement("meta"); 32 | tag.name = "viewport"; 33 | tag.content = content; 34 | document.getElementsByTagName("head")[0].appendChild(tag); 35 | }; 36 | new SmartViewPort(); -------------------------------------------------------------------------------- /smart-viewport/dist/index.min.js: -------------------------------------------------------------------------------- 1 | var SmartViewPort=function(e){var t=e||750,n=/Android (\d+\.\d+)/.test(navigator.userAgent),a=document.querySelector('[name="viewport"]');if(a&&document.head.removeChild(a),n){var r=parseFloat(RegExp.$1);if(r>2.3&&4.4>r){var i=parseInt(window.screen.width)/t,o="width="+t+", minimum-scale="+i+", maximum-scale = "+i+", target-densitydpi=device-dpi";this.setContent(o)}else{var o="width="+t+", user-scalable=no";this.setContent(o)}}else{var o="width="+t+", user-scalable=no";this.setContent(o)}};SmartViewPort.prototype.setContent=function(e){var t=document.createElement("meta");t.name="viewport",t.content=e,document.getElementsByTagName("head")[0].appendChild(t)},new SmartViewPort; -------------------------------------------------------------------------------- /smart-viewport/legoflow.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.51", 3 | "type": "clean", 4 | "assets": "", 5 | "es6": true, 6 | "webp": false, 7 | "legolib": false, 8 | "https": false, 9 | "hot": false, 10 | "isUglifyJs": true, 11 | "isPackVueStyle": false, 12 | "vue@2.1": false, 13 | "watch": [], 14 | "publicPath": "", 15 | "packImgSize": "", 16 | "packCommon": "", 17 | "other": "", 18 | "dist": "", 19 | "output": "", 20 | "shell": "", 21 | "alias": {}, 22 | "global": {}, 23 | "externals": {}, 24 | "proxy": {}, 25 | "ts": {}, 26 | "cache": "timestamp", 27 | "user.dev.args": {}, 28 | "user.build.args": {}, 29 | "env": {}, 30 | "build.move": [], 31 | "build.env": "", 32 | "build.zip": "", 33 | "img.folder": "", 34 | "html.folder": "", 35 | "js.folder": "", 36 | "export.folder": "" 37 | } -------------------------------------------------------------------------------- /smart-viewport/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "smart-viewport", 3 | "version": "0.0.1", 4 | "repository": {}, 5 | "author": "UED.David", 6 | "license": "MIT" 7 | } -------------------------------------------------------------------------------- /smart-viewport/src/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 10 | 11 | 12 | 13 | SmartViewPort 14 | 15 | 16 | 17 | 18 | 19 |
20 |
750x100
21 |
375x100
22 |
375x100
23 |
250x100
24 |
250x100
25 |
250x100
26 |
27 | 28 |
29 |

24px: 简体中文 English 1234567890

30 |

28px: 简体中文 English 1234567890

31 |

32px: 简体中文 English 1234567890

32 |

36px: 简体中文 English 1234567890

33 |

40px: 简体中文 English 1234567890

34 |
35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /smart-viewport/src/assets/smart-viewport.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * SmartViewPort 3 | * @desc: 适用于固定viewport宽度的移动端适配方案，根据环境动态设置viewport宽度，主要对安卓4.4以下做兼容处理 4 | */ 5 | 6 | var SmartViewPort = function(width){ 7 | var realWidth = width || 750; 8 | var isAndroid = /Android (\d+\.\d+)/.test(navigator.userAgent); 9 | var viewportScript = document.querySelector('[name="viewport"]'); 10 | if (viewportScript) { 11 | document.head.removeChild(viewportScript); 12 | } 13 | if (isAndroid) { 14 | var version = parseFloat(RegExp.$1); 15 | if (version > 2.3 && version < 4.4) { 16 | var phoneScale = parseInt(window.screen.width) / realWidth; 17 | var content = "width=" + realWidth + ", minimum-scale=" + phoneScale + ", maximum-scale = " + phoneScale + ", target-densitydpi=device-dpi"; 18 | this.setContent(content); 19 | } 20 | else { 21 | var content = "width=" + realWidth + ", user-scalable=no"; 22 | this.setContent(content); 23 | } 24 | } 25 | else { 26 | var content = "width=" + realWidth + ", user-scalable=no"; 27 | this.setContent(content); 28 | }; 29 | } 30 | SmartViewPort.prototype.setContent = function(content){ 31 | var tag = document.createElement("meta"); 32 | tag.name = "viewport"; 33 | tag.content = content; 34 | document.getElementsByTagName("head")[0].appendChild(tag); 35 | }; 36 | new SmartViewPort(); -------------------------------------------------------------------------------- /smart-viewport/src/assets/smart-viewport.min.js: -------------------------------------------------------------------------------- 1 | var SmartViewPort=function(e){var t=e||750,n=/Android (\d+\.\d+)/.test(navigator.userAgent),a=document.querySelector('[name="viewport"]');if(a&&document.head.removeChild(a),n){var r=parseFloat(RegExp.$1);if(r>2.3&&4.4>r){var i=parseInt(window.screen.width)/t,o="width="+t+", minimum-scale="+i+", maximum-scale = "+i+", target-densitydpi=device-dpi";this.setContent(o)}else{var o="width="+t+", user-scalable=no";this.setContent(o)}}else{var o="width="+t+", user-scalable=no";this.setContent(o)}};SmartViewPort.prototype.setContent=function(e){var t=document.createElement("meta");t.name="viewport",t.content=e,document.getElementsByTagName("head")[0].appendChild(t)},new SmartViewPort; -------------------------------------------------------------------------------- /smart-viewport/src/js/main.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyued/legolib/4c6a33b0f3c7d74ba2dafbd2e14a360693fdb1c7/smart-viewport/src/js/main.js -------------------------------------------------------------------------------- /smart-viewport/src/sass/_img.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyued/legolib/4c6a33b0f3c7d74ba2dafbd2e14a360693fdb1c7/smart-viewport/src/sass/_img.scss -------------------------------------------------------------------------------- /smart-viewport/src/sass/base/_base.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * 基础模块 & 全局变量配置 3 | * 4 | */ 5 | 6 | // 文本配置 7 | $b-font-size : 14px !default; 8 | $b-font-family : "San Francisco", "Helvetica Neue", Helvetica, sans-serif !default; 9 | $b-font-weight : 300 !default; 10 | $b-line-height : 1.5 !default; 11 | $b-link-decoration : underline !default; 12 | 13 | // 颜色配置 14 | $c-text : #333 !default; 15 | $c-background : #fff !default; 16 | $c-link : #333 #fa0 !default; 17 | 18 | // 基础模块 19 | @import "normalize"; 20 | @import "reset"; 21 | @import "flexible"; 22 | // @import "orientation"; 23 | @import "tool"; 24 | 25 | // todo: 横屏提示在安卓弹出键盘时被触发 -------------------------------------------------------------------------------- /smart-viewport/src/sass/base/_flexible.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Lego纯CSS自适应方案 4 | 5 | 1，设计稿尺寸 6 | 7 | 默认设计稿宽带 750px，可通过变量 $psd-size 进行修改 8 | 9 | 2，对应的 meta 标签写法： 10 | 11 | 12 | 3，px to rem 需要用到小学算术 13 | 14 | 100px = 1rem / 1px = 0.01rem 15 | 16 | Notes: 17 | 18 | 断点参考：http://screensiz.es/phone 19 | 20 | 横屏断点：384px, 480px, 533px, 568px, 640px, 667px, 699px, 736px 21 | 某些手机厂商系统的虚拟SmartBar会改变Screen的值，又是坑，建议统一横屏提示规避 22 | 23 | 避免使用 min-device-width 24 | https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=zh-cn#min-device-width- 25 | 26 | __Changelog__ 27 | 2016.05.04：添加 393px 699px 断点，小米note 1080 屏幕，DPR=2.75 28 | 2016.11.11: 参考 http://mydevice.io/devices/#sortSmartphones 添加部门安卓手机宽度 29 | 30 | */ 31 | 32 | // 定义基准数 33 | $base-fontSize: 100px !default; 34 | 35 | // 定义设计稿尺寸 36 | $psd-size: 750px !default; 37 | 38 | // 定义竖屏断点 39 | $responsives: 320px, 346px, 360px, 375px, 384px, 390px, 393px, 400px, 412px, 414px, 432px; 40 | 41 | // 定义根元素font-size 42 | @mixin rem($values){ 43 | font-size: $values * $base-fontSize / $psd-size; 44 | } 45 | 46 | // 遍历输出断点 47 | @each $responsive in $responsives{ 48 | @media only screen and (min-width: #{$responsive}) { 49 | html{ @include rem($responsive);} 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /smart-viewport/src/sass/base/_reset.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @file: 重置样式 3 | */ 4 | 5 | /* 全局设置 */ 6 | *, 7 | *:before, 8 | *:after{ 9 | font-family: "San Francisco", "Helvetica Neue", Helvetica, sans-serif; 10 | font-weight: 300; 11 | box-sizing: border-box; 12 | appearance: none; 13 | -webkit-tap-highlight-color: rgba(0,0,0,0); 14 | } 15 | 16 | /* 设置基本html,body样式 */ 17 | html,body{ 18 | margin: 0 auto; 19 | padding: 0; 20 | } 21 | 22 | /* 设置图片最大宽度 */ 23 | img{ 24 | max-width: 100%; 25 | } 26 | 27 | /* 清除默认按钮表现形式 */ 28 | button{ 29 | -webkit-appearance: none; 30 | appearance: none; 31 | } 32 | 33 | /* 设置表格默认样式 */ 34 | table { 35 | border-collapse: collapse; 36 | border-spacing: 0; 37 | } 38 | 39 | /* 文本域禁止拖拉放大 */ 40 | textarea { 41 | resize: none; 42 | } 43 | 44 | a { 45 | text-decoration: none; 46 | color: currentColor; 47 | } 48 | 49 | img { 50 | vertical-align: top; 51 | } 52 | 53 | i, em { 54 | font-style: normal; 55 | } 56 | 57 | ol, ul, li, menu { 58 | list-style: none outside none; 59 | } 60 | 61 | fieldset, iframe, abbr, acronym { 62 | border: 0 none; 63 | } 64 | 65 | dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, hr, 66 | article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 67 | margin: 0; 68 | padding: 0; 69 | } 70 | 71 | del { 72 | text-decoration:line-through; 73 | } 74 | -------------------------------------------------------------------------------- /smart-viewport/src/sass/main.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @import "base/_base"; 4 | @import "img"; 5 | 6 | body { 7 | font: 300 24px/1.5 "San Francisco", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; 8 | color: #333; 9 | a { 10 | text-decoration: none; 11 | color: #333; 12 | &:hover { 13 | text-decoration: underline; 14 | color: #333; 15 | } 16 | } 17 | } 18 | 19 | .layout { 20 | font-size: 0; 21 | div { 22 | height: 100px; 23 | line-height: 100px; 24 | text-align: center; 25 | display: inline-block; 26 | vertical-align: top; 27 | font-size: 26px; 28 | color: #fff; 29 | } 30 | } 31 | .item1 { 32 | width: 750px; 33 | background: #ED7A7D; 34 | } 35 | .item2 { 36 | width: 375px; 37 | background: #AA7DD3; 38 | } 39 | .item3 { 40 | width: 375px; 41 | background: #FBBA5C; 42 | } 43 | .item4 { 44 | width: 250px; 45 | background: #9ACD66; 46 | } 47 | .item5 { 48 | width: 250px; 49 | background: #49BCD6; 50 | } 51 | .item6 { 52 | width: 250px; 53 | background: #9ACD66; 54 | } 55 | 56 | .text{ 57 | padding: 20px 10px; 58 | P { 59 | line-height: 1.5; 60 | margin-bottom: 10px; 61 | } 62 | .px24 { 63 | font-size: 24px; 64 | } 65 | .px26 { 66 | font-size: 26px; 67 | } 68 | .px28 { 69 | font-size: 28px; 70 | } 71 | .px30 { 72 | font-size: 30px; 73 | } 74 | .px32 { 75 | font-size: 32px; 76 | } 77 | .px34 { 78 | font-size: 34px; 79 | } 80 | .px36 { 81 | font-size: 36px; 82 | } 83 | .px38 { 84 | font-size: 38px; 85 | } 86 | .px40 { 87 | font-size: 40px; 88 | } 89 | } 90 | 91 | -------------------------------------------------------------------------------- /tab-view-swiper/README.md: -------------------------------------------------------------------------------- 1 | # tab-view-swiper 2 | 3 | ## 说明 4 | 移动端tabView导航栏，支持swiper滑动效果。 5 | * 支持**外链**或者**ADM/CMD/commonJS**等多种形式； 6 | * 本组件使用 [legoFlow](https://legoflow.com/) 进行开发构建； 7 | * 本组件无第三方插件依赖； 8 | 9 | ## DEMO 10 | 11 | ![qrcode](https://user-images.githubusercontent.com/1295348/33515426-36cd2c70-d79e-11e7-886d-d73501e2ea77.jpg) 12 | 13 | 14 | ## 使用 15 | 16 | ### 模块引入方式 17 | 18 | ```javascript 19 | import LegoTabView from 'legolib/tab-view/index.js'; 20 | 21 | let navConfig = [ 22 | { 23 | title: '推荐', 24 | attr: 'data-id="11" data-role="first"' 25 | }, 26 | { 27 | title: '一起看', 28 | attr: 'data-id="11" data-index="test"' 29 | }, 30 | { 31 | title: '音乐' 32 | }, 33 | { 34 | title: 'YY', 35 | link: 'https://www.yy.com/' 36 | }, 37 | ]; 38 | 39 | var tabView = new LegoTabView({ 40 | container: '#header', 41 | navConfig: navConfig, 42 | activeIndex: 2, 43 | navEasing: 'easeInOut', 44 | switchCallBack: function(fromIndex, toIndex) { 45 | console.log(fromIndex, toIndex); 46 | } 47 | 48 | }); 49 | ``` 50 | 51 | 52 | ### 外链引入方式 53 | 54 | 全局实例：`LegoTabView` 55 | 56 | ```html 57 | 58 | 59 | var tab = new LegoTabView(config); 60 | ``` 61 | 62 | 63 | ## API 64 | ### 方法 65 | | 方法 | 参数 | 参数类型 | 说明 | 66 | | ------------- |------------- | -----| -----| 67 | | switchCallBack| fromIndex, toIndex| Number | 返回上一个item的索引和当前的索引值，从0开始| 68 | | switchTo | index | Number | 跳到某个item，index为item的索引，从0开始| 69 | 70 | ### 参数 71 | | 参数名 | 类型 | 是否必填 | 默认值 | 说明 | 备注 | 72 | |------|----|--------|------|----|----| 73 | | container | String | 是 | 无 | 包含tabView组件的外部容器|#id、data-*=xx、.class| 74 | | activeIndex | Number | 否 | 0 | 默认选中的item | item的索引，从0开始 | 75 | | navConfig | Array | 是 | 无 | 每个nav item的设置 | 每个item是一个object，可包含title（item的名称）、link（链接）、attr（属性）| 76 | | navEasing | String | 否 | easeInOut | 动画效果 | linear、easeInOut、easeOut、easeIn | 77 | 78 | ### 注意: 79 | 1. 支持页面链接上带activeIndex参数，滑到指定的item上。 80 | 2. 页面链接上带的activeIndex**优先级大于**初始化对象的时候配置的activeIndex。 81 | -------------------------------------------------------------------------------- /tab-view-swiper/example/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /tab-view-swiper/legoflow.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.51", 3 | "type": "clean", 4 | "assets": "", 5 | "es6": true, 6 | "webp": false, 7 | "legolib": false, 8 | "https": false, 9 | "hot": false, 10 | "isUglifyJs": true, 11 | "isPackVueStyle": false, 12 | "vue@2.1": false, 13 | "watch": [], 14 | "publicPath": "", 15 | "packImgSize": "", 16 | "packCommon": "", 17 | "other": "", 18 | "dist": "", 19 | "output": "", 20 | "shell": "./shell.js", 21 | "alias": {}, 22 | "global": {}, 23 | "externals": {}, 24 | "proxy": {}, 25 | "ts": {}, 26 | "cache": "timestamp", 27 | "user.dev.args": {}, 28 | "user.build.args": {}, 29 | "env": {}, 30 | "build.move": [], 31 | "build.env": "", 32 | "build.zip": "", 33 | "img.folder": "", 34 | "html.folder": "", 35 | "js.folder": "", 36 | "export.folder": "" 37 | } 38 | -------------------------------------------------------------------------------- /tab-view-swiper/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lego-tabView-swiper", 3 | "version": "1.0.0", 4 | "repository": {}, 5 | "author": "UED.Vicky", 6 | "license": "MIT" 7 | } -------------------------------------------------------------------------------- /tab-view-swiper/shell.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | 5 | module.exports = ( param ) => { 6 | const { fs, del, folder, messager, args, gulp, shell } = param; 7 | 8 | const dist = path.resolve( folder, './dist' ); 9 | const example = path.resolve( folder, './example' ); 10 | 11 | fs.copySync( dist, example, { overwrite: true } ); 12 | 13 | del([ dist ], { force: true }, () => { 14 | gulp.src( `${ example }/js/*.min.js `) 15 | .pipe( gulp.dest( dist ) ) 16 | .on( 'end', ( ) => { 17 | messager.success(); 18 | }) 19 | }); 20 | } 21 | -------------------------------------------------------------------------------- /tab-view-swiper/src/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /tab-view-swiper/src/js/export/img/base64/icon-more.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyued/legolib/4c6a33b0f3c7d74ba2dafbd2e14a360693fdb1c7/tab-view-swiper/src/js/export/img/base64/icon-more.png -------------------------------------------------------------------------------- /tab-view-swiper/src/js/export/module/util.js: -------------------------------------------------------------------------------- 1 | let util = { 2 | /** 3 | * 对象合并 4 | * 5 | * @param {object} target 原对象 6 | * @param {object} options 新对象 7 | * @return {object} 合并后的对象 8 | */ 9 | extend(target, options) { 10 | let copy = null; // 属性值 11 | for (var name in options) { // name为对象属性 12 | copy = options[name]; 13 | 14 | //防止循环调用 15 | if (target === copy) continue; 16 | 17 | //防止附加未定义值 18 | if (typeof copy === 'undefined') continue; 19 | 20 | //赋值 21 | target[name] = copy; 22 | } 23 | return target; 24 | }, 25 | /** 26 | * 获取url中指定参数的值 27 | * @param {string} name 需要获取的参数名 28 | * @param {string} url 需要被处理的url，默认为当前url 29 | * @return {string} 对应的参数值 30 | */ 31 | getUrlParam(name, url) { 32 | var paramReg = new RegExp("[\\?&#]" + name + "=([^&#]+)", "gi"); 33 | var paramMatch = (url || location.href).match(paramReg); 34 | var paramResult = []; 35 | 36 | if (paramMatch && paramMatch.length > 0) { 37 | paramResult = (paramMatch[paramMatch.length - 1]).split("="); 38 | if (paramResult && paramResult.length > 1) { 39 | return paramResult[1]; 40 | } 41 | return '' 42 | } 43 | return ''; 44 | } 45 | }; 46 | module.exports = util; 47 | -------------------------------------------------------------------------------- /tab-view-swiper/src/js/export/style/_images.scss: -------------------------------------------------------------------------------- 1 | %base64-icon-more.png { 2 | width: 0.32rem; 3 | height: 0.32rem; 4 | background-image: url('../img/base64/icon-more.png'); 5 | background-size: contain; 6 | background-repeat: no-repeat; 7 | } 8 | -------------------------------------------------------------------------------- /tab-view-swiper/src/js/export/tpl/nav.tpl: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
    6 | {{each $data as data i}} 7 |
  • 8 | {{if data.link}} 9 | {{data.title}} 10 | {{else}} 11 | {{ data.title }} 12 | {{/if}} 13 |
    • 14 | {{/each}} 15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | 23 | {{each $data as data i}} 24 | {{if !data.link}} 25 |
26 | {{/if}} 27 | {{/each}} 28 |
29 |
30 |
31 | -------------------------------------------------------------------------------- /tab-view-swiper/src/js/export/tpl/nav.tpl.js: -------------------------------------------------------------------------------- 1 | /*TMODJS:{"version":11,"md5":"3ad07d8fda4a694b80c25530f6877fd8"}*/ 2 | template("/Users/liveme/Sites/git@legolib-dev/tab-view-swiper/src/js/export/tpl/nav",function(a){"use strict";var b=this,c=(b.$helpers,b.$each),d=(a.data,a.i,b.$escape),e="";return e+='
    ',c(a,function(a,b){e+="
  • ",a.link?(e+=" ',e+=d(a.title),e+=" "):(e+=" ",e+=d(a.title),e+=" "),e+="
    • "}),e+='
',c(a,function(a){e+=" ",a.link||(e+='
'),e+=" "}),e+="
",new String(e)}); -------------------------------------------------------------------------------- /tab-view-swiper/src/js/main.js: -------------------------------------------------------------------------------- 1 | import FastClick from './fastclick/1.0.6/fastclick'; 2 | import LegoTabView from './export/lego-tabView.js'; 3 | 4 | if ('addEventListener' in document) { 5 | document.addEventListener('DOMContentLoaded', function() { 6 | FastClick.attach(document.body); 7 | }, false); 8 | } 9 | 10 | 11 | let navConfig = [ 12 | { 13 | title: '推荐', 14 | link: '', 15 | attr: 'data-id=11 data-role=first' 16 | }, 17 | { 18 | title: '音乐', 19 | attr: '' 20 | }, 21 | { 22 | title: '搞笑', 23 | link: '', 24 | attr: 'data-id=11 data-index=first' 25 | 26 | }, 27 | { 28 | title: '脱口秀' 29 | }, 30 | { 31 | title: '一起看', 32 | // link: '', 33 | attr: 'data-id=11 data-index=test', 34 | }, 35 | { 36 | title: '百度', 37 | }, 38 | { 39 | title: '巴拉巴拉小魔仙', 40 | link: '', 41 | attr: '' 42 | }, 43 | { 44 | title: '户外', 45 | link: '', 46 | attr: '' 47 | }, 48 | { 49 | title: '摄影', 50 | link: '', 51 | attr: '' 52 | }, 53 | { 54 | title: '户外2', 55 | link: '', 56 | attr: '' 57 | }, 58 | { 59 | title: '摄影2', 60 | link: '', 61 | attr: '' 62 | }, 63 | { 64 | title: '旅行', 65 | link: 'https://www.baidu.com/', 66 | attr: '' 67 | } 68 | ] 69 | 70 | var tabView = new LegoTabView({ 71 | container: '#main', 72 | navConfig: navConfig, 73 | activeIndex: 1, 74 | easing: 'easeInOut', 75 | switchCallBack: function(fromIndex, toIndex) { 76 | document.querySelectorAll('.lego-tabView__panel')[toIndex].innerHTML =`from:${fromIndex},to:${toIndex}`; 77 | } 78 | }); 79 | -------------------------------------------------------------------------------- /tab-view-swiper/src/sass/_img.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyued/legolib/4c6a33b0f3c7d74ba2dafbd2e14a360693fdb1c7/tab-view-swiper/src/sass/_img.scss -------------------------------------------------------------------------------- /tab-view-swiper/src/sass/base/_base.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * 基础模块 & 全局变量配置 3 | * 4 | */ 5 | 6 | // 文本配置 7 | $b-font-size : 14px !default; 8 | $b-font-family : "San Francisco", "Helvetica Neue", Helvetica, sans-serif !default; 9 | $b-font-weight : 300 !default; 10 | $b-line-height : 1.5 !default; 11 | $b-link-decoration : underline !default; 12 | 13 | // 颜色配置 14 | $c-text : #333 !default; 15 | $c-background : #fff !default; 16 | $c-link : #333 #fa0 !default; 17 | 18 | // 基础模块 19 | @import "normalize"; 20 | @import "reset"; 21 | @import "flexible"; 22 | // @import "orientation"; 23 | @import "tool"; 24 | 25 | // todo: 横屏提示在安卓弹出键盘时被触发 -------------------------------------------------------------------------------- /tab-view-swiper/src/sass/base/_flexible.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Lego纯CSS自适应方案 4 | 5 | 1，设计稿尺寸 6 | 7 | 默认设计稿宽带 750px，可通过变量 $psd-size 进行修改 8 | 9 | 2，对应的 meta 标签写法： 10 | 11 | 12 | 3，px to rem 需要用到小学算术 13 | 14 | 100px = 1rem / 1px = 0.01rem 15 | 16 | Notes: 17 | 18 | 断点参考：http://screensiz.es/phone 19 | 20 | 横屏断点：384px, 480px, 533px, 568px, 640px, 667px, 699px, 736px 21 | 某些手机厂商系统的虚拟SmartBar会改变Screen的值，又是坑，建议统一横屏提示规避 22 | 23 | 避免使用 min-device-width 24 | https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=zh-cn#min-device-width- 25 | 26 | __Changelog__ 27 | 2016.05.04：添加 393px 699px 断点，小米note 1080 屏幕，DPR=2.75 28 | 2016.11.11: 参考 http://mydevice.io/devices/#sortSmartphones 添加部门安卓手机宽度 29 | 30 | */ 31 | 32 | // 定义基准数 33 | $base-fontSize: 100px !default; 34 | 35 | // 定义设计稿尺寸 36 | $psd-size: 750px !default; 37 | 38 | // 定义竖屏断点 39 | $responsives: 320px, 346px, 360px, 375px, 384px, 390px, 393px, 400px, 412px, 414px, 432px; 40 | 41 | // 定义根元素font-size 42 | @mixin rem($values){ 43 | font-size: $values * $base-fontSize / $psd-size; 44 | } 45 | 46 | // 遍历输出断点 47 | @each $responsive in $responsives{ 48 | @media only screen and (min-width: #{$responsive}) { 49 | html{ @include rem($responsive);} 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /tab-view-swiper/src/sass/base/_reset.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @file: 重置样式 3 | */ 4 | 5 | /* 全局设置 */ 6 | *, 7 | *:before, 8 | *:after{ 9 | font-family: "San Francisco", "Helvetica Neue", Helvetica, sans-serif; 10 | font-weight: 300; 11 | box-sizing: border-box; 12 | appearance: none; 13 | -webkit-tap-highlight-color: rgba(0,0,0,0); 14 | } 15 | 16 | /* 设置基本html,body样式 */ 17 | html,body{ 18 | margin: 0 auto; 19 | padding: 0; 20 | } 21 | 22 | /* 设置图片最大宽度 */ 23 | img{ 24 | max-width: 100%; 25 | } 26 | 27 | /* 清除默认按钮表现形式 */ 28 | button{ 29 | -webkit-appearance: none; 30 | appearance: none; 31 | } 32 | 33 | /* 设置表格默认样式 */ 34 | table { 35 | border-collapse: collapse; 36 | border-spacing: 0; 37 | } 38 | 39 | /* 文本域禁止拖拉放大 */ 40 | textarea { 41 | resize: none; 42 | } 43 | 44 | a { 45 | text-decoration: none; 46 | color: currentColor; 47 | } 48 | 49 | img { 50 | vertical-align: top; 51 | } 52 | 53 | i, em { 54 | font-style: normal; 55 | } 56 | 57 | ol, ul, li, menu { 58 | list-style: none outside none; 59 | } 60 | 61 | fieldset, iframe, abbr, acronym { 62 | border: 0 none; 63 | } 64 | 65 | dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, hr, 66 | article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 67 | margin: 0; 68 | padding: 0; 69 | } 70 | 71 | del { 72 | text-decoration:line-through; 73 | } 74 | -------------------------------------------------------------------------------- /tab-view-swiper/src/sass/main.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @import "base/base"; 4 | 5 | body { 6 | font: $b-font-weight #{$b-font-size}/#{$b-line-height} $b-font-family; 7 | color: $c-text; 8 | background-color: #f6f6f6; 9 | a { 10 | text-decoration: none; 11 | color: nth($c-link, 1); 12 | &:hover { 13 | text-decoration: underline; 14 | color: nth($c-link, 2); 15 | } 16 | } 17 | } 18 | 19 | // Coding... 20 | #main { 21 | height: 100%; 22 | background: #efefef; 23 | } 24 | 25 | .lego-tabView__panel { 26 | &:nth-child(1) { 27 | background: #ccc; 28 | } 29 | &:nth-child(2) { 30 | background: #f00; 31 | } 32 | &:nth-child(3) { 33 | background: #ff0; 34 | } 35 | &:nth-child(4) { 36 | background: #f0f; 37 | } 38 | &:nth-child(5) { 39 | background: #0f0; 40 | } 41 | &:nth-child(6) { 42 | background: #0ff; 43 | } 44 | &:nth-child(7) { 45 | background: #ff0; 46 | } 47 | &:nth-child(8) { 48 | background: #00f; 49 | } 50 | &:nth-child(9) { 51 | background: #f0f; 52 | } 53 | &:nth-child(10) { 54 | background: #0f0; 55 | } 56 | &:nth-child(11) { 57 | background: #0ff; 58 | } 59 | &:nth-child(12) { 60 | background: #00f; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /tab-view/README.md: -------------------------------------------------------------------------------- 1 | # tab-view 2 | 3 | ## 说明 4 | 移动端tabView导航栏 5 | 6 | * 支持**外链**或者**ADM/CMD/commonJS**等多种形式； 7 | * 本组件使用 [legoFlow](https://legoflow.com/) 进行开发构建； 8 | * 本组件无第三方插件依赖； 9 | 10 | 11 | ## DEMO 12 | ![qrcode](https://user-images.githubusercontent.com/1295348/33515408-e12ed89a-d79d-11e7-96dc-4cb89d826c6a.jpg) 13 | 14 | 【注】tab-view没有swiper滑动功能，如需swiper请使用[tab-view-swiper](https://github.com/yyued/legolib/tree/master/tab-view-swiper) 15 | 16 | 17 | ## 使用 18 | 19 | ### 模块引入方式 20 | 21 | ```javascript 22 | import LegoTabView from 'legolib/tab-view/index.js'; 23 | 24 | let navConfig = [ 25 | { 26 | title: '推荐', 27 | attr: 'data-id="11" data-role="first"' 28 | }, 29 | { 30 | title: '一起看', 31 | attr: 'data-id="11" data-index="test"' 32 | }, 33 | { 34 | title: '音乐' 35 | }, 36 | { 37 | title: 'YY', 38 | link: 'https://www.yy.com/' 39 | }, 40 | ]; 41 | 42 | var tabView = new LegoTabView({ 43 | container: '#header', 44 | navConfig: navConfig, 45 | activeIndex: 2, 46 | navEasing: 'easeInOut', 47 | switchCallBack: function(fromIndex, toIndex) { 48 | console.log(fromIndex, toIndex); 49 | } 50 | 51 | }); 52 | ``` 53 | 54 | 55 | ### 外链引入方式 56 | 57 | 全局实例：`LegoTabView` 58 | 59 | ```html 60 | 61 | 62 | var tab = new LegoTabView(config); 63 | ``` 64 | 65 | 66 | ## API 67 | ### 方法 68 | | 方法 | 参数 | 参数类型 | 说明 | 69 | | ------------- |------------- | -----| -----| 70 | | switchCallBack| fromIndex, toIndex| Number | 返回上一个item的索引和当前的索引值，从0开始| 71 | | switchTo | index | Number | 跳到某个item，index为item的索引，从0开始| 72 | 73 | ### 参数 74 | | 参数名 | 类型 | 是否必填 | 默认值 | 说明 | 备注 | 75 | |------|----|--------|------|----|----| 76 | | container | String | 是 | 无 | 包含tabView组件的外部容器|#id、data-*=xx、.class| 77 | | activeIndex | Number | 否 | 0 | 默认选中的item | item的索引，从0开始 | 78 | | navConfig | Array | 是 | 无 | 每个nav item的设置 | 每个item是一个object，可包含title（item的名称）、link（链接）、attr（属性）| 79 | | navEasing | String | 否 | easeInOut | 动画效果 | linear、easeInOut、easeOut、easeIn | 80 | 81 | ### 注意: 82 | 1. 支持页面链接上带activeIndex参数，滑到指定的item上。 83 | 2. 页面链接上带的activeIndex**优先级大于**初始化对象的时候配置的activeIndex。 84 | -------------------------------------------------------------------------------- /tab-view/example/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /tab-view/legoflow.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.51", 3 | "type": "clean", 4 | "assets": "", 5 | "es6": true, 6 | "webp": false, 7 | "legolib": false, 8 | "https": false, 9 | "hot": false, 10 | "isUglifyJs": true, 11 | "isPackVueStyle": false, 12 | "vue@2.1": false, 13 | "watch": [], 14 | "publicPath": "", 15 | "packImgSize": "", 16 | "packCommon": "", 17 | "other": "", 18 | "dist": "", 19 | "output": "", 20 | "shell": "./shell.js", 21 | "alias": {}, 22 | "global": {}, 23 | "externals": {}, 24 | "proxy": {}, 25 | "ts": {}, 26 | "cache": "timestamp", 27 | "user.dev.args": {}, 28 | "user.build.args": {}, 29 | "env": {}, 30 | "build.move": [], 31 | "build.env": "", 32 | "build.zip": "", 33 | "img.folder": "", 34 | "html.folder": "", 35 | "js.folder": "", 36 | "export.folder": "" 37 | } 38 | -------------------------------------------------------------------------------- /tab-view/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lego-tabView", 3 | "version": "0.1.0", 4 | "repository": {}, 5 | "author": "UED.Vicky", 6 | "license": "MIT" 7 | } -------------------------------------------------------------------------------- /tab-view/shell.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | 5 | module.exports = ( param ) => { 6 | const { fs, del, folder, messager, args, gulp, shell } = param; 7 | 8 | const dist = path.resolve( folder, './dist' ); 9 | const example = path.resolve( folder, './example' ); 10 | 11 | fs.copySync( dist, example, { overwrite: true } ); 12 | 13 | del([ dist ], { force: true }, () => { 14 | gulp.src( `${ example }/js/*.min.js `) 15 | .pipe( gulp.dest( dist ) ) 16 | .on( 'end', ( ) => { 17 | messager.success(); 18 | }) 19 | }); 20 | } 21 | -------------------------------------------------------------------------------- /tab-view/src/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /tab-view/src/js/export/img/base64/icon-more.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyued/legolib/4c6a33b0f3c7d74ba2dafbd2e14a360693fdb1c7/tab-view/src/js/export/img/base64/icon-more.png -------------------------------------------------------------------------------- /tab-view/src/js/export/module/util.js: -------------------------------------------------------------------------------- 1 | let util = { 2 | /** 3 | * 对象合并 4 | * 5 | * @param {object} target 原对象 6 | * @param {object} options 新对象 7 | * @return {object} 合并后的对象 8 | */ 9 | extend(target, options) { 10 | let copy = null; // 属性值 11 | for (var name in options) { // name为对象属性 12 | copy = options[name]; 13 | 14 | //防止循环调用 15 | if (target === copy) continue; 16 | 17 | //防止附加未定义值 18 | if (typeof copy === 'undefined') continue; 19 | 20 | //赋值 21 | target[name] = copy; 22 | } 23 | return target; 24 | }, 25 | /** 26 | * 获取url中指定参数的值 27 | * @param {string} name 需要获取的参数名 28 | * @param {string} url 需要被处理的url，默认为当前url 29 | * @return {string} 对应的参数值 30 | */ 31 | getUrlParam(name, url) { 32 | var paramReg = new RegExp("[\\?&#]" + name + "=([^&#]+)", "gi"); 33 | var paramMatch = (url || location.href).match(paramReg); 34 | var paramResult = []; 35 | 36 | if (paramMatch && paramMatch.length > 0) { 37 | paramResult = (paramMatch[paramMatch.length - 1]).split("="); 38 | if (paramResult && paramResult.length > 1) { 39 | return paramResult[1]; 40 | } 41 | return '' 42 | } 43 | return ''; 44 | } 45 | }; 46 | module.exports = util; 47 | -------------------------------------------------------------------------------- /tab-view/src/js/export/style/_images.scss: -------------------------------------------------------------------------------- 1 | %base64-icon-more.png { 2 | width: 0.32rem; 3 | height: 0.32rem; 4 | background-image: url('../img/base64/icon-more.png'); 5 | background-size: contain; 6 | background-repeat: no-repeat; 7 | } 8 | -------------------------------------------------------------------------------- /tab-view/src/js/export/style/index.scss: -------------------------------------------------------------------------------- 1 | @import "./images"; 2 | .lego-tabView { 3 | position: relative; 4 | } 5 | .lego-tabView__nav { 6 | position: fixed; 7 | top: 0; 8 | left: 0; 9 | z-index: 2; 10 | width: 100%; 11 | background-color: #fff; 12 | height: 0.8rem; 13 | line-height: 0.8rem; 14 | overflow: hidden; 15 | user-select: none; 16 | padding-right: 0.5rem; 17 | overflow: hidden; 18 | &:after { 19 | content: " "; 20 | position: absolute; 21 | top: 0; 22 | right: 0.5rem; 23 | height: 0.8rem; 24 | width: 0.4rem; 25 | z-index: 100; 26 | background: -webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,0)),color-stop(100%,#fff)); 27 | } 28 | } 29 | .lego-tabView__navWrap { 30 | position: relative; 31 | height: 100%; 32 | box-sizing: content-box; 33 | overflow-x: scroll; 34 | overflow-y: hidden; 35 | padding-bottom: 0.1rem; 36 | -webkit-overflow-scrolling: touch; 37 | &::-webkit-scrollbar { 38 | display: none; 39 | } 40 | } 41 | .lego-navList { 42 | // height: 0.8rem; 43 | 44 | white-space: nowrap; 45 | font-size: 0; 46 | li { 47 | display: inline-block; 48 | font-size: 0.3rem; 49 | text-align: center; 50 | transition: all 0.25s; 51 | a, 52 | span { 53 | display: inline-block; 54 | padding: 0 0.4rem; 55 | color: #666; 56 | &:hover { 57 | text-decoration: none; 58 | } 59 | } 60 | &.is-current { 61 | a, 62 | span { 63 | color: #fa0; 64 | } 65 | font-weight: 400; 66 | } 67 | } 68 | } 69 | .lego-navMore { 70 | height: 100%; 71 | width: 0.5rem; 72 | position: absolute; 73 | right: 0; 74 | top: 0; 75 | background-color: #fff; 76 | &:after { 77 | content: ''; 78 | @extend %base64-icon-more.png; 79 | position: absolute; 80 | top: 50%; 81 | left: 50%; 82 | transform: translate(-50%, -50%); 83 | } 84 | } 85 | .lego-tabView__panel { 86 | padding-top: 0.8rem; 87 | display: none; 88 | &.is-show { 89 | display: block; 90 | } 91 | } 92 | .lego-navLine { 93 | position: absolute; 94 | left: 50%; 95 | bottom: 0.1rem; 96 | bottom: 0.1rem; 97 | width: 1rem; 98 | height: 0.02rem; 99 | background: #fa0; 100 | transform: translateX(-50%); 101 | } 102 | -------------------------------------------------------------------------------- /tab-view/src/js/export/tpl/nav.tpl: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
    6 | {{each $data as data i}} 7 |
  • 8 | {{if data.link}} 9 | {{data.title}} 10 | {{else}} 11 | {{ data.title }} 12 | {{/if}} 13 |
    • 14 | {{/each}} 15 |
16 |
17 |
18 |
19 |
20 |
21 | {{each $data as data i}} 22 |
23 | {{/each}} 24 | 25 |
26 |
27 | -------------------------------------------------------------------------------- /tab-view/src/js/export/tpl/nav.tpl.js: -------------------------------------------------------------------------------- 1 | /*TMODJS:{"version":116,"md5":"7b458d35c152160695892aa7e2272115"}*/ 2 | template("/Users/liveme/Sites/git@legolib-dev/tab-view/src/js/export/tpl/nav",function(a){"use strict";var b=this,c=(b.$helpers,b.$each),d=(a.data,a.i,b.$escape),e="";return e+='
    ',c(a,function(a,b){e+="
  • ",a.link?(e+=" ',e+=d(a.title),e+=" "):(e+=" ",e+=d(a.title),e+=" "),e+="
    • "}),e+='
',c(a,function(a,b){e+='
11 | 12 | 3，px to rem 需要用到小学算术 13 | 14 | 100px = 1rem / 1px = 0.01rem 15 | 16 | Notes: 17 | 18 | 断点参考：http://screensiz.es/phone 19 | 20 | 横屏断点：384px, 480px, 533px, 568px, 640px, 667px, 699px, 736px 21 | 某些手机厂商系统的虚拟SmartBar会改变Screen的值，又是坑，建议统一横屏提示规避 22 | 23 | 避免使用 min-device-width 24 | https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=zh-cn#min-device-width- 25 | 26 | __Changelog__ 27 | 2016.05.04：添加 393px 699px 断点，小米note 1080 屏幕，DPR=2.75 28 | 2016.11.11: 参考 http://mydevice.io/devices/#sortSmartphones 添加部门安卓手机宽度 29 | 30 | */ 31 | 32 | // 定义基准数 33 | $base-fontSize: 100px !default; 34 | 35 | // 定义设计稿尺寸 36 | $psd-size: 750px !default; 37 | 38 | // 定义竖屏断点 39 | $responsives: 320px, 346px, 360px, 375px, 384px, 390px, 393px, 400px, 412px, 414px, 432px; 40 | 41 | // 定义根元素font-size 42 | @mixin rem($values){ 43 | font-size: $values * $base-fontSize / $psd-size; 44 | } 45 | 46 | // 遍历输出断点 47 | @each $responsive in $responsives{ 48 | @media only screen and (min-width: #{$responsive}) { 49 | html{ @include rem($responsive);} 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /tab-view/src/sass/base/_reset.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @file: 重置样式 3 | */ 4 | 5 | /* 全局设置 */ 6 | *, 7 | *:before, 8 | *:after{ 9 | font-family: "San Francisco", "Helvetica Neue", Helvetica, sans-serif; 10 | font-weight: 300; 11 | box-sizing: border-box; 12 | appearance: none; 13 | -webkit-tap-highlight-color: rgba(0,0,0,0); 14 | } 15 | 16 | /* 设置基本html,body样式 */ 17 | html,body{ 18 | margin: 0 auto; 19 | padding: 0; 20 | } 21 | 22 | /* 设置图片最大宽度 */ 23 | img{ 24 | max-width: 100%; 25 | } 26 | 27 | /* 清除默认按钮表现形式 */ 28 | button{ 29 | -webkit-appearance: none; 30 | appearance: none; 31 | } 32 | 33 | /* 设置表格默认样式 */ 34 | table { 35 | border-collapse: collapse; 36 | border-spacing: 0; 37 | } 38 | 39 | /* 文本域禁止拖拉放大 */ 40 | textarea { 41 | resize: none; 42 | } 43 | 44 | a { 45 | text-decoration: none; 46 | color: currentColor; 47 | } 48 | 49 | img { 50 | vertical-align: top; 51 | } 52 | 53 | i, em { 54 | font-style: normal; 55 | } 56 | 57 | ol, ul, li, menu { 58 | list-style: none outside none; 59 | } 60 | 61 | fieldset, iframe, abbr, acronym { 62 | border: 0 none; 63 | } 64 | 65 | dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, hr, 66 | article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 67 | margin: 0; 68 | padding: 0; 69 | } 70 | 71 | del { 72 | text-decoration:line-through; 73 | } 74 | -------------------------------------------------------------------------------- /tab-view/src/sass/main.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @import "base/base"; 4 | 5 | body { 6 | font: $b-font-weight #{$b-font-size}/#{$b-line-height} $b-font-family; 7 | color: $c-text; 8 | background-color: #f6f6f6; 9 | a { 10 | text-decoration: none; 11 | color: nth($c-link, 1); 12 | &:hover { 13 | text-decoration: underline; 14 | color: nth($c-link, 2); 15 | } 16 | } 17 | } 18 | 19 | // Coding... 20 | -------------------------------------------------------------------------------- /toast/README.md: -------------------------------------------------------------------------------- 1 | # toast 2 | 3 | ## 说明 4 | 5 | toast是一种轻量的提示，在页面中间显示，并且会在2秒(默认值，可修改)之后自动消失。可以用来显示一些不会打断用户操作的提示。 6 | 7 | * 支持**外链**或者**ADM/CMD/commonJS**等多种形式； 8 | * 本组件使用 [legoFlow](https://legoflow.com/) 进行开发构建； 9 | * 本组件无第三方插件依赖； 10 | 11 | ## DEMO 12 | ![qrcode- 1](https://user-images.githubusercontent.com/1295348/33515436-7e63d2c8-d79e-11e7-82d7-2b58612b6308.jpg) 13 | 14 | 15 | ## 使用 16 | 17 | ### 模块引入方式 18 | 19 | ````javascript 20 | import LegoToast from 'legolib/toast/index.js'; 21 | var toast = new LegoToast({ 22 | msg : "操作成功", 23 | time : 2000, 24 | extraclass : "extraclass" 25 | }); 26 | toast.open(); 27 | 28 | toast.close(); // 手动关闭 29 | toast.changeText('change'); // 修改文案 30 | toast.changeTime(4000); // 修改消失时间 31 | toast.open(); // 再次打开 32 | ```` 33 | 34 | 35 | ### 外链引入方式 36 | 37 | 全局实例：`LegoToast` 38 | 39 | ```html 40 | 41 | 42 | var toast = new LegoToast(config); 43 | ``` 44 | 45 | ## API 46 | 47 | ### 方法 48 | |方法|参数|说明| 49 | |----|----|----| 50 | |open()|无|打开toast| 51 | |close()|无|关闭toast| 52 | |changeText()|文案内容|修改文案| 53 | |changeTime()|时间|修改时间| 54 | 55 | ### 参数 56 | 57 | |参数序号|类型|是否必填|默认值|说明| 58 | |--------|----|--------|------|----| 59 | |msg|string|否|""|提示文案| 60 | |time|number|否|2000|显示时长| 61 | |extraclass|string|否|无|扩展类| 62 | -------------------------------------------------------------------------------- /toast/example/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | index 12 | 13 | 14 | 15 |
点我
16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /toast/legoflow.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.51", 3 | "type": "clean", 4 | "assets": "", 5 | "es6": true, 6 | "webp": false, 7 | "legolib": false, 8 | "https": false, 9 | "hot": false, 10 | "isUglifyJs": true, 11 | "isPackVueStyle": false, 12 | "vue@2.1": false, 13 | "watch": [], 14 | "publicPath": "", 15 | "packImgSize": "", 16 | "packCommon": "", 17 | "other": "", 18 | "dist": "", 19 | "output": "", 20 | "shell": "./shell.js", 21 | "alias": {}, 22 | "global": {}, 23 | "externals": {}, 24 | "proxy": {}, 25 | "ts": {}, 26 | "cache": "timestamp", 27 | "user.dev.args": {}, 28 | "user.build.args": {}, 29 | "env": {}, 30 | "build.move": [], 31 | "build.env": "", 32 | "build.zip": "", 33 | "img.folder": "", 34 | "html.folder": "", 35 | "js.folder": "", 36 | "export.folder": "" 37 | } 38 | -------------------------------------------------------------------------------- /toast/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lego-toast", 3 | "version": "0.0.1", 4 | "repository": {}, 5 | "author": "UED.Wilson", 6 | "license": "MIT" 7 | } -------------------------------------------------------------------------------- /toast/shell.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | 5 | module.exports = ( param ) => { 6 | const { fs, del, folder, messager, args, gulp, shell } = param; 7 | 8 | const dist = path.resolve( folder, './dist' ); 9 | const example = path.resolve( folder, './example' ); 10 | 11 | fs.copySync( dist, example, { overwrite: true } ); 12 | 13 | del([ dist ], { force: true }, () => { 14 | gulp.src( `${ example }/js/*.min.js `) 15 | .pipe( gulp.dest( dist ) ) 16 | .on( 'end', ( ) => { 17 | messager.success(); 18 | }) 19 | }); 20 | } 21 | -------------------------------------------------------------------------------- /toast/src/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | index 12 | 13 | 14 | 15 |
点我
16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /toast/src/js/export/style.scss: -------------------------------------------------------------------------------- 1 | .legoToast { 2 | position: fixed; 3 | left: 50%; 4 | top: 50%; 5 | z-index: 999; 6 | transform: translate(-50%, -50%); 7 | } 8 | 9 | .legoToast-inner { 10 | width: auto; 11 | background: rgba(0, 0, 0, 0.8); 12 | border-radius: 20px; 13 | color: white; 14 | padding: 0 16px; 15 | height: 32px; 16 | line-height: 32px; 17 | font-size: 14px; 18 | opacity: 0; 19 | &.is-toastShow { 20 | animation-name: toastshow; 21 | animation-delay: 0s; 22 | animation-duration: 0.4s; 23 | animation-timing-function: cubic-bezier(0,.33,.2,1); 24 | animation-fill-mode: forwards; 25 | } 26 | &.is-toastHide { 27 | animation-name: toasthide; 28 | animation-delay: 0s; 29 | animation-duration: 0.4s; 30 | animation-timing-function: cubic-bezier(0,.33,.2,1); 31 | animation-fill-mode: forwards; 32 | } 33 | } 34 | 35 | @keyframes toastshow { 36 | from { 37 | opacity: 0; 38 | transform: scale(1.185); 39 | } 40 | to { 41 | opacity: 1; 42 | transform: scale(1); 43 | } 44 | } 45 | 46 | @keyframes toasthide { 47 | from { 48 | opacity: 1; 49 | transform: scale(1); 50 | } 51 | to { 52 | opacity: 0; 53 | transform: scale(0.815); 54 | } 55 | } 56 | 57 | -------------------------------------------------------------------------------- /toast/src/js/index.js: -------------------------------------------------------------------------------- 1 | var legoToast = require('./export/toast.js'); 2 | 3 | var toast = new legoToast({ 4 | msg: "操作成功", 5 | time: 1200, 6 | extraClass: "" 7 | }); 8 | toast.open(); 9 | 10 | // setTimeout(function() { 11 | // toast.changeText('change'); 12 | // toast.changeTime(8000); 13 | // toast.open(); 14 | // }, 3000) 15 | 16 | $('.btn').on('click', function() { 17 | toast.changeText(`change${Math.random()}`); 18 | toast.open(); 19 | }) 20 | -------------------------------------------------------------------------------- /toast/src/sass/_img.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyued/legolib/4c6a33b0f3c7d74ba2dafbd2e14a360693fdb1c7/toast/src/sass/_img.scss -------------------------------------------------------------------------------- /toast/src/sass/base/_base.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // 引入css 适配方案 4 | @import "flexible"; 5 | 6 | // 引入重置样式 7 | @import "normalize"; 8 | 9 | // 引入工具类 10 | @import "tool"; 11 | 12 | /* 全局设置 */ 13 | *, 14 | *:before, 15 | *:after{ 16 | font-family: "San Francisco", "Helvetica Neue", Helvetica, sans-serif; 17 | font-weight: 300; 18 | -webkit-box-sizing: border-box; 19 | -moz-box-sizing: border-box; 20 | box-sizing: border-box; 21 | -webkit-appearance: none; 22 | appearance: none; 23 | -webkit-tap-highlight-color: rgba(0,0,0,0); 24 | } 25 | 26 | /* 设置基本html,body样式 */ 27 | html,body{ 28 | margin: 0 auto; 29 | padding: 0; 30 | } 31 | 32 | /* 设置图片最大宽度 */ 33 | img{ 34 | max-width: 100%; 35 | } 36 | 37 | /* 清除默认按钮表现形式 */ 38 | button{ 39 | -webkit-appearance: none; 40 | appearance: none; 41 | } 42 | 43 | /* 设置表格默认样式 */ 44 | table { 45 | border-collapse: collapse; 46 | border-spacing: 0; 47 | } 48 | 49 | /* 文本域禁止拖拉放大 */ 50 | textarea { 51 | resize: none; 52 | } 53 | 54 | a { 55 | text-decoration: none; 56 | color: currentColor; 57 | } 58 | 59 | img { 60 | vertical-align: top; 61 | } 62 | 63 | i, em { 64 | font-style: normal; 65 | } 66 | 67 | ol, ul, li, menu { 68 | list-style: none outside none; 69 | } 70 | 71 | fieldset, iframe, abbr, acronym { 72 | border: 0 none; 73 | } 74 | 75 | dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, hr, 76 | article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 77 | margin: 0; 78 | padding: 0; 79 | } 80 | 81 | del { 82 | text-decoration:line-through; 83 | } 84 | -------------------------------------------------------------------------------- /toast/src/sass/base/_flexible.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Lego纯CSS自适应方案 4 | 5 | 1，设计稿尺寸 6 | 7 | 默认设计稿宽带 750px，可通过变量 $psd-size 进行修改 8 | 9 | 2，对应的 meta 标签写法： 10 | 11 | 12 | 3，px to rem 需要用到小学算术 13 | 14 | 100px = 1rem / 1px = 0.01rem 15 | 16 | Notes: 17 | 18 | 断点参考：http://screensiz.es/phone 19 | 20 | 横屏断点：384px, 480px, 533px, 568px, 640px, 667px, 699px, 736px 21 | 某些手机厂商系统的虚拟SmartBar会改变Screen的值，又是坑，建议统一横屏提示规避 22 | 23 | 避免使用 min-device-width 24 | https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=zh-cn#min-device-width- 25 | 26 | __Changelog__ 27 | 2016.05.04：添加 393px 699px 断点，小米note 1080 屏幕，DPR=2.75 28 | 29 | */ 30 | 31 | // 定义基准数 32 | $base-fontSize: 100px !default; 33 | 34 | // 定义设计稿尺寸 35 | $psd-size: 750px !default; 36 | 37 | // 定义竖屏断点 38 | $responsives: 320px, 360px, 375px, 393px, 400px, 414px; 39 | 40 | // 定义根元素font-size 41 | @mixin rem($values){ 42 | font-size: $values * $base-fontSize / $psd-size; 43 | } 44 | 45 | // 遍历输出断点 46 | @each $responsive in $responsives{ 47 | @media only screen and (min-width: #{$responsive}) { 48 | html{ @include rem($responsive);} 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /toast/src/sass/base/_tool.scss: -------------------------------------------------------------------------------- 1 | /* @name: 转为REM单位fn 2 | * @ps: 默认宽度为750px 3 | */ 4 | @function toRem($px , $width: 750px) { 5 | // 动态尺寸单位 6 | $ppr: $width / 16 / 1rem; 7 | @return ($px / $ppr); 8 | } 9 | 10 | /* @name: 上下左右居中 (未知高度) 11 | * @ps: 需要设置父元素 display:table 12 | */ 13 | @mixin centers{ 14 | display:table-cell; 15 | vertical-align:middle; 16 | } 17 | 18 | /* @name: 上下左右居中 （确定高度）*/ 19 | @mixin centersHight{ 20 | position: absolute; 21 | left: 0; 22 | right: 0; 23 | top: 0; 24 | bottom: 0; 25 | margin: auto; 26 | } 27 | 28 | /* 29 | * @name: 文字溢出显示省略号 30 | * @ps: 需要设置宽度 31 | */ 32 | @mixin ellipsis{ 33 | white-space: nowrap; 34 | word-wrap: normal; 35 | overflow: hidden; 36 | text-overflow: ellipsis; 37 | text-align: left; 38 | } 39 | 40 | /* @name: 强制不换行 */ 41 | @mixin nowrap{ 42 | white-space: nowrap; 43 | word-wrap: normal; 44 | word-break: keep-all; 45 | } 46 | 47 | /* @name: 清除浮动 */ 48 | @mixin clearFix{ 49 | overflow: hidden; 50 | clear: both; 51 | } 52 | 53 | /* 54 | * @name: 三角形 55 | * @param: $size 大小 56 | * @param: $color 颜色 57 | * @param: $type {string} 类型 (up || down || left || right || topleft || topright || bottomleft || bottomright) 58 | */ 59 | @mixin triangle( 60 | $size: 50px, 61 | $type: up, 62 | $color: #6699FF 63 | ){ 64 | width: 0; 65 | height: 0; 66 | @if $type == up { 67 | border-left: $size/2 solid transparent; 68 | border-right: $size/2 solid transparent; 69 | border-bottom: $size solid $color; 70 | }@else if $type == down { 71 | border-left: $size/2 solid transparent; 72 | border-right: $size/2 solid transparent; 73 | border-top: $size solid $color; 74 | }@else if $type == left { 75 | border-top: $size/2 solid transparent; 76 | border-right: $size/2 solid $color; 77 | border-bottom: $size solid transparent; 78 | }@else if $type == right { 79 | border-top: $size/2 solid transparent; 80 | border-left: $size/2 solid $color; 81 | border-bottom: $size solid transparent; 82 | }@else if $type == topleft { 83 | border-top: $size solid $color; 84 | border-right: $size solid transparent; 85 | }@else if $type == topright { 86 | border-top: $size solid $color; 87 | border-left: $size solid transparent; 88 | }@else if $type == bottomleft { 89 | border-bottom: $size solid $color; 90 | border-right: $size solid transparent; 91 | }@else if $type == bottomright { 92 | border-bottom: $size solid $color; 93 | border-left: $size solid transparent; 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /toast/src/sass/index.scss: -------------------------------------------------------------------------------- 1 | @import "base/base"; // 基础scss模块 2 | @import "img"; -------------------------------------------------------------------------------- /util/examples/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | index 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /util/legoflow.json: -------------------------------------------------------------------------------- 1 | {"version":"0.0.64","type":"Mobile","assets":"","es6":"true","webp":"false","alias":{},"global":{}} -------------------------------------------------------------------------------- /util/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lego-util", 3 | "version": "0.1.0", 4 | "repository": {}, 5 | "author": "UED.Vicky", 6 | "license": "MIT" 7 | } -------------------------------------------------------------------------------- /util/src/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | index 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /util/src/js/export/module/debounce.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 函数去抖 3 | * 场景：每完成等待某个时间后去执行某函数，只希望执行一次；如输入实时查询、防止重复提交 4 | * 5 | * @param {Function} callback 回调函数 6 | * @param {number} wait 等待 wait 毫秒之后才执行 7 | * @param {boolean} immediate 是否立即执行 8 | * @return {Function} 返回 9 | */ 10 | function debounce(callback, wait, immediate) { 11 | var timeout = null; 12 | return function () { 13 | var context = this; 14 | var args = arguments; 15 | var later = function () { 16 | timeout = null; 17 | if (!immediate) { 18 | callback.apply(context, args); 19 | } 20 | }; 21 | var callNow = immediate && !timeout; 22 | clearTimeout(timeout); 23 | timeout = setTimeout(later, wait); 24 | if (callNow) { 25 | callback.apply(context, args); 26 | } 27 | }; 28 | } 29 | module.exports = debounce; 30 | -------------------------------------------------------------------------------- /util/src/js/export/module/get-absolute-url.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 根据相对路径获取绝对路径 3 | * @param {string} url 相对路径 4 | * @return {string} 绝对路径 5 | */ 6 | function getAbsoluteUrl(url) { 7 | let a = document.createElement('a'); 8 | a.href = url; 9 | return a.href; 10 | } 11 | module.exports = getAbsoluteUrl; 12 | -------------------------------------------------------------------------------- /util/src/js/export/module/get-appVersion.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 获取app版本 3 | * 4 | * @return {number} app版本号 5 | */ 6 | 7 | var appVersion = window.navigator.appVersion.toLowerCase() || ''; 8 | 9 | module.exports = appVersion; 10 | -------------------------------------------------------------------------------- /util/src/js/export/module/get-ie-version.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 获取IE版本 3 | * 4 | * @return {number} IE版本号，例如IE6则返回6 5 | */ 6 | function getIEVersion() { 7 | var rv = -1; 8 | if (navigator.appName == 'Microsoft Internet Explorer') { 9 | var ua = navigator.userAgent; 10 | var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})"); 11 | if (re.exec(ua) != null) 12 | rv = parseFloat(RegExp.$1); 13 | } else if (navigator.appName == 'Netscape') { 14 | var ua = navigator.userAgent; 15 | var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})"); //for IE 11 16 | if (re.exec(ua) != null) 17 | rv = parseFloat(RegExp.$1); 18 | } 19 | return rv; 20 | } 21 | module.exports = getIEVersion; 22 | -------------------------------------------------------------------------------- /util/src/js/export/module/get-type.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 获取数据类型 3 | * 4 | * @param {*} o 检测对象 5 | * @return {string} 数据类型 6 | */ 7 | function getType(o) { 8 | var type = Object.prototype.toString.call(o); 9 | return type.match(/\[object (.*?)\]/)[1].toLowerCase(); 10 | } 11 | module.exports = getType; 12 | -------------------------------------------------------------------------------- /util/src/js/export/module/get-url-param.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 获取url中指定参数的值 3 | * @param {string} name 需要获取的参数名 4 | * @param {string} url 需要被处理的url，默认为当前url 5 | * @return {string} 对应的参数值 6 | */ 7 | function getUrlParam(name, url) { 8 | var paramReg = new RegExp("[\\?&#]" + name + "=([^&#]+)","gi"); 9 | var paramMatch = decodeURIComponent(url || location.href).match(paramReg); 10 | var paramResult = []; 11 | 12 | if (paramMatch && paramMatch.length > 0) { 13 | paramResult = (paramMatch[paramMatch.length-1]).split("="); 14 | if (paramResult && paramResult.length > 1) { 15 | return paramResult[1]; 16 | } 17 | return '' 18 | } 19 | return ''; 20 | } 21 | module.exports = getUrlParam; 22 | -------------------------------------------------------------------------------- /util/src/js/export/module/get-userAgent.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 获取userAgent 3 | * 4 | * @return {string} userAgent 5 | */ 6 | 7 | var userAgent = window.navigator.userAgent.toLowerCase() || ''; 8 | 9 | module.exports = userAgent; 10 | -------------------------------------------------------------------------------- /util/src/js/export/module/get-vendor.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 获取vendor 3 | * 4 | * @return {string} vendor 5 | */ 6 | 7 | var vendor = window.navigator.vendor&&window.navigator.vendor.toLowerCase() || ''; 8 | 9 | module.exports = vendor; 10 | -------------------------------------------------------------------------------- /util/src/js/export/module/is-android-phone.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 检测当前环境是否为Android手机 3 | * 4 | * @return {boolean} true|false 5 | */ 6 | 7 | var userAgent = require('./get-userAgent'); 8 | 9 | function isAndroidPhone() { 10 | return /android/i.test(userAgent) && /mobile/i.test(userAgent); 11 | } 12 | module.exports = isAndroidPhone; 13 | -------------------------------------------------------------------------------- /util/src/js/export/module/is-android-tablet.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 检测当前环境是否为Android平板 3 | * 4 | * @return {boolean} true|false 5 | */ 6 | 7 | var userAgent = require('./get-userAgent'); 8 | 9 | function isAndroidTablet() { 10 | return /android/i.test(userAgent) && !/mobile/i.test(userAgent); 11 | } 12 | module.exports = isAndroidTablet; 13 | -------------------------------------------------------------------------------- /util/src/js/export/module/is-android.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 检测当前环境是否为Android 3 | * 4 | * @return {boolean} true|false 5 | */ 6 | 7 | var userAgent = require('./get-userAgent'); 8 | 9 | function isAndroid() { 10 | return /android/i.test(userAgent); 11 | } 12 | 13 | module.exports = isAndroid; 14 | -------------------------------------------------------------------------------- /util/src/js/export/module/is-blackberry.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 检测当前环境是否为黑莓 3 | * 4 | * @return {boolean} true|false 5 | */ 6 | var userAgent = require('./get-userAgent'); 7 | 8 | function isBlackberry() { 9 | return /blackberry/i.test(userAgent) || /BB10/i.test(userAgent); 10 | } 11 | module.exports = isBlackberry; 12 | -------------------------------------------------------------------------------- /util/src/js/export/module/is-chrome.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 检测当前浏览器是否为Chrome 3 | * 4 | * @return {boolean} true|false 5 | */ 6 | 7 | var userAgent = require('./get-appVersion'); 8 | var vendor = require('./get-vendor'); 9 | 10 | function isChrome() { 11 | return /chrome|chromium|gecko/i.test(userAgent) && /google inc/.test(vendor); 12 | } 13 | module.exports = isChrome; 14 | -------------------------------------------------------------------------------- /util/src/js/export/module/is-desktop.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 检测当前环境是否为桌面环境 3 | * 4 | * @return {boolean} true|false 5 | */ 6 | 7 | var isMobile = require('./is-mobile'); 8 | var isTablet = require('./is-tablet'); 9 | 10 | function isDesktop() { 11 | return !isMobile() && !isTablet(); 12 | } 13 | module.exports = isDesktop; 14 | -------------------------------------------------------------------------------- /util/src/js/export/module/is-edge.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 检测当前浏览器是否为Edge 3 | * 4 | * @return {boolean} true|false 5 | */ 6 | 7 | var userAgent = require('./get-userAgent'); 8 | 9 | function isEdge() { 10 | return /edge/i.test(userAgent); 11 | } 12 | module.exports = isEdge; 13 | -------------------------------------------------------------------------------- /util/src/js/export/module/is-empty-object.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 检测指定参数是否是一个空对象 3 | * 4 | * @return {boolean} true|false 5 | */ 6 | 7 | function isEmptyObject( obj ) { 8 | var name; 9 | for ( name in obj ) 10 | return false; 11 | return true; 12 | } 13 | 14 | module.exports = isEmptyObject; 15 | -------------------------------------------------------------------------------- /util/src/js/export/module/is-event-support.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 检测某对象是否支持某事件 3 | * 4 | * @param {string} eventName 事件名称 5 | * @param {object} element 检测对象 6 | * @return {boolean} true|false 7 | * @example isEventSupport('click', document); // 检测document是否支持click事件 8 | */ 9 | function isEventSupport(eventName, element) { 10 | var TAGNAMES = { 11 | 'select' : 'input', 12 | 'change' : 'input', 13 | 'submit' : 'form', 14 | 'reset' : 'form', 15 | 'error' : 'img', 16 | 'load' : 'img', 17 | 'abort' : 'img' 18 | }; 19 | 20 | function is(obj, type) { 21 | return typeof obj === type; 22 | } 23 | 24 | element = element || document.createElement(TAGNAMES[eventName] || 'div'); 25 | eventName = 'on' + eventName; 26 | 27 | var isSupported = eventName in element; 28 | 29 | if (!isSupported) { 30 | if (!element.setAttribute) { 31 | element = document.createElement('div'); 32 | } 33 | if (element.setAttribute && element.removeAttribute) { 34 | element.setAttribute(eventName, ''); 35 | isSupported = is(element[eventName], 'function'); 36 | 37 | if (!is(element[eventName], 'undefined')) { 38 | element[eventName] = undefined; 39 | } 40 | element.removeAttribute(eventName); 41 | } 42 | } 43 | 44 | element = null; 45 | return isSupported; 46 | } 47 | module.exports = isEventSupport; 48 | -------------------------------------------------------------------------------- /util/src/js/export/module/is-iOS.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 检测当前环境是否为iOS 3 | * 4 | * @return {boolean} true|false 5 | */ 6 | var isiPhone = require('./is-iPhone'); 7 | var isiPad = require('./is-iPad'); 8 | var isiPod = require('./is-iPod'); 9 | 10 | function isiOS() { 11 | return this.isiPhone() || this.isiPad() || this.isiPod(); 12 | } 13 | module.exports = isiOS; 14 | -------------------------------------------------------------------------------- /util/src/js/export/module/is-iPad.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 检测当前环境是否为iPad 3 | * 4 | * @return {boolean} true|false 5 | */ 6 | 7 | var userAgent = require('./get-userAgent'); 8 | 9 | function isiPad() { 10 | return /ipad/i.test(userAgent); 11 | } 12 | module.exports = isiPad; 13 | -------------------------------------------------------------------------------- /util/src/js/export/module/is-iPhone.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 检测当前环境是否为iPhone 3 | * 4 | * @return {boolean} true|false 5 | */ 6 | 7 | var userAgent = require('./get-userAgent'); 8 | 9 | function isiPhone() { 10 | return /iphone/i.test(userAgent); 11 | } 12 | module.exports = isiPhone; 13 | -------------------------------------------------------------------------------- /util/src/js/export/module/is-iPod.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 检测当前环境是否为iPod 3 | * 4 | * @return {boolean} true|false 5 | */ 6 | 7 | var userAgent = require('./get-userAgent'); 8 | 9 | function isiPod() { 10 | return /ipod/i.test(userAgent); 11 | } 12 | module.exports = isiPod; 13 | -------------------------------------------------------------------------------- /util/src/js/export/module/is-ie.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 检测当前浏览器是否为IE 3 | * edge 也属于IE 4 | * 5 | * @param {number} version 版本号 6 | * @return {boolean} true|false 7 | */ 8 | 9 | var userAgent = require('./get-userAgent'); 10 | var vendor = require('./get-vendor'); 11 | 12 | function isIE(version) { 13 | if(!version) { 14 | return /msie/i.test(userAgent) || "ActiveXObject" in window; 15 | } 16 | if(version >= 11) { 17 | return "ActiveXObject" in window; 18 | } 19 | return new RegExp('msie ' + version).test(userAgent); 20 | } 21 | module.exports = isIE; 22 | -------------------------------------------------------------------------------- /util/src/js/export/module/is-linux.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 检测当前环境是否为linux 3 | * 4 | * @return {boolean} true|false 5 | */ 6 | var appVersion = require('./get-appVersion'); 7 | 8 | function isLinux() { 9 | return /linux/i.test(appVersion); 10 | } 11 | module.exports = isLinux; 12 | -------------------------------------------------------------------------------- /util/src/js/export/module/is-mac.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 检测当前环境是否为mac 3 | * 4 | * @return {boolean} true|false 5 | */ 6 | 7 | var appVersion = require('./get-appVersion'); 8 | 9 | function isMac() { 10 | return /mac/i.test(appVersion); 11 | } 12 | module.exports = isMac; 13 | -------------------------------------------------------------------------------- /util/src/js/export/module/is-mobile.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 检测当前环境是否为移动手机 3 | * 4 | * @return {boolean} true|false 5 | */ 6 | var userAgent = require('./get-userAgent'); 7 | var isiPhone = require('./is-iPhone'); 8 | var isiPod = require('./is-iPod'); 9 | var isAndroidPhone = require('./is-android-phone'); 10 | var isBlackberry = require('./is-blackberry'); 11 | var isWindowsPhone = require('./is-windows-phone'); 12 | 13 | function isMobile() { 14 | // return /Android|webOS|iPhone|Windows Phone|iPod|BlackBerry|SymbianOS/i.test(userAgent); 15 | return isiPhone() || isiPod() || isAndroidPhone() || isBlackberry() || isWindowsPhone(); 16 | } 17 | module.exports = isMobile; 18 | -------------------------------------------------------------------------------- /util/src/js/export/module/is-safari.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 检测当前浏览器是否为safari 3 | * 4 | * @return {boolean} true|false 5 | */ 6 | function isSafari() { 7 | return /safari/i.test(userAgent) && /apple computer/i.test(vendor); 8 | } 9 | module.exports = isSafari; 10 | -------------------------------------------------------------------------------- /util/src/js/export/module/is-tablet.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 检测当前环境是否为平板 3 | * 4 | * @return {boolean} true|false 5 | */ 6 | 7 | var isiPad = require('./is-iPad'); 8 | var isAndroidTablet = require('./is-android-tablet'); 9 | var isWindowsTablet = require('./is-windows-tablet'); 10 | 11 | function isTablet() { 12 | return isiPad() || isAndroidTablet() || isWindowsTablet(); 13 | } 14 | module.exports = isTablet; 15 | -------------------------------------------------------------------------------- /util/src/js/export/module/is-touch-device.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 检测当前设备是否为触屏设备 3 | * 4 | * @return {boolean} true|false 5 | */ 6 | function isTouchDevice() { 7 | return 'ontouchstart' in window ||'DocumentTouch' in window && document instanceof DocumentTouch; 8 | } 9 | module.exports = isTouchDevice; 10 | -------------------------------------------------------------------------------- /util/src/js/export/module/is-wechat-browser.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 检测是否在微信浏览器中 3 | * 4 | * @return {boolean} true|false 5 | */ 6 | 7 | var userAgent = require('./get-userAgent'); 8 | 9 | function isWechatBrowser(){ 10 | return (/micromessenger/i).test(userAgent); 11 | } 12 | module.exports = isWechatBrowser; 13 | -------------------------------------------------------------------------------- /util/src/js/export/module/is-windows-phone.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 检测当前环境是否为windows手机 3 | * 4 | * @return {boolean} true|false 5 | */ 6 | 7 | var userAgent = require('./get-userAgent'); 8 | var isWindows = require('./is-windows'); 9 | 10 | function isWindowsPhone() { 11 | return isWindows() && /phone/i.test(userAgent); 12 | } 13 | module.exports = isWindowsPhone; 14 | -------------------------------------------------------------------------------- /util/src/js/export/module/is-windows-tablet.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 检测当前环境是否为windows平板 3 | * 4 | * @return {boolean} true|false 5 | */ 6 | var userAgent = require('./get-userAgent'); 7 | var isWindows = require('./is-windows'); 8 | var isWindowsPhone = require('./is-windows-phone'); 9 | 10 | function isWindowsTablet() { 11 | return isWindows() && isWindowsPhone() && /touch/i.test(userAgent); 12 | } 13 | module.exports = isWindowsTablet; 14 | -------------------------------------------------------------------------------- /util/src/js/export/module/is-windows.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 检测当前环境是否为windows 3 | * 4 | * @return {boolean} true|false 5 | */ 6 | var appVersion = require('./get-appVersion'); 7 | 8 | function isWindows() { 9 | return /win/i.test(appVersion); 10 | } 11 | module.exports = isWindows; 12 | -------------------------------------------------------------------------------- /util/src/js/export/module/throttle.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 函数节流 3 | * 场景：每间隔某个时间去执行某函数，避免函数的过多执行，依然会不断执行，只是控制了执行的频率；如滚动、窗口缩放 4 | * 5 | * @param {Function} callback 回调函数 6 | * @param {number} 执行时间间隔，单位毫秒 7 | */ 8 | function throttle(callback, wait) { 9 | var context, args, timeout, result; 10 | var previous = 0; 11 | var later = function () { 12 | previous = new Date; 13 | timeout = null; 14 | result = callback.apply(context, args); 15 | }; 16 | return function () { 17 | var now = new Date; 18 | var remaining = wait - (now - previous); 19 | context = this; 20 | args = arguments; 21 | if (remaining <= 0) { 22 | clearTimeout(timeout); 23 | timeout = null; 24 | previous = now; 25 | result = callback.apply(context, args); 26 | } else if (!timeout) { 27 | timeout = setTimeout(later, remaining); 28 | } 29 | return result; 30 | }; 31 | } 32 | module.exports = throttle; 33 | -------------------------------------------------------------------------------- /util/src/js/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file : 业务逻辑demo 3 | * @author : Vicky(fanyuanjing@yy.com) 4 | * @update : 2016-10-12 16:21:15 5 | */ 6 | 7 | // 引入视频组件 8 | // import util from './export/util.js'; 9 | var util = require('./export/util.js'); 10 | 11 | var a = [0]; 12 | // 13 | // console.log(util) 14 | // 15 | console.log('getType:' + util.getType(a)); 16 | console.log('getIEVersion:' + util.getIEVersion()); 17 | console.log('getAbsoluteUrl:' + util.getAbsoluteUrl('/wcs/')); 18 | console.log('get http://ued.yy.com/?user=test user param:' + util.getUrlParam('user', 'http://ued.yy.com/?user=test')); 19 | console.log('isChrome:' + util.isChrome()); 20 | console.log('isIE:' + util.isIE()); 21 | console.log('isEdge:' + util.isEdge()); 22 | console.log('isiPhone:' + util.isiPhone()); 23 | console.log('isiPad:' + util.isiPad()); 24 | console.log('isiPod:' + util.isiPod()); 25 | console.log('isiOS:' + util.isiOS()); 26 | console.log('isAndroid:' + util.isAndroid()); 27 | console.log('isAndroidPhone:' + util.isAndroidPhone()); 28 | console.log('isAndroidTablet:' + util.isAndroidTablet()); 29 | console.log('isWindows:' + util.isWindows()); 30 | console.log('isWindowsPhone:' + util.isWindowsPhone()); 31 | console.log('isWindowsTablet:' + util.isWindowsTablet()); 32 | console.log('isBlackberry:' + util.isBlackberry()); 33 | console.log('isMobile:' + util.isMobile()); 34 | console.log('isTablet:' + util.isTablet()); 35 | console.log('isTouchDevice:' + util.isTouchDevice()); 36 | console.log('isDesktop:' + util.isDesktop()); 37 | console.log('isLinux:' + util.isLinux()); 38 | console.log('isMac:' + util.isMac()); 39 | console.log('isWechatBrowser:' + util.isWechatBrowser()); 40 | console.log('isEventSupport:' + util.isEventSupport('click')); 41 | console.log('isEventSupport:' + util.isEventSupport('click')); 42 | -------------------------------------------------------------------------------- /waiting/README.md: -------------------------------------------------------------------------------- 1 | # waiting 2 | 3 | ## 说明 4 | 5 | 用来提示一些后台活动（像Ajax请求）和阻止在这个活动期间的任何用户操作。 6 | 7 | * 支持**外链**或者**ADM/CMD/commonJS**等多种形式； 8 | * 本组件使用 [legoFlow](https://legoflow.com/) 进行开发构建； 9 | * 本组件无第三方插件依赖； 10 | 11 | 12 | ## DEMO 13 | 14 | ![qrcode](https://user-images.githubusercontent.com/1295348/33515469-f88cf278-d79e-11e7-802f-17deabc3a9b0.jpg) 15 | 16 | 17 | ## 使用 18 | 19 | ### 模块引入方式 20 | 21 | ````javascript 22 | import LegoWaiting from 'legolib/waiting/index.js'; 23 | var waiting = new LegoWaiting({ 24 | title : '加载中', 25 | extraclass : 'extraclass' 26 | }); 27 | waiting.open(); 28 | 29 | waiting.close(); // 手动关闭 30 | waiting.text('继续加载'); // 修改文案 31 | waiting.open(); // 再次打开 32 | ```` 33 | 34 | 35 | ### 外链引入方式 36 | 37 | 全局实例：`LegoWaiting` 38 | 39 | ```html 40 | 41 | 42 | var waiting = new LegoWaiting(config); 43 | ``` 44 | 45 | ## API 46 | 47 | ### 方法 48 | |方法|参数|说明| 49 | |----|----|----| 50 | |open()|无|打开waiting| 51 | |close()|无|关闭waiting| 52 | |text()|文案内容|修改文案| 53 | 54 | ### 参数 55 | 56 | |参数序号|类型|是否必填|默认值|说明| 57 | |--------|----|--------|------|----| 58 | |title|string|否|"加载中"|提示文案| 59 | |extraclass|string|否|无|扩展类| 60 | -------------------------------------------------------------------------------- /waiting/example/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | index 11 | 12 | 13 | 14 | 15 |

点我

16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /waiting/legoflow.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.51", 3 | "type": "clean", 4 | "assets": "", 5 | "es6": true, 6 | "webp": false, 7 | "legolib": false, 8 | "https": false, 9 | "hot": false, 10 | "isUglifyJs": true, 11 | "isPackVueStyle": false, 12 | "vue@2.1": false, 13 | "watch": [], 14 | "publicPath": "", 15 | "packImgSize": "", 16 | "packCommon": "", 17 | "other": "", 18 | "dist": "", 19 | "output": "", 20 | "shell": "./shell.js", 21 | "alias": {}, 22 | "global": {}, 23 | "externals": {}, 24 | "proxy": {}, 25 | "ts": {}, 26 | "cache": "timestamp", 27 | "user.dev.args": {}, 28 | "user.build.args": {}, 29 | "env": {}, 30 | "build.move": [], 31 | "build.env": "", 32 | "build.zip": "", 33 | "img.folder": "", 34 | "html.folder": "", 35 | "js.folder": "", 36 | "export.folder": "" 37 | } 38 | -------------------------------------------------------------------------------- /waiting/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lego-waiting", 3 | "version": "0.0.1", 4 | "repository": {}, 5 | "author": "UED.Wilson", 6 | "license": "MIT" 7 | } -------------------------------------------------------------------------------- /waiting/shell.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | 5 | module.exports = ( param ) => { 6 | const { fs, del, folder, messager, args, gulp, shell } = param; 7 | 8 | const dist = path.resolve( folder, './dist' ); 9 | const example = path.resolve( folder, './example' ); 10 | 11 | fs.copySync( dist, example, { overwrite: true } ); 12 | 13 | del([ dist ], { force: true }, () => { 14 | gulp.src( `${ example }/js/*.min.js `) 15 | .pipe( gulp.dest( dist ) ) 16 | .on( 'end', ( ) => { 17 | messager.success(); 18 | }) 19 | }); 20 | } 21 | -------------------------------------------------------------------------------- /waiting/src/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | index 11 | 12 | 13 | 14 | 15 |

点我

16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /waiting/src/js/export/tpl/index.tpl: -------------------------------------------------------------------------------- 1 |
2 |
3 |

{{ title }}

4 |
5 |
6 |
7 |
-------------------------------------------------------------------------------- /waiting/src/js/export/tpl/index.tpl.js: -------------------------------------------------------------------------------- 1 | /*TMODJS:{"version":18,"md5":"863b9558499d57548b894ab8c889d6b5"}*/ 2 | template("/Users/liveme/Sites/git@legolib-dev/waiting/src/js/export/tpl/index",function(a){"use strict";var b=this,c=(b.$helpers,b.$escape),d=a.title,e="";return e+='

',e+=c(d),e+='

',new String(e)}); -------------------------------------------------------------------------------- /waiting/src/js/export/waiting.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file : lego-waiting 3 | * @author : wilson 4 | * @team : UED中心 5 | * @export : umd 6 | * @export name : LegoWaiting 7 | * @export file : index 8 | * @update : 2016-10-13 10:13:24 9 | */ 10 | 11 | import createTpl from './tpl/index.tpl'; 12 | 13 | module.exports = class LegoWaiting { 14 | constructor(argument) { 15 | if(typeof argument == 'undefined') { 16 | this.title = '加载中'; 17 | this.extraClass = ''; 18 | } else { 19 | this.title = argument.title || '加载中'; 20 | this.extraClass = argument.extraClass || ''; 21 | } 22 | 23 | this.init(); 24 | } 25 | 26 | init() { 27 | this.waitingDiv = null; // 元素节点 28 | this.hasWaitingDiv = false; // 是否已经创建了waiting 29 | this.waitingDivTit = ''; // 文案节点 30 | 31 | } 32 | 33 | // 创建模板 34 | createModule() { 35 | this.waitingDiv = document.createElement('div'); 36 | this.waitingDiv.classList.add('legoWaiting-overlay', this.extraClass); 37 | 38 | // 样式 39 | let style = require('./style.scss'); 40 | 41 | // 插入页面 42 | let title = this.title; 43 | this.waitingDiv.innerHTML = `${ createTpl({title}) }`; 44 | document.body.appendChild(this.waitingDiv); 45 | 46 | this.waitingDiv.classList.add('is-waitingShow'); 47 | 48 | this.hasWaitingDiv = true; 49 | 50 | this.waitingDivTit = document.querySelector(".legoWaiting-tit"); 51 | } 52 | 53 | // 打开waiting 54 | open() { 55 | // 判断是否有waiting 56 | if(this.hasWaitingDiv) { 57 | // 重新设置参数 58 | this.waitingDivTit.innerHTML = this.title; 59 | this.waitingDiv.style.display = 'block'; 60 | 61 | this.waitingDiv.classList.add('is-waitingShow'); 62 | this.waitingDiv.classList.remove('is-waitingHide'); 63 | } else { 64 | this.createModule(); 65 | } 66 | } 67 | 68 | // 关闭waiting 69 | close() { 70 | this.waitingDiv.classList.add('is-waitingHide'); 71 | this.waitingDiv.classList.remove('is-waitingShow'); 72 | 73 | // 动画结束删除dom 74 | setTimeout(() => { 75 | this.waitingDiv.style.display = 'none'; 76 | }, 120); 77 | } 78 | 79 | // 修改文案 80 | text(msg) { 81 | this.title = msg; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /waiting/src/js/index.js: -------------------------------------------------------------------------------- 1 | var legoWaiting = require('./export/waiting.js'); 2 | var waiting = new legoWaiting({ 3 | title: '加载中...', 4 | extraClass: 'extraClass' 5 | }); 6 | waiting.open() 7 | 8 | setTimeout(function() { 9 | waiting.close(); 10 | }, 2000) 11 | 12 | $('.btn').on('click', function() { 13 | waiting.text('change'); 14 | waiting.open(); 15 | setTimeout(function() { 16 | waiting.close(); 17 | }, 2000) 18 | }) -------------------------------------------------------------------------------- /waiting/src/sass/_img.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyued/legolib/4c6a33b0f3c7d74ba2dafbd2e14a360693fdb1c7/waiting/src/sass/_img.scss -------------------------------------------------------------------------------- /waiting/src/sass/base/_base.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // 引入css 适配方案 4 | @import "flexible"; 5 | 6 | // 引入重置样式 7 | @import "normalize"; 8 | 9 | // 引入工具类 10 | @import "tool"; 11 | 12 | /* 全局设置 */ 13 | *, 14 | *:before, 15 | *:after{ 16 | font-family: "San Francisco", "Helvetica Neue", Helvetica, sans-serif; 17 | font-weight: 300; 18 | -webkit-box-sizing: border-box; 19 | -moz-box-sizing: border-box; 20 | box-sizing: border-box; 21 | -webkit-appearance: none; 22 | appearance: none; 23 | -webkit-tap-highlight-color: rgba(0,0,0,0); 24 | } 25 | 26 | /* 设置基本html,body样式 */ 27 | html,body{ 28 | margin: 0 auto; 29 | padding: 0; 30 | } 31 | 32 | /* 设置图片最大宽度 */ 33 | img{ 34 | max-width: 100%; 35 | } 36 | 37 | /* 清除默认按钮表现形式 */ 38 | button{ 39 | -webkit-appearance: none; 40 | appearance: none; 41 | } 42 | 43 | /* 设置表格默认样式 */ 44 | table { 45 | border-collapse: collapse; 46 | border-spacing: 0; 47 | } 48 | 49 | /* 文本域禁止拖拉放大 */ 50 | textarea { 51 | resize: none; 52 | } 53 | 54 | a { 55 | text-decoration: none; 56 | color: currentColor; 57 | } 58 | 59 | img { 60 | vertical-align: top; 61 | } 62 | 63 | i, em { 64 | font-style: normal; 65 | } 66 | 67 | ol, ul, li, menu { 68 | list-style: none outside none; 69 | } 70 | 71 | fieldset, iframe, abbr, acronym { 72 | border: 0 none; 73 | } 74 | 75 | dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, hr, 76 | article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 77 | margin: 0; 78 | padding: 0; 79 | } 80 | 81 | del { 82 | text-decoration:line-through; 83 | } 84 | -------------------------------------------------------------------------------- /waiting/src/sass/base/_flexible.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Lego纯CSS自适应方案 4 | 5 | 1，设计稿尺寸 6 | 7 | 默认设计稿宽带 750px，可通过变量 $psd-size 进行修改 8 | 9 | 2，对应的 meta 标签写法： 10 | 11 | 12 | 3，px to rem 需要用到小学算术 13 | 14 | 100px = 1rem / 1px = 0.01rem 15 | 16 | Notes: 17 | 18 | 断点参考：http://screensiz.es/phone 19 | 20 | 横屏断点：384px, 480px, 533px, 568px, 640px, 667px, 699px, 736px 21 | 某些手机厂商系统的虚拟SmartBar会改变Screen的值，又是坑，建议统一横屏提示规避 22 | 23 | 避免使用 min-device-width 24 | https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=zh-cn#min-device-width- 25 | 26 | __Changelog__ 27 | 2016.05.04：添加 393px 699px 断点，小米note 1080 屏幕，DPR=2.75 28 | 29 | */ 30 | 31 | // 定义基准数 32 | $base-fontSize: 100px !default; 33 | 34 | // 定义设计稿尺寸 35 | $psd-size: 750px !default; 36 | 37 | // 定义竖屏断点 38 | $responsives: 320px, 360px, 375px, 393px, 400px, 414px; 39 | 40 | // 定义根元素font-size 41 | @mixin rem($values){ 42 | font-size: $values * $base-fontSize / $psd-size; 43 | } 44 | 45 | // 遍历输出断点 46 | @each $responsive in $responsives{ 47 | @media only screen and (min-width: #{$responsive}) { 48 | html{ @include rem($responsive);} 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /waiting/src/sass/index.scss: -------------------------------------------------------------------------------- 1 | @import "base/base"; // 基础scss模块 2 | @import "img"; -------------------------------------------------------------------------------- /wechat-share/README.md: -------------------------------------------------------------------------------- 1 | # wechat-share 2 | 3 | ## 说明 4 | 5 | 微信分享JS SDK的封装；当前使用微信JS-SDK版本：`//res.wx.qq.com/open/js/jweixin-1.2.1.js`。 6 | 7 | * 支持**外链**或者**ADM/CMD/commonJS**等多种形式； 8 | * 本组件使用 [legoFlow](https://legoflow.com/) 进行开发构建； 9 | * 本组件无第三方插件依赖； 10 | 11 | ## 使用 12 | 13 | ### 模块引入方式 14 | 15 | ````javascript 16 | import wxShare from 'legolib/wechat-share/index.js'; 17 | new wxShare({ 18 | type: 'bi', 19 | title: '放我出去装X', 20 | desc : '金币，绑钻，宝石箱，你想要的统统都在这里!', 21 | img : 'http://bi.duowan.com/source/pcindex/img/part1/bg1.png', 22 | }); 23 | ```` 24 | 25 | ### 外链引入方式 26 | 27 | 全局实例：`LegoWechatShare` 28 | 29 | ````html 30 | 31 | 32 | var share = new LegoWechatShare(config); 33 | ```` 34 | 35 | ## API 36 | 37 | ### 参数 38 | 39 | |参数序号|类型|是否必填|默认值|说明| 40 | |--------|----|--------|------|----| 41 | |type|string|否|无|类型，可选值有`bi`、`yy`，分别调用Bi神器和yy.com域名的签名接口，仅YY内部使用| 42 | |signatureUrl|string|否|无|自定义签名接口| 43 | |title|string|是|无|分享标题| 44 | |desc|string|是|无|分享描述| 45 | |img|string|是|无|分享缩略图| 46 | |link|string|否|当前页面链接|自定义分享链接| 47 | |successCallback|function|否|无|分享成功回调| 48 | |cancelCallback|function|否|无|分享取消回调| 49 | |debug|Boolean|否|false|是否启用debug| 50 | 51 | ### 签名接口signatureUrl返回格式 52 | ````javascipt 53 | { 54 | "code": 0, // code=0代表成功 55 | "message": "", 56 | "data": { 57 | "appId": "xxx", 58 | "nonceStr": "xxx", 59 | "signature": "xxx", 60 | "timestamp": "xxx" 61 | } 62 | } 63 | ```` 64 | 65 | ## 参考资料 66 | 67 | * 微信JS-SDK说明文档[https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115](https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115) 68 | 69 | -------------------------------------------------------------------------------- /wechat-share/example/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 微信分享 12 | 15 | 16 | 17 | 18 | 19 |
20 | 金币，绑钻，宝石箱，你想要的统统都在这里! 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /wechat-share/legoflow.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.51", 3 | "type": "clean", 4 | "assets": "", 5 | "es6": true, 6 | "webp": false, 7 | "legolib": false, 8 | "https": false, 9 | "hot": false, 10 | "isUglifyJs": true, 11 | "isPackVueStyle": false, 12 | "vue@2.1": false, 13 | "watch": [], 14 | "publicPath": "", 15 | "packImgSize": "", 16 | "packCommon": "", 17 | "other": "", 18 | "dist": "", 19 | "output": "", 20 | "shell": "./shell.js", 21 | "alias": {}, 22 | "global": {}, 23 | "externals": {}, 24 | "proxy": {}, 25 | "ts": {}, 26 | "cache": "timestamp", 27 | "user.dev.args": {}, 28 | "user.build.args": {}, 29 | "env": {}, 30 | "build.move": [], 31 | "build.env": "", 32 | "build.zip": "", 33 | "img.folder": "", 34 | "html.folder": "", 35 | "js.folder": "", 36 | "export.folder": "" 37 | } 38 | -------------------------------------------------------------------------------- /wechat-share/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lego-wechatShare", 3 | "version": "0.0.1", 4 | "repository": {}, 5 | "author": "UED.David", 6 | "license": "MIT" 7 | } -------------------------------------------------------------------------------- /wechat-share/shell.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | 5 | module.exports = ( param ) => { 6 | const { fs, del, folder, messager, args, gulp, shell } = param; 7 | 8 | const dist = path.resolve( folder, './dist' ); 9 | const example = path.resolve( folder, './example' ); 10 | 11 | fs.copySync( dist, example, { overwrite: true } ); 12 | 13 | del([ dist ], { force: true }, () => { 14 | gulp.src( `${ example }/js/*.min.js `) 15 | .pipe( gulp.dest( dist ) ) 16 | .on( 'end', ( ) => { 17 | messager.success(); 18 | }) 19 | }); 20 | } 21 | -------------------------------------------------------------------------------- /wechat-share/src/_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 微信分享 12 | 15 | 16 | 17 | 18 | 19 |
20 | 金币，绑钻，宝石箱，你想要的统统都在这里! 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /wechat-share/src/js/export/module/util.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @author: wilson（wuweishuan@yy.com） 3 | * @update: 2017-08-03 11:51:03 4 | */ 5 | 6 | let util = { 7 | extend: (deep, target, options) => { 8 | for (name in options) { 9 | copy = options[name]; 10 | if (deep && copy instanceof Array) { 11 | target[name] = this.extend(deep, [], copy); 12 | } else if (deep && copy instanceof Object) { 13 | target[name] = this.extend(deep, {}, 14 | copy); 15 | } else { 16 | target[name] = options[name]; 17 | } 18 | } 19 | return target; 20 | }, 21 | 22 | importScript: (url, callback) => { 23 | let head = document.getElementsByTagName("head")[0] || document.documentElement; 24 | let script = document.createElement("script"); 25 | script.type = "text/javascript"; 26 | script.async = true; 27 | script.charset = "utf-8"; 28 | script.src = url; 29 | script.onload = script.onreadystatechange = () => { 30 | if (!script.readyState || /loaded|complete/.test(script.readyState)) { 31 | if (callback) { 32 | callback(); 33 | } 34 | script.onload = script.onreadystatechange = null; 35 | if (script.parentNode) { 36 | script.parentNode.removeChild(script); 37 | } 38 | } 39 | }; 40 | script.onerror = () => { 41 | alert('脚本加载失败，请重试！'); 42 | } 43 | head.insertBefore(script, null); 44 | } 45 | } 46 | 47 | export default util; 48 | -------------------------------------------------------------------------------- /wechat-share/src/js/index.js: -------------------------------------------------------------------------------- 1 | import wxShare from './export/wechat-share'; 2 | 3 | new wxShare({ 4 | type: 'bi', 5 | title: '放我出去装Xxxxx', 6 | desc : '金币，绑钻，宝石箱，你想要的统统都在这里xxxx!', 7 | img : 'http://bi.duowan.com/source/pcindex/img/part1/bg1.png' 8 | }); 9 | -------------------------------------------------------------------------------- /wechat-share/src/sass/_img.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyued/legolib/4c6a33b0f3c7d74ba2dafbd2e14a360693fdb1c7/wechat-share/src/sass/_img.scss -------------------------------------------------------------------------------- /wechat-share/src/sass/base/_base.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * 基础模块 & 全局变量配置 3 | * 4 | */ 5 | 6 | // 文本配置 7 | $b-font-size : 14px !default; 8 | $b-font-family : "San Francisco", "Helvetica Neue", Helvetica, sans-serif !default; 9 | $b-font-weight : 300 !default; 10 | $b-line-height : 1.5 !default; 11 | $b-link-decoration : underline !default; 12 | 13 | // 颜色配置 14 | $c-text : #333 !default; 15 | $c-background : #fff !default; 16 | $c-link : #333 #fa0 !default; 17 | 18 | // 基础模块 19 | @import "normalize"; 20 | @import "reset"; 21 | @import "flexible"; 22 | // @import "orientation"; 23 | @import "tool"; 24 | 25 | // todo: 横屏提示在安卓弹出键盘时被触发 -------------------------------------------------------------------------------- /wechat-share/src/sass/base/_flexible.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | 纯 CSS 自适应方案 4 | 5 | 1，设计稿尺寸 6 | 7 | 默认设计稿宽带 750px，可通过变量 $psd-size 进行修改 8 | 9 | 2，对应的 meta 标签写法： 10 | 11 | 12 | 13 | 3，px to rem 需要用到小学算术 14 | 15 | 100px = 1rem / 1px = 0.01rem 16 | 17 | Notes: 18 | 19 | 断点参考： 20 | http://screensiz.es/phone 21 | http://mydevice.io/devices/#sortSmartphones 22 | 23 | 横屏断点：384px, 480px, 533px, 568px, 640px, 667px, 699px, 736px 24 | 某些手机厂商系统的虚拟 SmartBar 会改变 Screen 的值，又是坑，建议统一横屏提示规避 25 | 26 | 避免使用 min-device-width 27 | https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=zh-cn#min-device-width- 28 | 29 | Changelog: 30 | 31 | 2016.05.04：添加 393px 699px 断点，小米note 1080 屏幕，DPR=2.75 32 | 2016.11.11: 参考 http://mydevice.io/devices/#sortSmartphones 添加部分安卓手机宽度 33 | 34 | */ 35 | 36 | // 定义基准数 37 | $base-fontSize: 100px !default; 38 | 39 | // 定义设计稿尺寸 40 | $psd-size: 750px !default; 41 | 42 | // 定义竖屏断点 43 | $responsives: 320px, 346px, 360px, 375px, 384px, 390px, 393px, 400px, 412px, 414px, 432px; 44 | 45 | // 定义根元素font-size 46 | @mixin rem($values){ 47 | font-size: $values * $base-fontSize / $psd-size; 48 | } 49 | 50 | // 遍历输出断点 51 | @each $responsive in $responsives{ 52 | @media only screen and (min-width: #{$responsive}) { 53 | html{ @include rem($responsive);} 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /wechat-share/src/sass/base/_reset.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * @file: 重置样式 3 | */ 4 | 5 | /* 全局设置 */ 6 | *, 7 | *:before, 8 | *:after{ 9 | font-family: "San Francisco", "Helvetica Neue", Helvetica, sans-serif; 10 | font-weight: 300; 11 | box-sizing: border-box; 12 | appearance: none; 13 | -webkit-tap-highlight-color: rgba(0,0,0,0); 14 | } 15 | 16 | /* 设置基本html,body样式 */ 17 | html,body{ 18 | margin: 0 auto; 19 | padding: 0; 20 | } 21 | 22 | /* 设置图片最大宽度 */ 23 | img{ 24 | max-width: 100%; 25 | } 26 | 27 | /* 清除默认按钮表现形式 */ 28 | button{ 29 | -webkit-appearance: none; 30 | appearance: none; 31 | } 32 | 33 | /* 设置表格默认样式 */ 34 | table { 35 | border-collapse: collapse; 36 | border-spacing: 0; 37 | } 38 | 39 | /* 文本域禁止拖拉放大 */ 40 | textarea { 41 | resize: none; 42 | } 43 | 44 | a { 45 | text-decoration: none; 46 | color: currentColor; 47 | } 48 | 49 | img { 50 | vertical-align: top; 51 | } 52 | 53 | i, em { 54 | font-style: normal; 55 | } 56 | 57 | ol, ul, li, menu { 58 | list-style: none outside none; 59 | } 60 | 61 | fieldset, iframe, abbr, acronym { 62 | border: 0 none; 63 | } 64 | 65 | dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, hr, 66 | article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 67 | margin: 0; 68 | padding: 0; 69 | } 70 | 71 | del { 72 | text-decoration:line-through; 73 | } 74 | -------------------------------------------------------------------------------- /wechat-share/src/sass/main.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @import "base/base"; 4 | @import "img"; 5 | 6 | body { 7 | font: $b-font-weight #{$b-font-size}/#{$b-line-height} $b-font-family; 8 | color: $c-text; 9 | a { 10 | text-decoration: none; 11 | color: nth($c-link, 1); 12 | &:hover { 13 | text-decoration: underline; 14 | color: nth($c-link, 2); 15 | } 16 | } 17 | } 18 | 19 | .section1 { 20 | width: 7.5rem; 21 | height: 6.1rem; 22 | background: #f5f5f5; 23 | } 24 | 25 | // Coding... --------------------------------------------------------------------------------