166 changed files with 4109 additions and 25841 deletions
@ -0,0 +1,5 @@ |
|||
@echo off |
|||
|
|||
git add . |
|||
git commit -m "Auto commit." |
|||
git push |
|||
@ -1,8 +0,0 @@ |
|||
# Created by .ignore support plugin (hsz.mobi) |
|||
.idea |
|||
test.html |
|||
/unpackage/ |
|||
/test/ |
|||
/saves/test.json |
|||
/node_modules/ |
|||
/package-lock.json |
|||
|
Before Width: | Height: | Size: 4.2 KiB |
@ -1,31 +0,0 @@ |
|||
YL.static = { |
|||
/** “关于”信息 */ |
|||
softwareName: 'Luckey', //网站名。请在此处填写您自己的网站名，如王小明的博客。
|
|||
version: "1.0.0", // 网站版本号
|
|||
iconBtnStart: 'html5', //主图标
|
|||
author: 'Luckey',//作者
|
|||
contactInformation: 'QQ：16463223',//联系方式
|
|||
officialWebsite: 'http://www.luckyzmj.cn',//软件官网
|
|||
welcome: '本网站UI由 YLUI 强力驱动\n更多信息：//ylui.yuri2.cn',//加载完毕控制台提示信息
|
|||
copyrightDetail: '仅用于个人用户学习使用',//版权详细信息
|
|||
otherStatements: '',//其他信息（可留空）
|
|||
|
|||
/**————————————————————————————————————————————————————————————————————————————————————————————*/ |
|||
/** YLUI基础设置 */ |
|||
lang: 'zh-cn', //语言
|
|||
localStorageName: "ylui-storage", //ls存储名
|
|||
lockedApps: ['yl-system', 'yl-color-picker', 'ylui-fa', 'yl-browser', 'yl-server'], // 锁定的应用（不允许被脚本修改）
|
|||
trustedApps: ['yl-server'], // 受信任的应用（可以使用敏感API）
|
|||
debug: false,//启用更多调试信息
|
|||
beforeOnloadEnable: true,//启用关闭前询问（打包app时请关闭防止出错）
|
|||
WarningPerformanceInIE: true,//在IE下提示体验不佳信息
|
|||
languages: {}, //推荐留空，自动从文件加载
|
|||
changeable: true,//存档数据是否可被普通用户修改
|
|||
dataCenter: true,//是否展示数据管理中心
|
|||
|
|||
/**————————————————————————————————————————————————————————————————————————————————————————————*/ |
|||
/** YLUI注册信息 */ |
|||
authorization: '社区版',//授权类型
|
|||
serialNumber: null,//序列号
|
|||
|
|||
}; |
|||
|
Before Width: | Height: | Size: 4.2 KiB |
@ -1,503 +0,0 @@ |
|||
<!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"> |
|||
<script> |
|||
window.yluiVersion = '2.1.9'; |
|||
document.write('<link rel="stylesheet" href="./res/css/loading.css?v='+window.yluiVersion+'"/>'); |
|||
document.write('<script src="res/yl.js?v='+window.yluiVersion+'"><\/script>'); |
|||
document.write('<script src="onLoad.js?v='+window.yluiVersion+'"><\/script>'); |
|||
</script> |
|||
</head> |
|||
<body style="padding: 0;margin: 0;background: black"> |
|||
<div id="loading"> |
|||
<div class="box" id="loading-box"> |
|||
<p class="title"><span id="loading-software-name"></span> <span id="loading-lang-init"></span></p> |
|||
<p id="on-load-file-name">...</p> |
|||
<div class="circle-box"> |
|||
<div class="circle"></div> |
|||
<div id="text-percent">0</div> |
|||
<div class="mask right"> |
|||
<div id="loading-right" class="circle right"></div> |
|||
</div> |
|||
<div class="mask left"> |
|||
<div id="loading-left" class="circle left"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<p id="loading-powered-by"></p> |
|||
</div> |
|||
<!--图标模板--> |
|||
<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" |
|||
onerror="this.src='./res/img/icon/error.png'"/> |
|||
</template> |
|||
<div class="badge" v-show="badge">{{badgeText(badge)}}</div> |
|||
</div> |
|||
</script> |
|||
|
|||
<!--菜单模板--> |
|||
<script type="text/x-template" id="tpl-menu"> |
|||
<div class="menu" @contextmenu.self="onMainContextMenu($event)"> |
|||
<yl-menu-item |
|||
class="animated fadeInUp" |
|||
:style="{'animation-duration': '0.3s', 'animation-delay': index*0.05+'s'}" |
|||
v-for="(item, id, index) in menu" |
|||
:open="true" |
|||
:item="item" |
|||
:itemid="id" |
|||
:depth="0" |
|||
@itemclick="onItemClick($event)" |
|||
@itemcontextmenu="onItemContextMenu($event)" |
|||
:apps="apps"> |
|||
</yl-menu-item> |
|||
</div> |
|||
</script> |
|||
<script type="text/x-template" id="tpl-menu-item"> |
|||
<div> |
|||
<div class="item" |
|||
@contextmenu="onContextMenu($event)" |
|||
:class="{open:open}" @click="click"> |
|||
<span :style="{'margin-left':depth*15+'px'}"></span> |
|||
<yl-icon v-if="!item.children" :icon="apps[item.app].icon"></yl-icon> |
|||
<div v-else class="icon-drawer"> |
|||
<template v-for="(c1, id1) in item.children"> |
|||
<yl-icon v-if="!c1.children" :icon="apps[c1.app].icon" :badge="0" class="icon-drawer-pre" |
|||
:drawer="true"></yl-icon> |
|||
</template> |
|||
</div> |
|||
<span class="title">{{item.title}}</span> |
|||
<div v-if="item.children" class="arrow" :class="{open:item.open}"> |
|||
<i class="fa fa-fw fa-angle-up"></i> |
|||
<i class="fa fa-fw fa-angle-down"></i> |
|||
</div> |
|||
</div> |
|||
<yl-menu-item |
|||
v-if="item.children" |
|||
v-for="(subItem, subId) in item.children" |
|||
:item="subItem" |
|||
:itemid="subId" |
|||
:depth="depth+1" |
|||
:open="item.open&&open" |
|||
@itemclick="onItemClick($event)" |
|||
@itemcontextmenu="onItemContextMenu($event)" |
|||
:apps="apps"> |
|||
</yl-menu-item> |
|||
</div> |
|||
</script> |
|||
<div id="yl" :class="{'small-screen':runtime.isSmallScreen,'horizontal-screen':runtime.isHorizontalScreen}" |
|||
style="display: none;opacity: 0" unselectable="on" |
|||
v-show="ready"> |
|||
<!--桌面 图标 抽屉 窗体--> |
|||
<div class="desktop " |
|||
:style="{top:configs.topTaskBar?40+'px':0}"> |
|||
<!--图标--> |
|||
<div class="shortcut" :class="shortcutClass(id,s)" v-for="(s, id) in shortcuts" |
|||
:key="id" |
|||
@mousedown="shortcutMouseDown(id,null, $event)" |
|||
@touchstart="shortcutMouseDown(id,null, $event)" |
|||
v-show="runtime.shortcutsShow" |
|||
@contextMenu="shortcutContextMenu(id,null,$event)" |
|||
:title="s.title" |
|||
:style="shortcutStyle(id,null)"> |
|||
<yl-icon v-if="!s.children" :icon="apps[s.app].icon" :badge="apps[s.app].badge"></yl-icon> |
|||
<div class="icon-drawer" v-if="s.children"> |
|||
<template v-for="(s1, id1) in s.children"> |
|||
<yl-icon :icon="apps[s1.app].icon" :badge="0" class="icon-drawer-pre" |
|||
:drawer="true"></yl-icon> |
|||
</template> |
|||
<div class="badge" v-show="shortcutGetDrawerBadge(id)">{{badgeText(shortcutGetDrawerBadge(id))}}</div> |
|||
</div> |
|||
<div class="title"> |
|||
{{s.title}} |
|||
</div> |
|||
</div> |
|||
|
|||
<!--抽屉渲染--> |
|||
<transition name="opacity"> |
|||
<div class="shader " v-if="shortcuts[drawer]" |
|||
@mousedown.self="if(Date.now()-runtime.shortcutOpenedAt>500) drawer=null" |
|||
style="z-index:999999"> |
|||
<div class="drawer"> |
|||
<div class="mask" |
|||
:style="{background:configs.themeColor}"></div> |
|||
<div class="title">{{shortcuts[drawer].title}}</div> |
|||
<div class="shortcut" v-for="(s, id) in shortcuts[drawer].children" |
|||
:class="shortcutClass(id,s,true)" |
|||
@mousedown="shortcutMouseDown(id,drawer, $event)" |
|||
@touchstart="shortcutMouseDown(id,drawer, $event)" |
|||
@contextMenu="shortcutContextMenu(id,drawer,$event,true)" |
|||
:title="s.title" :style="{left:s.drag.left+'px',top:s.drag.top+'px'}"> |
|||
<yl-icon v-if="!s.drawer" :icon="apps[s.app].icon" :badge="apps[s.app].badge"></yl-icon> |
|||
<div class="title"> |
|||
{{s.title}} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</transition> |
|||
|
|||
<!--窗体渲染--> |
|||
<transition-group name="opacity"> |
|||
<div v-for="(w,id) in wins" class="win shadow" :key="id" |
|||
:id="id" |
|||
v-show="!winIsMin(id)" |
|||
@mousedown="winSetActive(id)" |
|||
:class="winClass(id)" |
|||
:style="winStyle(id)"> |
|||
<div v-if="!w.plugin&&w.init" class="init" :style="{'background-color':w.icon.bg || configs.themeColor}"> |
|||
<yl-icon :icon="w.icon" :badge="0" :style="winInitIconStyle(id)"></yl-icon> |
|||
<div class="load-3"> |
|||
<div v-if="!runtime.isSmallScreen" class="k-line2 k-line12-2" style="animation-delay: .7s"></div> |
|||
<div v-if="!runtime.isSmallScreen" class="k-line2 k-line12-3" style="animation-delay: .6s"></div> |
|||
<div class="k-line2 k-line12-4" style="animation-delay: .5s"></div> |
|||
<div class="k-line2 k-line12-5" style="animation-delay: .4s"></div> |
|||
<div class="k-line2 k-line12-6" style="animation-delay: .3s"></div> |
|||
<div class="k-line2 k-line12-7" style="animation-delay: .2s"></div> |
|||
<div class="k-line2 k-line12-8" style="animation-delay: .1s"></div> |
|||
</div> |
|||
</div> |
|||
<div class="bar-box"> |
|||
<div class="bar" :class="{'no-max':w.plugin||!w.resizable}"> |
|||
<div class="mask bar-mask"></div> |
|||
<div class="mask" :style="{background:w.init?(w.icon.bg || configs.themeColor):configs.themeColor, opacity:w.init?1:0.9}" ></div> |
|||
<!--标题栏--> |
|||
<div class="title" :title="w.title" |
|||
@contextMenu="winContextMenu(id,$event)" |
|||
@dblclick="winTitleDblclick(id)" |
|||
@mousedown="winTitleMouseDown(id,$event)" |
|||
@touchstart="winTitleMouseDown(id,$event)"> |
|||
<yl-icon :icon="w.icon"></yl-icon> |
|||
{{w.title}} |
|||
</div> |
|||
<div class="tools"> |
|||
<span style="background-image: url('./res/img/icon/minimize.svg')" class="tool" @click="winMinimize(id)" ></span> |
|||
<span v-if="!w.plugin&&w.state==='normal'&&w.resizable&&!runtime.isSmallScreen" |
|||
style="background-image: url('./res/img/icon/maximize.svg')" |
|||
class="tool" |
|||
@click="winMaximize(id)" ></span> |
|||
<span v-if="!w.plugin&&w.state==='max'&&!runtime.isSmallScreen" |
|||
class="tool" |
|||
style="background-image: url('./res/img/icon/restore.svg')" |
|||
@click="winRestore(id)" ></span> |
|||
<span class="tool close" @click="winClose(id)" style="background-image: url('./res/img/icon/close.svg')" ></span> |
|||
<div style="clear: both"></div> |
|||
</div> |
|||
<div style="clear: both"></div> |
|||
</div> |
|||
<div v-show="w.addressBar" class="address-bar"> |
|||
<i class="btns fa fa-fw fa-arrow-left" :class="{disable:!YL.child.historyBackAvailable(id)}" |
|||
@click="YL.child.historyBack(id)"></i> |
|||
<i class="btns fa fa-fw fa-arrow-right" |
|||
:class="{disable:!YL.child.historyForwardAvailable(id)}" |
|||
@click="YL.child.historyForward(id)"></i> |
|||
<i class="btns fa fa-fw fa-rotate-right" |
|||
:class="{disable:!w.childSupport}" |
|||
@click="!w.childSupport||winRefresh(id)"></i> |
|||
<i class="btns fa fa-fw fa-home" @click="winHome(id)"></i> |
|||
<input v-model="w.urlBar" spellcheck="false" @keyup.enter="w.url=w.urlBar"> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="win-drag-placeholder"> |
|||
<div class="mask" style="z-index: 2" v-show="runtime.drag"></div> |
|||
<iframe :id="w.idIframe" :name="id" class="frm" |
|||
:src="w.url"></iframe> |
|||
<div v-show="w.resizable" class="win-resize" @mousedown="winResizeMouseDown(id,$event)"></div> |
|||
<div class="win-move" |
|||
@contextMenu="winContextMenu(id,$event)" |
|||
@mousedown="winTitleMouseDown(id,$event)" |
|||
@touchstart="winTitleMouseDown(id,$event)" |
|||
></div> |
|||
</div> |
|||
</div> |
|||
</transition-group> |
|||
<!--背景图--> |
|||
<div class="background-mask " |
|||
@click.self="desktopClick" |
|||
@mousemove.self="desktopMouseMove" |
|||
@mousedown.self="desktopMouseDown" |
|||
@mouseup.self="desktopMouseUp" |
|||
@contextMenu.self="desktopContextMenu"></div> |
|||
<div class="background" |
|||
:class="{blur:configs.wallpaperBlur, cross:backgroundCross}" |
|||
:style="{'background-image':'url('+runtime.wallpaper+')'}"></div> |
|||
</div> |
|||
|
|||
<!--任务栏--> |
|||
<div class="bar" @contextMenu="barContextMenu" :style="barStyle" :class="{top:configs.topTaskBar}"> |
|||
<div class="mask" :style="{background:configs.themeColor}"></div> |
|||
<div class="mask" :style="{background:'rgba(0,0,0,0.18)'}"></div> |
|||
<div class="mask powered-by" :class="{fade: runtime.winOpened}" > |
|||
Powered by YLUI v{{YL.info.version}} |
|||
</div> |
|||
<!--开始按钮--> |
|||
<div class="btn shadow-hover fa fa-fw" |
|||
style="width: 36px;" |
|||
:class="[ 'fa-'+YL.info.iconBtnStart, {btnStartOpen: startMenu.open } ]" |
|||
@click="if(startMenu.open){hideOpens();}else{hideOpens();startMenu.open=true} "></div> |
|||
<!--子窗口的按钮--> |
|||
<div class="btn win-task" @click="winTaskClick(id)" |
|||
:class="{active:id===runtime.winActive&&!winIsMin(id),shadow:id===runtime.winActive&&!winIsMin(id)}" |
|||
v-for="(w,id) in wins" v-if="!w.plugin" @contextMenu="winContextMenu(id,$event)" |
|||
:style="{'width':parseInt((runtime.clientSize.width-210+(runtime.isSmallScreen?80:0))/runtime.winOpened)+'px'}"> |
|||
<yl-icon :icon="w.icon"></yl-icon> |
|||
<div class="title">{{w.title}}</div> |
|||
<div class="line"></div> |
|||
</div> |
|||
<!--显示桌面--> |
|||
<div id="yl-btn-right-bottom" |
|||
@click="if(smallScreenAndMenuOpend){runtime.menuOnLeft=!runtime.menuOnLeft} else {showDesktop()}" |
|||
:class="{'fa-exchange':smallScreenAndMenuOpend}" |
|||
class="btn shadow-hover fa fa-fw"></div> |
|||
<!--消息--> |
|||
<div id="yl-btn-center" class="btn shadow-hover " style="float: right" |
|||
@click="btnCenterClick()"> |
|||
<div class="badge" |
|||
:style="{bottom:configs.topTaskBar?'-18px':'none',top:configs.topTaskBar?'auto':'0'}" |
|||
v-show="center.unread">{{center.unread>99?'99+':center.unread}} |
|||
</div> |
|||
</div> |
|||
<!--时间--> |
|||
<div class="btn shadow-hover" v-show="!runtime.isSmallScreen" v-html="runtime.time" |
|||
:title="runtime.date && runtime.date.toLocaleString()" |
|||
@click="runtime.CalendarOpen=!runtime.CalendarOpen;runtime.pluginIconsOpen=false;" |
|||
style="font-size: 12px;float: right"></div> |
|||
<!--托盘按钮--> |
|||
<div class="btn shadow-hover fa fa-fw " |
|||
:class="{'fa-angle-up':!configs.topTaskBar,'fa-angle-down':configs.topTaskBar}" |
|||
style="float: right;padding: 0" |
|||
@click="runtime.pluginIconsOpen=!runtime.pluginIconsOpen;runtime.CalendarOpen=false;"></div> |
|||
<!--插件托盘盒子--> |
|||
<transition name="opacity"> |
|||
<div class="plugin-icons shadow" v-show="runtime.pluginIconsOpen"> |
|||
<div class="mask" :style="{background:configs.themeColor}" ></div> |
|||
<div class="mask" style="background: white; opacity: 0.04"></div> |
|||
<div class="plugin-icon" @click="winShowToggle(id)" |
|||
:class="{active:id===runtime.winActive&&!winIsMin(id)}" |
|||
v-for="(w,id) in wins" v-if="w.plugin" @contextMenu="winContextMenu(id,$event)" |
|||
:title="w.title" |
|||
:style="{opacity:winIsMin(id)?0.6:1}"> |
|||
<yl-icon :icon="w.icon"></yl-icon> |
|||
</div> |
|||
</div> |
|||
</transition> |
|||
<!--日历盒子--> |
|||
<transition name="opacity"> |
|||
<div id="_box_time" @contextMenu="ContextMenu.render($event,true)" class="calendar-box shadow" |
|||
v-show="runtime.CalendarOpen"> |
|||
<div class="mask" :style="{background:configs.themeColor}" ></div> |
|||
<div class="mask" style="background: white; opacity: 0.02"></div> |
|||
<div class="_h_m_s div-time"></div> |
|||
<div class="_y_m_d div-time"></div> |
|||
<div class="calendar clearfix"> |
|||
<div class="_header"> |
|||
<strong></strong> |
|||
<span class="aL"><</span> |
|||
<span class="aR">></span> |
|||
</div> |
|||
<div class="_normal"> |
|||
<div class="_week clearfix"></div> |
|||
<div class="_days clearfix"> |
|||
<ul class="clearfix"></ul> |
|||
</div> |
|||
</div> |
|||
<div class='_years_months clearfix'> |
|||
<ul></ul> |
|||
</div> |
|||
<div class="_tenyears clearfix"> |
|||
<ul></ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</transition> |
|||
</div> |
|||
|
|||
<!--开始菜单--> |
|||
<transition name="opacity"> |
|||
<div class="startMenu shadow" |
|||
:style="{width: runtime.startMenu.width+'px', height: runtime.startMenu.height +'px'}" |
|||
@click="center.open = false;runtime.pluginIconsOpen = false;runtime.CalendarOpen = false;" |
|||
v-show="startMenu.open" |
|||
:class="{topTaskBar:configs.topTaskBar}"> |
|||
<div class="mask" |
|||
:style="{background:configs.themeColor}"></div> |
|||
<div class="startMenu-resize" |
|||
@mousedown="startMenuResizeMouseDown($event)"></div> |
|||
<!--左侧边栏--> |
|||
<div class="sidebar" |
|||
:style="{'background-color': configs.themeColor}" |
|||
:class="{spread:startMenu.sidebar.open,'shadow-hover':startMenu.sidebar.open}" |
|||
@mouseleave="startMenu.sidebar.open=false"> |
|||
<div class="mask" |
|||
style="background-color: white" |
|||
:style="{opacity: startMenu.sidebar.open ? 0.04 : 0.02}"></div> |
|||
<div @click="startMenu.sidebar.open=!startMenu.sidebar.open" class="btn"> |
|||
<i class="fa fa-fw fa-align-justify"></i><span class="title">{{YL.lang("Start")}}</span></div> |
|||
<div class="btn-group"> |
|||
<div v-for="(b, i) in startMenu.sidebar.btns" :title="b.title" class="btn" |
|||
@contextMenu="sidebarBtnContextMenu(i,$event)" |
|||
@click="appOpen(b.app,b,b)"> |
|||
<yl-icon :icon="apps[b.app].icon" :badge="apps[b.app].badge" :nobg="true"></yl-icon> |
|||
<span class="title">{{b.title}}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!--主菜单--> |
|||
<yl-menu |
|||
:style="menuStyle" |
|||
@maincontextmenu="menuMainContextMenu($event)" |
|||
@itemcontextmenu="menuContextMenu($event)" |
|||
@itemclick="menuItemClick($event)" :menu="startMenu.menu" :apps="apps"> |
|||
</yl-menu> |
|||
|
|||
<!--磁贴--> |
|||
<div class="tiles-box" @contextMenu="tilesBoxContextMenu($event)" :style="tilesBoxStyle"> |
|||
<div class="tiles-flex-container" :style="{'column-count':runtime.tilesGroupNum}"> |
|||
<div class="tiles" :style="{width: runtime.tilesWidth+'px'}" |
|||
v-for="(tileGroup,groupIndex) in tiles"> |
|||
<div class="title" @contextMenu="tilesTitleContextMenu(groupIndex,$event)">{{tileGroup.title}} |
|||
<i @click="shortSetting=tileGroup" class="fa fa-navicon tip"></i> |
|||
</div> |
|||
<grid-layout |
|||
:layout="tileGroup.data" |
|||
:col-num="6" |
|||
:row-height="runtime.tileSize" |
|||
:is-draggable="true" |
|||
:is-resizable="true" |
|||
:vertical-compact="true" |
|||
:margin="[4,4]" |
|||
:use-css-transforms="false" |
|||
:autoSize="false" |
|||
> |
|||
<grid-item v-for="(tile,i) in tileGroup.data" |
|||
@moved="tileMoved" |
|||
:x="tile.x" |
|||
:y="tile.y" |
|||
:w="tile.w" |
|||
:h="tile.h" |
|||
:i="tile.i"> |
|||
<div class="tile animated zoomIn" |
|||
:style="{'animation-duration': '0.3s', 'animation-delay': Math.random()/8+'s'}" |
|||
:title="tile.title" |
|||
@mousedown="tileMouseDown($event)" |
|||
@click="tileClick(tile)" @contextMenu="tileContextMenu(groupIndex,i,$event)"> |
|||
<div class="mask" style="opacity:0.85" |
|||
:style="{'background-color':apps[tile.app].icon.bg}"> |
|||
<div class="badge" v-show="apps[tile.app].badge"> |
|||
{{badgeText(apps[tile.app].badge)}} |
|||
</div> |
|||
<iframe class="custom-tile" v-if="apps[tile.app].customTile" |
|||
frameborder="0" scrolling="no" hspace="0" |
|||
:src="tileSrcCustom(apps[tile.app])" ></iframe> |
|||
<yl-icon v-else :icon="apps[tile.app].icon" :badge="0" |
|||
:style="tileStyle(tile)"></yl-icon> |
|||
<div v-show="Math.min(tile.w,tile.h)*runtime.tileSize>80" class="title"> |
|||
{{tile.title}} |
|||
</div> |
|||
</div> |
|||
<!--<div class="mask" style="opacity: 0.3;background-color: white"></div>--> |
|||
</div> |
|||
</grid-item> |
|||
</grid-layout> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</transition> |
|||
|
|||
<!--操作中心--> |
|||
<div class="center shadow" :class="{open:center.open}" :style="centerStyle"> |
|||
<div class="mask" |
|||
:style="{background:configs.themeColor}"></div> |
|||
<div class="banner">{{YL.lang("NoticeCenter")}} |
|||
<div class="clear" v-show="center.msgNum>0" @click="btnCenterClear">{{YL.lang("NoticeClearAll")}}</div> |
|||
</div> |
|||
<transition |
|||
name="custom-classes-transition-msg" |
|||
enter-active-class="animated slideInRight" |
|||
leave-active-class="animated slideOutRight"> |
|||
<div style="animation-duration: 0.5s" class="banner no-msg" v-show="center.msgNum<=0"> |
|||
{{YL.lang("NoMoreNotice")}} |
|||
</div> |
|||
</transition> |
|||
<div class="msgs"> |
|||
<transition-group |
|||
name="custom-classes-transition-msg" |
|||
enter-active-class="animated bounceInRight" |
|||
leave-active-class="animated bounceOutRight"> |
|||
<div v-for="(m,id) in center.msg" class="msg shadow-hover" :key="id"> |
|||
<div class="title">{{m.title}} |
|||
<div class="btn-close" @click="msgClose(id)"><i class="fa fa-trash"></i></div> |
|||
</div> |
|||
<div class="content selectable" v-html="m.content"></div> |
|||
</div> |
|||
</transition-group> |
|||
</div> |
|||
</div> |
|||
<!--快捷方式配置--> |
|||
<transition name="opacity"> |
|||
<div class="shader" v-if="shortSetting" |
|||
@click.self="shortSetting=null;runtime.shortcutNewParamName='',runtime.shortcutNewParamValue=''" |
|||
:style="{'z-index':19930005}"> |
|||
<div class="drawer"> |
|||
<div class="mask" |
|||
:style="{background:configs.themeColor}"></div> |
|||
<div class="title">{{shortSetting.title}}<span v-if="shortSetting.app" class="btn-advance" |
|||
@click="btnShortSettingAdvanceClick(shortSetting.app)">{{YL.lang("Advance")}}</span> |
|||
</div> |
|||
<div class="line" :style="{'margin-top':shortSetting.params?0:'64px'}"> |
|||
<span>{{YL.lang("Title")}}</span> <input spellcheck="false" autofocus |
|||
v-model="shortSetting.title"/> |
|||
</div> |
|||
<template v-if="shortSetting.params"> |
|||
<div class="line"> |
|||
<span>{{YL.lang("Hash")}}</span> <input spellcheck="false" v-model="shortSetting.hash"/> |
|||
</div> |
|||
<div class="line"> |
|||
<input spellcheck="false" :placeholder="YL.lang('Key')" |
|||
v-model="runtime.shortcutNewParamName"/> |
|||
<input spellcheck="false" :placeholder="YL.lang('Value')" |
|||
v-model="runtime.shortcutNewParamValue"/> |
|||
<i class="fa fa-plus-circle" @click="shortSettingParamsAdd"></i> |
|||
</div> |
|||
<div v-for="(val,name) in shortSetting.params" |
|||
class="line"> |
|||
<span :title="name">{{name}}</span> |
|||
<input spellcheck="false" v-model="shortSetting.params[name]"/> |
|||
<i class="fa fa-minus-circle" @click="shortSettingParamsDelete(name)"></i> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
</transition> |
|||
<!--消息预览--> |
|||
<transition-group |
|||
name="custom-classes-transition-msg" |
|||
enter-active-class="animated bounceInRight" |
|||
leave-active-class="animated bounceOutRight"> |
|||
<div v-for="(msg,id) in msgPres" class="msg-attention animated" :key="msg.key" |
|||
@click="center.open = true" |
|||
:style="{bottom: msg.index*180+40+'px'}" v-if="msg"> |
|||
<div class="mask" :style="{background:configs.themeColor}"></div> |
|||
<div class="title">{{msg.title}}</div> |
|||
<div class="content selectable" v-html="msg.content"></div> |
|||
<div class="mask-msg" |
|||
:style="{background: 'linear-gradient(to top,'+configs.themeColor+','+configs.themeColor+' 50%,transparent)'}"></div> |
|||
</div> |
|||
</transition-group> |
|||
</div> |
|||
</body> |
|||
</html> |
|||
@ -1,185 +0,0 @@ |
|||
{ |
|||
"AboutUs": "About Us", |
|||
"Add": "Add", |
|||
"AddAppFailed": "Add application failed.", |
|||
"AddPictureOnline": "Add Picture Online", |
|||
"AddTo": "Add to", |
|||
"Added": "Added", |
|||
"Advance": "Advance", |
|||
"AfterAppClose": "After App Open", |
|||
"AfterAppOpen": "After App Open", |
|||
"AlignBottom": "Align Bottom", |
|||
"AlignLeft": "Align Left", |
|||
"AlignRight": "Align Right", |
|||
"AlignTop": "Align Top", |
|||
"AppManager": "Apps", |
|||
"AppStore": "App Store", |
|||
"Application": "Application", |
|||
"AppLockedCanNotChange": "The Application locked is not allowed to be changed.", |
|||
"AttentionEnterAppName": "Please enter the application name", |
|||
"AttentionNoResize": "Sorry, you can't change the size.", |
|||
"Author": "Author", |
|||
"Authorization": "Authorization", |
|||
"AutoOffset": "Auto Offset", |
|||
"AutoRun": "Auto Run", |
|||
"BackMode": "Back Mode", |
|||
"BeforeUnload": "The system may not save the changes you made.", |
|||
"Big": "Big", |
|||
"Blur": "Blur", |
|||
"BottomTaskBar": "Bottom Task Bar", |
|||
"CanBeEmpty": "Can be Empty", |
|||
"Cancel": "Cancel", |
|||
"CentreAdjustment": "Centre Adjustment", |
|||
"ChildMethodSetupConfirm":"This operation tries to add new content to your desktop, does it continue?(Do not agree with the application of suspicious sources)", |
|||
"ChildMethodSetupSuccessMsgContent":"Request source:", |
|||
"ChildMethodSetupSuccessMsgTitle":"The Installation Is Complete", |
|||
"ChildMethodUninstallConfirm":"This operation tries to uninstall some applications, does it continue?(Do not agree with the application of suspicious sources)", |
|||
"ChildMethodUninstallSuccessMsgContent":"Request source:", |
|||
"ChildMethodUninstallSuccessMsgTitle":"The Uninstallation Is Complete", |
|||
"ClearSuperscript": "Clear Superscript", |
|||
"ClickToChange": "Click to Change", |
|||
"Close": "Close", |
|||
"CloseAll": "Close All", |
|||
"CollectAsApplication": "Collect as Application", |
|||
"Color": "Color", |
|||
"ConfigurationError": "Configuration Error", |
|||
"Confirm": "Confirm", |
|||
"Contact": "Contact", |
|||
"CopiedToShearPlate": "The content has been copied to the shear plate.", |
|||
"Copy": "Copy", |
|||
"Copyright": "Copyright", |
|||
"Create": "Create", |
|||
"Current": "Current", |
|||
"CutAndExchange": "Cut/Exchange", |
|||
"DataHasBeenRefreshed": "Data has been refreshed", |
|||
"DataManager": "Data", |
|||
"Degrade": "Degrade", |
|||
"Delete": "Delete", |
|||
"DeleteBtnConfirm": "Are you sure you want to delete the button ${0} ?", |
|||
"DeleteGroupConfirm": "Are you sure you want to delete the group ${0} ?", |
|||
"DeleteIconConfirm": "Are you sure you want to delete the icon ${0} ?", |
|||
"DeleteMenuConfirm": "Are you sure you want to delete the item ${0} ?", |
|||
"DeleteTileConfirm": "Are you sure you want to delete the tile ${0} ?", |
|||
"Deleted": "Deleted", |
|||
"Description": "Description", |
|||
"DesktopIcons": "Desktop Icons", |
|||
"Disabled": "Disabled", |
|||
"DisplayAddressBar": "Display Address Bar", |
|||
"DisplayAll": "Display All", |
|||
"DisplayDesktop": "Desktop", |
|||
"DisplayMode": "Display Mode", |
|||
"DisplayWindow": "Display Window", |
|||
"Enabled": "Enabled", |
|||
"Exchange": "Exchange", |
|||
"Export": "Export", |
|||
"FormatError": "Format Error", |
|||
"FullScreen": "Full Screen", |
|||
"Group": "Group", |
|||
"Hash": "Hash", |
|||
"Height": "Height", |
|||
"HideAddressBar": "Hide Address Bar", |
|||
"HideAll": "Hide All", |
|||
"Hours": "Hours", |
|||
"IconBgColor": "Icon Bg Color", |
|||
"IconContent": "Icon Content", |
|||
"IconGroup": "IconGroup", |
|||
"IconType": "Icon Type", |
|||
"Image": "Image", |
|||
"Import": "Import", |
|||
"Initial": "Initial", |
|||
"Key": "Key", |
|||
"LateralAlignment": "Lateral Alignment", |
|||
"LateralOffset": "Lateral Offset", |
|||
"LegalCSSColor": "Legal CSS color", |
|||
"Load": "Load", |
|||
"Loaded": "Loaded", |
|||
"LoadingInitializing": "Initializing", |
|||
"LoadingPoweredBy": "This product is driven by YLUI", |
|||
"LoadingStandby": "Please stand by", |
|||
"MainMenu": "Main Menu", |
|||
"MaxNumberOfWindows": "Max Number of Windows", |
|||
"MaxWinsReached": "The number of windows is beyond the upper limit(${0}).", |
|||
"Maximize": "Maximize", |
|||
"Middle": "Middle", |
|||
"Minimize": "Minimize", |
|||
"Minutes": "Minutes", |
|||
"MobileScreen": "Mobile", |
|||
"MoveTo": "Move To", |
|||
"NewSubgroup": "New Subgroup", |
|||
"NoMoreDescription": "No more description", |
|||
"NoMoreNotice": "No More Notice", |
|||
"Normal": "Normal", |
|||
"NormalScreen": "Normal Screen", |
|||
"NoticeCenter": "Notice Center", |
|||
"NoticeClearAll": "Clear All", |
|||
"OfficialWebsite": "Official Website", |
|||
"OnlineLocation": "Online Loc.", |
|||
"Open": "Open", |
|||
"OpenIcons": "Open Icons", |
|||
"OpenMode": "Open Mode", |
|||
"OpenOuter": "Open Outer", |
|||
"Options": "Options", |
|||
"OtherStatements": "Other Statements", |
|||
"Others": "Others", |
|||
"Outer": "Outer", |
|||
"Paste": "Paste", |
|||
"Pending": "Pending", |
|||
"Personalization": "Custom", |
|||
"PickFromBgAuto": "Pick From Bg", |
|||
"PlayRandomly": "Play Randomly", |
|||
"PlaySequentially": "Play Sequentially", |
|||
"PleaseChoose": "Please Choose...", |
|||
"PluginMode": "Plugin Mode", |
|||
"Position": "Position", |
|||
"PutBackground": "Put Background", |
|||
"PutForeground": "Put Foreground", |
|||
"Recorded": "Recorded", |
|||
"Refresh": "Refresh", |
|||
"Reload": "Reload", |
|||
"RememberSizeAndPosition": "Record Size&Position", |
|||
"Rename": "Rename", |
|||
"ResetSizeAndPosition": "Reset Size&Position", |
|||
"Resizable": "Resizable", |
|||
"Restore": "Restore", |
|||
"Save": "Save", |
|||
"Saved": "Saved", |
|||
"Search": "Search", |
|||
"SecurityRisk": "Security Risk", |
|||
"SecurityRiskDetail": "Security risks are found, and risk items have been closed.<br/>Some applications try to use forged identity for data interaction, please stop all sensitive operations immediately and check the application you have installed.", |
|||
"SerialNumber": "SerialNumber", |
|||
"ShiftDown": "Shift Down", |
|||
"ShiftUp": "Shift Up", |
|||
"Sidebar": "Sidebar", |
|||
"SingleWindow": "Single Window", |
|||
"Size": "Size", |
|||
"Slide": "Slide", |
|||
"Small": "Small", |
|||
"Start": "Start", |
|||
"Superscript": "Superscript", |
|||
"SwitchingFrequency": "Switching Frequency", |
|||
"SystemOptions": "System", |
|||
"TakeEffect": "Take Effect", |
|||
"ThemeColor": "Theme Color", |
|||
"Tile": "Tile", |
|||
"Tiles": "Tiles", |
|||
"TipsOfSizeSetting": "Mathematical expression (unit: pixel;x,y represents window size)", |
|||
"Title": "Title", |
|||
"TopTaskBar": "Top Task Bar", |
|||
"UnGroup": "UnGroup", |
|||
"Uninstall": "Uninstall", |
|||
"UninstallCompleted": "Uninstall Completed", |
|||
"UninstallConfirm": "Are you sure you want to uninstall the application ${0} ?", |
|||
"UninstallFailed": "Uninstall failed.", |
|||
"Upgrade": "Upgrade", |
|||
"UrlRandomToken": "URL Token", |
|||
"Value": "Value", |
|||
"Version": "Version", |
|||
"VerticalAlignment": "Vertical Alignment", |
|||
"VerticalOffset": "Vertical Offset", |
|||
"WarningErrorTitle":"UI Exception Occured", |
|||
"WarningPerformanceInIEContent":"This product may not work completely under the IE browser. It is strongly recommended that you open with other browsers.", |
|||
"WarningPerformanceInIETitle":"IExplorer Detected", |
|||
"Wallpaper": "Wallpaper", |
|||
"Width": "Width", |
|||
"WindowPosition": "Window Position" |
|||
} |
|||
@ -1,185 +0,0 @@ |
|||
{ |
|||
"AboutUs": "关于", |
|||
"Add": "添加", |
|||
"AddAppFailed": "添加应用失败", |
|||
"AddPictureOnline": "在线添加壁纸", |
|||
"AddTo": "添加到", |
|||
"Added": "已添加", |
|||
"Advance": "高级", |
|||
"AfterAppClose": "应用关闭后", |
|||
"AfterAppOpen": "应用打开后", |
|||
"AlignBottom": "底部对齐", |
|||
"AlignLeft": "左部对齐", |
|||
"AlignRight": "右部对齐", |
|||
"AlignTop": "顶部对齐", |
|||
"AppManager": "应用管理", |
|||
"AppStore": "应用商店", |
|||
"Application": "应用", |
|||
"AppLockedCanNotChange": "锁定应用不允许被变更。", |
|||
"AttentionEnterAppName": "请输入应用名", |
|||
"AttentionNoResize": "很抱歉,不能变更尺寸", |
|||
"Author": "作者", |
|||
"Authorization": "授权", |
|||
"AutoOffset": "自动偏移", |
|||
"AutoRun": "自启", |
|||
"BackMode": "后置模式", |
|||
"BeforeUnload": "系统可能不会保存您所做的更改", |
|||
"Big": "大", |
|||
"Blur": "模糊", |
|||
"BottomTaskBar": "任务栏置底", |
|||
"CanBeEmpty": "可留空", |
|||
"Cancel": "取消", |
|||
"CentreAdjustment": "窗口置中", |
|||
"ChildMethodSetupConfirm":"该操作试图为您的桌面添加新的内容,是否继续?(请勿同意可疑来源的操作申请)", |
|||
"ChildMethodSetupSuccessMsgContent":"请求源:", |
|||
"ChildMethodSetupSuccessMsgTitle":"安装完成", |
|||
"ChildMethodUninstallConfirm":"该操作试图卸载一些应用,是否继续?(请勿同意可疑来源的操作申请)", |
|||
"ChildMethodUninstallSuccessMsgContent":"请求源:", |
|||
"ChildMethodUninstallSuccessMsgTitle":"卸载完成", |
|||
"ClearSuperscript": "清除角标", |
|||
"ClickToChange": "点击变更", |
|||
"Close": "关闭", |
|||
"CloseAll": "关闭全部窗口", |
|||
"CollectAsApplication": "收藏到应用", |
|||
"Color": "颜色", |
|||
"ConfigurationError": "配置有误", |
|||
"Confirm": "确认", |
|||
"Contact": "联系方式", |
|||
"CopiedToShearPlate": "内容已经拷贝到剪切板", |
|||
"Copy": "复制", |
|||
"Copyright": "版权", |
|||
"Create": "新建", |
|||
"Current": "当前", |
|||
"CutAndExchange": "剪切/交换", |
|||
"DataHasBeenRefreshed": "数据已刷新", |
|||
"DataManager": "数据管理", |
|||
"Degrade": "降级", |
|||
"Delete": "删除", |
|||
"DeleteBtnConfirm": "您确定要删除侧边栏按钮 ${0} 吗？", |
|||
"DeleteGroupConfirm": "您确定要删除分组 ${0} 吗？", |
|||
"DeleteIconConfirm": "您确定要删除图标 ${0} 吗？", |
|||
"DeleteMenuConfirm": "您确定要删除菜单项 ${0} 吗？", |
|||
"DeleteTileConfirm": "您确定要删除磁贴 ${0} 吗？", |
|||
"Deleted": "已删除", |
|||
"Description": "描述", |
|||
"DesktopIcons": "桌面图标", |
|||
"Disabled": "禁用", |
|||
"DisplayAddressBar": "显示地址栏", |
|||
"DisplayAll": "显示全部窗口", |
|||
"DisplayDesktop": "显示桌面", |
|||
"DisplayMode": "显示模式", |
|||
"DisplayWindow": "显示窗口", |
|||
"Enabled": "启用", |
|||
"Exchange": "交换", |
|||
"Export": "导出", |
|||
"FullScreen": "启用全屏", |
|||
"FormatError": "格式有误", |
|||
"Group": "分组", |
|||
"Hash": "锚点", |
|||
"Height": "高度", |
|||
"HideAddressBar": "隐藏地址栏", |
|||
"HideAll": "隐藏全部窗口", |
|||
"Hours": "小时", |
|||
"IconBgColor": "图标背景", |
|||
"IconContent": "图标内容", |
|||
"IconGroup": "图标组", |
|||
"IconType": "图标类型", |
|||
"Image": "图片", |
|||
"Import": "导入", |
|||
"Initial": "首字母", |
|||
"Key": "键名", |
|||
"LateralAlignment": "水平对齐", |
|||
"LateralOffset": "水平偏移", |
|||
"LegalCSSColor": "合法CSS颜色", |
|||
"Load": "读取", |
|||
"Loaded": "已读取", |
|||
"LoadingInitializing": "正在启动", |
|||
"LoadingPoweredBy": "本产品由YLUI强力驱动", |
|||
"LoadingStandby": "请稍候", |
|||
"MainMenu": "主菜单", |
|||
"MaxNumberOfWindows": "最大窗口数", |
|||
"MaxWinsReached": "窗口数量超出上限(${0}个)", |
|||
"Maximize": "最大化", |
|||
"Middle": "中", |
|||
"Minimize": "最小化", |
|||
"Minutes": "分钟", |
|||
"MobileScreen": "手机屏幕", |
|||
"MoveTo": "移动至", |
|||
"NewSubgroup": "建立子分组", |
|||
"NoMoreDescription": "暂无描述", |
|||
"NoMoreNotice": "暂无通知", |
|||
"Normal": "普通", |
|||
"NormalScreen": "禁用全屏", |
|||
"NoticeCenter": "通知中心", |
|||
"NoticeClearAll": "全部清除", |
|||
"OfficialWebsite": "个人主页", |
|||
"OnlineLocation": "网络位置", |
|||
"Open": "打开", |
|||
"OpenIcons": "打开图标", |
|||
"OpenMode": "打开模式", |
|||
"OpenOuter": "外部打开", |
|||
"Options": "配置", |
|||
"OtherStatements": "其它声明", |
|||
"Others": "其它", |
|||
"Outer": "外部", |
|||
"Paste": "粘贴", |
|||
"Pending": "待定", |
|||
"Personalization": "个性化", |
|||
"PickFromBgAuto": "从壁纸获取", |
|||
"PlayRandomly": "随机播放", |
|||
"PlaySequentially": "顺序顺序", |
|||
"PleaseChoose": "请选择...", |
|||
"PluginMode": "插件模式", |
|||
"Position": "位置", |
|||
"PutBackground": "置于背景", |
|||
"PutForeground": "置于前景", |
|||
"Recorded": "已记录", |
|||
"Refresh": "刷新", |
|||
"Reload": "重载", |
|||
"RememberSizeAndPosition": "记住位置尺寸", |
|||
"Rename": "重命名", |
|||
"ResetSizeAndPosition": "清除位置尺寸", |
|||
"Resizable": "可变尺寸", |
|||
"Restore": "还原", |
|||
"Save": "保存", |
|||
"Saved": "已保存", |
|||
"Search": "搜索", |
|||
"SecurityRisk": "安全风险", |
|||
"SecurityRiskDetail": "发现安全风险，并已关闭风险项。<br/>某些应用试图使用伪造身份进行数据交互,请立即停止一切敏感操作，并检查您所安装的应用。", |
|||
"SerialNumber": "序列号", |
|||
"ShiftDown": "下移", |
|||
"ShiftUp": "上移", |
|||
"Sidebar": "侧边栏", |
|||
"SingleWindow": "唯一窗口", |
|||
"Size": "尺寸", |
|||
"Slide": "幻灯片", |
|||
"Small": "小", |
|||
"Start": "开始", |
|||
"Superscript": "角标", |
|||
"SwitchingFrequency": "切换频率", |
|||
"SystemOptions": "系统设置", |
|||
"TakeEffect": "生效", |
|||
"ThemeColor": "主题色", |
|||
"Tile": "磁贴", |
|||
"Tiles": "磁贴", |
|||
"TipsOfSizeSetting": "数学表达式(单位:像素; x,y分别代表窗口宽高)", |
|||
"Title": "标题", |
|||
"TopTaskBar": "任务栏置顶", |
|||
"UnGroup": "解散", |
|||
"Uninstall": "卸载", |
|||
"UninstallCompleted": "卸载完成", |
|||
"UninstallConfirm": "您确定要卸载应用 ${0} 吗？", |
|||
"UninstallFailed": "卸载失败。", |
|||
"Upgrade": "升级", |
|||
"UrlRandomToken": "URL随机TOKEN", |
|||
"Value": "键值", |
|||
"Version": "版本", |
|||
"VerticalAlignment": "垂直对齐", |
|||
"VerticalOffset": "垂直偏移", |
|||
"WarningErrorTitle":"UI发生异常", |
|||
"WarningPerformanceInIEContent":"本产品在IE浏览器下可能无法完全正常工作。强烈建议您使用其他浏览器打开。", |
|||
"WarningPerformanceInIETitle":"检测到IE浏览器", |
|||
"Wallpaper": "壁纸", |
|||
"Width": "宽度", |
|||
"WindowPosition": "窗口位置" |
|||
} |
|||
@ -1,185 +0,0 @@ |
|||
{ |
|||
"AboutUs": "關於", |
|||
"Add": "添加", |
|||
"AddAppFailed": "添加應用失敗", |
|||
"AddPictureOnline": "在線添加壁紙", |
|||
"AddTo": "添加到", |
|||
"Added": "已添加", |
|||
"Advance": "高級", |
|||
"AfterAppClose": "應用關閉後", |
|||
"AfterAppOpen": "應用打開後", |
|||
"AlignBottom": "底部對齊", |
|||
"AlignLeft": "左部對齊", |
|||
"AlignRight": "右部對齊", |
|||
"AlignTop": "頂部對齊", |
|||
"AppManager": "應用管理", |
|||
"AppStore": "應用商店", |
|||
"Application": "應用", |
|||
"AppLockedCanNotChange": "鎖定應用不允許被變更。", |
|||
"AttentionEnterAppName": "請輸入應用名", |
|||
"AttentionNoResize": "很抱歉,不能變更尺寸", |
|||
"Author": "作者", |
|||
"Authorization": "授權", |
|||
"AutoOffset": "自動偏移", |
|||
"AutoRun": "自啟", |
|||
"BackMode": "後置模式", |
|||
"BeforeUnload": "系統可能不會保存您所做的更改", |
|||
"Big": "大", |
|||
"Blur": "模糊", |
|||
"BottomTaskBar": "任務欄置底", |
|||
"CanBeEmpty": "可留空", |
|||
"Cancel": "取消", |
|||
"CentreAdjustment": "窗口置中", |
|||
"ChildMethodSetupConfirm":"該操作試圖為您的桌面添加新的內容,是否繼續?(請勿同意可疑來源的操作申請)", |
|||
"ChildMethodSetupSuccessMsgContent":"請求源:", |
|||
"ChildMethodSetupSuccessMsgTitle":"安裝完成", |
|||
"ChildMethodUninstallConfirm":"該操作試圖卸載壹些應用,是否繼續?(請勿同意可疑來源的操作申請)", |
|||
"ChildMethodUninstallSuccessMsgContent":"請求源:", |
|||
"ChildMethodUninstallSuccessMsgTitle":"卸載完成", |
|||
"ClearSuperscript": "清除角標", |
|||
"ClickToChange": "點擊變更", |
|||
"Close": "關閉", |
|||
"CloseAll": "關閉全部窗口", |
|||
"CollectAsApplication": "收藏到應用", |
|||
"Color": "顏色", |
|||
"ConfigurationError": "配置有誤", |
|||
"Confirm": "確認", |
|||
"Contact": "聯系方式", |
|||
"CopiedToShearPlate": "內容已經拷貝到剪切板", |
|||
"Copy": "復制", |
|||
"Copyright": "版權", |
|||
"Create": "新建", |
|||
"Current": "當前", |
|||
"CutAndExchange": "剪切/交換", |
|||
"DataHasBeenRefreshed": "數據已刷新", |
|||
"DataManager": "數據管理", |
|||
"Degrade": "降級", |
|||
"Delete": "刪除", |
|||
"DeleteBtnConfirm": "您確定要刪除側邊欄按鈕 ${0} 嗎？", |
|||
"DeleteGroupConfirm": "您確定要刪除分組 ${0} 嗎？", |
|||
"DeleteIconConfirm": "您確定要刪除圖標 ${0} 嗎？", |
|||
"DeleteMenuConfirm": "您確定要刪除菜單項 ${0} 嗎？", |
|||
"DeleteTileConfirm": "您確定要刪除磁貼 ${0} 嗎？", |
|||
"Deleted": "已刪除", |
|||
"Description": "描述", |
|||
"DesktopIcons": "桌面圖標", |
|||
"Disabled": "禁用", |
|||
"DisplayAddressBar": "顯示地址欄", |
|||
"DisplayAll": "顯示全部窗口", |
|||
"DisplayDesktop": "顯示桌面", |
|||
"DisplayMode": "顯示模式", |
|||
"DisplayWindow": "顯示窗口", |
|||
"Enabled": "啟用", |
|||
"Exchange": "交換", |
|||
"Export": "導出", |
|||
"FullScreen": "啟用全屏", |
|||
"FormatError": "格式有誤", |
|||
"Group": "分組", |
|||
"Hash": "錨點", |
|||
"Height": "高度", |
|||
"HideAddressBar": "隱藏地址欄", |
|||
"HideAll": "隱藏全部窗口", |
|||
"Hours": "小時", |
|||
"IconBgColor": "圖標背景", |
|||
"IconContent": "圖標內容", |
|||
"IconGroup": "圖標組", |
|||
"IconType": "圖標類型", |
|||
"Image": "圖片", |
|||
"Import": "導入", |
|||
"Initial": "首字母", |
|||
"Key": "鍵名", |
|||
"LateralAlignment": "水平對齊", |
|||
"LateralOffset": "水平偏移", |
|||
"LegalCSSColor": "合法CSS顏色", |
|||
"Load": "讀取", |
|||
"Loaded": "已讀取", |
|||
"LoadingInitializing": "正在啟動", |
|||
"LoadingPoweredBy": "本產品由YLUI強力驅動", |
|||
"LoadingStandby": "請稍候", |
|||
"MainMenu": "主菜單", |
|||
"MaxNumberOfWindows": "最大窗口數", |
|||
"MaxWinsReached": "窗口數量超出上限(${0}個)", |
|||
"Maximize": "最大化", |
|||
"Middle": "中", |
|||
"Minimize": "最小化", |
|||
"Minutes": "分鐘", |
|||
"MobileScreen": "手機屏幕", |
|||
"MoveTo": "移動至", |
|||
"NewSubgroup": "建立子分組", |
|||
"NoMoreDescription": "暫無描述", |
|||
"NoMoreNotice": "暫無通知", |
|||
"Normal": "普通", |
|||
"NormalScreen": "禁用全屏", |
|||
"NoticeCenter": "通知中心", |
|||
"NoticeClearAll": "全部清除", |
|||
"OfficialWebsite": "个人主页", |
|||
"OnlineLocation": "網絡位置", |
|||
"Open": "打開", |
|||
"OpenIcons": "打開圖標", |
|||
"OpenMode": "打開模式", |
|||
"OpenOuter": "外部打開", |
|||
"Options": "配置", |
|||
"OtherStatements": "其它聲明", |
|||
"Others": "其它", |
|||
"Outer": "外部", |
|||
"Paste": "粘貼", |
|||
"Pending": "待定", |
|||
"Personalization": "個性化", |
|||
"PickFromBgAuto": "從壁紙獲取", |
|||
"PlayRandomly": "隨機播放", |
|||
"PlaySequentially": "順序順序", |
|||
"PleaseChoose": "請選擇...", |
|||
"PluginMode": "插件模式", |
|||
"Position": "位置", |
|||
"PutBackground": "置於背景", |
|||
"PutForeground": "置於前景", |
|||
"Recorded": "已記錄", |
|||
"Refresh": "刷新", |
|||
"Reload": "重載", |
|||
"RememberSizeAndPosition": "記住位置尺寸", |
|||
"Rename": "重命名", |
|||
"ResetSizeAndPosition": "清除位置尺寸", |
|||
"Resizable": "可變尺寸", |
|||
"Restore": "還原", |
|||
"Save": "保存", |
|||
"Saved": "已保存", |
|||
"Search": "搜索", |
|||
"SecurityRisk": "安全風險", |
|||
"SecurityRiskDetail": "發現安全風險，並已關閉風險項。<br/>某些應用試圖使用偽造身份進行數據交互,請立即停止壹切敏感操作，並檢查您所安裝的應用。", |
|||
"SerialNumber": "序列號", |
|||
"ShiftDown": "下移", |
|||
"ShiftUp": "上移", |
|||
"Sidebar": "側邊欄", |
|||
"SingleWindow": "唯壹窗口", |
|||
"Size": "尺寸", |
|||
"Slide": "幻燈片", |
|||
"Small": "小", |
|||
"Start": "開始", |
|||
"Superscript": "角標", |
|||
"SwitchingFrequency": "切換頻率", |
|||
"SystemOptions": "系統設置", |
|||
"TakeEffect": "生效", |
|||
"ThemeColor": "主題色", |
|||
"Tile": "磁貼", |
|||
"Tiles": "磁貼", |
|||
"TipsOfSizeSetting": "數學表達式(單位:像素; x,y分別代表窗口寬高)", |
|||
"Title": "標題", |
|||
"TopTaskBar": "任務欄置頂", |
|||
"UnGroup": "解散", |
|||
"Uninstall": "卸載", |
|||
"UninstallCompleted": "卸載完成", |
|||
"UninstallConfirm": "您確定要卸載應用 ${0} 嗎？", |
|||
"UninstallFailed": "卸載失敗。", |
|||
"Upgrade": "升級", |
|||
"UrlRandomToken": "URL隨機TOKEN", |
|||
"Value": "鍵值", |
|||
"Version": "版本", |
|||
"VerticalAlignment": "垂直對齊", |
|||
"VerticalOffset": "垂直偏移", |
|||
"WarningErrorTitle":"UI發生異常", |
|||
"WarningPerformanceInIEContent":"本產品在IE瀏覽器下可能無法完全正常工作。強烈建議您使用其他瀏覽器打開。", |
|||
"WarningPerformanceInIETitle":"檢測到IE瀏覽器", |
|||
"Wallpaper": "壁紙", |
|||
"Width": "寬度", |
|||
"WindowPosition": "窗口位置" |
|||
} |
|||
@ -1,30 +0,0 @@ |
|||
/** |
|||
* 读取配置示例文件 |
|||
* 修改此文件来实现持久化 |
|||
* YL.init(data) 中的data必须是ylui接受的数据格式 |
|||
* 开发者可以自行决定从静态文件读取（如basic.json）还是从远程服务器拉取（如ajax请求） |
|||
*/ |
|||
|
|||
YL.onLoad(function () { |
|||
// 读取url中load参数，如localhost/ylui/index.html?load=basic
|
|||
var load = Yuri2.parseURL().params.load; |
|||
var file; |
|||
// 当load === 'ylui-storage'时，尝试加载浏览器缓存
|
|||
if (load === YL.static.localStorageName && localStorage.getItem(YL.static.localStorageName)) { |
|||
YL.init(); |
|||
return; |
|||
} else if (load === YL.static.localStorageName) { |
|||
file = 'basic'; |
|||
} |
|||
// 从json文件读取
|
|||
file = file || load || 'basic'; |
|||
var save = /^\w+$/.test(file) ? './saves/' + file + '.json' : file; |
|||
Yuri2.loadContentFromUrl(save, 'GET', function (err, text) { |
|||
if (!err) { |
|||
var data = JSON.parse(text); |
|||
YL.init(data); |
|||
} else { |
|||
alert('YLUI读取配置错误，初始化失败'); |
|||
} |
|||
}); |
|||
}); |
|||
@ -1,38 +0,0 @@ |
|||
{ |
|||
"name": "ylui", |
|||
"main": "index.html", |
|||
"description": "高度可扩展桌面UI", |
|||
"version": "2.1.9", |
|||
"repository": { |
|||
"type": "git", |
|||
"url": "https://github.com/yuri2peter/ylui" |
|||
}, |
|||
"scripts": { |
|||
"start": "serve -s ." |
|||
}, |
|||
"window": { |
|||
"title": "YLUI", |
|||
"icon": "link.png", |
|||
"toolbar": false, |
|||
"resizable": true, |
|||
"fullscreen": true, |
|||
"show_in_taskbar": true, |
|||
"frame": true, |
|||
"position": "center", |
|||
"width": 1366, |
|||
"height": 768, |
|||
"min_width": 400, |
|||
"min_height": 335, |
|||
"show": true, |
|||
"kiosk": false |
|||
}, |
|||
"webkit": { |
|||
"plugin": true, |
|||
"java": false, |
|||
"page-cache": false |
|||
}, |
|||
"devDependencies": {}, |
|||
"dependencies": { |
|||
"serve": "^11.1.0" |
|||
} |
|||
} |
|||
@ -1,32 +0,0 @@ |
|||
{ |
|||
"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" |
|||
} |
|||
] |
|||
} |
|||
|
Before Width: | Height: | Size: 12 KiB |
@ -1,56 +0,0 @@ |
|||
<!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> |
|||
|
Before Width: | Height: | Size: 82 KiB |
@ -1,99 +0,0 @@ |
|||
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; |
|||
}, |
|||
} |
|||
}) |
|||
|
|||
@ -1,95 +0,0 @@ |
|||
|
|||
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; |
|||
} |
|||
@ -1,79 +0,0 @@ |
|||
<!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> |
|||
@ -1,100 +0,0 @@ |
|||
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); |
|||
} |
|||
@ -1,134 +0,0 @@ |
|||
<!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> |
|||
@ -1,43 +0,0 @@ |
|||
<!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
@ -1 +0,0 @@ |
|||
2.0.8 |
|||
@ -1,20 +0,0 @@ |
|||
<!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> |
|||
@ -1,23 +0,0 @@ |
|||
<!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> |
|||
|
Before Width: | Height: | Size: 12 KiB |
@ -1,444 +0,0 @@ |
|||
<!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> |
|||
@ -1,457 +0,0 @@ |
|||
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); |
|||
}, |
|||
}, |
|||
}); |
|||
|
|||
}); |
|||
@ -1,300 +0,0 @@ |
|||
.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; |
|||
} |
|||
|
Before Width: | Height: | Size: 66 KiB |
File diff suppressed because it is too large
@ -1,415 +0,0 @@ |
|||
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(); |
|||
} |
|||
}); |
|||
@ -1,161 +0,0 @@ |
|||
#_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
@ -1,423 +0,0 @@ |
|||
/* |
|||
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; |
|||
} |
|||
@ -1,561 +0,0 @@ |
|||
/* |
|||
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); |
|||
@ -1,97 +0,0 @@ |
|||
# 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 修复了二级菜单溢出屏幕的问题，更好的兼容性 |
|||
@ -1,92 +0,0 @@ |
|||
|
|||
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;} |
|||
@ -1,96 +0,0 @@ |
|||
/** |
|||
* 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
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
|
Before 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
File diff suppressed because one or more lines are too long
@ -1,2 +0,0 @@ |
|||
/*! 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
|
Before Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 11 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 5.7 KiB |
|
Before Width: | Height: | Size: 701 B |
|
Before Width: | Height: | Size: 1.7 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -1,120 +0,0 @@ |
|||
#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
@ -1,117 +0,0 @@ |
|||
#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; |
|||
} |
|||
@ -1,25 +0,0 @@ |
|||
.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; |
|||
} |
|||
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 657 B |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 236 B |
|
Before Width: | Height: | Size: 570 B |
|
Before Width: | Height: | Size: 207 B |
|
Before Width: | Height: | Size: 521 B |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 67 KiB |
|
Before Width: | Height: | Size: 105 KiB |
|
Before Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 299 KiB |
|
Before Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 145 KiB |
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 236 KiB |
|
Before Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 150 KiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 159 KiB |
|
Before Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 99 KiB |
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue