new
This commit is contained in:
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"labels":["社交", "视频", "工具", "YLUI", "购物","壁纸","插件"],
|
||||
"apps": [
|
||||
{
|
||||
"title": "动态壁纸-星球大战",
|
||||
"icon": "../yl-wallpaper-starwar/preview.png",
|
||||
"labels": [
|
||||
"YLUI",
|
||||
"壁纸"
|
||||
],
|
||||
"url": "./res/apps/yl-wallpaper-starwar/setup.html"
|
||||
},
|
||||
{
|
||||
"title": "桌面时钟插件",
|
||||
"icon": "../yl-clock/preview.png",
|
||||
"labels": [
|
||||
"YLUI",
|
||||
"插件"
|
||||
],
|
||||
"url": "./res/apps/yl-clock/setup.html"
|
||||
},
|
||||
{
|
||||
"title": "计算器",
|
||||
"icon": "../yl-calculator/preview.png",
|
||||
"labels": [
|
||||
"YLUI",
|
||||
"工具"
|
||||
],
|
||||
"url": "./res/apps/yl-calculator/setup.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>应用商店</title>
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../res/components/font-awesome-4.7.0/css/font-awesome.min.css"/>
|
||||
<link rel="stylesheet" href="./style.css"/>
|
||||
<script src="../../yl.app.js"></script>
|
||||
<script src="../../../res/js/Yuri2.js"></script>
|
||||
<link rel="stylesheet" href="../../../res/css/grid.css"/>
|
||||
<script src="../../../res/components/vue.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div id="banner">
|
||||
YLUI 应用商店
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
|
||||
<div class="row apps box">
|
||||
<div class="app col-xs-6 col-sm-3 col-md-2 col-lg-2"
|
||||
:class="{active:isAppActive(app)}"
|
||||
v-show="isAppActive(app)"
|
||||
v-for="app in apps" @click="appClick(app)">
|
||||
<img onerror="this.src='./error.png'" :src="app.icon"/>
|
||||
<div class="title">{{app.title}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
|
||||
<div class="labels box">
|
||||
<input v-model="search" style="line-height: 1.5em;width: 100%;padding: 0.5em" placeholder="查询"/>
|
||||
</div>
|
||||
<div class="labels box">
|
||||
<div class="label"
|
||||
@click="labelClick(label)"
|
||||
:class="{active:label.active}"
|
||||
:style="labelStyle(label)"
|
||||
v-for="label in labels">{{label.name}}
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
©2018 ylui.yuri2.com
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
@@ -0,0 +1,99 @@
|
||||
var data={
|
||||
labels:[],
|
||||
apps:[],
|
||||
};
|
||||
|
||||
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
search: "",
|
||||
labels: [],
|
||||
apps: [],
|
||||
},
|
||||
created: function () {
|
||||
var that = this;
|
||||
Yuri2.loadContentFromUrl('./data.json','get',function (err,str) {
|
||||
var data=JSON.parse(str);
|
||||
var labels = data.labels;
|
||||
var apps =data.apps ;
|
||||
var labelsLoaded = [];
|
||||
labels.forEach(function (t) {
|
||||
labelsLoaded.push({
|
||||
name: t,
|
||||
active: true,
|
||||
color: that.getRandomColor()
|
||||
})
|
||||
});
|
||||
that.$set(that, 'labels', labelsLoaded);
|
||||
that.$set(that, 'apps', apps);
|
||||
});
|
||||
YLApp.onReady(function () {
|
||||
YLApp.eval('getAppVersion','',function (rel) {
|
||||
console.log(rel)
|
||||
});
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
appClick: function (app) {
|
||||
if (app.url) {
|
||||
YLApp.eval('open',{url:app.url,title:app.title});
|
||||
}
|
||||
|
||||
},
|
||||
labelClick: function (l) {
|
||||
l.active = !l.active;
|
||||
},
|
||||
isAppActive: function (app) {
|
||||
var that = this;
|
||||
var rel = false;
|
||||
var labels = app.labels;
|
||||
var hash = {};
|
||||
labels.forEach(function (t) {
|
||||
hash[t] = true;
|
||||
});
|
||||
this.labelsActive.forEach(function (t) {
|
||||
var checkList = [
|
||||
app.title,
|
||||
app.url,
|
||||
];
|
||||
checkList = checkList.concat(app.labels);
|
||||
var inWord = false;
|
||||
checkList.forEach(function (t2) {
|
||||
if (typeof t2 === "string" && t2.indexOf(that.search) !== -1) {
|
||||
inWord = true;
|
||||
}
|
||||
});
|
||||
if (hash[t] && inWord) {
|
||||
rel = true;
|
||||
}
|
||||
});
|
||||
return rel;
|
||||
|
||||
},
|
||||
labelStyle: function (label) {
|
||||
return {
|
||||
"color": label.active ? "white" : label.color,
|
||||
"border-color": label.active ? "white" : label.color,
|
||||
"background-color": !label.active ? "white" : label.color,
|
||||
}
|
||||
},
|
||||
getRandomColor: function () {
|
||||
var r = Yuri2.randInt(0, 200);
|
||||
var g = Yuri2.randInt(0, 200);
|
||||
var b = Yuri2.randInt(0, 200);
|
||||
return 'rgb(' + r + ',' + g + ',' + b + ')';
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
labelsActive: function () {
|
||||
var ls = [];
|
||||
this.labels.forEach(function (t) {
|
||||
if (t.active)
|
||||
ls.push(t.name)
|
||||
});
|
||||
return ls;
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
#banner{
|
||||
background-color: #070744;
|
||||
color: white;
|
||||
font-size: 36px;
|
||||
line-height: 4em;
|
||||
padding-left: 2em;
|
||||
}
|
||||
#footer{
|
||||
background-color: gainsboro;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 4em;
|
||||
padding-left: 2em;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.box {
|
||||
/*border: 1px solid silver;*/
|
||||
/*box-shadow: 3px 3px 5px #d0d0d0;*/
|
||||
margin: 20px auto;
|
||||
overflow-x: hidden;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.labels, .apps {
|
||||
|
||||
}
|
||||
|
||||
.labels {
|
||||
|
||||
}
|
||||
|
||||
.label {
|
||||
float: left;
|
||||
border-radius: 0.4em;
|
||||
border: 1px solid gray;
|
||||
padding: 0.5em;
|
||||
font-size: 12px;
|
||||
margin: 0.2em;
|
||||
cursor: pointer;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.label.active {
|
||||
|
||||
}
|
||||
|
||||
.apps {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app {
|
||||
margin-bottom: 1em;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.app:hover {
|
||||
border-color: #2D93CA;
|
||||
}
|
||||
|
||||
.app img {
|
||||
width: 100%;
|
||||
height:48px;
|
||||
}
|
||||
|
||||
.app .title {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
margin-top: 1em;
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<script src="../../yl.app.js"></script>
|
||||
<title>示例-APP引导安装</title>
|
||||
<style>
|
||||
body{
|
||||
padding: 0;
|
||||
margin:0;
|
||||
}
|
||||
.left{float: left}
|
||||
.clear{clear: both}
|
||||
.btn{
|
||||
padding: 1.5em;
|
||||
color: rgb(30,158,116);
|
||||
width: 16em;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin: 2em auto;
|
||||
border: 1px solid rgb(30,158,116);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.btn:hover{
|
||||
border-radius: 1em;
|
||||
color: rgb(36, 190, 139);
|
||||
}
|
||||
#header{
|
||||
color: lightgray;
|
||||
text-align: center;
|
||||
background-color: rgb(51,51,51);
|
||||
padding: 40px;
|
||||
|
||||
}
|
||||
#title{
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#sub-title{
|
||||
margin-top: 2em;
|
||||
}
|
||||
#body{
|
||||
padding: 2em;
|
||||
}
|
||||
#preview{
|
||||
width: 30%;
|
||||
display: block;
|
||||
}
|
||||
#content{
|
||||
width: 60%;
|
||||
margin-left: 5%;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header">
|
||||
<div id="title">APP名称</div>
|
||||
<div id="sub-title">APP副标题</div>
|
||||
<div class="btn">立即安装</div>
|
||||
</div>
|
||||
<div id="body">
|
||||
<img id="preview" class="left" src="./preview.jpg"/>
|
||||
<div id="content" class="left">
|
||||
<p>介绍性文字</p>
|
||||
<ul>
|
||||
<li>特性1</li>
|
||||
<li>特性2</li>
|
||||
<li>特性3</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,100 @@
|
||||
html,body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(to left top,#4CAF50, #2196F3);
|
||||
}
|
||||
.clear{
|
||||
clear: both;}
|
||||
#app{
|
||||
width:80%;
|
||||
max-width: 720px;
|
||||
height:80%;
|
||||
position: absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
border-radius: 5px;
|
||||
-webkit-transform: translate(-50%,-50%);
|
||||
-moz-transform: translate(-50%,-50%);
|
||||
transform:translate(-50%,-50%);
|
||||
}
|
||||
#url-box,#btn-go{
|
||||
color: white;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
transition: all 0.3s;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.54);
|
||||
}
|
||||
#url-box{
|
||||
width: 60%;
|
||||
outline: none;
|
||||
border-radius: 8px 0 0 8px;
|
||||
margin-left: calc(20% - 2em);
|
||||
}
|
||||
#btn-go{
|
||||
width: 3em;
|
||||
text-align: center;
|
||||
border-left: none;
|
||||
border-radius: 0 8px 8px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
#btn-go:hover {
|
||||
background-color: rgba(255, 255, 255, 0.29);
|
||||
}
|
||||
#url-ipt{
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: inherit;outline: none;
|
||||
padding: 0 1.5em;
|
||||
width: calc(100% - 3em);
|
||||
}
|
||||
#history-box{
|
||||
list-style: none;
|
||||
color: white;
|
||||
padding-left: 0;
|
||||
margin-top: 6em;
|
||||
max-height: 70%;
|
||||
overflow: auto;
|
||||
padding-right: 2em;
|
||||
}
|
||||
#history-box li{
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
#history-box .text-one-line{
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
}
|
||||
#history-box .left,#history-box .right{
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
color: rgba(255, 255, 255, 0.53);
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
#history-box .left{
|
||||
width: calc(90% - 12em);
|
||||
float: left;
|
||||
|
||||
}
|
||||
#history-box .left:hover {
|
||||
text-decoration: underline;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
#history-box .right{
|
||||
width: 12em;
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
#history-box .right:hover {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../res/components/font-awesome-4.7.0/css/font-awesome.min.css" />
|
||||
<script src="../../yl.app.js" ></script>
|
||||
<script src="../../../res/components/vue.min.js" ></script>
|
||||
<script src="../../../res/components/jquery-2.2.4.min.js" ></script>
|
||||
<script src="../../../res/components/jquery.nicescroll.min.js" ></script>
|
||||
<link rel="stylesheet" href="./index.css" />
|
||||
<title>浏览器</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div id="url-box">
|
||||
<input @keyup.enter="visit()" id="url-ipt" spellcheck="false" autofocus v-model="url" />
|
||||
</div>
|
||||
<div id="btn-go" @click="visit()"><i class="fa fa-location-arrow fa-fw"></i></div>
|
||||
<div class="clear"></div>
|
||||
<ul id="history-box">
|
||||
<li v-for="item in list">
|
||||
<span class="left text-one-line"
|
||||
@click="visit(item.url)"
|
||||
:title="item.url">{{item.url}}</span>
|
||||
<span class="right text-one-line">
|
||||
{{new Date(item.date).format('MM-dd hh:mm')}}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<script>
|
||||
var storageName='yluiAppsBrowser';
|
||||
function urlFormat(url) {
|
||||
url=url.replace(/(^\s*)|(\s*$)/g, "");
|
||||
var preg=/^(https?:\/\/|\.\.?\/|\/\/?)/i;
|
||||
if(!preg.test(url)){
|
||||
url='//'+url;
|
||||
}
|
||||
return url;
|
||||
}
|
||||
|
||||
function jump(url) {
|
||||
// url=urlFormat(url);
|
||||
if(YLApp.id){
|
||||
YLApp.eval('setWinData',{
|
||||
url :url,
|
||||
urlBar:url
|
||||
})
|
||||
}else{
|
||||
try{
|
||||
location.href=url;
|
||||
}catch (e){
|
||||
alert('不正确的地址')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
url:"",
|
||||
list:[],
|
||||
},
|
||||
created:function () {
|
||||
Date.prototype.format = function (fmt) { //author: meizz
|
||||
if (!fmt) {
|
||||
fmt = 'yyyy-MM-dd hh:mm:ss';
|
||||
}
|
||||
var o = {
|
||||
"M+": this.getMonth() + 1, //月份
|
||||
"d+": this.getDate(), //日
|
||||
"h+": this.getHours(), //小时
|
||||
"m+": this.getMinutes(), //分
|
||||
"s+": this.getSeconds(), //秒
|
||||
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
|
||||
"S": this.getMilliseconds() //毫秒
|
||||
};
|
||||
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
|
||||
for (var k in o)
|
||||
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
||||
return fmt;
|
||||
};
|
||||
if(localStorage[storageName]){
|
||||
this.list=JSON.parse(localStorage[storageName]);
|
||||
}
|
||||
this.$nextTick(function () {
|
||||
$("#history-box").niceScroll({
|
||||
cursorcolor: "#ffffff30",
|
||||
cursorwidth: "4px", // 滚动条的宽度，单位：便素
|
||||
cursorborder: "none", // CSS方式定义滚动条边框
|
||||
grabcursorenabled: false,
|
||||
});
|
||||
});
|
||||
|
||||
},
|
||||
methods:{
|
||||
save:function () {
|
||||
localStorage[storageName]=JSON.stringify(this.list);
|
||||
},
|
||||
visit:function (url) {
|
||||
url||(url=this.url);
|
||||
if(!url) return;
|
||||
url= urlFormat(url);
|
||||
//查找是否已存在于列表
|
||||
if(this.list.length>0){
|
||||
var found=false,foundIndex=null;
|
||||
this.list.forEach(function (t, n) {
|
||||
if(found){return}
|
||||
if(t.url===url){
|
||||
found=true;
|
||||
foundIndex=n;
|
||||
}
|
||||
});
|
||||
if(found){
|
||||
this.list.splice(foundIndex,1)
|
||||
}
|
||||
}
|
||||
this.list.unshift({
|
||||
url:url,
|
||||
date:Date.now()
|
||||
});
|
||||
if(this.list.length>50){
|
||||
this.list.pop();
|
||||
}
|
||||
this.save();
|
||||
jump(url);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>colorPicker</title>
|
||||
<script src="../../components/jquery-2.2.4.min.js"></script>
|
||||
<script src="../../components/color-picker/color-picker.js"></script>
|
||||
<script src="../../yl.app.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../../components/color-picker/color-picker.css"/>
|
||||
<style>
|
||||
html,body{
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="picker"></div>
|
||||
<script>
|
||||
YLApp.onReady(function () {
|
||||
var color=YLApp.data.color?YLApp.data.color:'000000';
|
||||
color=color.replace(/^#/,'');
|
||||
if(!/^[\da-zA-Z]{6}$/.test(color)){
|
||||
color="000000"
|
||||
}
|
||||
$('#picker').colpick({
|
||||
flat:true,
|
||||
layout:'hex',
|
||||
color:color,
|
||||
submit:0,
|
||||
onChange:function(hsb,hex,rgb,el){
|
||||
if(YLApp.data.parent){
|
||||
var color="#"+hex;
|
||||
YLApp.emit('setColorFromColorPicker',color,YLApp.data.parent);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
2.0.8
|
||||
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Server</title>
|
||||
<script src="../../../res/yl.app.js"></script>
|
||||
<style>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Server</h1>
|
||||
<script>
|
||||
YLApp.onReady(function () {
|
||||
// YLApp.eval('import',null,function (data) {
|
||||
//
|
||||
// })
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Server</title>
|
||||
<script src="../../../res/yl.app.js"></script>
|
||||
<style>
|
||||
body{background-color: white}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Server</h1>
|
||||
<script>
|
||||
YLApp.onReady(function () {
|
||||
var json=
|
||||
|
||||
YLApp.eval('import',null,function (data) {
|
||||
console.log(YLApp.id,data)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@@ -0,0 +1,444 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>系统设置</title>
|
||||
<script src="../../components/vue.min.js"></script>
|
||||
<script src="../../js/yl-vue-component-icon.js"></script>
|
||||
<script src="../../js/Yuri2.js"></script>
|
||||
<script src="../../components/jquery-2.2.4.min.js"></script>
|
||||
<script src="../../components/clipboard-polyfill.js"></script>
|
||||
<script src="../../components/layer-v3.0.3/layer/layer.full.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../../components/font-awesome-4.7.0/css/font-awesome.min.css"/>
|
||||
<!-- element-ui -->
|
||||
<link rel="stylesheet" href="../element-ui/index.css">
|
||||
<script src="../element-ui/index.js"></script>
|
||||
<script src="../../components/contextMenu/contextMenu.js"></script>
|
||||
<link rel="stylesheet" href="../../components/contextMenu/contextMenu.css">
|
||||
<link rel="stylesheet" href="../../css/yl-layer-skin.css">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<script src="../../yl.app.js"></script>
|
||||
<!--图标模板-->
|
||||
<script type="text/x-template" id="tpl-icon">
|
||||
<div :class="[drawer?'icon-drawer-pre':'icon']" :style="{background:nobg?'none':icon.bg}">
|
||||
<template v-if="icon.type==='str'">
|
||||
{{icon.content.substr(0, 1)}}
|
||||
</template>
|
||||
<i v-if="icon.type==='fa'" class="fa fa-fw"
|
||||
:class="[ 'fa-'+icon.content ]">
|
||||
</i>
|
||||
<template v-if="icon.type==='img'">
|
||||
<img ondragstart="return false;" class="fa" :src="img?img:icon.content"/>
|
||||
</template>
|
||||
<div class="badge" v-show="badge">{{badgeText(badge)}}</div>
|
||||
</div>
|
||||
</script>
|
||||
<script src="../../js/yl-vue-component-icon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" :class="{'small-screen':isSmallScreen}">
|
||||
<div class="tab-title"><i class="fa fa-gear fa-fw"></i> {{YL.lang("SystemOptions")}}</div>
|
||||
<div class="tab-left">
|
||||
<ul class="tab-nav">
|
||||
<li v-for="(nav,id) in navs"
|
||||
@click="if(!nav.disable) navActive=id"
|
||||
:style="navStyle(id)"
|
||||
:class="{active:id===navActive,disable:nav.disable}">
|
||||
<i class="fa fa-fw" :class="[ 'fa-'+nav.icon ]"></i>{{nav.text}}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tab-right" :class="{active:'app-manager'===navActive}">
|
||||
<div class="show">
|
||||
<h1>{{YL.lang('AppManager')}}</h1>
|
||||
<div id="app-manager">
|
||||
<div>
|
||||
<input style="padding: 0.5em; width: calc(100% - 7.5em);margin-bottom: 1em; max-width: 36em;outline: none"
|
||||
v-model="appSearchWords"
|
||||
:placeholder="YL.lang('Search')+'/'+YL.lang('Create')+' '+YL.lang('Application')+'...'"/>
|
||||
<el-button @click="appCreate(appSearchWords)" type="primary" size="small" icon="el-icon-plus" >{{YL.lang('Application')}}</el-button>
|
||||
<table class="list" style="table-layout: fixed;width: 100%">
|
||||
<tr class="item">
|
||||
<td class="text" width="120" style="font-weight: bold">{{YL.lang('Application')}}</td>
|
||||
<td class="text" width="120" style="font-weight: bold">ID</td>
|
||||
<td class="text" width="110" style="font-weight: bold">{{YL.lang('Description')}}</td>
|
||||
<td class="text" width="50" style="font-weight: bold">{{YL.lang('Copyright')}}</td>
|
||||
<td class="text" width="40" style="font-weight: bold">{{YL.lang('AutoRun')}}</td>
|
||||
</tr>
|
||||
<tr v-for="(app,id) in apps" class="item"
|
||||
v-show="appSearchMatch(id)"
|
||||
@contextMenu="appContextMenu(id,$event)">
|
||||
<td class="text title" @dblclick="appSetting=app">
|
||||
<yl-icon :icon="app.icon" :img="urlFix(app.icon.content)"></yl-icon>
|
||||
<span style="padding-left: 0.5em" :title="app.title">{{app.title}}</span>
|
||||
</td>
|
||||
<td class="text" :title="id">{{id}}</td>
|
||||
<td class="text" :title="app.desc?app.desc:YL.lang('NoMoreDescription')">{{app.desc?app.desc:YL.lang('NoMoreDescription')}}</td>
|
||||
<td class="text" :title="app.poweredBy">{{app.poweredBy}}</td>
|
||||
<td class="text">{{renderAutoRun(app.autoRun)}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!--抽屉渲染-->
|
||||
<transition name="opacity">
|
||||
<div class="shader" v-if="appSetting" @click.self="appSetting=null"
|
||||
style="z-index:1">
|
||||
<div class="drawer">
|
||||
<el-form ref="form" :label-position="isSmallScreen?'top':'left'" :model="appSettingForm" label-width="8em" size="mini"
|
||||
style="padding:1em ;overflow: auto;height: calc(100% - 2em);">
|
||||
<el-form-item :label="YL.lang('Title')">
|
||||
<el-input spellcheck="false" v-model="appSetting.title" size="mini"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('Version')">
|
||||
<el-input spellcheck="false" v-model="appSetting.version" size="mini"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('Description')">
|
||||
<el-input spellcheck="false" v-model="appSetting.desc" size="mini"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('Copyright')">
|
||||
<el-input spellcheck="false" v-model="appSetting.poweredBy" size="mini"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="URL">
|
||||
<el-input spellcheck="false" v-model="appSetting.url" size="mini" :placeholder="YL.lang('CanBeEmpty')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('Tile')+' '+'URL'">
|
||||
<el-input spellcheck="false" v-model="appSetting.customTile" size="mini" :placeholder="YL.lang('CanBeEmpty')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('OpenMode')">
|
||||
<el-select v-model="appSetting.openMode" :placeholder="YL.lang('PleaseChoose')" size="mini">
|
||||
<el-option :label="YL.lang('Normal')" value="normal"></el-option>
|
||||
<el-option :label="YL.lang('Maximize')" value="max"></el-option>
|
||||
<el-option :label="YL.lang('Minimize')" value="min"></el-option>
|
||||
<el-option :label="YL.lang('Outer')" value="outer"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('IconType')">
|
||||
<el-select v-model="appSetting.icon.type" :placeholder="YL.lang('PleaseChoose')" size="mini">
|
||||
<el-option label="Font Awesome" value="fa"></el-option>
|
||||
<el-option :label="YL.lang('Initial')" value="str"></el-option>
|
||||
<el-option :label="YL.lang('Image')" value="img"></el-option>
|
||||
</el-select>
|
||||
<el-button @click="YL.open('ylui-fa')" v-show="appSetting.icon.type === 'fa'" plain size="mini" icon="el-icon-search" style="margin-left: 10px"></el-button>
|
||||
<el-button @click="YL.open('ylui-image-host')" v-show="appSetting.icon.type === 'img'" plain size="mini" icon="el-icon-upload" ></el-button>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('IconContent')">
|
||||
<el-input spellcheck="false" v-model="appSetting.icon.content" size="mini"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('IconBgColor')">
|
||||
<el-row>
|
||||
<el-col :span="2">
|
||||
<div @click="YL.open('yl-color-picker',{data:{color:appSetting.icon.bg,parent:YLApp.id}})" :style="{background:appSetting.icon.bg}" style="width: 90%;height: 27px;margin-top: 1px;border-radius: 3px;box-sizing: border-box;border: 1px solid darkgray;"> </div>
|
||||
</el-col>
|
||||
<el-col :span="22">
|
||||
<el-input spellcheck="false" v-model="appSetting.icon.bg" size="mini" style="width:147px" :placeholder="YL.lang('LegalCSSColor')"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('AutoRun')">
|
||||
<el-button-group>
|
||||
<el-button @click="reduceAutoRunLevel(appSetting)" plain icon="el-icon-remove" size="mini">{{YL.lang('Degrade')}}</el-button>
|
||||
<el-button plain size="mini">{{YL.lang('Current')}}:{{renderAutoRun(appSetting.autoRun)}}</el-button>
|
||||
<el-button @click="increaseAutoRunLevel(appSetting)" plain icon="el-icon-circle-plus" size="mini">{{YL.lang('Upgrade')}}</el-button>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('Superscript')">
|
||||
<el-input-number v-model="appSetting.badge" size="mini" :min="0" :max="999"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('Position')+' - '+YL.lang('AutoOffset')">
|
||||
<el-switch
|
||||
style="display: block;position: relative;top: 4px;width: 40px;"
|
||||
v-model="appSetting.position.autoOffset"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('Position')+' - '+YL.lang('LateralAlignment')">
|
||||
<el-switch
|
||||
v-model="appSetting.position.left"
|
||||
:active-text="YL.lang('AlignLeft')"
|
||||
:inactive-text="YL.lang('AlignRight')"
|
||||
inactive-color="#409EFF">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('Position')+' - '+YL.lang('VerticalAlignment')">
|
||||
<el-switch
|
||||
v-model="appSetting.position.top"
|
||||
:active-text="YL.lang('AlignTop')"
|
||||
:inactive-text="YL.lang('AlignBottom')"
|
||||
inactive-color="#409EFF">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('Position')+' - '+YL.lang('LateralOffset')">
|
||||
<el-input v-model="appSetting.position.x" size="mini"
|
||||
:placeholder="YL.lang('TipsOfSizeSetting')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('Position')+' - '+YL.lang('VerticalOffset')">
|
||||
<el-input v-model="appSetting.position.y" size="mini"
|
||||
:placeholder="YL.lang('TipsOfSizeSetting')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('Size')+' - '+YL.lang('Width')">
|
||||
<el-input v-model="appSetting.size.width" size="mini"
|
||||
:placeholder="YL.lang('TipsOfSizeSetting')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('Size')+' - '+YL.lang('Height')">
|
||||
<el-input v-model="appSetting.size.height" size="mini"
|
||||
:placeholder="YL.lang('TipsOfSizeSetting')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('DisplayMode')">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-switch
|
||||
v-model="appSetting.plugin"
|
||||
:active-text="YL.lang('PluginMode')"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-switch
|
||||
v-model="appSetting.single"
|
||||
:active-text="YL.lang('SingleWindow')"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-switch
|
||||
v-model="appSetting.addressBar"
|
||||
:active-text="YL.lang('DisplayAddressBar')"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-switch
|
||||
v-model="appSetting.background"
|
||||
:active-text="YL.lang('BackMode')"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-switch
|
||||
v-model="appSetting.resizable"
|
||||
:active-text="YL.lang('Resizable')"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-switch
|
||||
v-model="appSetting.urlRandomToken"
|
||||
:active-text="YL.lang('UrlRandomToken')"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-right" :class="{active:'colors'===navActive}">
|
||||
<div class="show" id="colors">
|
||||
<h1>{{YL.lang('Color')}}</h1>
|
||||
<div class="color-choose">
|
||||
<div v-for="color in colors" class="color-block"
|
||||
@click="colorChoose=color"
|
||||
:style="{'background-color': color}"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div @click="YL.open('yl-color-picker',{data:{color:colorChoose,parent:YLApp.id}})" style="float: left;margin-right:1em;width:4em;height:calc(2em + 2px);"
|
||||
:style="{'background-color': colorChoose}"></div>
|
||||
<input style="width:103px;margin-right: 20px;float: left;padding: 0.5em;outline: none;"
|
||||
:disabled="autoThemeColor" v-model="colorChoose"/>
|
||||
<el-switch
|
||||
style="display: block;position: relative;top: 4px;float: left;width: 200px;"
|
||||
v-model="autoThemeColor"
|
||||
:active-text="YL.lang('PickFromBgAuto')"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-right" :class="{active:'wallpaper'===navActive}">
|
||||
<div class="show">
|
||||
<h1>{{YL.lang('Wallpaper')}}</h1>
|
||||
<img id="img-wallpaper-preview" width="336" height="185" onerror="this.src='./error.png'" :src="wallpaperNowFixed"/>
|
||||
<div>
|
||||
<el-switch
|
||||
style=""
|
||||
v-model="wallpaperBlur"
|
||||
:active-text="YL.lang('Blur')"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
<el-switch
|
||||
style="margin-left: 20px"
|
||||
v-model="wallpaperSlide"
|
||||
:active-text="YL.lang('Slide')"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</div>
|
||||
<div v-show="wallpaperSlide">
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="wallpaperSlideRandom" size="small">
|
||||
<el-radio-button :label="false">{{YL.lang('PlaySequentially')}}</el-radio-button>
|
||||
<el-radio-button :label="true">{{YL.lang('PlayRandomly')}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
{{YL.lang('SwitchingFrequency')}}
|
||||
<el-select v-model="wallpaperSlideItv" size="small" :placeholder="YL.lang('PleaseChoose')">
|
||||
<el-option :label="'1 '+YL.lang('Minutes')" :value="1"></el-option>
|
||||
<el-option :label="'10 '+YL.lang('Minutes')" :value="10"></el-option>
|
||||
<el-option :label="'30 '+YL.lang('Minutes')" :value="30"></el-option>
|
||||
<el-option :label="'1 '+YL.lang('Hours')" :value="60"></el-option>
|
||||
<el-option :label="'6 '+YL.lang('Hours')" :value="360"></el-option>
|
||||
<el-option :label="'24 '+YL.lang('Hours')" :value="1440"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<input class="ipt-yl" v-model="wallpaperAddUrl" :placeholder="YL.lang('AddPictureOnline')"/>
|
||||
<el-button @click="btnAddBgClick" size="medium"
|
||||
style="width: 81px;border-radius: inherit;font-size: 12px;">{{YL.lang('Add')}}
|
||||
</el-button>
|
||||
<el-button @click="YL.open('ylui-image-host')"
|
||||
style="border-radius: inherit;margin-left: 13px;font-size: 12px;"
|
||||
size="medium" icon="el-icon-upload" ></el-button>
|
||||
</p>
|
||||
|
||||
<div class="img-bg-preview">
|
||||
<img v-for="bg in wallpapers"
|
||||
:style="{'border-color':themeColorNow}"
|
||||
@click="YL.vue.configs.wallpaper=bg.image"
|
||||
onerror="this.src='./error.png'"
|
||||
@contextMenu="imgContextMenu(bg,$event)"
|
||||
:src="urlFix(bg.preview?bg.preview:bg.image)"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-right" :class="{active:'data-manage'===navActive}">
|
||||
<div class="show">
|
||||
<h1>{{YL.lang('DataManager')}}</h1>
|
||||
<div style="min-width: 250px;overflow-x: hidden">
|
||||
<el-button-group>
|
||||
<el-button plain :type="dataChanged?'primary':''" size="small" @click="layer.msg(YL.lang('DataHasBeenRefreshed'), {icon: 1});refreshData();" icon="el-icon-refresh"><span class="small-screen-hidden">{{YL.lang('Refresh')}}</span></el-button>
|
||||
<el-button plain size="small" @click="enableData" :loading="btnEnableLoading" icon="el-icon-sort"><span class="small-screen-hidden">{{YL.lang('TakeEffect')}}</span></el-button>
|
||||
<el-button plain size="small" @click="btnClipboard" icon="el-icon-tickets"><span class="small-screen-hidden">{{YL.lang('Copy')}}</span></el-button>
|
||||
<el-button plain size="small" @click="$('#ipt-json-file').click()" icon="el-icon-upload2"><input type="file"
|
||||
@change="jsonImport"
|
||||
id="ipt-json-file"/><span class="small-screen-hidden">{{YL.lang('Import')}}</span></el-button>
|
||||
<el-button plain size="small" @click="jsonExport" icon="el-icon-download"><span class="small-screen-hidden">{{YL.lang('Export')}}</span></el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<textarea style="margin: 5px 0 " id="text-data" v-model="textData" spellcheck="false"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-right" :class="{active:'others'===navActive}">
|
||||
<div class="show">
|
||||
<h1>{{YL.lang('Others')}}</h1>
|
||||
<p>
|
||||
<el-switch
|
||||
v-model="topTaskBar"
|
||||
:active-text="YL.lang('TopTaskBar')"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</p>
|
||||
<div style="margin-top: 20px">
|
||||
{{YL.lang('MaxNumberOfWindows')}}
|
||||
<el-select v-model="openMax" size="small" :placeholder="YL.lang('PleaseChoose')">
|
||||
<el-option label="6" :value="6"></el-option>
|
||||
<el-option label="9" :value="9"></el-option>
|
||||
<el-option label="12" :value="12"></el-option>
|
||||
<el-option label="15" :value="15"></el-option>
|
||||
<el-option label="18" :value="18"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-right" :class="{active:'YLUI'===navActive}">
|
||||
<div class="show">
|
||||
<h1>YLUI</h1>
|
||||
<div style="margin: 15px auto;" :style="{color:themeColorNow,'font-size':isSmallScreen?'22px':'68px'}">
|
||||
<i class=" fa " :class="[ 'fa-'+YL.info.iconBtnStart ]"></i> {{YL.info.softwareName}}
|
||||
</div>
|
||||
<table class="tb-about-us">
|
||||
<tr>
|
||||
<td :width="isSmallScreen?'100':'150'">{{YL.lang('Version')}}</td>
|
||||
<td>{{YL.info.version}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{YL.lang('Authorization')}}</td>
|
||||
<td>{{YL.static.authorization}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{YL.lang('SerialNumber')}}</td>
|
||||
<td>{{YL.static.serialNumber}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{YL.lang('Author')}}</td>
|
||||
<td>{{YL.info.author}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{YL.lang('Contact')}}</td>
|
||||
<td>{{YL.info.contactInformation}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{YL.lang('OfficialWebsite')}}</td>
|
||||
<td>
|
||||
<a style="text-decoration: underline;cursor: pointer" onclick="YLApp.open(YL.info.officialWebsite)">{{YL.info.officialWebsite}}</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{YL.lang('Copyright')}}</td>
|
||||
<td style="font-size: 12px">{{YL.info.copyrightDetail}}</td>
|
||||
</tr>
|
||||
<tr v-if="YL.static.others">
|
||||
<td>{{YL.lang('OtherStatements')}}</td>
|
||||
<td style="font-size: 12px">{{YL.info.otherStatements}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-right" :class="{active:'aboutUs'===navActive}">
|
||||
<div class="show">
|
||||
<h1>{{YL.lang('AboutUs')}}</h1>
|
||||
<div style="margin: 15px auto;" :style="{color:themeColorNow,'font-size':isSmallScreen?'22px':'68px'}">
|
||||
<i class=" fa " :class="[ 'fa-'+YL.static.iconBtnStart ]"></i> {{YL.static.softwareName}}
|
||||
</div>
|
||||
<table class="tb-about-us">
|
||||
<tr>
|
||||
<td :width="isSmallScreen?'100':'150'">{{YL.lang('Version')}}</td>
|
||||
<td>{{YL.static.version}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{YL.lang('Author')}}</td>
|
||||
<td>{{YL.static.author}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{YL.lang('Contact')}}</td>
|
||||
<td>{{YL.static.contactInformation}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{YL.lang('OfficialWebsite')}}</td>
|
||||
<td>
|
||||
<a style="text-decoration: underline;cursor: pointer" onclick="YLApp.open(YL.static.officialWebsite)">{{YL.static.officialWebsite}}</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{YL.lang('Copyright')}}</td>
|
||||
<td style="font-size: 12px">{{YL.static.copyrightDetail}}</td>
|
||||
</tr>
|
||||
<tr v-if="YL.static.others">
|
||||
<td>{{YL.lang('OtherStatements')}}</td>
|
||||
<td style="font-size: 12px">{{YL.static.otherStatements}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,457 @@
|
||||
var YL = parent.YL;
|
||||
YLApp.onReady(function () {
|
||||
YLApp.onEvent(function (e) {
|
||||
switch (e.event) {
|
||||
case "setColorFromColorPicker":
|
||||
var color = e.data;
|
||||
if ('colors' === vue.navActive) {
|
||||
vue.colorChoose = color;
|
||||
|
||||
}
|
||||
if ('app-manager' === vue.navActive) {
|
||||
vue.appSetting.icon.bg = color;
|
||||
}
|
||||
break;
|
||||
case "dataChanged" :
|
||||
if(e.from===0){
|
||||
vue.ondataChanged();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var vue = new Vue({
|
||||
el: "#app",
|
||||
created: function () {
|
||||
document.body.focus();
|
||||
var that = this;
|
||||
if(YL.static.changeable&&YL.static.dataCenter){
|
||||
this.loadApps();
|
||||
if (YLApp.data.nav) {
|
||||
this.navActive = YLApp.data.nav;
|
||||
}
|
||||
if (YLApp.data.appSetting) {
|
||||
this.appSetting = this.apps[YLApp.data.appSetting];
|
||||
}
|
||||
this.syncData();
|
||||
this.refreshData();
|
||||
}else{
|
||||
this.navActive ="aboutUs";
|
||||
}
|
||||
var fnResize = function () {
|
||||
var clientSize = Yuri2.getClientSize();
|
||||
that.isSmallScreen = clientSize.width <= 768;
|
||||
};
|
||||
fnResize();
|
||||
$(window).resize(fnResize);
|
||||
$("body").css("opacity", 1);
|
||||
},
|
||||
data: {
|
||||
navActive: 'app-manager',
|
||||
navs: {
|
||||
"app-manager": {
|
||||
icon: "puzzle-piece",
|
||||
text: YL.lang('AppManager'),
|
||||
disable:!YL.static.changeable
|
||||
},
|
||||
"colors": {
|
||||
icon: "paint-brush",
|
||||
text: YL.lang('Color'),
|
||||
disable:!YL.static.changeable
|
||||
},
|
||||
"wallpaper": {
|
||||
icon: "image",
|
||||
text: YL.lang('Wallpaper'),
|
||||
disable:!YL.static.changeable
|
||||
},
|
||||
"others": {
|
||||
icon: "tasks",
|
||||
text: YL.lang('Others'),
|
||||
disable:!YL.static.changeable
|
||||
},
|
||||
"data-manage": {
|
||||
icon: "database",
|
||||
text: YL.lang('DataManager'),
|
||||
disable:!(YL.static.changeable&&YL.static.dataCenter)
|
||||
},
|
||||
"YLUI": {
|
||||
icon: "yoast",
|
||||
text: 'YLUI',
|
||||
},
|
||||
"aboutUs": {
|
||||
icon: "info-circle",
|
||||
text: YL.lang('AboutUs'),
|
||||
},
|
||||
},
|
||||
apps: {},
|
||||
appSearchWords: "",
|
||||
colors: [
|
||||
"#FFB900",
|
||||
"#FF8C00",
|
||||
"#F7630C",
|
||||
"#CA5010",
|
||||
"#DA3B01",
|
||||
"#EF6950",
|
||||
"#D13438",
|
||||
"#D13438",
|
||||
"#E74856",
|
||||
"#E81123",
|
||||
"#EA005E",
|
||||
"#C30052",
|
||||
"#E3008C",
|
||||
"#BF0077",
|
||||
"#C239B3",
|
||||
"#9A0089",
|
||||
"#0078D7",
|
||||
"#0063B1",
|
||||
"#8E8CD8",
|
||||
"#6B69D6",
|
||||
"#8764B8",
|
||||
"#744DA9",
|
||||
"#B146C2",
|
||||
"#881798",
|
||||
"#0099BC",
|
||||
"#2D7D9A",
|
||||
"#00B7C3",
|
||||
"#038387",
|
||||
"#00B294",
|
||||
"#018574",
|
||||
"#00CC6A",
|
||||
"#10893E",
|
||||
"#7A7574",
|
||||
"#5D5A58",
|
||||
"#68768A",
|
||||
"#515C6B",
|
||||
"#567C73",
|
||||
"#486860",
|
||||
"#498205",
|
||||
"#107C10",
|
||||
"#767676",
|
||||
"#4C4A48",
|
||||
"#69797E",
|
||||
"#4A5459",
|
||||
"#647C64",
|
||||
"#525E54",
|
||||
"#847545",
|
||||
"#7E735F",
|
||||
],
|
||||
colorChoose: '',
|
||||
autoThemeColor: false,
|
||||
themeColorNow: '',
|
||||
wallpaperNow: '',
|
||||
wallpapers: [],
|
||||
wallpaperBlur: false,
|
||||
wallpaperSlide: false,
|
||||
wallpaperSlideRandom: false,
|
||||
wallpaperSlideItv: 5,
|
||||
wallpaperAddUrl: '',
|
||||
openMax: 9,
|
||||
topTaskBar: false,
|
||||
activeAppId: null,
|
||||
textData: '',
|
||||
btnEnableLoading: false,
|
||||
appSetting: null,//app高级配置
|
||||
appSettingForm: {},
|
||||
isSmallScreen: false,//是否小屏幕
|
||||
dataChanged:false,
|
||||
},
|
||||
watch: {
|
||||
appSetting: {
|
||||
handler: function (val, oldVal) {
|
||||
if (!val) {
|
||||
YL.vue.$set(YL.vue, 'apps', Yuri2.jsonDeepCopy(this.apps));
|
||||
layer.msg("已保存");
|
||||
}
|
||||
}
|
||||
},
|
||||
colorChoose: {
|
||||
handler: function (val, oldVal) {
|
||||
if (!this.autoThemeColor) {
|
||||
YL.vue.configs.themeColor = val;
|
||||
}
|
||||
}
|
||||
},
|
||||
autoThemeColor: {
|
||||
handler: function (val, oldVal) {
|
||||
YL.vue.configs.autoThemeColor = val;
|
||||
if (val)
|
||||
YL.vue.backgroundToThemeColor();
|
||||
else
|
||||
YL.vue.configs.themeColor = this.colorChoose;
|
||||
}
|
||||
},
|
||||
wallpaperBlur: {
|
||||
handler: function (val, oldVal) {
|
||||
YL.vue.configs.wallpaperBlur = this.wallpaperBlur;
|
||||
}
|
||||
},
|
||||
wallpaperSlide: {
|
||||
handler: function (val, oldVal) {
|
||||
YL.vue.configs.wallpaperSlide = this.wallpaperSlide;
|
||||
}
|
||||
},
|
||||
wallpaperSlideRandom: {
|
||||
handler: function (val, oldVal) {
|
||||
YL.vue.configs.wallpaperSlideRandom = this.wallpaperSlideRandom;
|
||||
}
|
||||
},
|
||||
wallpaperSlideItv: {
|
||||
handler: function (val, oldVal) {
|
||||
YL.vue.configs.wallpaperSlideItv = this.wallpaperSlideItv;
|
||||
}
|
||||
},
|
||||
topTaskBar: {
|
||||
handler: function (val, oldVal) {
|
||||
YL.vue.configs.topTaskBar = this.topTaskBar;
|
||||
}
|
||||
},
|
||||
openMax: {
|
||||
handler: function (val, oldVal) {
|
||||
YL.vue.configs.openMax = this.openMax;
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
// 计算属性的 getter
|
||||
wallpaperNowFixed: function () {
|
||||
return this.urlFix(this.wallpaperNow);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
syncData:function () {
|
||||
var that=this;
|
||||
try {
|
||||
var configs = YL.util.dataCopy('configs');
|
||||
that.themeColorNow = configs.themeColor;
|
||||
that.autoThemeColor = configs.autoThemeColor;
|
||||
that.wallpaperNow = configs.wallpaper;
|
||||
that.wallpapers = configs.wallpapers;
|
||||
that.wallpaperBlur = configs.wallpaperBlur;
|
||||
that.wallpaperSlide = configs.wallpaperSlide;
|
||||
that.wallpaperSlideRandom = configs.wallpaperSlideRandom;
|
||||
that.wallpaperSlideItv = configs.wallpaperSlideItv;
|
||||
that.openMax = configs.openMax;
|
||||
that.topTaskBar = configs.topTaskBar;
|
||||
if (!that.colorChoose) {
|
||||
that.colorChoose = configs.themeColor;
|
||||
}
|
||||
} catch (e) {
|
||||
YL.debug(e)
|
||||
}
|
||||
},
|
||||
ondataChanged:function () {
|
||||
this.dataChanged=true;
|
||||
this.syncData();
|
||||
},
|
||||
appCreate: function (title) {
|
||||
var id = '';
|
||||
if (/^[\w-.]+$/.test(title) && !this.apps[title]) {
|
||||
//可以做id的情况
|
||||
id = title;
|
||||
} else {
|
||||
do {
|
||||
id = 'app-' + YL.util.getID();
|
||||
} while (this.apps[id])
|
||||
}
|
||||
var app = YL.util.getAppDataTemplate();
|
||||
app.title = title;
|
||||
app.icon.type = 'str';
|
||||
app.icon.content = title;
|
||||
this.$set(this.apps,id,app);
|
||||
},
|
||||
appContextMenu: function (id, e) {
|
||||
var that = this;
|
||||
var app = this.apps[id];
|
||||
var menu = [
|
||||
"<span style='color: darkgray'>" + YL.util.getStrFa('pencil') + app.title + "</span>",
|
||||
'|',
|
||||
[YL.util.getStrFa('play-circle') +YL.lang('Open'), function () {
|
||||
YL.open(id);
|
||||
}],
|
||||
[
|
||||
YL.util.getStrFa('copy') + YL.lang("AddTo"), [
|
||||
[YL.util.getStrFa('desktop') + YL.lang("DesktopIcons"), function () {
|
||||
that.appAddToShortcut(id)
|
||||
}],
|
||||
[YL.util.getStrFa('list-ul') + YL.lang("MainMenu"), function () {
|
||||
that.appAddToMenu(id)
|
||||
}],
|
||||
[YL.util.getStrFa('sliders') + YL.lang("Sidebar"), function () {
|
||||
that.appAddToSidebar(id)
|
||||
}],
|
||||
[YL.util.getStrFa('square') + YL.lang("Tiles"), function () {
|
||||
that.appAddToTile(id)
|
||||
}],
|
||||
]
|
||||
],
|
||||
[YL.util.getStrFa('cogs') + YL.lang("Advance"), function () {
|
||||
that.appSetting = app;
|
||||
}],
|
||||
'|',
|
||||
[YL.util.getStrFa('trash') + YL.lang("Uninstall"), function () {
|
||||
that.uninstall(id)
|
||||
}],
|
||||
];
|
||||
ContextMenu.render(e, menu, this);
|
||||
},
|
||||
jsonImport: function () {
|
||||
var that = this;
|
||||
var el = $("#ipt-json-file");
|
||||
var reader = new FileReader();
|
||||
//将文件以文本形式读入页面
|
||||
reader.readAsText(el[0].files[0], "utf8");
|
||||
reader.onload = function (e) {
|
||||
that.textData = e.target.result;
|
||||
};
|
||||
},
|
||||
jsonExport: function () {
|
||||
var blob = new Blob([this.textData], {type: "text/plain;charset=utf-8"});
|
||||
Yuri2.saveAs(blob, "yl-data.json");
|
||||
},
|
||||
refreshData: function () {
|
||||
//读取data
|
||||
var textData = YL.export();
|
||||
this.textData = Yuri2.jsonFormat(textData); // 缩进4个空格
|
||||
this.dataChanged=false;
|
||||
},
|
||||
btnClipboard: function () {
|
||||
var dt = new clipboard.DT();
|
||||
dt.setData("text/plain", this.textData);
|
||||
clipboard.write(dt);
|
||||
layer.msg(YL.lang("CopiedToShearPlate"));
|
||||
},
|
||||
enableData: function () {
|
||||
var that = this;
|
||||
this.btnEnableLoading = true;
|
||||
setTimeout(function () {
|
||||
try {
|
||||
var json = JSON.parse(that.textData);
|
||||
YL.import(json);
|
||||
}catch (e){
|
||||
layer.msg(YL.lang("FormatError"));
|
||||
that.btnEnableLoading = false;
|
||||
}
|
||||
}, 500);
|
||||
},
|
||||
renderAutoRun: function (autoRun) {
|
||||
try {
|
||||
if (autoRun > 0) {
|
||||
return "Lv" + Math.floor(autoRun);
|
||||
} else {
|
||||
return YL.lang("Disabled");
|
||||
}
|
||||
} catch (e) {
|
||||
return YL.lang("ConfigurationError");
|
||||
}
|
||||
},
|
||||
urlFix: function (url) {
|
||||
return url[0] === '.' ? "../../../" + url : url;
|
||||
},
|
||||
loadApps: function () {
|
||||
var apps = YL.util.dataCopy('apps');
|
||||
this.apps = apps;
|
||||
},
|
||||
navStyle: function (id) {
|
||||
var color = this.themeColorNow;
|
||||
return id === this.navActive ? {'color': color, 'border-left': '5px solid ' + color} : {};
|
||||
},
|
||||
uninstall: function (id) {
|
||||
var app = this.apps[id];
|
||||
var cfm = layer.confirm(Yuri2.template(YL.lang("UninstallConfirm"),app.title), {skin: "yl"}, function () {
|
||||
layer.close(cfm);
|
||||
if (YL.uninstall(id))
|
||||
vue.$delete(vue.apps, id);
|
||||
})
|
||||
},
|
||||
appOpen: function (id) {
|
||||
YL.open(id);
|
||||
},
|
||||
appAddToShortcut: function (id) {
|
||||
YL.addShortcut(id);
|
||||
layer.msg(YL.lang("Added"));
|
||||
},
|
||||
appAddToMenu: function (id) {
|
||||
YL.addMenuItem(id);
|
||||
layer.msg(YL.lang("Added"));
|
||||
},
|
||||
appAddToSidebar: function (id) {
|
||||
YL.addSidebarBtn(id);
|
||||
layer.msg(YL.lang("Added"));
|
||||
},
|
||||
appAddToTile: function (id) {
|
||||
YL.addTile(id);
|
||||
layer.msg(YL.lang("Added"));
|
||||
},
|
||||
appSearchMatch: function (id) {
|
||||
var app = this.apps[id];
|
||||
var words = this.appSearchWords;
|
||||
if (!words) {
|
||||
return true;
|
||||
}
|
||||
var checkList = [
|
||||
id,
|
||||
app.title,
|
||||
app.desc,
|
||||
app.poweredBy,
|
||||
this.renderAutoRun(app.autoRun),
|
||||
];
|
||||
for (var i in checkList) {
|
||||
var item = checkList[i];
|
||||
if (typeof item === 'string' && item.indexOf(words) !== -1) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
btnAutoTheme: function () {
|
||||
if (this.autoThemeColor) {
|
||||
return {'background': this.themeColorNow, 'color': 'white'};
|
||||
} else {
|
||||
return {'background': 'rgb(230,230,230)', 'color': 'black'};
|
||||
}
|
||||
},
|
||||
btnAddBgClick: function () {
|
||||
var url = this.wallpaperAddUrl;
|
||||
if (!url) {
|
||||
return
|
||||
}
|
||||
YL.vue.configs.wallpapers.push({image: url, preview: ""});
|
||||
this.wallpaperAddUrl = '';
|
||||
},
|
||||
imgContextMenu: function (bg, e) {
|
||||
var that = this;
|
||||
var menu = [
|
||||
[YL.util.getStrFa('play') + YL.lang('Enabled'), function () {
|
||||
YL.vue.configs.wallpaper = bg.image;
|
||||
}],
|
||||
[YL.util.getStrFa('remove') + YL.lang('Delete'), function () {
|
||||
var wallpapers = YL.vue.configs.wallpapers;
|
||||
for (var i = 0; i < wallpapers.length; i++) {
|
||||
if (wallpapers[i].image === bg.image) {
|
||||
wallpapers.splice(i, 1);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}],
|
||||
];
|
||||
ContextMenu.render(e, menu, this);
|
||||
},
|
||||
|
||||
_checkAutoRunLevel: function (app) {
|
||||
if (isNaN(app.autoRun) || app.autoRun < 0) {
|
||||
app.autoRun = 0;
|
||||
}
|
||||
},
|
||||
reduceAutoRunLevel: function (app) {
|
||||
this._checkAutoRunLevel(app);
|
||||
app.autoRun--;
|
||||
this._checkAutoRunLevel(app);
|
||||
},
|
||||
increaseAutoRunLevel: function (app) {
|
||||
this._checkAutoRunLevel(app);
|
||||
app.autoRun++;
|
||||
this._checkAutoRunLevel(app);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,300 @@
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
line-height: 24px;
|
||||
}
|
||||
.el-input{
|
||||
max-width: 300px;
|
||||
}
|
||||
.shader{
|
||||
position: fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.shader .drawer{
|
||||
position: absolute;
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -300px;
|
||||
margin-top: -200px;
|
||||
border: 1px solid darkgrey;
|
||||
box-shadow: 0 0 9px gray;
|
||||
background-color: white;
|
||||
}
|
||||
.small-screen .shader .drawer{
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.small-screen h1{
|
||||
|
||||
}
|
||||
.small-screen .small-screen-hidden{
|
||||
display: none;
|
||||
margin: 0;
|
||||
}
|
||||
.ipt-yl {
|
||||
width: 10em;
|
||||
padding: 8px;
|
||||
outline: none;
|
||||
border: 1px solid #d8dce5;
|
||||
}
|
||||
.small-screen .ipt-yl {
|
||||
width: 8em;
|
||||
}
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tab-left {
|
||||
position: absolute;
|
||||
width: 320px;
|
||||
height: calc(100% - 90px);
|
||||
font-size: 15px;
|
||||
top: 90px;
|
||||
overflow: auto;
|
||||
}
|
||||
.small-screen .tab-left {
|
||||
width: 120px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.tab-right {
|
||||
position: absolute;
|
||||
left: 330px;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
font-size: 15px;
|
||||
overflow: auto;
|
||||
display: none;
|
||||
}
|
||||
.small-screen .tab-right {
|
||||
left: 130px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.tab-title {
|
||||
position: absolute;
|
||||
line-height: 50px;
|
||||
padding: 0 10px;
|
||||
color: #666;
|
||||
font-size: 25px;
|
||||
top: 16px;
|
||||
}
|
||||
.small-screen .tab-title{
|
||||
font-size: 18px;
|
||||
}
|
||||
.tab-left .tab-nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tab-left .tab-nav li {
|
||||
line-height: 50px;
|
||||
padding: 0 15px;
|
||||
cursor: default;
|
||||
}
|
||||
.tab-left .tab-nav li.disable {
|
||||
color: grey;
|
||||
}
|
||||
.small-screen .tab-left .tab-nav li {
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.tab-left .tab-nav li.active {
|
||||
}
|
||||
|
||||
.tab-left .tab-nav li:hover {
|
||||
background-color: #E6E6E6;
|
||||
}
|
||||
|
||||
.tab-left .tab-nav li i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.tab-right .show {
|
||||
}
|
||||
|
||||
.tab-right .show h1 {
|
||||
line-height: 58px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tab-right.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
#app-manager {
|
||||
width: 90%;
|
||||
max-width:600px;
|
||||
}
|
||||
|
||||
#app-manager * {
|
||||
}
|
||||
|
||||
#app-manager .list {
|
||||
/*width: 100%;*/
|
||||
}
|
||||
|
||||
#app-manager .list .th {
|
||||
font-size: 10px;
|
||||
line-height: 24px;
|
||||
display: inline-block;
|
||||
color: #3f3f3f;
|
||||
}
|
||||
|
||||
#app-manager .list .item {
|
||||
padding: 6px;
|
||||
position: relative;
|
||||
transition: 0.3s all;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#app-manager .list tr {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
|
||||
#app-manager .list td {
|
||||
text-overflow: ellipsis; /* for IE */
|
||||
-moz-text-overflow: ellipsis; /* for Firefox,mozilla */
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
#app-manager .list .item:hover {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
#app-manager .list .item .icon {
|
||||
font-size: 18px;
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
box-shadow: 0 0 1px 0 grey;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#app-manager .list .item .icon > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#app-manager .list .item .title {
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
#app-manager .list .item .text {
|
||||
font-size: 10px;
|
||||
line-height: 28px;
|
||||
color: gray;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.color-choose {
|
||||
width: 384px;
|
||||
overflow: auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.small-screen .color-choose {
|
||||
width: 248px;
|
||||
}
|
||||
#colors .color-choose .color-block {
|
||||
float: left;
|
||||
margin-right: 2px;
|
||||
margin-bottom: 3px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.small-screen .color-choose .color-block{
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
#colors .color-choose .color-block:hover {
|
||||
border: 2px solid black;
|
||||
}
|
||||
#img-wallpaper-preview{
|
||||
width: 336px;
|
||||
height: 185px;
|
||||
}
|
||||
.small-screen #img-wallpaper-preview{
|
||||
width: 90%;
|
||||
height: auto;
|
||||
}
|
||||
.img-bg-preview {
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
.img-bg-preview > img {
|
||||
float: left;
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 45px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.img-bg-preview > img:hover {
|
||||
cursor: pointer;
|
||||
border: 2px solid;
|
||||
}
|
||||
|
||||
#text-data {
|
||||
outline: none;
|
||||
font-size: 10px;
|
||||
width: 90%;
|
||||
resize: vertical;
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
#ipt-json-file {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tb-about-us{
|
||||
width: 85%;table-layout: fixed
|
||||
}
|
||||
|
||||
.tb-about-us td{
|
||||
vertical-align: top;
|
||||
word-break: break-all;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
+3340
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,415 @@
|
||||
YL.onReady(function () {
|
||||
var lang = YL.static.lang === 'zh-cn' || YL.static.lang === 'zh-tw'?
|
||||
{
|
||||
Mon: '星期一',
|
||||
MonShort: '一',
|
||||
Tues: '星期二',
|
||||
TuesShort: '二',
|
||||
Wed: '星期三',
|
||||
WedShort: '三',
|
||||
Thur: '星期四',
|
||||
ThurShort: '四',
|
||||
Fri: '星期五',
|
||||
FriShort: '五',
|
||||
Sat: '星期六',
|
||||
SatShort: '六',
|
||||
Sun: '星期日',
|
||||
SunShort: '日',
|
||||
Jan: '1月',
|
||||
Feb: '2月',
|
||||
Mar: '3月',
|
||||
Apr: '4月',
|
||||
May: '5月',
|
||||
June: '6月',
|
||||
July: '7月',
|
||||
Aug: '8月',
|
||||
Sept: '9月',
|
||||
Oct: '10月',
|
||||
Nov: '11月',
|
||||
Dec: '12月',
|
||||
}:
|
||||
{
|
||||
Mon: 'Monday',
|
||||
MonShort: 'Mon',
|
||||
Tues: 'Tuesday',
|
||||
TuesShort: 'Tues',
|
||||
Wed: 'Wednesday',
|
||||
WedShort: 'Wed',
|
||||
Thur: 'Thursday',
|
||||
ThurShort: 'Thur',
|
||||
Fri: 'Friday',
|
||||
FriShort: 'Fri',
|
||||
Sat: 'Saturday',
|
||||
SatShort: 'Sat',
|
||||
Sun: 'Sunday',
|
||||
SunShort: 'Sun',
|
||||
Jan: 'Jan',
|
||||
Feb: 'Feb',
|
||||
Mar: 'Mar',
|
||||
Apr: 'Apr',
|
||||
May: 'May',
|
||||
June: 'June',
|
||||
July: 'July',
|
||||
Aug: 'Aug',
|
||||
Sept: 'Sept',
|
||||
Oct: 'Oct',
|
||||
Nov: 'Nov',
|
||||
Dec: 'Dec',
|
||||
};
|
||||
|
||||
var o_box_time = document.getElementById('_box_time');
|
||||
var aDiv_time = o_box_time.getElementsByClassName('div-time');
|
||||
var arrWeek = [lang.Sun, lang.Mon, lang.Tues, lang.Wed, lang.Thur, lang.Fri, lang.Sat];
|
||||
var oCalendar = o_box_time.getElementsByClassName('calendar')[0];
|
||||
var _aStrong = oCalendar.getElementsByTagName('strong');
|
||||
var oDays = oCalendar.getElementsByClassName('_days')[0].getElementsByTagName('ul')[0];
|
||||
var _oHeader = document.getElementsByClassName('_header')[0];
|
||||
var _r_l = _oHeader.getElementsByTagName('span');
|
||||
var _oYears_months = o_box_time.getElementsByClassName('_years_months')[0];
|
||||
var _oYears_months_ul = _oYears_months.getElementsByTagName('ul')[0];
|
||||
var _oNormal = o_box_time.getElementsByClassName('_normal')[0];
|
||||
var _aLi_months = _oYears_months.getElementsByTagName('li');
|
||||
var _delay_time = null;
|
||||
var onOff = 0;
|
||||
var _oTenYears = o_box_time.getElementsByClassName('_tenyears')[0];
|
||||
var _oTenYears_ul = _oTenYears.firstElementChild;
|
||||
var _oTenYears_lis = _oTenYears.getElementsByTagName('li');
|
||||
var _nowDate = new Date();
|
||||
var _setyear = _nowDate.getFullYear();
|
||||
var _setmonth = _nowDate.getMonth();
|
||||
var _setdate = _nowDate.getDate();
|
||||
var _relYear = _setyear;
|
||||
var _relMonth = _setmonth;
|
||||
var _relDate = _setdate;
|
||||
var _temp_ten = 0;
|
||||
initDom();
|
||||
showTime();
|
||||
setInterval(showTime, 1000);
|
||||
|
||||
function showTime() {
|
||||
var date = new Date();
|
||||
var h = date.getHours();
|
||||
var m = date.getMinutes();
|
||||
var s = date.getSeconds();
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var day = date.getDate();
|
||||
var week = date.getDay();
|
||||
var str;
|
||||
str = toZero(h) + ':' + toZero(m) + ':' + toZero(s);
|
||||
aDiv_time[0].innerHTML = str;
|
||||
str = year + '/' + month + '/' + day + ',' + arrWeek[week];
|
||||
aDiv_time[1].innerHTML = str;
|
||||
}
|
||||
|
||||
aDiv_time[1].onclick = function () {
|
||||
clearTimeout(_delay_time);
|
||||
_setyear = _relYear;
|
||||
_setmonth = _relMonth;
|
||||
_setdate = _relDate;
|
||||
showDate();
|
||||
onOff = 0;
|
||||
_oYears_months.style.display = 'none';
|
||||
_oNormal.style.display = 'block';
|
||||
_oTenYears.style.display = 'none';
|
||||
for (var i = 0; i < _aLi_months.length; i++) {
|
||||
_aLi_months[i].className = '';
|
||||
}
|
||||
_aLi_months[_setmonth].className = 'active';
|
||||
};
|
||||
var i;
|
||||
for (i = 0; i < 3; i++) {
|
||||
_aLi_months[_setmonth + i * 12].className = 'active';
|
||||
}
|
||||
for (i = 0; i < _aLi_months.length; i++) {
|
||||
(function (n) {
|
||||
_aLi_months[n].onclick = function () {
|
||||
var i;
|
||||
for (i = 0; i < _aLi_months.length; i++) {
|
||||
_aLi_months[i].className = '';
|
||||
}
|
||||
_setmonth = n % 12;
|
||||
for (i = 0; i < _aLi_months.length; i++) {
|
||||
_aLi_months[i].className = '';
|
||||
}
|
||||
|
||||
for (i = 0; i < 3; i++) {
|
||||
_aLi_months[_setmonth + i * 12].className = 'active';
|
||||
}
|
||||
console.log(this.offsetLeft, this.offsetTop);
|
||||
|
||||
clearTimeout(_delay_time);
|
||||
_delay_time = setTimeout(function () {
|
||||
_aStrong[0].innerHTML = _setyear + '/' + (_setmonth + 1);
|
||||
_oYears_months.style.display = 'none';
|
||||
_oNormal.style.display = 'block';
|
||||
|
||||
|
||||
_fn_block(_oNormal);
|
||||
|
||||
_oTenYears.style.display = 'none';
|
||||
// document.title=onOff;
|
||||
showDate();
|
||||
onOff = 0;
|
||||
}, 200);
|
||||
|
||||
|
||||
}
|
||||
})(i);
|
||||
}
|
||||
|
||||
function _fn_block(ele) {
|
||||
ele.style.transition = '0s';
|
||||
ele.style.transform = 'scale(0.5)';
|
||||
setTimeout(function () {
|
||||
ele.style.transition = '0.3s';
|
||||
ele.style.transform = 'scale(1)';
|
||||
}, 10);
|
||||
}
|
||||
|
||||
showDate();
|
||||
|
||||
function showDate() {
|
||||
var str = '';
|
||||
if (_setmonth === 0) {
|
||||
str = _fn_layout(_setyear - 1, 11, _setdate) + _fn_layout(_setyear, _setmonth, _setdate) + _fn_layout(_setyear, _setmonth + 1, _setdate);
|
||||
} else if (_setmonth === 11) {
|
||||
str = _fn_layout(_setyear, _setmonth - 1, _setdate) + _fn_layout(_setyear, _setmonth, _setdate) + _fn_layout(_setyear + 1, 0, _setdate);
|
||||
} else {
|
||||
str = _fn_layout(_setyear, _setmonth - 1, _setdate) + _fn_layout(_setyear, _setmonth, _setdate) + _fn_layout(_setyear, _setmonth + 1, _setdate);
|
||||
}
|
||||
oDays.innerHTML = str;
|
||||
_aStrong[0].innerHTML = _setyear + '/' + (_setmonth + 1);
|
||||
}
|
||||
|
||||
function _fn_layout(_setyear, _setmonth, _setdate) {
|
||||
if (_setyear === _relYear && _setmonth === _relMonth) {
|
||||
_setdate = _relDate;
|
||||
} else {
|
||||
_setdate = 1;
|
||||
}
|
||||
var _oDate = new Date();
|
||||
var _date;
|
||||
_oDate.setDate(_setdate);
|
||||
_oDate.setMonth(_setmonth);
|
||||
_oDate.setFullYear(_setyear);
|
||||
_date = new Date(_oDate);
|
||||
_date.setDate(0);
|
||||
var _prevDays = _date.getDate();
|
||||
_date = new Date(_oDate);
|
||||
_date.setDate(1);
|
||||
var _week = _date.getDay();
|
||||
_date = new Date(_oDate);
|
||||
_date.setDate(1);
|
||||
_date.setMonth(_setmonth + 1);
|
||||
_date.setDate(0);
|
||||
var _allDays = _date.getDate();
|
||||
var str = '';
|
||||
var num = 0;
|
||||
var i;
|
||||
if (_week === 0) {
|
||||
_week = 7;
|
||||
}
|
||||
for (i = 0; i < _week; i++) {
|
||||
str = '<li class="grey">' + (_prevDays - i) + '</li>' + str;
|
||||
num++;
|
||||
}
|
||||
for (i = 0; i < _allDays; i++) {
|
||||
if (i === _setdate - 1) {
|
||||
str += '<li class="active">' + (i + 1) + '</li>';
|
||||
} else {
|
||||
str += '<li>' + (i + 1) + '</li>';
|
||||
}
|
||||
num++;
|
||||
}
|
||||
for (i = 0; i < 42 - num; i++) {
|
||||
str += '<li class="grey">' + (i + 1) + '</li>';
|
||||
}
|
||||
return str;
|
||||
}
|
||||
|
||||
_aStrong[0].onclick = function () {
|
||||
clearTimeout(_delay_time);
|
||||
if (onOff === 0) {
|
||||
_aStrong[0].innerHTML = _setyear;
|
||||
_oYears_months.style.display = 'block';
|
||||
_fn_block(_oYears_months);
|
||||
_oNormal.style.display = 'none';
|
||||
_oTenYears.style.display = 'none';
|
||||
} else if (onOff === 1) {
|
||||
_temp_ten = 0;
|
||||
_aStrong[0].innerHTML = Math.floor(_setyear / 10) * 10 + '-' + (Math.floor(_setyear / 10) * 10 + 9);
|
||||
_oYears_months.style.display = 'none';
|
||||
_oNormal.style.display = 'none';
|
||||
_oTenYears.style.display = 'block';
|
||||
_fn_block(_oTenYears);
|
||||
} else if (onOff === 2) {
|
||||
_aStrong[0].innerHTML = _setyear + '/' + (_setmonth + 1);
|
||||
_oYears_months.style.display = 'none';
|
||||
_oNormal.style.display = 'block';
|
||||
_fn_block(_oNormal);
|
||||
_oTenYears.style.display = 'none';
|
||||
}
|
||||
var i;
|
||||
for (i = 0; i < _aLi_months.length; i++) {
|
||||
_aLi_months[i].className = '';
|
||||
}
|
||||
for (i = 0; i < 3; i++) {
|
||||
_aLi_months[_setmonth + i * 12].className = 'active';
|
||||
}
|
||||
if (onOff === 1) {
|
||||
ten(_setyear);
|
||||
}
|
||||
if (onOff === 2) {
|
||||
showDate();
|
||||
}
|
||||
onOff++;
|
||||
onOff = onOff % 3;
|
||||
};
|
||||
|
||||
function ten(_year) {
|
||||
_oTenYears_ul.innerHTML = _layout_tenyear(_year - 10) + _layout_tenyear(_year) + _layout_tenyear(_year + 10);
|
||||
|
||||
for (var i = 0; i < _oTenYears_lis.length; i++) {
|
||||
_oTenYears_lis[i].onclick = function () {
|
||||
for (var i = 0; i < _oTenYears_lis.length; i++) {
|
||||
_oTenYears_lis[i].className === 'active' && (_oTenYears_lis[i].className = '');
|
||||
}
|
||||
this.className = 'active';
|
||||
_setyear = parseInt(this.innerHTML);
|
||||
clearTimeout(_delay_time);
|
||||
_delay_time = setTimeout(function () {
|
||||
onOff = 1;
|
||||
_aStrong[0].innerHTML = _setyear;
|
||||
_oYears_months.style.display = 'block';
|
||||
_fn_block(_oYears_months);
|
||||
_oNormal.style.display = 'none';
|
||||
_oTenYears.style.display = 'none';
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
_r_l[0].onclick = function () {
|
||||
if (onOff === 0) {
|
||||
_setmonth--;
|
||||
if (_setmonth === -1) {
|
||||
_setmonth = 11; //0-11
|
||||
_setyear--;
|
||||
}
|
||||
showDate();
|
||||
oDays.style.transition = '0s';
|
||||
oDays.style.top = '-25.2rem';
|
||||
setTimeout(function () {
|
||||
oDays.style.transition = '0.5s';
|
||||
oDays.style.top = '-12.6rem';
|
||||
}, 10);
|
||||
|
||||
|
||||
} else if (onOff === 1) {
|
||||
_setyear--;
|
||||
_oYears_months_ul.style.transition = '0s';
|
||||
_oYears_months_ul.style.top = '-21.6rem';
|
||||
setTimeout(function () {
|
||||
_oYears_months_ul.style.transition = '0.5s';
|
||||
_oYears_months_ul.style.top = '-10.8rem';
|
||||
}, 10);
|
||||
_aStrong[0].innerHTML = _setyear;
|
||||
} else if (onOff === 2) {
|
||||
_temp_ten--;
|
||||
var _temp = _setyear + 10 * _temp_ten;
|
||||
_aStrong[0].innerHTML = Math.floor(_temp / 10) * 10 + '-' + (Math.floor(_temp / 10) * 10 + 9);
|
||||
ten(_temp);
|
||||
|
||||
_oTenYears_ul.style.transition = '0s';
|
||||
_oTenYears_ul.style.top = '-21.6rem';
|
||||
setTimeout(function () {
|
||||
_oTenYears_ul.style.transition = '0.5s';
|
||||
_oTenYears_ul.style.top = '-10.8rem';
|
||||
}, 10);
|
||||
}
|
||||
};
|
||||
_r_l[1].onclick = function () {
|
||||
if (onOff === 0) {
|
||||
_setmonth++;
|
||||
if (_setmonth === 12) {
|
||||
_setmonth = 0; //0-11
|
||||
_setyear++;
|
||||
}
|
||||
|
||||
showDate();
|
||||
oDays.style.transition = '0s';
|
||||
oDays.style.top = '0';
|
||||
setTimeout(function () {
|
||||
oDays.style.transition = '0.5s';
|
||||
oDays.style.top = '-12.6rem';
|
||||
}, 10);
|
||||
|
||||
} else if (onOff === 1) {
|
||||
_setyear++;
|
||||
_oYears_months_ul.style.transition = '0s';
|
||||
_oYears_months_ul.style.top = '0';
|
||||
setTimeout(function () {
|
||||
_oYears_months_ul.style.transition = '0.5s';
|
||||
_oYears_months_ul.style.top = '-10.8rem';
|
||||
}, 10);
|
||||
_aStrong[0].innerHTML = _setyear;
|
||||
} else if (onOff === 2) {
|
||||
_temp_ten++;
|
||||
var _temp = _setyear + 10 * _temp_ten;
|
||||
_aStrong[0].innerHTML = Math.floor(_temp / 10) * 10 + '-' + (Math.floor(_temp / 10) * 10 + 9);
|
||||
ten(_temp);
|
||||
|
||||
_oTenYears_ul.style.transition = '0s';
|
||||
_oTenYears_ul.style.top = '0';
|
||||
setTimeout(function () {
|
||||
_oTenYears_ul.style.transition = '0.5s';
|
||||
_oTenYears_ul.style.top = '-10.8rem';
|
||||
}, 10);
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
function toZero(num) {
|
||||
return num < 10 ? '0' + num : '' + num;
|
||||
}
|
||||
|
||||
function _layout_tenyear(_year) {
|
||||
var str = '';
|
||||
var num = Math.floor(_year / 10) * 10;
|
||||
var start = num - 1;
|
||||
var end = num + 10;
|
||||
for (var i = 0; i < 12; i++) {
|
||||
if ((start + i) === _setyear && (start + i) >= num && (start + i) < end) {
|
||||
str += '<li class="active">' + (start + i) + '</li>';
|
||||
} else if (i === 0 || i === 11) {
|
||||
str += '<li class="grey">' + (start + i) + '</li>';
|
||||
} else {
|
||||
str += '<li>' + (start + i) + '</li>';
|
||||
}
|
||||
}
|
||||
return str;
|
||||
}
|
||||
|
||||
function initDom() {
|
||||
var domWeek = o_box_time.getElementsByClassName('_week')[0];
|
||||
var week = [lang.SunShort, lang.MonShort, lang.TuesShort, lang.WedShort, lang.ThurShort, lang.FriShort, lang.SatShort];
|
||||
var months = [lang.Jan, lang.Feb, lang.Mar, lang.Apr, lang.May, lang.June, lang.July, lang.Aug, lang.Sept, lang.Oct, lang.Nov, lang.Dec];
|
||||
week.forEach(function (t) {
|
||||
var span = document.createElement('span');
|
||||
span.innerHTML = t;
|
||||
domWeek.appendChild(span);
|
||||
});
|
||||
var funcAddMonth = function () {
|
||||
months.forEach(function (t) {
|
||||
var li = document.createElement('li');
|
||||
li.innerHTML = t;
|
||||
_oYears_months_ul.appendChild(li);
|
||||
});
|
||||
};
|
||||
funcAddMonth();
|
||||
funcAddMonth();
|
||||
funcAddMonth();
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,161 @@
|
||||
#_box_time *{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#_box_time li{
|
||||
list-style: none;
|
||||
}
|
||||
#_box_time .clearfix:after{
|
||||
content: '';
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
#_box_time{
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom:2rem;
|
||||
right: 0;
|
||||
height: 25rem;
|
||||
width:294px;
|
||||
}
|
||||
#_box_time ._h_m_s{
|
||||
margin-top: 0.6rem;
|
||||
height: 3.4rem;
|
||||
font-size: 1.7rem;
|
||||
line-height: 3.4rem;
|
||||
text-indent: 1.2rem;
|
||||
}
|
||||
#_box_time ._y_m_d{
|
||||
color: rgba(255, 255, 255, 0.50);
|
||||
min-width: 12em;
|
||||
margin-left: 0.8rem;
|
||||
text-indent: 0.4rem;
|
||||
font-size: 0.7rem;
|
||||
height:1.5rem;
|
||||
line-height: 1.5rem;
|
||||
margin-bottom: 0.35rem;
|
||||
text-align: left;
|
||||
}
|
||||
#_box_time ._y_m_d:hover{
|
||||
cursor: pointer;
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
}
|
||||
#_box_time .calendar {
|
||||
height: 16.35rem;
|
||||
}
|
||||
#_box_time .calendar ._header{
|
||||
height: 1.9rem;
|
||||
line-height: 1.9rem;
|
||||
font-size: 0.9rem;
|
||||
color: #fff;
|
||||
opacity: 0.8;
|
||||
text-indent: 0.3rem;
|
||||
position: relative;
|
||||
}
|
||||
#_box_time .calendar ._header strong{
|
||||
padding-left: 0.9rem;
|
||||
height: 1.9rem;
|
||||
display: block;
|
||||
width: 6.5rem;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
#_box_time .calendar ._header strong:hover{
|
||||
text-shadow: 0 0 3px #fff;
|
||||
}
|
||||
#_box_time .calendar ._header span{
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top:0;
|
||||
right: 0;
|
||||
height: 1.9rem;
|
||||
text-indent: 0.65rem;
|
||||
display: inline-block;
|
||||
writing-mode: vertical-lr;
|
||||
-webkit-writing-mode: vertical-lr;
|
||||
font-weight: bold;
|
||||
}
|
||||
#_box_time .calendar ._header span:hover{
|
||||
text-shadow: 0 0 3px #fff;
|
||||
}
|
||||
#_box_time .calendar ._header .aL{
|
||||
right: 58px;
|
||||
}
|
||||
#_box_time .calendar ._header .aR{
|
||||
right: 18px;
|
||||
}
|
||||
#_box_time .calendar ._week {
|
||||
padding: 0 0.6rem 0;
|
||||
}
|
||||
#_box_time .calendar ._week span{
|
||||
display: block;
|
||||
width: 2.4rem;
|
||||
font-size: 0.55rem;
|
||||
height: 1.85rem;
|
||||
float: left;
|
||||
line-height: 1.85rem;
|
||||
text-align: center;
|
||||
}
|
||||
#_box_time .calendar ._days {
|
||||
height: 12.5rem;
|
||||
overflow: hidden;
|
||||
margin: 0 0.6rem 0;
|
||||
position: relative;
|
||||
}
|
||||
#_box_time .calendar ._days ul{
|
||||
position: absolute;
|
||||
top:-12.6rem;
|
||||
left: 0;
|
||||
}
|
||||
#_box_time .calendar ._days li{
|
||||
/*font-family: arial;*/
|
||||
font-size: 0.9rem;
|
||||
display: block;
|
||||
width: 2.3rem;
|
||||
height: 2rem;
|
||||
float: left;
|
||||
line-height: 2rem;
|
||||
text-align: center;
|
||||
margin: 0.05rem;
|
||||
}
|
||||
#_box_time ._normal{
|
||||
/*display: none;*/
|
||||
}
|
||||
#_box_time .grey { color: rgba(236, 247, 255, 0.36); }
|
||||
#_box_time .active {
|
||||
box-shadow: inset 0 0 0 0.1rem rgba(255, 255, 255, 0.36), inset 0 0 0 0.2rem rgba(255, 255, 255, 0.30);
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
#_box_time ._years_months{
|
||||
display: none;
|
||||
}
|
||||
#_box_time ._tenyears{
|
||||
display: none;
|
||||
}
|
||||
#_box_time ._tenyears,._years_months{
|
||||
margin-left: 0.65rem;
|
||||
height: 10.8rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
#_box_time ._tenyears ul,#_box_time ._years_months ul{
|
||||
position: absolute;
|
||||
top: -10.8rem;
|
||||
left: 0;
|
||||
}
|
||||
#_box_time ._years_months ul:hover{
|
||||
/*top: -10.8rem;*/
|
||||
}
|
||||
#_box_time ._tenyears li,#_box_time ._years_months li{
|
||||
cursor: pointer;
|
||||
width: 4.15rem;
|
||||
height: 3.6rem;
|
||||
float: left;
|
||||
line-height: 3.6rem;
|
||||
text-align: center;
|
||||
}
|
||||
#_box_time ._tenyears li:hover,#_box_time ._years_months li:hover{
|
||||
text-shadow: 0 0 1px #fff;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,423 @@
|
||||
/*
|
||||
colpick Color Picker / colpick.com
|
||||
*/
|
||||
|
||||
/*Main container*/
|
||||
.colpick {
|
||||
position: absolute;
|
||||
width: 346px;
|
||||
height: 170px;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background:#ebebeb;
|
||||
border: 1px solid #bbb;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
|
||||
/*Prevents selecting text when dragging the selectors*/
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.colpick,
|
||||
.colpick * {
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
/*Color selection box*/
|
||||
.colpick_color {
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 7px;
|
||||
width: 156px;
|
||||
height: 156px;
|
||||
overflow: hidden;
|
||||
outline: 1px solid #aaa;
|
||||
cursor: crosshair;
|
||||
}
|
||||
.colpick_color_overlay1 {
|
||||
position: absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
width: 156px;
|
||||
height: 156px;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff'); /* IE6 & IE7 */
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff')"; /* IE8 */
|
||||
background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
|
||||
}
|
||||
.colpick_color_overlay2 {
|
||||
position: absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
width: 156px;
|
||||
height: 156px;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000'); /* IE6 & IE7 */
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000')"; /* IE8 */
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
|
||||
}
|
||||
/*HSL gradients are different*/
|
||||
.colpick_hsl .colpick_color_overlay1 {
|
||||
background: linear-gradient(to right, rgba(128,128,128,1) 0%, rgba(128,128,128,0) 100%);
|
||||
}
|
||||
.colpick_hsl .colpick_color_overlay2 {
|
||||
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%);
|
||||
}
|
||||
/*Circular color selector*/
|
||||
.colpick_selector_outer {
|
||||
background:none;
|
||||
position: absolute;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
margin: -6px 0 0 -6px;
|
||||
border: 1px solid black;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.colpick_selector_inner{
|
||||
position: absolute;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border: 1px solid white;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/*Vertical hue bar*/
|
||||
.colpick_hue {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 175px;
|
||||
width: 19px;
|
||||
height: 156px;
|
||||
border: 1px solid #aaa;
|
||||
cursor: n-resize;
|
||||
}
|
||||
/*Hue bar sliding indicator*/
|
||||
.colpick_hue_arrs {
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
width: 35px;
|
||||
height: 7px;
|
||||
margin: -7px 0 0 0;
|
||||
}
|
||||
.colpick_hue_larr {
|
||||
position:absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-left: 7px solid #858585;
|
||||
}
|
||||
.colpick_hue_rarr {
|
||||
position:absolute;
|
||||
right:0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-right: 7px solid #858585;
|
||||
}
|
||||
/*New color box*/
|
||||
.colpick_new_color {
|
||||
position: absolute;
|
||||
left: 207px;
|
||||
top: 6px;
|
||||
width: 60px;
|
||||
height: 27px;
|
||||
background: #f00;
|
||||
border: 1px solid #8f8f8f;
|
||||
}
|
||||
/*Current color box*/
|
||||
.colpick_current_color {
|
||||
position: absolute;
|
||||
left: 277px;
|
||||
top: 6px;
|
||||
width: 60px;
|
||||
height: 27px;
|
||||
background: #f00;
|
||||
border: 1px solid #8f8f8f;
|
||||
}
|
||||
/*Input field containers*/
|
||||
.colpick_field, .colpick_hex_field {
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
width: 60px;
|
||||
overflow:hidden;
|
||||
background:#f3f3f3;
|
||||
color:#b8b8b8;
|
||||
font-size:12px;
|
||||
border:1px solid #bdbdbd;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.colpick_rgb_r {
|
||||
top: 40px;
|
||||
left: 207px;
|
||||
}
|
||||
.colpick_rgb_g {
|
||||
top: 67px;
|
||||
left: 207px;
|
||||
}
|
||||
.colpick_rgb_b {
|
||||
top: 94px;
|
||||
left: 207px;
|
||||
}
|
||||
.colpick_hsx_h {
|
||||
top: 40px;
|
||||
left: 277px;
|
||||
}
|
||||
.colpick_hsx_s {
|
||||
top: 67px;
|
||||
left: 277px;
|
||||
}
|
||||
.colpick_hsx_x {
|
||||
top: 94px;
|
||||
left: 277px;
|
||||
}
|
||||
.colpick_hex_field {
|
||||
width: 68px;
|
||||
left: 207px;
|
||||
top: 121px;
|
||||
}
|
||||
/*Text field container on focus*/
|
||||
.colpick_focus {
|
||||
border-color: #999;
|
||||
}
|
||||
/*Field label container*/
|
||||
.colpick_field_letter {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
padding-left: 4px;
|
||||
background: #efefef;
|
||||
border-right: 1px solid #bdbdbd;
|
||||
font-weight: bold;
|
||||
color:#777;
|
||||
}
|
||||
/*Text inputs*/
|
||||
.colpick_field input, .colpick_hex_field input {
|
||||
position: absolute;
|
||||
right: 11px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 12px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #555;
|
||||
text-align: right;
|
||||
outline: none;
|
||||
}
|
||||
.colpick_hex_field input {
|
||||
right: 4px;
|
||||
}
|
||||
/*Field up/down arrows*/
|
||||
.colpick_field_arrs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 9px;
|
||||
height: 21px;
|
||||
cursor: n-resize;
|
||||
}
|
||||
.colpick_field_uarr {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-bottom: 4px solid #959595;
|
||||
}
|
||||
.colpick_field_darr {
|
||||
position: absolute;
|
||||
bottom:5px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 4px solid #959595;
|
||||
}
|
||||
/*Submit/Select button*/
|
||||
.colpick_submit {
|
||||
position: absolute;
|
||||
left: 207px;
|
||||
top: 149px;
|
||||
width: 130px;
|
||||
height: 22px;
|
||||
line-height:22px;
|
||||
background: #efefef;
|
||||
text-align: center;
|
||||
color: #555;
|
||||
font-size: 12px;
|
||||
font-weight:bold;
|
||||
border: 1px solid #bdbdbd;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.colpick_submit:hover {
|
||||
background:#f3f3f3;
|
||||
border-color:#999;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*full layout with no submit button*/
|
||||
.colpick_full_ns .colpick_submit, .colpick_full_ns .colpick_current_color{
|
||||
display:none;
|
||||
}
|
||||
.colpick_full_ns .colpick_new_color {
|
||||
width: 130px;
|
||||
height: 25px;
|
||||
}
|
||||
.colpick_full_ns .colpick_rgb_r, .colpick_full_ns .colpick_hsx_h {
|
||||
top: 42px;
|
||||
}
|
||||
.colpick_full_ns .colpick_rgb_g, .colpick_full_ns .colpick_hsx_s {
|
||||
top: 73px;
|
||||
}
|
||||
.colpick_full_ns .colpick_rgb_b, .colpick_full_ns .colpick_hsx_x {
|
||||
top: 104px;
|
||||
}
|
||||
.colpick_full_ns .colpick_hex_field {
|
||||
top: 135px;
|
||||
}
|
||||
|
||||
/*rgbhex layout*/
|
||||
.colpick_rgbhex .colpick_hsx_h, .colpick_rgbhex .colpick_hsx_s, .colpick_rgbhex .colpick_hsx_x {
|
||||
display:none;
|
||||
}
|
||||
.colpick_rgbhex {
|
||||
width:282px;
|
||||
}
|
||||
.colpick_rgbhex .colpick_field, .colpick_rgbhex .colpick_submit {
|
||||
width:68px;
|
||||
}
|
||||
.colpick_rgbhex .colpick_new_color {
|
||||
width:34px;
|
||||
border-right:none;
|
||||
}
|
||||
.colpick_rgbhex .colpick_current_color {
|
||||
width:34px;
|
||||
left:240px;
|
||||
border-left:none;
|
||||
}
|
||||
|
||||
/*rgbhex layout, no submit button*/
|
||||
.colpick_rgbhex_ns .colpick_submit, .colpick_rgbhex_ns .colpick_current_color{
|
||||
display:none;
|
||||
}
|
||||
.colpick_rgbhex_ns .colpick_new_color{
|
||||
width:68px;
|
||||
border: 1px solid #8f8f8f;
|
||||
}
|
||||
.colpick_rgbhex_ns .colpick_rgb_r {
|
||||
top: 42px;
|
||||
}
|
||||
.colpick_rgbhex_ns .colpick_rgb_g {
|
||||
top: 73px;
|
||||
}
|
||||
.colpick_rgbhex_ns .colpick_rgb_b {
|
||||
top: 104px;
|
||||
}
|
||||
.colpick_rgbhex_ns .colpick_hex_field {
|
||||
top: 135px;
|
||||
}
|
||||
|
||||
/*hex layout*/
|
||||
.colpick_hex .colpick_hsx_h, .colpick_hex .colpick_hsx_s, .colpick_hex .colpick_hsx_x, .colpick_hex .colpick_rgb_r, .colpick_hex .colpick_rgb_g, .colpick_hex .colpick_rgb_b {
|
||||
display:none;
|
||||
}
|
||||
.colpick_hex {
|
||||
width:206px;
|
||||
height:201px;
|
||||
}
|
||||
.colpick_hex .colpick_hex_field {
|
||||
width:72px;
|
||||
height:25px;
|
||||
top:168px;
|
||||
left:80px;
|
||||
}
|
||||
.colpick_hex .colpick_hex_field div, .colpick_hex .colpick_hex_field input {
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.colpick_hex .colpick_new_color {
|
||||
left:9px;
|
||||
top:168px;
|
||||
width:30px;
|
||||
border-right:none;
|
||||
}
|
||||
.colpick_hex .colpick_current_color {
|
||||
left:39px;
|
||||
top:168px;
|
||||
width:30px;
|
||||
border-left:none;
|
||||
}
|
||||
.colpick_hex .colpick_submit {
|
||||
left:164px;
|
||||
top: 168px;
|
||||
width:30px;
|
||||
height:25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
/*hex layout, no submit button*/
|
||||
.colpick_hex_ns .colpick_submit, .colpick_hex_ns .colpick_current_color {
|
||||
display:none;
|
||||
}
|
||||
.colpick_hex_ns .colpick_hex_field {
|
||||
width:80px;
|
||||
}
|
||||
.colpick_hex_ns .colpick_new_color{
|
||||
width:60px;
|
||||
border: 1px solid #8f8f8f;
|
||||
}
|
||||
|
||||
/*Dark color scheme*/
|
||||
.colpick_dark {
|
||||
background: #161616;
|
||||
border-color: #2a2a2a;
|
||||
}
|
||||
.colpick_dark .colpick_color {
|
||||
outline-color: #333;
|
||||
}
|
||||
.colpick_dark .colpick_hue {
|
||||
border-color: #555;
|
||||
}
|
||||
.colpick_dark .colpick_field, .colpick_dark .colpick_hex_field {
|
||||
background: #101010;
|
||||
border-color: #2d2d2d;
|
||||
}
|
||||
.colpick_dark .colpick_field_letter {
|
||||
background: #131313;
|
||||
border-color: #2d2d2d;
|
||||
color: #696969;
|
||||
}
|
||||
.colpick_dark .colpick_field input, .colpick_dark .colpick_hex_field input {
|
||||
color: #7a7a7a;
|
||||
}
|
||||
.colpick_dark .colpick_field_uarr {
|
||||
border-bottom-color:#696969;
|
||||
}
|
||||
.colpick_dark .colpick_field_darr {
|
||||
border-top-color:#696969;
|
||||
}
|
||||
.colpick_dark .colpick_focus {
|
||||
border-color:#444;
|
||||
}
|
||||
.colpick_dark .colpick_submit {
|
||||
background: #131313;
|
||||
border-color:#2d2d2d;
|
||||
color:#7a7a7a;
|
||||
}
|
||||
.colpick_dark .colpick_submit:hover {
|
||||
background-color:#101010;
|
||||
border-color:#444;
|
||||
}
|
||||
@@ -0,0 +1,561 @@
|
||||
/*
|
||||
colpick Color Picker
|
||||
Copyright 2013 Jose Vargas. Licensed under GPL license. Based on Stefan Petre's Color Picker www.eyecon.ro, dual licensed under the MIT and GPL licenses
|
||||
|
||||
For usage and examples: colpick.com/plugin
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
var colpick = function () {
|
||||
var
|
||||
tpl = '<div class="colpick"><div class="colpick_color"><div class="colpick_color_overlay1"><div class="colpick_color_overlay2"><div class="colpick_selector_outer"><div class="colpick_selector_inner"></div></div></div></div></div><div class="colpick_hue"><div class="colpick_hue_arrs"><div class="colpick_hue_larr"></div><div class="colpick_hue_rarr"></div></div></div><div class="colpick_new_color"></div><div class="colpick_current_color"></div><div class="colpick_hex_field"><div class="colpick_field_letter">#</div><input type="text" maxlength="6" size="6" /></div><div class="colpick_rgb_r colpick_field"><div class="colpick_field_letter">R</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_rgb_g colpick_field"><div class="colpick_field_letter">G</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_rgb_b colpick_field"><div class="colpick_field_letter">B</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsx_h colpick_field"><div class="colpick_field_letter">H</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsx_s colpick_field"><div class="colpick_field_letter">S</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsx_x colpick_field"><div class="colpick_field_letter">B</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_submit"></div></div>',
|
||||
defaults = {
|
||||
showEvent: 'click',
|
||||
onShow: function () {},
|
||||
onBeforeShow: function(){},
|
||||
onHide: function () {},
|
||||
onChange: function () {},
|
||||
onSubmit: function () {},
|
||||
colorScheme: 'light',
|
||||
color: '3289c7',
|
||||
livePreview: true,
|
||||
flat: false,
|
||||
layout: 'full',
|
||||
submit: 1,
|
||||
submitText: 'OK',
|
||||
height: 156,
|
||||
hsl: false
|
||||
},
|
||||
//Fill the inputs of the plugin
|
||||
fillRGBFields = function (hsx, cal) {
|
||||
var rgb = $(cal).data('colpick').hsl ? hslToRgb(hsx) : hsbToRgb(hsx);
|
||||
$(cal).data('colpick').fields
|
||||
.eq(1).val(rgb.r).end()
|
||||
.eq(2).val(rgb.g).end()
|
||||
.eq(3).val(rgb.b).end();
|
||||
},
|
||||
fillHSXFields = function (hsx, cal) {
|
||||
|
||||
$(cal).data('colpick').fields
|
||||
.eq(4).val(Math.round(hsx.h)).end()
|
||||
.eq(5).val(Math.round(hsx.s)).end()
|
||||
.eq(6).val(Math.round(hsx.x)).end();
|
||||
},
|
||||
fillHexFields = function (hsx, cal) {
|
||||
$(cal).data('colpick').fields.eq(0).val($(cal).data('colpick').hsl ? hslToHex(hsx) : hsbToHex(hsx));
|
||||
},
|
||||
//Set the round selector position
|
||||
setSelector = function (hsx, cal) {
|
||||
$(cal).data('colpick').selector.css('backgroundColor', '#' + ($(cal).data('colpick').hsl ? hslToHex({h:hsx.h,s:100,x:50}) : hsbToHex({h:hsx.h,s:100,x:100})) );
|
||||
$(cal).data('colpick').selectorIndic.css({
|
||||
left: parseInt($(cal).data('colpick').height * hsx.s/100, 10),
|
||||
top: parseInt($(cal).data('colpick').height * (100-hsx.x)/100, 10)
|
||||
});
|
||||
},
|
||||
//Set the hue selector position
|
||||
setHue = function (hsx, cal) {
|
||||
$(cal).data('colpick').hue.css('top', parseInt($(cal).data('colpick').height - $(cal).data('colpick').height * hsx.h/360, 10));
|
||||
},
|
||||
//Set current and new colors
|
||||
setCurrentColor = function (hsx, cal) {
|
||||
$(cal).data('colpick').currentColor.css('backgroundColor', '#' + ($(cal).data('colpick').hsl ? hslToHex(hsx) : hsbToHex(hsx)) );
|
||||
},
|
||||
setNewColor = function (hsx, cal) {
|
||||
$(cal).data('colpick').newColor.css('backgroundColor', '#' + ($(cal).data('colpick').hsl ? hslToHex(hsx) : hsbToHex(hsx)) );
|
||||
},
|
||||
//Called when the new color is changed
|
||||
change = function (ev) {
|
||||
var cal = $(this).parent().parent(), col;
|
||||
if (this.parentNode.className.indexOf('_hex') > 0) {
|
||||
cal.data('colpick').color = col = cal.data('colpick').hsl ? hexToHsl(fixHex(this.value)) : hexToHsb(fixHex(this.value));
|
||||
fillRGBFields(col, cal.get(0));
|
||||
fillHSXFields(col, cal.get(0));
|
||||
} else if (this.parentNode.className.indexOf('_hsx') > 0) {
|
||||
cal.data('colpick').color = col = fixHsx({
|
||||
h: parseInt(cal.data('colpick').fields.eq(4).val(), 10),
|
||||
s: parseInt(cal.data('colpick').fields.eq(5).val(), 10),
|
||||
x: parseInt(cal.data('colpick').fields.eq(6).val(), 10)
|
||||
});
|
||||
fillRGBFields(col, cal.get(0));
|
||||
fillHexFields(col, cal.get(0));
|
||||
} else {
|
||||
var rgb = {
|
||||
r: parseInt(cal.data('colpick').fields.eq(1).val(), 10),
|
||||
g: parseInt(cal.data('colpick').fields.eq(2).val(), 10),
|
||||
b: parseInt(cal.data('colpick').fields.eq(3).val(), 10)
|
||||
};
|
||||
cal.data('colpick').color = col = cal.data('colpick').hsl ? rgbToHsl(fixRgb(rgb)) : rgbToHsb(fixRgb(rgb));
|
||||
fillHexFields(col, cal.get(0));
|
||||
fillHSXFields(col, cal.get(0));
|
||||
}
|
||||
setSelector(col, cal.get(0));
|
||||
setHue(col, cal.get(0));
|
||||
setNewColor(col, cal.get(0));
|
||||
cal.data('colpick').onChange.apply(cal.parent(), [col, cal.data('colpick').hsl ? hslToHex(col) : hsbToHex(col), cal.data('colpick').hsl ? hslToRgb(col) : hsbToRgb(col), cal.data('colpick').el, 0]);
|
||||
},
|
||||
//Change style on blur and on focus of inputs
|
||||
blur = function (ev) {
|
||||
$(this).parent().removeClass('colpick_focus');
|
||||
},
|
||||
focus = function () {
|
||||
$(this).parent().parent().data('colpick').fields.parent().removeClass('colpick_focus');
|
||||
$(this).parent().addClass('colpick_focus');
|
||||
},
|
||||
//Increment/decrement arrows functions
|
||||
downIncrement = function (ev) {
|
||||
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
|
||||
var field = $(this).parent().find('input').focus();
|
||||
var current = {
|
||||
el: $(this).parent().addClass('colpick_slider'),
|
||||
max: this.parentNode.className.indexOf('_hsx_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsx') > 0 ? 100 : 255),
|
||||
y: ev.pageY,
|
||||
field: field,
|
||||
val: parseInt(field.val(), 10),
|
||||
preview: $(this).parent().parent().data('colpick').livePreview
|
||||
};
|
||||
$(document).mouseup(current, upIncrement);
|
||||
$(document).mousemove(current, moveIncrement);
|
||||
},
|
||||
moveIncrement = function (ev) {
|
||||
ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val - ev.pageY + ev.data.y, 10))));
|
||||
if (ev.data.preview) {
|
||||
change.apply(ev.data.field.get(0), [true]);
|
||||
}
|
||||
return false;
|
||||
},
|
||||
upIncrement = function (ev) {
|
||||
change.apply(ev.data.field.get(0), [true]);
|
||||
ev.data.el.removeClass('colpick_slider').find('input').focus();
|
||||
$(document).off('mouseup', upIncrement);
|
||||
$(document).off('mousemove', moveIncrement);
|
||||
return false;
|
||||
},
|
||||
//Hue slider functions
|
||||
downHue = function (ev) {
|
||||
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
|
||||
var current = {
|
||||
cal: $(this).parent(),
|
||||
y: $(this).offset().top
|
||||
};
|
||||
$(document).on('mouseup touchend',current,upHue);
|
||||
$(document).on('mousemove touchmove',current,moveHue);
|
||||
|
||||
var pageY = ((ev.type == 'touchstart') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY );
|
||||
change.apply(
|
||||
current.cal.data('colpick')
|
||||
.fields.eq(4).val(parseInt(360*(current.cal.data('colpick').height - (pageY - current.y))/current.cal.data('colpick').height, 10))
|
||||
.get(0),
|
||||
[current.cal.data('colpick').livePreview]
|
||||
);
|
||||
return false;
|
||||
},
|
||||
moveHue = function (ev) {
|
||||
var pageY = ((ev.type == 'touchmove') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY );
|
||||
change.apply(
|
||||
ev.data.cal.data('colpick')
|
||||
.fields.eq(4).val(parseInt(360*(ev.data.cal.data('colpick').height - Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageY - ev.data.y))))/ev.data.cal.data('colpick').height, 10))
|
||||
.get(0),
|
||||
[ev.data.preview]
|
||||
);
|
||||
return false;
|
||||
},
|
||||
upHue = function (ev) {
|
||||
//fillRGBFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
|
||||
//fillHexFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
|
||||
$(document).off('mouseup touchend',upHue);
|
||||
$(document).off('mousemove touchmove',moveHue);
|
||||
return false;
|
||||
},
|
||||
//Color selector functions
|
||||
downSelector = function (ev) {
|
||||
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
|
||||
var current = {
|
||||
cal: $(this).parent(),
|
||||
pos: $(this).offset()
|
||||
};
|
||||
current.preview = current.cal.data('colpick').livePreview;
|
||||
|
||||
$(document).on('mouseup touchend',current,upSelector);
|
||||
$(document).on('mousemove touchmove',current,moveSelector);
|
||||
|
||||
var payeX,pageY;
|
||||
if(ev.type == 'touchstart') {
|
||||
pageX = ev.originalEvent.changedTouches[0].pageX,
|
||||
pageY = ev.originalEvent.changedTouches[0].pageY;
|
||||
} else {
|
||||
pageX = ev.pageX;
|
||||
pageY = ev.pageY;
|
||||
}
|
||||
|
||||
change.apply(
|
||||
current.cal.data('colpick').fields
|
||||
.eq(6).val(parseInt(100*(current.cal.data('colpick').height - (pageY - current.pos.top))/current.cal.data('colpick').height, 10)).end()
|
||||
.eq(5).val(parseInt(100*(pageX - current.pos.left)/current.cal.data('colpick').height, 10))
|
||||
.get(0),
|
||||
[current.preview]
|
||||
);
|
||||
return false;
|
||||
},
|
||||
moveSelector = function (ev) {
|
||||
var payeX,pageY;
|
||||
if(ev.type == 'touchmove') {
|
||||
pageX = ev.originalEvent.changedTouches[0].pageX,
|
||||
pageY = ev.originalEvent.changedTouches[0].pageY;
|
||||
} else {
|
||||
pageX = ev.pageX;
|
||||
pageY = ev.pageY;
|
||||
}
|
||||
|
||||
change.apply(
|
||||
ev.data.cal.data('colpick').fields
|
||||
.eq(6).val(parseInt(100*(ev.data.cal.data('colpick').height - Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageY - ev.data.pos.top))))/ev.data.cal.data('colpick').height, 10)).end()
|
||||
.eq(5).val(parseInt(100*(Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageX - ev.data.pos.left))))/ev.data.cal.data('colpick').height, 10))
|
||||
.get(0),
|
||||
[ev.data.preview]
|
||||
);
|
||||
return false;
|
||||
},
|
||||
upSelector = function (ev) {
|
||||
//fillRGBFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
|
||||
//fillHexFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
|
||||
$(document).off('mouseup touchend',upSelector);
|
||||
$(document).off('mousemove touchmove',moveSelector);
|
||||
return false;
|
||||
},
|
||||
//Submit button
|
||||
clickSubmit = function (ev) {
|
||||
var cal = $(this).parent();
|
||||
var col = cal.data('colpick').color;
|
||||
cal.data('colpick').origColor = col;
|
||||
setCurrentColor(col, cal.get(0));
|
||||
cal.data('colpick').onSubmit(col, cal.data('colpick').hsl ? hslToHex(col) : hsbToHex(col), cal.data('colpick').hsl ? hslToRgb(col) : hsbToRgb(col), cal.data('colpick').el);
|
||||
},
|
||||
//Show/hide the color picker
|
||||
show = function (ev) {
|
||||
// Prevent the trigger of any direct parent
|
||||
ev.stopPropagation();
|
||||
var cal = $('#' + $(this).data('colpickId'));
|
||||
cal.data('colpick').onBeforeShow.apply(this, [cal.get(0)]);
|
||||
var pos = $(this).offset();
|
||||
var top = pos.top + this.offsetHeight;
|
||||
var left = pos.left;
|
||||
var viewPort = getViewport();
|
||||
var calW = cal.width();
|
||||
if (left + calW > viewPort.l + viewPort.w) {
|
||||
left -= calW;
|
||||
}
|
||||
cal.css({left: left + 'px', top: top + 'px'});
|
||||
if (cal.data('colpick').onShow.apply(this, [cal.get(0)]) != false) {
|
||||
cal.show();
|
||||
}
|
||||
//Hide when user clicks outside
|
||||
$('html').mousedown({cal:cal}, hide);
|
||||
cal.mousedown(function(ev){ev.stopPropagation();})
|
||||
},
|
||||
hide = function (ev) {
|
||||
if (ev.data.cal.data('colpick').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
|
||||
ev.data.cal.hide();
|
||||
}
|
||||
$('html').off('mousedown', hide);
|
||||
},
|
||||
getViewport = function () {
|
||||
var m = document.compatMode == 'CSS1Compat';
|
||||
return {
|
||||
l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
|
||||
w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth)
|
||||
};
|
||||
},
|
||||
//Fix the values if the user enters a negative or high value
|
||||
fixHsx = function (hsx) {
|
||||
return {
|
||||
h: Math.min(360, Math.max(0, hsx.h)),
|
||||
s: Math.min(100, Math.max(0, hsx.s)),
|
||||
x: Math.min(100, Math.max(0, hsx.x))
|
||||
};
|
||||
},
|
||||
fixRgb = function (rgb) {
|
||||
return {
|
||||
r: Math.min(255, Math.max(0, rgb.r)),
|
||||
g: Math.min(255, Math.max(0, rgb.g)),
|
||||
b: Math.min(255, Math.max(0, rgb.b))
|
||||
};
|
||||
},
|
||||
fixHex = function (hex) {
|
||||
var len = 6 - hex.length;
|
||||
if (len > 0) {
|
||||
var o = [];
|
||||
for (var i=0; i<len; i++) {
|
||||
o.push('0');
|
||||
}
|
||||
o.push(hex);
|
||||
hex = o.join('');
|
||||
}
|
||||
return hex;
|
||||
},
|
||||
restoreOriginal = function () {
|
||||
var cal = $(this).parent();
|
||||
var col = cal.data('colpick').origColor;
|
||||
cal.data('colpick').color = col;
|
||||
fillRGBFields(col, cal.get(0));
|
||||
fillHexFields(col, cal.get(0));
|
||||
fillHSXFields(col, cal.get(0));
|
||||
setSelector(col, cal.get(0));
|
||||
setHue(col, cal.get(0));
|
||||
setNewColor(col, cal.get(0));
|
||||
};
|
||||
return {
|
||||
init: function (opt) {
|
||||
opt = $.extend({}, defaults, opt||{});
|
||||
//Set color
|
||||
if (typeof opt.color == 'string') {
|
||||
opt.color = opt.hsl ? hexToHsl(opt.color) : hexToHsb(opt.color);
|
||||
} else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {
|
||||
opt.color = opt.hsl ? rgbToHsl(opt.color) : rgbToHsb(opt.color);
|
||||
} else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {
|
||||
opt.color = opt.hsl ? fixHsl(opt.color) : fixHsb(opt.color);
|
||||
} else {
|
||||
return this;
|
||||
}
|
||||
|
||||
//For each selected DOM element
|
||||
return this.each(function () {
|
||||
//If the element does not have an ID
|
||||
if (!$(this).data('colpickId')) {
|
||||
var options = $.extend({}, opt);
|
||||
options.origColor = opt.color;
|
||||
//Generate and assign a random ID
|
||||
var id = 'collorpicker_' + parseInt(Math.random() * 1000);
|
||||
$(this).data('colpickId', id);
|
||||
//Set the tpl's ID and get the HTML
|
||||
var cal = $(tpl).attr('id', id);
|
||||
//Add class according to layout
|
||||
cal.addClass('colpick_'+options.layout+(options.submit?'':' colpick_'+options.layout+'_ns'));
|
||||
//Add class if the color scheme is not default
|
||||
if(options.colorScheme != 'light') cal.addClass('colpick_'+options.colorScheme);
|
||||
//Add class if HSL is enabled
|
||||
if(options.hsl) cal.addClass('colpick_hsl');
|
||||
//Setup submit button
|
||||
cal.find('div.colpick_submit').html(options.submitText).click(clickSubmit);
|
||||
//Setup input fields
|
||||
options.fields = cal.find('input').change(change).blur(blur).focus(focus);
|
||||
cal.find('div.colpick_field_arrs').mousedown(downIncrement).end().find('div.colpick_current_color').click(restoreOriginal);
|
||||
//Setup hue selector
|
||||
options.selector = cal.find('div.colpick_color').on('mousedown touchstart',downSelector);
|
||||
options.selectorIndic = options.selector.find('div.colpick_selector_outer');
|
||||
//Store parts of the plugin
|
||||
options.el = this;
|
||||
options.hue = cal.find('div.colpick_hue_arrs');
|
||||
huebar = options.hue.parent();
|
||||
//Paint the hue bar
|
||||
var UA = navigator.userAgent.toLowerCase();
|
||||
var isIE = navigator.appName === 'Microsoft Internet Explorer';
|
||||
var IEver = isIE ? parseFloat( UA.match( /msie ([0-9]{1,}[\.0-9]{0,})/ )[1] ) : 0;
|
||||
var ngIE = ( isIE && IEver < 10 );
|
||||
var stops = ['#ff0000','#ff0080','#ff00ff','#8000ff','#0000ff','#0080ff','#00ffff','#00ff80','#00ff00','#80ff00','#ffff00','#ff8000','#ff0000'];
|
||||
if(ngIE) {
|
||||
var i, div;
|
||||
for(i=0; i<=11; i++) {
|
||||
div = $('<div></div>').attr('style','height:8.333333%; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='+stops[i]+', endColorstr='+stops[i+1]+'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='+stops[i]+', endColorstr='+stops[i+1]+')";');
|
||||
huebar.append(div);
|
||||
}
|
||||
} else {
|
||||
stopList = stops.join(',');
|
||||
huebar.attr('style','background:-webkit-linear-gradient(top center,'+stopList+'); background:-moz-linear-gradient(top center,'+stopList+'); background:linear-gradient(to bottom,'+stopList+'); ');
|
||||
}
|
||||
cal.find('div.colpick_hue').on('mousedown touchstart',downHue);
|
||||
options.newColor = cal.find('div.colpick_new_color');
|
||||
options.currentColor = cal.find('div.colpick_current_color');
|
||||
//Store options and fill with default color
|
||||
cal.data('colpick', options);
|
||||
fillRGBFields(options.color, cal.get(0));
|
||||
fillHSXFields(options.color, cal.get(0));
|
||||
fillHexFields(options.color, cal.get(0));
|
||||
setHue(options.color, cal.get(0));
|
||||
setSelector(options.color, cal.get(0));
|
||||
setCurrentColor(options.color, cal.get(0));
|
||||
setNewColor(options.color, cal.get(0));
|
||||
//Append to body if flat=false, else show in place
|
||||
if (options.flat) {
|
||||
cal.appendTo(this).show();
|
||||
cal.css({
|
||||
position: 'relative',
|
||||
display: 'block'
|
||||
});
|
||||
} else {
|
||||
cal.appendTo(document.body);
|
||||
$(this).on(options.showEvent, show);
|
||||
cal.css({
|
||||
position:'absolute'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//Shows the picker
|
||||
showPicker: function() {
|
||||
return this.each( function () {
|
||||
if ($(this).data('colpickId')) {
|
||||
show.apply(this);
|
||||
}
|
||||
});
|
||||
},
|
||||
//Hides the picker
|
||||
hidePicker: function() {
|
||||
return this.each( function () {
|
||||
if ($(this).data('colpickId')) {
|
||||
$('#' + $(this).data('colpickId')).hide();
|
||||
}
|
||||
});
|
||||
},
|
||||
//Sets a color as new and current (default)
|
||||
setColor: function(col, setCurrent) {
|
||||
setCurrent = (typeof setCurrent === "undefined") ? 1 : setCurrent;
|
||||
if (typeof col == 'string') {
|
||||
col = hexToHsb(col);
|
||||
} else if (col.r != undefined && col.g != undefined && col.b != undefined) {
|
||||
col = rgbToHsb(col);
|
||||
} else if (col.h != undefined && col.s != undefined && col.b != undefined) {
|
||||
col = fixHsb(col);
|
||||
} else {
|
||||
return this;
|
||||
}
|
||||
return this.each(function(){
|
||||
if ($(this).data('colpickId')) {
|
||||
var cal = $('#' + $(this).data('colpickId'));
|
||||
cal.data('colpick').color = col;
|
||||
cal.data('colpick').origColor = col;
|
||||
fillRGBFields(col, cal.get(0));
|
||||
fillHSXFields(col, cal.get(0));
|
||||
fillHexFields(col, cal.get(0));
|
||||
setHue(col, cal.get(0));
|
||||
setSelector(col, cal.get(0));
|
||||
|
||||
setNewColor(col, cal.get(0));
|
||||
cal.data('colpick').onChange.apply(cal.parent(), [
|
||||
col,
|
||||
cal.data('colpick').hsl ? hslToHex(col) : hsbToHex(col),
|
||||
cal.data('colpick').hsl ? hslToRgb(col) : hsbToRgb(col),
|
||||
cal.data('colpick').el,
|
||||
1
|
||||
]);
|
||||
if(setCurrent) {
|
||||
setCurrentColor(col, cal.get(0));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
}();
|
||||
//Color space convertions
|
||||
var hexToRgb = function (hex) {
|
||||
var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
|
||||
return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
|
||||
};
|
||||
var hexToHsb = function (hex) {
|
||||
return rgbToHsb(hexToRgb(hex));
|
||||
};
|
||||
var hexToHsl = function (hex) {
|
||||
return rgbToHsl(hexToRgb(hex));
|
||||
};
|
||||
var rgbToHsb = function (rgb) {
|
||||
var hsb = {h: 0, s: 0, x: 0};
|
||||
var min = Math.min(rgb.r, rgb.g, rgb.b);
|
||||
var max = Math.max(rgb.r, rgb.g, rgb.b);
|
||||
var delta = max - min;
|
||||
hsb.x = max;
|
||||
hsb.s = max != 0 ? 255 * delta / max : 0;
|
||||
if (hsb.s != 0) {
|
||||
if (rgb.r == max) hsb.h = (rgb.g - rgb.b) / delta;
|
||||
else if (rgb.g == max) hsb.h = 2 + (rgb.b - rgb.r) / delta;
|
||||
else hsb.h = 4 + (rgb.r - rgb.g) / delta;
|
||||
} else hsb.h = -1;
|
||||
hsb.h *= 60;
|
||||
if (hsb.h < 0) hsb.h += 360;
|
||||
hsb.s *= 100/255;
|
||||
hsb.x *= 100/255;
|
||||
return hsb;
|
||||
};
|
||||
var rgbToHsl = function (rgb) {
|
||||
return hsbToHsl(rgbToHsb(rgb));
|
||||
};
|
||||
var hsbToHsl = function(hsb) {
|
||||
var hsl = {h: 0, s: 0, x: 0};
|
||||
hsl.h = hsb.h;
|
||||
hsl.x = hsb.x*(200-hsb.s)/200;
|
||||
hsl.s = hsb.x*hsb.s/(100-Math.abs(2*hsl.x-100));
|
||||
return hsl;
|
||||
};
|
||||
var hslToHsb = function(hsl) {
|
||||
var hsb = {h: 0, s: 0, x: 0};
|
||||
hsb.h = hsl.h;
|
||||
hsb.x = (200*hsl.x + hsl.s*(100-Math.abs(2*hsl.x-100)))/200
|
||||
hsb.s = 200*(hsb.x-hsl.x)/hsb.x;
|
||||
return hsb;
|
||||
};
|
||||
var hsbToRgb = function (hsb) {
|
||||
var rgb = {};
|
||||
var h = hsb.h;
|
||||
var s = hsb.s*255/100;
|
||||
var v = hsb.x*255/100;
|
||||
if(s == 0) {
|
||||
rgb.r = rgb.g = rgb.b = v;
|
||||
} else {
|
||||
var t1 = v;
|
||||
var t2 = (255-s)*v/255;
|
||||
var t3 = (t1-t2)*(h%60)/60;
|
||||
if(h==360) h = 0;
|
||||
if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
|
||||
else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
|
||||
else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
|
||||
else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
|
||||
else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
|
||||
else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
|
||||
else {rgb.r=0; rgb.g=0; rgb.b=0}
|
||||
}
|
||||
return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
|
||||
};
|
||||
var hslToRgb = function(hsl) {
|
||||
return hsbToRgb(hslToHsb(hsl));
|
||||
};
|
||||
var rgbToHex = function (rgb) {
|
||||
var hex = [
|
||||
rgb.r.toString(16),
|
||||
rgb.g.toString(16),
|
||||
rgb.b.toString(16)
|
||||
];
|
||||
$.each(hex, function (nr, val) {
|
||||
if (val.length == 1) {
|
||||
hex[nr] = '0' + val;
|
||||
}
|
||||
});
|
||||
return hex.join('');
|
||||
};
|
||||
var hsbToHex = function (hsb) {
|
||||
return rgbToHex(hsbToRgb(hsb));
|
||||
};
|
||||
var hslToHex = function (hsl) {
|
||||
return hsbToHex(hslToHsb(hsl));
|
||||
};
|
||||
$.fn.extend({
|
||||
colpick: colpick.init,
|
||||
colpickHide: colpick.hidePicker,
|
||||
colpickShow: colpick.showPicker,
|
||||
colpickSetColor: colpick.setColor
|
||||
});
|
||||
$.extend({
|
||||
colpick:{
|
||||
rgbToHex: rgbToHex,
|
||||
rgbToHsb: rgbToHsb,
|
||||
rgbToHsl: rgbToHsl,
|
||||
hsbToHex: hsbToHex,
|
||||
hsbToRgb: hsbToRgb,
|
||||
hsbToHsl: hsbToHsl,
|
||||
hexToHsb: hexToHsb,
|
||||
hexToHsl: hexToHsl,
|
||||
hexToRgb: hexToRgb,
|
||||
hslToHsb: hslToHsb,
|
||||
hslToRgb: hslToRgb,
|
||||
hslToHex: hslToHex
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,97 @@
|
||||
# contextMenu
|
||||
自由定制页面元素的右键菜单。
|
||||
|
||||
|
||||
|
||||
> 是的同类的插件很多，作者造轮子是因为当初寻找右键菜单插件的时候，找了几个都有bug，要么经不起环境的考验，只能跑通demo。如果你也在寻找一款右键菜单插件，不如试试这一款，应该不会让你失望。
|
||||
|
||||
## 最新版本
|
||||
v2.2.5
|
||||
## 原理
|
||||
该插件通过指定的参数，渲染出一个漂亮的右键菜单，并绑定菜单项点击事件。
|
||||
|
||||
需要的参数有：
|
||||
|
||||
1. 右键事件e。指定一个事件e，它可能是通过原生js、jq，甚至vue捕捉的；该插件将获取点击的位置，并阻止事件冒泡，屏蔽默认的右键菜单。
|
||||
2. 菜单描述数组menu。menu数组决定了你想渲染出什么样的菜单。
|
||||
|
||||
## 特色
|
||||
|
||||
* 侵入性小，这个插件几乎不会影响全局，除了ContextMenu全局变量。
|
||||
* 兼容性好，在各个屏幕尺寸和有无滚动条的场景都有不错的渲染效果。
|
||||
* 支持多层嵌套的DOM触发的事件，以最里层为准（详见demo）。
|
||||
* 支持二级菜单。
|
||||
|
||||
## 准备
|
||||
|
||||
1. 下载源码(并点赞)
|
||||
2. 引入 jquery
|
||||
3. 引入 contextMenu.css
|
||||
4. 引入 contextMenu.js
|
||||
|
||||
## 典型用法
|
||||
|
||||
~~~js
|
||||
$('body').contextmenu(function (e) {
|
||||
var menu=[
|
||||
'menu1', //合理的html或纯文字
|
||||
'menu2',
|
||||
'|', //分隔符
|
||||
[
|
||||
'click me', //title
|
||||
function (dom) {alert('Hi')} // 点击菜单项的回调
|
||||
],
|
||||
];
|
||||
ContextMenu.render(e,menu,this); //开始渲染
|
||||
});
|
||||
~~~
|
||||
|
||||
## API
|
||||
`ContextMenu.render(e,menu,param,theme)`
|
||||
|
||||
**e**:点击事件对象，如`$('body').contextmenu(function (e){})`。
|
||||
|
||||
**menu**:
|
||||
|
||||
menu为`true`代表禁用系统默认菜单，但是不渲染自定义菜单；
|
||||
|
||||
menu为数组表示渲染自定义右键菜单；
|
||||
~~~js
|
||||
var menu=[
|
||||
'文字1', //纯文字或html将直接被渲染，做为一个提示性菜单项
|
||||
'文字2',
|
||||
'|', //简单的一个分隔符
|
||||
['功能1',function(param){alert("功能1点击")}], //这种格式说明这个菜单项可以被点击并产生回调
|
||||
[
|
||||
'子菜单',[
|
||||
'文字3',
|
||||
'文字4',
|
||||
'|',
|
||||
['功能2',function(param){alert("功能2点击")}],
|
||||
]
|
||||
] //声明一个子菜单，子菜单内部的声明格式和父级一样
|
||||
]
|
||||
~~~
|
||||
|
||||
**param**:菜单点击回调的第一个参数
|
||||
|
||||
**theme**:主题（目前可选主题"light"）
|
||||
|
||||
## 其他
|
||||
注意：为了获得正确的屏幕尺寸，添加了一个`html,body:{height:100%}`的样式，请确保该样式生效不被覆盖。
|
||||
|
||||
## 更多项目
|
||||
[Yuri2'Projects](https://github.com/yuri2peter/)
|
||||
|
||||
## TOOD
|
||||
|
||||
* 右键菜单，二级垂直方向有可能溢出
|
||||
|
||||
## 更新记录
|
||||
|
||||
* v2.2.5 修复文字溢出（title提示）和子菜单底部溢出
|
||||
* v2.2.3 优化css
|
||||
* v2.2.2 新增第三个参数[bool] disable 临时禁用菜单点击功能 `['功能2',function(param){alert("功能2点击")},true]`
|
||||
* v2.2.1 优化css
|
||||
* v2.2.0 新增主题切换功能
|
||||
* v2.1.1 修复了二级菜单溢出屏幕的问题，更好的兼容性
|
||||
@@ -0,0 +1,92 @@
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.yuri2-context-menu {
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
width: 150px;
|
||||
height: auto;
|
||||
background-color: rgb(61, 61, 61);
|
||||
display: block;
|
||||
/*border-radius: 5px;*/
|
||||
z-index: 99999999;
|
||||
color: white;
|
||||
/*overflow: hidden;*/
|
||||
}
|
||||
.yuri2-context-menu.sub {
|
||||
left: 98%;
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
.yuri2-context-menu.sub.left {
|
||||
left: auto;
|
||||
right: 98%;
|
||||
}
|
||||
.yuri2-context-menu ul li:hover .yuri2-context-menu.sub {
|
||||
display: block;
|
||||
}
|
||||
.yuri2-context-menu ul.left .yuri2-context-menu.sub{
|
||||
left: -100%;
|
||||
}
|
||||
.yuri2-context-menu ul {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
box-shadow: 0 0 16px rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
|
||||
.yuri2-context-menu ul li {
|
||||
transition: background-color 0.5s;
|
||||
cursor: default;
|
||||
padding: 0px 1em;
|
||||
list-style: none;
|
||||
line-height: 30px;
|
||||
height: 30px;
|
||||
font-size: 10px;
|
||||
/*overflow: hidden;*/
|
||||
position: relative;
|
||||
}
|
||||
.yuri2-context-menu ul li div.title{
|
||||
width: 80%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
float: left;
|
||||
word-break: break-all;
|
||||
}
|
||||
.yuri2-context-menu ul li div.title.disable {
|
||||
color: darkgrey;
|
||||
}
|
||||
.yuri2-context-menu ul li.sub:after {
|
||||
content: ">";
|
||||
float: right;
|
||||
transform: scale3d(0.5,1.5,1);
|
||||
position: relative;
|
||||
}
|
||||
.yuri2-context-menu ul li:hover {
|
||||
background-color: #636363;
|
||||
}
|
||||
|
||||
.yuri2-context-menu ul li a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
height: 100%;
|
||||
color: #333;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.yuri2-context-menu ul hr {
|
||||
margin: 0;
|
||||
height: 0;
|
||||
border: 0;
|
||||
border-bottom: rgba(132, 132, 132, 0.47) 1px solid;
|
||||
border-top: none
|
||||
}
|
||||
|
||||
/*浅色主题*/
|
||||
.yuri2-context-menu.light {background-color: #e0e0e0;border-color: #535353;color: #333333;}
|
||||
.yuri2-context-menu.light ul li:hover {background-color: #707070;color: #ffffff;}
|
||||
.yuri2-context-menu.light ul hr{border-color: #535353;}
|
||||
@@ -0,0 +1,96 @@
|
||||
/**
|
||||
* contextMenu v2.2.4
|
||||
* @author Yuri2(yuri2peter@qq.com)
|
||||
* @link https://github.com/yuri2peter/contextMenu
|
||||
* Enjoy! (●'◡'●)
|
||||
* 基于jq的右键菜单（动态绑定）
|
||||
* @author Yuri2
|
||||
*/
|
||||
window.ContextMenu={
|
||||
_className:'yuri2-context-menu',
|
||||
_stopProp:function (e) {
|
||||
if (e.cancelable) {
|
||||
// 判断默认行为是否已经被禁用
|
||||
if (!e.defaultPrevented) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
e.stopImmediatePropagation();
|
||||
e.stopPropagation();
|
||||
},
|
||||
_getMainContent:function(text){
|
||||
return text.replace(/<\/?.+?>/g,"");
|
||||
},
|
||||
render:function (e, menu, trigger,theme) {
|
||||
theme||(theme='');
|
||||
var x=e.clientX,y=e.clientY;
|
||||
this._stopProp(e);
|
||||
this._removeContextMenu();
|
||||
if(menu===true){return;}
|
||||
if(typeof menu === 'object' && menu.length===0){menu=[['...']]}
|
||||
var dom = $("<div class='"+ContextMenu._className+" "+theme+"'><ul></ul></div>");
|
||||
$('body').append(dom);
|
||||
var ul=dom.find('ul');
|
||||
if(x+150>document.body.clientWidth){x-=150;ul.addClass('left')}
|
||||
menu.forEach(function (item) {
|
||||
if(item==='|'){
|
||||
ul.append($('<hr/>'));
|
||||
}
|
||||
else if(typeof(item)==='string'){
|
||||
ul.append($('<li><div class="title" title="'+ContextMenu._getMainContent(item)+'">'+item+'</div></li>'));
|
||||
}
|
||||
else if(typeof(item)==='object'){
|
||||
var sub=$('<li><div class="title '+(item[2]===true?'disable':'')+'" title="'+ContextMenu._getMainContent(item[0])+'">'+item[0]+'</div></li>');
|
||||
ul.append(sub);
|
||||
if(typeof(item[1])==='object'){
|
||||
var subMenu=$("<div class='sub "+ContextMenu._className+" "+theme+"'>\</div>");
|
||||
var subUl=$("<ul></ul>");
|
||||
sub.addClass('sub');
|
||||
subMenu.append(subUl);
|
||||
if(x+300>document.body.clientWidth){subMenu.addClass('left')}
|
||||
sub.append(subMenu);
|
||||
var counterForTop = -1;
|
||||
item[1].forEach(function (t) {
|
||||
if(t==='|'){
|
||||
subUl.append($('<hr/>'));
|
||||
}
|
||||
else if(typeof(t)==='string'){
|
||||
subUl.append($('<li><div class="title" title="'+ContextMenu._getMainContent(t)+'">'+t+'</div></li>'));
|
||||
counterForTop++;
|
||||
}
|
||||
else if(typeof(t)==='object'){
|
||||
var subLi=$('<li><div class="title '+(t[2]===true?'disable':'')+'" title="'+ContextMenu._getMainContent(t[0])+'">'+t[0]+'</div></li>');
|
||||
subUl.append(subLi);
|
||||
if(t[2]!==true){
|
||||
subLi.click(trigger,t[1]);
|
||||
subLi.click(function () {ContextMenu._removeContextMenu();});
|
||||
}
|
||||
counterForTop++;
|
||||
}
|
||||
});
|
||||
if(y+dom.height()>document.body.clientHeight && document.body.clientHeight>0){
|
||||
subMenu.css('top','-'+(counterForTop*30)+'px')
|
||||
}
|
||||
}
|
||||
else if(typeof(item[1])==='function' &&item[2]!==true){
|
||||
sub.click(trigger,item[1]);
|
||||
sub.click(function () {ContextMenu._removeContextMenu();});
|
||||
}
|
||||
}
|
||||
});
|
||||
//修正坐标
|
||||
if(y+dom.height()>document.body.clientHeight && document.body.clientHeight>0){y-=dom.height()}
|
||||
dom.css({
|
||||
top:y,
|
||||
left:x,
|
||||
});
|
||||
},
|
||||
_removeContextMenu:function () {
|
||||
$('.'+ContextMenu._className).remove();
|
||||
},
|
||||
};
|
||||
|
||||
$(document).click(function (e) {
|
||||
if ($(e.target).hasClass(ContextMenu._className) || $(e.target).parents('.'+ContextMenu._className).length > 0) return;
|
||||
ContextMenu._removeContextMenu();
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,2 @@
|
||||
/*! layer mobile-v2.0.0 Web弹层组件 MIT License http://layer.layui.com/mobile By 贤心 */
|
||||
;!function(e){"use strict";var t=document,n="querySelectorAll",i="getElementsByClassName",a=function(e){return t[n](e)},s={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:"scale"},l={extend:function(e){var t=JSON.parse(JSON.stringify(s));for(var n in e)t[n]=e[n];return t},timer:{},end:{}};l.touch=function(e,t){e.addEventListener("click",function(e){t.call(this,e)},!1)};var r=0,o=["layui-m-layer"],c=function(e){var t=this;t.config=l.extend(e),t.view()};c.prototype.view=function(){var e=this,n=e.config,s=t.createElement("div");e.id=s.id=o[0]+r,s.setAttribute("class",o[0]+" "+o[0]+(n.type||0)),s.setAttribute("index",r);var l=function(){var e="object"==typeof n.title;return n.title?'<h3 style="'+(e?n.title[1]:"")+'">'+(e?n.title[0]:n.title)+"</h3>":""}(),c=function(){"string"==typeof n.btn&&(n.btn=[n.btn]);var e,t=(n.btn||[]).length;return 0!==t&&n.btn?(e='<span yes type="1">'+n.btn[0]+"</span>",2===t&&(e='<span no type="0">'+n.btn[1]+"</span>"+e),'<div class="layui-m-layerbtn">'+e+"</div>"):""}();if(n.fixed||(n.top=n.hasOwnProperty("top")?n.top:100,n.style=n.style||"",n.style+=" top:"+(t.body.scrollTop+n.top)+"px"),2===n.type&&(n.content='<i></i><i class="layui-m-layerload"></i><i></i><p>'+(n.content||"")+"</p>"),n.skin&&(n.anim="up"),"msg"===n.skin&&(n.shade=!1),s.innerHTML=(n.shade?"<div "+("string"==typeof n.shade?'style="'+n.shade+'"':"")+' class="layui-m-layershade"></div>':"")+'<div class="layui-m-layermain" '+(n.fixed?"":'style="position:static;"')+'><div class="layui-m-layersection"><div class="layui-m-layerchild '+(n.skin?"layui-m-layer-"+n.skin+" ":"")+(n.className?n.className:"")+" "+(n.anim?"layui-m-anim-"+n.anim:"")+'" '+(n.style?'style="'+n.style+'"':"")+">"+l+'<div class="layui-m-layercont">'+n.content+"</div>"+c+"</div></div></div>",!n.type||2===n.type){var d=t[i](o[0]+n.type),y=d.length;y>=1&&layer.close(d[0].getAttribute("index"))}document.body.appendChild(s);var u=e.elem=a("#"+e.id)[0];n.success&&n.success(u),e.index=r++,e.action(n,u)},c.prototype.action=function(e,t){var n=this;e.time&&(l.timer[n.index]=setTimeout(function(){layer.close(n.index)},1e3*e.time));var a=function(){var t=this.getAttribute("type");0==t?(e.no&&e.no(),layer.close(n.index)):e.yes?e.yes(n.index):layer.close(n.index)};if(e.btn)for(var s=t[i]("layui-m-layerbtn")[0].children,r=s.length,o=0;o<r;o++)l.touch(s[o],a);if(e.shade&&e.shadeClose){var c=t[i]("layui-m-layershade")[0];l.touch(c,function(){layer.close(n.index,e.end)})}e.end&&(l.end[n.index]=e.end)},e.layer={v:"2.0",index:r,open:function(e){var t=new c(e||{});return t.index},close:function(e){var n=a("#"+o[0]+e)[0];n&&(n.innerHTML="",t.body.removeChild(n),clearTimeout(l.timer[e]),delete l.timer[e],"function"==typeof l.end[e]&&l.end[e](),delete l.end[e])},closeAll:function(){for(var e=t[i](o[0]),n=0,a=e.length;n<a;n++)layer.close(0|e[0].getAttribute("index"))}},"function"==typeof define?define(function(){return layer}):function(){var e=document.scripts,n=e[e.length-1],i=n.src,a=i.substring(0,i.lastIndexOf("/")+1);n.getAttribute("merge")||document.head.appendChild(function(){var e=t.createElement("link");return e.href=a+"need/layer.css?2.0",e.type="text/css",e.rel="styleSheet",e.id="layermcss",e}())}()}(window);
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 701 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
File diff suppressed because one or more lines are too long
+3107
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,120 @@
|
||||
#loading {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
#loading * {
|
||||
text-align: center;
|
||||
}
|
||||
#loading .box{
|
||||
/*border: 1px solid;*/
|
||||
position: absolute;
|
||||
width:400px;
|
||||
height:200px;
|
||||
left:50%;
|
||||
top:50%;
|
||||
margin-left:-200px;
|
||||
margin-top:-200px;
|
||||
display: none;
|
||||
color: white;
|
||||
}
|
||||
#loading-powered-by{
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
color: grey;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 1em;
|
||||
}
|
||||
#loading .title {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
#on-load-file-name{
|
||||
font-size: 16px;
|
||||
color: grey;
|
||||
line-height: 35px;
|
||||
}
|
||||
#text-percent{
|
||||
font-size: 30px;
|
||||
top: 83px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.circle-box{
|
||||
margin: 30px auto;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative
|
||||
}
|
||||
.mask{
|
||||
overflow: hidden;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.mask.right{
|
||||
right: 0;
|
||||
}
|
||||
.mask.left{
|
||||
left: 0;
|
||||
}
|
||||
.circle {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid #4e4e4e;
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: all 0.5s ;
|
||||
}
|
||||
.circle.right{
|
||||
clip:rect(0,auto,auto,100px);
|
||||
border: 2px solid white;
|
||||
transform: rotate(-180deg);
|
||||
left: -100px;
|
||||
}
|
||||
.circle.left{
|
||||
clip:rect(0,100px,auto,auto);
|
||||
border: 2px solid white;
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
/*https://www.html5tricks.com/demo/css3-loading-cool-styles/index.html*/
|
||||
.load-3 {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 32%;
|
||||
width: 100%;
|
||||
}
|
||||
.load-3 .k-line2 {
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
opacity: 0;
|
||||
border-radius: 50%;
|
||||
transform: translateX(-100px);
|
||||
background-color: #ffffff;
|
||||
animation: k-loadingS 4s infinite;
|
||||
animation-delay: .8s;
|
||||
}
|
||||
@keyframes k-loadingS {
|
||||
40% {
|
||||
transform:translateX(0);
|
||||
opacity:.8
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100px);
|
||||
opacity:0;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,117 @@
|
||||
#yl .tiles-box{
|
||||
position: absolute;
|
||||
height: calc(100% - 24px);
|
||||
padding: 8px 16px;
|
||||
padding-right: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
width: calc(100% - 328px);
|
||||
top: 16px;
|
||||
transition:left 0.3s ;
|
||||
/*column-count: 3;*/
|
||||
}
|
||||
#yl.small-screen .tiles-box{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
width: calc(100% - 56px);
|
||||
}
|
||||
#yl .tiles-flex-container{
|
||||
width: 100%;
|
||||
column-gap: 0;
|
||||
}
|
||||
#yl .tiles{
|
||||
top :0;
|
||||
overflow: hidden;
|
||||
transition: left 0.3s;
|
||||
break-inside: avoid;
|
||||
}
|
||||
#yl .tiles>.title{
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
padding-left: 4px;
|
||||
line-height: 3em;
|
||||
overflow: hidden;
|
||||
height: 3em;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#yl .tiles>.title>.tip{
|
||||
float: right;
|
||||
line-height: inherit;
|
||||
font-size: 1.5em;
|
||||
margin-right: 4px;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
#yl .tiles:hover>.title>.tip {
|
||||
opacity: 1;
|
||||
}
|
||||
#yl .tiles .vue-grid-item{
|
||||
/*background-color: #4fa1da;*/
|
||||
opacity: 0.9;
|
||||
/*transition: opacity 0.3s ;*/
|
||||
}
|
||||
|
||||
#yl .tiles .vue-grid-item:hover{
|
||||
opacity: 1;
|
||||
box-shadow: inset 0 0 0 2px white;
|
||||
}
|
||||
|
||||
#yl .tiles .vue-grid-item.vue-grid-placeholder{
|
||||
background: rgba(105, 120, 135, 0.52);
|
||||
}
|
||||
|
||||
#yl .tiles .vue-grid-item:hover .tile{
|
||||
animation-fill-mode: backwards ;
|
||||
}
|
||||
#yl .tiles .vue-grid-item .tile{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
#yl .tiles .vue-grid-item .tile>.mask{
|
||||
height: 100%;
|
||||
}
|
||||
#yl .tiles .vue-grid-item .tile>.mask>.badge {
|
||||
right: 0.2em;
|
||||
top: 0.2em;
|
||||
transform: none;
|
||||
border-radius: 0;
|
||||
padding: 0.2em;
|
||||
min-width: 2em;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
border-color: rgba(255, 255, 255, 0.71);
|
||||
}
|
||||
#yl .vue-grid-item>.vue-resizable-handle{
|
||||
opacity: 0;
|
||||
}
|
||||
#yl .vue-grid-item:hover>.vue-resizable-handle{
|
||||
opacity: 1;
|
||||
}
|
||||
#yl .tiles .tile .icon{
|
||||
color:white;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
#yl .tiles .tile .title {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
max-height: 28px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0.5em;
|
||||
text-shadow: 0px 0px 4px #0000006b;
|
||||
}
|
||||
|
||||
#yl .tiles .tile .custom-tile{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
resize: none;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
.layui-layer.yl{
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background-color: white;
|
||||
min-width: 300px;
|
||||
}
|
||||
.layui-layer.yl .layui-layer-title{
|
||||
background-color: inherit;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
.layui-layer.yl .layui-layer-btn0,.layui-layer.yl .layui-layer-btn1{
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
.layui-layer.yl .layui-layer-content .layui-layer-input{
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
width: calc(100% - 50px);
|
||||
line-height: 20px;
|
||||
padding: 0.5em;
|
||||
outline: none;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg class="icon" style="vertical-align: middle;fill: white;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M583.168 523.776L958.464 148.48c18.944-18.944 18.944-50.176 0-69.12l-2.048-2.048c-18.944-18.944-50.176-18.944-69.12 0L512 453.12 136.704 77.312c-18.944-18.944-50.176-18.944-69.12 0l-2.048 2.048c-19.456 18.944-19.456 50.176 0 69.12l375.296 375.296L65.536 899.072c-18.944 18.944-18.944 50.176 0 69.12l2.048 2.048c18.944 18.944 50.176 18.944 69.12 0L512 594.944 887.296 970.24c18.944 18.944 50.176 18.944 69.12 0l2.048-2.048c18.944-18.944 18.944-50.176 0-69.12L583.168 523.776z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 657 B |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@@ -0,0 +1 @@
|
||||
<svg class="icon" style="vertical-align: middle;fill: white;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M64 64v896h896V64H64z m821.3 821.3H138.7V138.7h746.7v746.6z"></path></svg>
|
||||
|
After Width: | Height: | Size: 236 B |
@@ -0,0 +1,3 @@
|
||||
<svg class="icon" style="vertical-align: middle;fill: white;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" >
|
||||
<path d="M512 778.56l70.4-93.76A32 32 0 0 1 608 672h224a32 32 0 0 0 32-32V256a32 32 0 0 0-32-32H192a32 32 0 0 0-32 32v384a32 32 0 0 0 32 32h224a32 32 0 0 1 25.6 12.8zM192 736a96 96 0 0 1-96-96V256a96 96 0 0 1 96-96h640a96 96 0 0 1 96 96v384a96 96 0 0 1-96 96H624l-86.4 115.2a32 32 0 0 1-51.2 0L400 736zM320 416a32 32 0 0 1 0-64h384a32 32 0 0 1 0 64z m0 128a32 32 0 0 1 0-64h256a32 32 0 0 1 0 64z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 570 B |
@@ -0,0 +1,3 @@
|
||||
<svg class="icon" style="vertical-align: middle;fill: white;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M64 448h896v128H64v-128z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 207 B |
@@ -0,0 +1,3 @@
|
||||
<svg class="icon" style="vertical-align: middle;fill: white;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" >
|
||||
<path d="M960 0H294.076632a64 64 0 0 0-64 64v128H64A64 64 0 0 0 0 256v704A64 64 0 0 0 64 1024H768a64 64 0 0 0 64-64V792.966737h128a64 64 0 0 0 64-64V64A64 64 0 0 0 960 0zM741.052632 728.966737V933.052632H90.947368V282.947368H741.052632v446.019369z m189.44-26.947369h-98.492632V256A64 64 0 0 0 768 192H321.024v-101.052632H933.052632l-2.56 611.072z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 521 B |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 299 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 256 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 344 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 224 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user