commit
41f187e460
349 changed files with 60741 additions and 0 deletions
@ -0,0 +1,7 @@ |
|||
version: 2 |
|||
updates: |
|||
- package-ecosystem: npm |
|||
directory: "/" |
|||
schedule: |
|||
interval: daily |
|||
open-pull-requests-limit: 20 |
|||
@ -0,0 +1,7 @@ |
|||
.DS_Store |
|||
Thumbs.db |
|||
db.json |
|||
*.log |
|||
node_modules/ |
|||
public/ |
|||
.deploy*/ |
|||
@ -0,0 +1,561 @@ |
|||
## Hexo-Blog-Lucky |
|||
### demo: www.luckyzmj.cn |
|||
|
|||
======= |
|||
|
|||
### 前言 |
|||
|
|||
之前在[B站](https://www.bilibili.com/)上发布了个人博客的视频，播放量也破千了，有网友私聊也想要搭建一个这样的博客。经过一段时间的准备，现将本人博客的源代码公布出来，大家只需要根据以下的步骤，即可快速搭建一个漂亮完善的博客。 |
|||
|
|||
 |
|||
|
|||
### 0x01 LuckyBlog 介绍 |
|||
|
|||
上一个LuckyBlog版本发布于2020年的9月份，是在 [洪卫の博客](https://sunhwee.com/) 基础上进行修改的。自从发布以来有很多网友都私信搭建了博客，同时也发现了旧版本中存在的一些问题需要解决，例如：搜索框不适配XML代码搜索，部分图片失效，代码块问题以及各种小问题。现在将最新的LuckyBlog版本代码发布出来，修复改进了不少的BUG，使其更加稳定运行。同时完善了博客的基础功能，例如：音乐、视频、相册、百宝箱等页面。同时增加了不少的新功能，例如：适配Hexo5.x、黑白天浏览模式、仿Windows页面，站点统计等。 |
|||
|
|||
- 博客演示地址：http://luckyzmj.cn/ |
|||
- 开源项目地址：https://github.com/LuckyZmj/LuckyBlog |
|||
|
|||
**主题特性** |
|||
|
|||
- [x] 简单漂亮，文章内容美观易读 |
|||
- [x] [Material Design](https://material.io/) 设计 |
|||
- [x] 响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现 |
|||
- [x] 首页轮播文章及每天动态切换 `Banner` 图片 |
|||
- [x] 瀑布流式的博客文章列表（文章无特色图片时会有 `24` 张漂亮的图片代替） |
|||
- [x] 时间轴式的归档页 |
|||
- [x] `词云`的标签页和`雷达图`的分类页 |
|||
- [x] 丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能、相册等） |
|||
- [x] 可自定义的数据的友情链接页面 |
|||
- [x] 支持文章置顶和文章打赏 |
|||
- [x] 支持 `MathJax` |
|||
- [x] `TOC` 目录，优化了目录显示效果 |
|||
- [x] 可设置复制文章内容时追加版权信息 |
|||
- [x] 可设置阅读文章时做密码验证 |
|||
- [x] [Gitalk](https://gitalk.github.io/)、[Gitment](https://imsun.github.io/gitment/)、[Valine](https://valine.js.org/) 和 [Disqus](https://disqus.com/) 评论模块（推荐使用 `Valine`） |
|||
- [x] 集成了[不蒜子统计](http://busuanzi.ibruce.info/)、谷歌分析（`Google Analytics`）和文章字数统计等功能 |
|||
- [x] 支持在首页的音乐播放和视频播放功能 |
|||
- [x] 修改了原主题以及基础主题中的一些`BUG` |
|||
- [x] 加入图片懒加载功能，在根目录配置文件开启和关闭 |
|||
- [x] 增加`留言板`功能 |
|||
- [x] 在关于板块,加入`简历`功能页 |
|||
- [x] 增加完善`音乐`、`相册`、`视频`等功能页面 |
|||
- [x] 支持`emoji`表情，用`markdown emoji`语法书写直接生成对应的能**跳跃**的表情 |
|||
- [x] 增加网站运行时间显示 |
|||
- [x] 增加`live2d` 动漫人物模型 |
|||
- [x] 整体替换Banner图片和文章特色图片 |
|||
- [x] 增加实用的快捷导航栏功能 |
|||
- [x] 修改了一些控件的参数以及部分样式 |
|||
- [x] 优化了代码显示块的效果 |
|||
- [x] 增加页面樱花飘落动效 |
|||
- [x] 增加鼠标点击烟花爆炸动效 |
|||
- [x] 增加页面雪花飘落动效 |
|||
- [x] 增加博客白云背景效果 |
|||
- [x] 增加天气接口控件 |
|||
- [x] 加入鼠标点击文字特效 |
|||
- [x] 增加`DaoVoice`在线聊天插件 |
|||
- [x] 增加博客代码、图片压缩功能 |
|||
- [x] 增加黑白天浏览模式功能 |
|||
- [x] 增加仿`Windows`功能 |
|||
- [x] 增加站点统计功能 |
|||
- [x] 增加留言版一言功能 |
|||
- [x] 其他 |
|||
|
|||
### 0x02 LuckyBlog 安装 |
|||
|
|||
#### 1. 安装Git |
|||
`Git`是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。`Git`的作用是将本地的网页文件传到`github`上。 |
|||
|
|||
- Git[下载地址](https://git-scm.com/download) |
|||
- Git[教程](https://www.liaoxuefeng.com/wiki/896043488029600) |
|||
|
|||
**windows：** 到git官网上下载.exe文件,Download git,安装选项全部默认即可。 |
|||
|
|||
#### 2. 安装node.js |
|||
`Hexo`是基于`node.js`编写的，所以需要安装一下`node.js`和里面的`npm`工具。 |
|||
|
|||
**windows：** 到[Node.js官网](http://nodejs.cn/download/)下载`.exe`文件，安装选项全部默认。安装好之后，按`Win+R`打开cmd命令提示符，输入`node -v`和`npm -v`，若出现版本号，则说明安装成功。 |
|||
|
|||
#### 3. 添加npm国内源 |
|||
|
|||
使用阿里的国内镜像进行加速下载 |
|||
|
|||
```bash |
|||
npm config set registry https://registry.npm.taobao.org |
|||
``` |
|||
|
|||
#### 4. 安装Hexo |
|||
|
|||
前面`git`和`nodejs`安装好后，就可以安装`hexo`了，你可以先创建一个文件夹`MyBlog`，用来存放自己的博客文件，然后`cd`到这个文件夹下（或者在这个文件夹下直接鼠标右键`git bash`打开）。 |
|||
|
|||
比如我的博客文件都存放在`C:\MyBlog`目录下。 |
|||
|
|||
在该目录下右键点击`Git Bash Here`，打开`git`的控制台窗口，以后我们所有的操作都在`git`控制台进行，就不用`Windows`自带的`cmd`了。 |
|||
|
|||
定位到该目录下，输入`npm install -g hexo-cli`安装`Hexo`。可能会有几个报错，不用理会。 |
|||
|
|||
```bash |
|||
npm install -g hexo-cli |
|||
``` |
|||
|
|||
安装完后输入`hexo -v`验证是否安装成功。 |
|||
|
|||
接下来初始化一下`hexo`,即初始化我们的博客网站。例如我的在`C:\MyBlog`文件夹下的命令行中，输入`hexo init`初始化文件夹 |
|||
|
|||
```bash |
|||
hexo init |
|||
``` |
|||
|
|||
新建完成后，指定文件夹`MyBlog`目录下有： |
|||
|
|||
- `node_modules`: 依赖包 |
|||
- `public`：存放生成的页面 |
|||
- `scaffolds`：生成文章的一些模板 |
|||
- `source`：用来存放你的文章 |
|||
- `themes`：主题** |
|||
- `_config.yml`: 博客的配置文件** |
|||
|
|||
到此为止，本地的Hexo基础环境搭建完成了。 |
|||
|
|||
#### 5. 安装LuckyBlog |
|||
|
|||
下载源代码到本地文件下 |
|||
|
|||
```bash |
|||
git clone https://github.com/LuckyZmj/LuckyBlog.git |
|||
``` |
|||
|
|||
将下载好的`LuckyBlog`全部复制到`MyBlog`目录下，如果复制过程中出现重复文件，点击替换。 |
|||
|
|||
 |
|||
|
|||
|
|||
最后使用 `npm i` 或者 `npm install` 安装依赖环境包即可。 |
|||
|
|||
>如果安装依赖环境出错，可以参考[这篇文章](https://blog.csdn.net/Seven71111/article/details/103364738)。 |
|||
|
|||
最后执行 `hexo clean` 和 `hexo s -g` 启动Hexo本地预览，即可看到效果。 |
|||
|
|||
 |
|||
|
|||
到此为止LuckyBlog安装完成，接下来就是个性化设置了。 |
|||
|
|||
### 0x03 LuckyBlog 个性化 |
|||
|
|||
>注意！注意！注意！在阅读以下博客个性化之前，最好希望大家有Hexo博客配置主题的基础。如果是完全小白，建议去网上搜索学习相关Hexo搭建博客的过程，另外去B站上也有很多视频教程。博客个性化是需要大家有耐心的，因为每个人的操作不同，在配置过程中可能会遇到一些不可预期的问题，希望大家可以克服这些困难，如有需要帮助，也可以私信博主帮助大家解决问题。 |
|||
|
|||
#### 1. 修改部署平台 |
|||
|
|||
编辑根目录下的配置文件`MyBlog/_config.yml`，找到如下内容并修改 |
|||
|
|||
```bash |
|||
deploy: |
|||
- type: git |
|||
repo: git@github.com:LuckyZmj/LuckyZmj.github.io.git # 替换为你的部署平台地址 |
|||
branch: master |
|||
``` |
|||
|
|||
#### 2. 修改网站信息 |
|||
|
|||
编辑根目录下的配置文件`MyBlog/_config.yml`，找到如下内容并修改 |
|||
|
|||
```bash |
|||
# Site |
|||
title: Luckey |
|||
subtitle: 'Luckeyの博客' |
|||
description: '本科 | 计算机科学与技术 | 网络安全' |
|||
keywords: 'luckyzmj 计算机 网络安全 渗透测试' # 博客网站关键词 |
|||
author: Luckey # 博主名称 |
|||
language: zh-CN |
|||
timezone: '' |
|||
|
|||
# URL |
|||
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/' |
|||
url: http://www.luckyzmj.cn # 更改为你的博客地址 |
|||
root: / |
|||
# permalink: :year/:month/:day/:title/ |
|||
permalink: posts/:abbrlink.html # p 是自定义的前缀 |
|||
abbrlink: |
|||
alg: crc32 #算法： crc16(default) and crc32 |
|||
rep: hex #进制： dec(default) and hex |
|||
permalink_defaults: |
|||
pretty_urls: |
|||
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks |
|||
trailing_html: true # Set to false to remove trailing '.html' from permalinks |
|||
``` |
|||
|
|||
#### 3. 修改博客头像 |
|||
|
|||
编辑主题目录下的配置文件`MyBlog/themes/matery/_config.yml`，找到如下内容并修改 |
|||
|
|||
```bash |
|||
# Configure website favicon and LOGO |
|||
# 将以下改为自己的头像链接即可 |
|||
favicon: https://s1.ax1x.com/2020/05/17/YR20js.jpg |
|||
logo: https://s1.ax1x.com/2020/05/17/YRWsYT.png |
|||
``` |
|||
|
|||
|
|||
#### 4. 修改留言板简介 |
|||
|
|||
演示效果如下： |
|||
|
|||
 |
|||
|
|||
编辑 `/MyBlog/contact/index.md`，修改你想要内容即可 |
|||
|
|||
```bash |
|||
--- |
|||
title: contact |
|||
date: 2019-10-25 00:00:00 |
|||
type: "contact" |
|||
layout: "contact" |
|||
--- |
|||
|
|||
## 畅所欲言 |
|||
--- |
|||
在这里可以留下你的足迹，欢迎在下方留言，欢迎交换友链，一起交流学习！ |
|||
|
|||
## 友链 |
|||
--- |
|||
Lucky_Meの友链信息 |
|||
|
|||
博客名称: Lucky_Meの博客 |
|||
|
|||
博客网址: http://luckyzmj.cn |
|||
|
|||
博客头像: https://s1.ax1x.com/2020/05/17/YRWsYT.png |
|||
|
|||
博客介绍: 越努力，越幸运！ |
|||
``` |
|||
|
|||
#### 5. 修改音乐列表 |
|||
|
|||
想要修改自己喜欢的音乐之前，需要先获取音乐列表的id。 |
|||
|
|||
以QQ音乐为例：先登录[QQ音乐网页版](https://y.qq.com/)，点击打开自己喜欢的音乐列表，在网页的URL处包含了音乐列表的id，如下图所示 |
|||
|
|||
 |
|||
|
|||
编辑主题目录下的配置文件`MyBlog/themes/matery/_config.yml`，找到如下内容并修改 |
|||
|
|||
```bash |
|||
# 默认是博主的QQ音乐的id，大家可以改为自己音乐喜欢列表的id |
|||
# 更新完id，就可以同步加载自己喜欢的列表音乐了 |
|||
|
|||
# Whether to display the musics. |
|||
# 是否在首页显示音乐. |
|||
music: |
|||
enable: true |
|||
title: #非吸底模式有效 |
|||
enable: true |
|||
show: 听听音乐 |
|||
autoHide: true # hide automaticaly |
|||
server: tencent #require music platform: netease, tencent, kugou, xiami, baidu |
|||
type: playlist #require song, playlist, album, search, artist |
|||
id: 1776127550 #require song id / playlist id / album id / search keyword |
|||
fixed: true # 开启吸底模式 |
|||
autoplay: false # 是否自动播放 |
|||
theme: '#42b983' |
|||
loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none' |
|||
order: 'random' # 音频循环顺序, 可选值: 'list', 'random' |
|||
preload: 'auto' # 预加载，可选值: 'none', 'metadata', 'auto' |
|||
volume: 0.7 # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效 |
|||
listFolded: true # 列表默认折叠 |
|||
hideLrc: true # 隐藏歌词 |
|||
|
|||
# Whether to display the musics. |
|||
# 单独的音乐页面. |
|||
musics: |
|||
enable: true |
|||
title: #非吸底模式有效 |
|||
enable: true |
|||
show: 听听音乐 |
|||
server: tencent #require music platform: netease, tencent, kugou, xiami, baidu |
|||
type: playlist #require song, playlist, album, search, artist |
|||
id: 1776127550 #require song id / playlist id / album id / search keyword |
|||
fixed: false # 开启吸底模式 |
|||
autoplay: true # 是否自动播放 |
|||
theme: '#42b983' |
|||
loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none' |
|||
order: 'random' # 音频循环顺序, 可选值: 'list', 'random' |
|||
preload: 'auto' # 预加载，可选值: 'none', 'metadata', 'auto' |
|||
volume: 0.7 # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效 |
|||
listFolded: false # 列表默认折叠 |
|||
listMaxHeight: "525px" #列表最大高度 |
|||
``` |
|||
|
|||
#### 6. 绑定 Valine 评论 |
|||
|
|||
编辑主题目录下的配置文件`MyBlog/themes/matery/_config.yml`，找到如下内容并修改 |
|||
|
|||
```bash |
|||
# Valine 评论模块的配置，默认为不激活，如要使用，就请激活该配置项，并设置 appId 和 appKey. |
|||
valine: |
|||
enable: true |
|||
appId: Ucrxxxxxxxxxxxxxxxx-xxxxsz # 自行注册valine获取 |
|||
appKey: zPsLxxxxxxxxxxxxxxerLmd # 自行注册valine获取 |
|||
notify: true |
|||
verify: true |
|||
visitor: true |
|||
avatar: 'monsterid' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide |
|||
pageSize: 10 |
|||
placeholder: '留下你的足迹..' # Comment Box placeholder |
|||
background: /medias/comment_bg.png |
|||
count: true |
|||
enableQQ: 16463223 # 改为自己的QQ号 |
|||
recordIP: true |
|||
requiredFields: |
|||
- nick |
|||
- mail |
|||
guest_info: |
|||
- nick |
|||
- mail |
|||
- link |
|||
master: |
|||
- 46606772953bed0812789d6dc955614e # md5加密后的博主邮箱 |
|||
metaPlaceholder: # 输入框的背景文字 |
|||
nick: 昵称/QQ号(必填) |
|||
mail: 邮箱(必填) |
|||
link: 网址(https://) |
|||
lang: zh-CN |
|||
tagMeta: # The String Array of Words to show Flag.[Just Only xCss Style mode] |
|||
- 博主 |
|||
- 小伙伴 |
|||
- 访客 |
|||
friends: # The MD5 String Array of friends Email to show friends Flag.[Just Only xCss Style mode] |
|||
- cb3e577ff029d6073400d5557effd41f |
|||
- |
|||
``` |
|||
|
|||
#### 7. 绑定 DaoVoice 在线聊天 |
|||
|
|||
编辑主题目录下的配置文件`MyBlog/themes/matery/_config.yml`，找到如下内容并修改 |
|||
|
|||
```bash |
|||
daovoice: |
|||
enable: true |
|||
app_id: 4xxxxxxxe #DaoVoice中的app_id |
|||
``` |
|||
|
|||
#### 8. 快捷导航页面个性化 |
|||
|
|||
编辑文件`MyBlog/source/tools/index.html`，以下简单标记出几处，还有其他涉及到博客信息的内容都需要改为你自己的博客信息即可。 |
|||
|
|||
 |
|||
|
|||
#### 9. 添加友情链接 |
|||
|
|||
编辑文件`MyBlog/suorce/_data/friends.json`，按如下格式添加友情 |
|||
|
|||
```bash |
|||
[ |
|||
{ |
|||
"avatar": "https://s1.ax1x.com/2020/05/17/YRWsYT.png", |
|||
"name": "Luckey", |
|||
"introduction": "越努力，越幸运", |
|||
"url": "http://www.luckyzmj.cn", |
|||
"title": "访问主页" |
|||
},{ |
|||
"avatar": "https://sunhwee.com/hwsun.jpg", |
|||
"name": "洪卫の博客", |
|||
"introduction": "UESTC CVer", |
|||
"url": "http://sunhwee.com", |
|||
"title": "访问主页" |
|||
} |
|||
] |
|||
``` |
|||
|
|||
#### 10. 添加相册 |
|||
|
|||
比如你的图片上传图床后，链接地址如下 |
|||
|
|||
```bash |
|||
https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/璀璨星空/01.jpg |
|||
https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/璀璨星空/02.jpg |
|||
https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/动漫风景/01.jpg |
|||
https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/动漫风景/02.jpg |
|||
... |
|||
``` |
|||
|
|||
首先提取出图片链接公共的部分，作为图床地址 |
|||
|
|||
```bash |
|||
https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/ |
|||
``` |
|||
|
|||
然后再提取图片地址中不同的部分，作为图片地址 |
|||
|
|||
```bash |
|||
璀璨星空/01.jpg |
|||
璀璨星空/02.jpg |
|||
动漫风景/01.jpg |
|||
动漫风景/03.jpg |
|||
... |
|||
``` |
|||
|
|||
>具体怎么分割根据你自己图床的链接格式而定，以上为我的github图床格式为例。 |
|||
|
|||
将相册图床的地址改为你自己的图床地址，需要更改两处文件 |
|||
|
|||
```bash |
|||
# 例如我的图床地址为： |
|||
https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/ |
|||
``` |
|||
|
|||
themes/matery/layout/galleries.ejs |
|||
|
|||
 |
|||
|
|||
themes/matery/layout/gallerie.ejs |
|||
|
|||
 |
|||
|
|||
为每个相册添加链接地址，在根目录/source/List/galleries/下新建 相册名称 文件夹，并在该文件夹下新建 `index.md` |
|||
|
|||
 |
|||
|
|||
最后，在根目录/source/_data/galleries.json中添加图片链接，格式如下, |
|||
|
|||
```bash |
|||
[ |
|||
{ |
|||
"name": "璀璨星空", |
|||
"cover": "璀璨星空/01.jpg", |
|||
"description": "璀璨星空", |
|||
"photos": [ |
|||
"璀璨星空/01.jpg", |
|||
"璀璨星空/02.jpg", |
|||
"璀璨星空/03.jpg", |
|||
"璀璨星空/04.jpg", |
|||
"璀璨星空/05.jpg", |
|||
"璀璨星空/06.jpg", |
|||
"璀璨星空/07.jpg", |
|||
"璀璨星空/08.jpg", |
|||
"璀璨星空/09.jpg", |
|||
"璀璨星空/10.jpg", |
|||
"璀璨星空/11.jpg", |
|||
"璀璨星空/12.jpg", |
|||
"璀璨星空/13.jpg", |
|||
"璀璨星空/14.jpg", |
|||
"璀璨星空/15.jpg", |
|||
"璀璨星空/16.jpg" |
|||
] |
|||
}, |
|||
{ |
|||
"name": "动漫风景", |
|||
"cover": "动漫风景/01.jpg", |
|||
"description": "动漫风景", |
|||
"photos": [ |
|||
"动漫风景/01.jpg", |
|||
"动漫风景/02.jpg", |
|||
"动漫风景/03.jpg", |
|||
"动漫风景/04.jpg", |
|||
"动漫风景/05.jpg", |
|||
"动漫风景/06.jpg", |
|||
"动漫风景/07.jpg", |
|||
"动漫风景/08.jpg", |
|||
"动漫风景/09.jpg", |
|||
"动漫风景/10.jpg", |
|||
"动漫风景/11.jpg", |
|||
"动漫风景/12.jpg", |
|||
"动漫风景/13.jpg", |
|||
"动漫风景/14.jpg", |
|||
"动漫风景/15.jpg", |
|||
"动漫风景/16.jpg" |
|||
] |
|||
} |
|||
] |
|||
``` |
|||
|
|||
#### 11. 站点统计功能 |
|||
|
|||
站点统计的数据来源于[百度统计](https://tongji.baidu.com/web/welcome/login),当你的网站被百度收录后就会在百度统计中出现数据，具体效果如下： |
|||
|
|||
 |
|||
|
|||
由于博客的统计页面数据不能直接从百度站点中调用，因此需要自行从百度站点中将相应数据填入博客站点统计页面的源代码文件中，个人建议每隔一个月手动更新一次数据。 |
|||
|
|||
打开`MyBlog\themes\matery\layout\census.ejs`文件，将百度统计中的数据填入源代码中，修改代码如下： |
|||
|
|||
 |
|||
|
|||
#### 11. 仿Windows个性化 |
|||
|
|||
仿Windows页面是采用[YLUI](https://ylui.yuri2.cn/)实现的，YLUI提供了社区版本供大家学习使用，具体效果如下： |
|||
|
|||
 |
|||
|
|||
大家可以查看YLUI官方的[开发文档](https://github.com/yuri2peter/ylui/tree/master/documents)进行开发，有不懂的可以加官方的QQ群：`191372634` 进行讨论。 |
|||
|
|||
#### 12. 博客动漫风格背景图 |
|||
|
|||
因为在上一个LuckyBlog版本发布的网站风格是偏向动漫风格的，如果大家喜欢动漫风格，只需要替换以下配置即可。 |
|||
|
|||
**博客每日轮播图：** 以下链接图片全部下载保存到`MyBlog\themes\matery\source\medias\banner`中，以0~7.jpg的文件名格式命名即可。 |
|||
|
|||
```html |
|||
https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/0.jpg |
|||
https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/1.jpg |
|||
https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/2.jpg |
|||
https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/3.jpg |
|||
https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/4.jpg |
|||
https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/5.jpg |
|||
https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/6.jpg |
|||
https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/7.jpg |
|||
``` |
|||
|
|||
**无文章特色背景图：** 打开主题配置文件`MyBlog\themes\matery\_config.yml`，修改替换如下代码即可： |
|||
|
|||
```bash |
|||
# The post featured images that needs to be displayed when there is no image. |
|||
# 无文章特色图片时需要显示的文章特色图片. |
|||
featureImages: |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/01.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/02.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/04.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/06.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/07.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/10.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/11.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/12.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/09.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/14.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/15.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/16.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E4%BA%8C%E6%AC%A1%E5%85%83%E9%A3%8E/06.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/02.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/03.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/04.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/07.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/08.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/11.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/10.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/09.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/12.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/13.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/14.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/16.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/15.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/11.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/09.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/03.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/08.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/03.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/13.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/01.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/05.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/14.jpg |
|||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/01.jpg |
|||
``` |
|||
|
|||
|
|||
### 0x04 更多内容优化 |
|||
|
|||
以上简单介绍了 `LuckyBlog` 中一些要修改的个性化地方，其他更详细的优化参考其他关于`Matery`的文章。以下几篇文章都是基于`hexo-theme-matery`主题优化的教程，大家如果遇到问题，可以参考其中的方法。 |
|||
|
|||
- [个人博客搭建](http://luckyzmj.cn/posts/e3e08109.html) |
|||
- [Hexo+Github博客搭建完全教程](https://sunhwee.com/posts/6e8839eb.html) |
|||
- [hexo-theme-matery作者教程](https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md) |
|||
- [Hexo+github搭建博客(超级详细版，精细入微)](https://yafine-blog.cn/posts/4ab2.html) |
|||
- [hexo（matery）背景、滚动条优化+增加点击跳评论](https://blog.csdn.net/cungudafa/article/details/106278206) |
|||
@ -0,0 +1,163 @@ |
|||
# Hexo Configuration |
|||
## Docs: https://hexo.io/docs/configuration.html |
|||
## Source: https://github.com/hexojs/hexo/ |
|||
|
|||
# Site |
|||
title: TianZD |
|||
subtitle: 'TianZDの博客' |
|||
description: '个人博客 | 笔记本 | 杂记' |
|||
keywords: 'C++ 计算机 QT 效率' |
|||
author: TianZD |
|||
language: zh-CN |
|||
timezone: '' |
|||
|
|||
# URL |
|||
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/' |
|||
url: http://www.luckyzmj.cn |
|||
root: / |
|||
# permalink: :year/:month/:day/:title/ |
|||
permalink: posts/:abbrlink.html # p 是自定义的前缀 |
|||
abbrlink: |
|||
alg: crc32 #算法： crc16(default) and crc32 |
|||
rep: hex #进制： dec(default) and hex |
|||
permalink_defaults: |
|||
pretty_urls: |
|||
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks |
|||
trailing_html: true # Set to false to remove trailing '.html' from permalinks |
|||
|
|||
# Directory |
|||
source_dir: source |
|||
public_dir: public |
|||
tag_dir: tags |
|||
archive_dir: archives |
|||
category_dir: categories |
|||
code_dir: downloads/code |
|||
i18n_dir: :lang |
|||
skip_render: |
|||
- 'tools/*' |
|||
- 'tools/**' |
|||
- 'GoogleHacking/*' |
|||
- 'GoogleHacking/**' |
|||
- 'Windows/*' |
|||
- 'Windows/**' |
|||
|
|||
# Writing |
|||
new_post_name: :title.md # File name of new posts |
|||
default_layout: post |
|||
titlecase: false # Transform title into titlecase |
|||
external_link: |
|||
enable: true # Open external links in new tab |
|||
field: site # Apply to the whole site |
|||
exclude: '' |
|||
filename_case: 0 |
|||
render_drafts: false |
|||
post_asset_folder: false |
|||
relative_link: false |
|||
future: true |
|||
highlight: |
|||
enable: false |
|||
line_number: true |
|||
auto_detect: false |
|||
tab_replace: '' |
|||
wrap: true |
|||
hljs: false |
|||
prismjs: |
|||
enable: true |
|||
preprocess: true |
|||
line_number: true |
|||
tab_replace: '' |
|||
|
|||
# Home page setting |
|||
# path: Root path for your blogs index page. (default = '') |
|||
# per_page: Posts displayed per page. (0 = disable pagination) |
|||
# order_by: Posts order. (Order by date descending by default) |
|||
index_generator: |
|||
path: '' |
|||
per_page: 12 #下半部文章页面显示数 |
|||
order_by: -date |
|||
|
|||
# Category & Tag |
|||
default_category: uncategorized |
|||
category_map: |
|||
tag_map: |
|||
|
|||
# Metadata elements |
|||
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta |
|||
meta_generator: true |
|||
|
|||
# Date / Time format |
|||
## Hexo uses Moment.js to parse and display date |
|||
## You can customize the date format as defined in |
|||
## http://momentjs.com/docs/#/displaying/format/ |
|||
date_format: YYYY-MM-DD |
|||
time_format: HH:mm:ss |
|||
## updated_option supports 'mtime', 'date', 'empty' |
|||
updated_option: 'mtime' |
|||
|
|||
# Pagination |
|||
## Set per_page to 0 to disable pagination |
|||
per_page: 6 # 推荐文章以及分类标签显示数 |
|||
pagination_dir: page |
|||
|
|||
# Include / Exclude file(s) |
|||
## include:/exclude: options only apply to the 'source/' folder |
|||
include: |
|||
exclude: |
|||
ignore: |
|||
|
|||
# Extensions |
|||
## Plugins: https://hexo.io/plugins/ |
|||
## Themes: https://hexo.io/themes/ |
|||
theme: matery |
|||
|
|||
# Extensions |
|||
## Plugins: http://hexo.io/plugins/ |
|||
#RSS订阅 |
|||
plugin: |
|||
- hexo-generator-feed |
|||
- hexo-generator-baidu-sitemap |
|||
- hexo-generator-sitemap |
|||
|
|||
baidusitemap: |
|||
path: baidusitemap.xml |
|||
|
|||
sitemap: |
|||
path: sitemap.xml |
|||
|
|||
# Deployment |
|||
## Docs: https://hexo.io/docs/one-command-deployment |
|||
deploy: |
|||
- type: 'git' |
|||
repo: # git@github.com:LuckyZmj/LuckyZmj.github.io.git |
|||
branch: master |
|||
- type: baidu_url_submitter |
|||
|
|||
# baidu submit |
|||
baidu_url_submit: |
|||
count: 40 # 提交最新的一个链接 |
|||
host: www.luckyzmj.cn # 在百度站长平台中注册的域名 |
|||
token: xxxxxxxxxxxxxxx # 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里! |
|||
path: baidu_urls.txt # 文本文档的地址， 新链接会保存在此文本文档里 |
|||
|
|||
# matery搜索功能 |
|||
search: |
|||
path: search.xml |
|||
field: post |
|||
|
|||
# 中文链接转拼音 |
|||
permalink_pinyin: |
|||
enable: true |
|||
separator: '-' # default: '-' |
|||
|
|||
# emoji表情支持 |
|||
githubEmojis: |
|||
enable: true |
|||
className: github-emoji |
|||
inject: true |
|||
styles: |
|||
customEmojis: |
|||
|
|||
lazyload: |
|||
enable: false # 是否开启图片懒加载 |
|||
onlypost: true # 是否只对文章的图片做懒加载 |
|||
loadingImg: https://cdn.jsdelivr.net/gh/shw2018/cdn@1.0/sakura/img/loader/orange.progress-bar-stripe-loader.svg # eg ./images/loading.gif |
|||
File diff suppressed because it is too large
@ -0,0 +1,41 @@ |
|||
{ |
|||
"name": "hexo-site", |
|||
"version": "0.0.0", |
|||
"private": true, |
|||
"scripts": { |
|||
"build": "hexo generate", |
|||
"clean": "hexo clean", |
|||
"deploy": "hexo deploy", |
|||
"server": "hexo server" |
|||
}, |
|||
"hexo": { |
|||
"version": "5.2.0" |
|||
}, |
|||
"dependencies": { |
|||
"hexo": "^5.0.0", |
|||
"hexo-abbrlink": "^2.2.1", |
|||
"hexo-baidu-url-submit": "0.0.6", |
|||
"hexo-deployer-git": "^2.1.0", |
|||
"hexo-filter-github-emojis": "^3.0.4", |
|||
"hexo-generator-archive": "^1.0.0", |
|||
"hexo-generator-baidu-sitemap": "^0.1.9", |
|||
"hexo-generator-category": "^1.0.0", |
|||
"hexo-generator-feed": "^3.0.0", |
|||
"hexo-generator-index": "^2.0.0", |
|||
"hexo-generator-json-content": "^4.2.3", |
|||
"hexo-generator-search": "^2.4.1", |
|||
"hexo-generator-sitemap": "^2.1.0", |
|||
"hexo-generator-tag": "^1.0.0", |
|||
"hexo-helper-qrcode": "^1.0.2", |
|||
"hexo-lazyload-image": "^1.0.9", |
|||
"hexo-permalink-pinyin": "^1.1.0", |
|||
"hexo-related-popular-posts": "^5.0.1", |
|||
"hexo-renderer-ejs": "^1.0.0", |
|||
"hexo-renderer-marked": "^3.0.0", |
|||
"hexo-renderer-pug": "^1.0.0", |
|||
"hexo-renderer-stylus": "^2.0.1", |
|||
"hexo-server": "^2.0.0", |
|||
"hexo-tag-aplayer": "^3.0.4", |
|||
"hexo-wordcount": "^6.0.1" |
|||
} |
|||
} |
|||
@ -0,0 +1,4 @@ |
|||
--- |
|||
title: {{ title }} |
|||
tags: |
|||
--- |
|||
@ -0,0 +1,4 @@ |
|||
--- |
|||
title: {{ title }} |
|||
date: {{ date }} |
|||
--- |
|||
@ -0,0 +1,5 @@ |
|||
--- |
|||
title: {{ title }} |
|||
date: {{ date }} |
|||
tags: |
|||
--- |
|||
@ -0,0 +1,7 @@ |
|||
--- |
|||
title: 404 |
|||
date: 2019-08-10 16:41:10 |
|||
type: "404" |
|||
layout: "404" |
|||
description: "Oops～，我崩溃了！找不到你想要的页面 :( 有可能博主优化了网站url，页面链接地址发生了变化，你可以尝试返回主页，查找对应博文页面！！！" |
|||
--- |
|||
@ -0,0 +1 @@ |
|||
luckyzmj.cn |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,77 @@ |
|||
* { |
|||
margin: 0; |
|||
padding: 0; |
|||
outline: none; |
|||
} |
|||
|
|||
body { |
|||
color: #ffffff; |
|||
font-size: 14px; |
|||
font-family: tahoma, "Microsoft YaHei", 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'STHeitiSC-Light', 'Arial', sans-serif; |
|||
} |
|||
|
|||
canvas { |
|||
display: block; |
|||
margin: 0; |
|||
width:100%; |
|||
height:100%; |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
top:0; |
|||
bottom:0; |
|||
z-index: -1; |
|||
} |
|||
|
|||
.box_S { |
|||
box-sizing: border-box; |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
} |
|||
|
|||
|
|||
.content { |
|||
padding-top:10%; |
|||
width: 100%; |
|||
margin: 0; |
|||
} |
|||
|
|||
.input_wrap_box { |
|||
background: #0f1034; |
|||
text-align: center; |
|||
display: block; |
|||
margin: 0 auto; |
|||
border-radius: 25px; |
|||
-webkit-border-radius: 25px; |
|||
-moz-border-radius: 25px; |
|||
width: 770px; |
|||
height: 50px; |
|||
line-height: 50px; |
|||
margin-top: 20px; |
|||
position: relative; |
|||
} |
|||
|
|||
.input_wrap_box #sercHead { |
|||
background: #0f1034; |
|||
width: 100%; |
|||
display: block; |
|||
text-align: center; |
|||
line-height: 48px; |
|||
border: 1px solid #1d2556; |
|||
border-radius: 25px; |
|||
-webkit-border-radius: 25px; |
|||
-moz-border-radius: 25px; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.options { |
|||
width: 100%; |
|||
text-align: center; |
|||
margin-top:20px; |
|||
} |
|||
|
|||
.footer { |
|||
width: 100%; |
|||
margin-top: 50px; |
|||
} |
|||
|
|||
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
@ -0,0 +1,58 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head lang="en"> |
|||
<meta charset="UTF-8"> |
|||
<title>在线Google Hacking小工具</title> |
|||
<link rel="shortcut icon" href="https://s1.ax1x.com/2020/05/17/YR20js.jpg" /> |
|||
<script type="text/javascript" src="comonjs/jquery-1.11.2.min.js"></script> |
|||
<script type="text/javascript" src="comonjs/modernizr-2.6.2.min.js"></script> |
|||
<script type="text/javascript" src="js/starbg.js"></script> |
|||
<script type="text/javascript" src="js/googlehack.js"></script> |
|||
<link type="text/css" rel="stylesheet" href="css/styles.css" /> |
|||
|
|||
</head> |
|||
<body> |
|||
|
|||
<canvas id="fullstarbg">您的浏览器不支持canvas标签</canvas> |
|||
|
|||
<div class="content"> |
|||
<center><img src="google.png" alt="google"></center> |
|||
<div class="input_wrap_box box_S"> |
|||
<input id="sercHead" name="sercHead" type="text" class="box_S" value="" placeholder="example.com" onclick=""> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="options"> |
|||
<ul> |
|||
<li><a href="#" onclick="do_google_search(1)" style="font-family:verdana;font-size:20px;color:#4285f4;text-decoration:none">目录遍历漏洞</a></li> |
|||
|
|||
<li><a href="#" onclick="do_google_search(2)" style="font-family:verdana;font-size:20px;color:#4285f4;text-decoration:none">配置文件泄露</a></li> |
|||
|
|||
<li><a href="#" onclick="do_google_search(3)" style="font-family:verdana;font-size:20px;color:#4285f4;text-decoration:none">数据库文件泄露</a></li> |
|||
|
|||
<li><a href="#" onclick="do_google_search(4)" style="font-family:verdana;font-size:20px;color:#4285f4;text-decoration:none">日志文件泄露</a></li> |
|||
|
|||
<li><a href="#" onclick="do_google_search(5)" style="font-family:verdana;font-size:20px;color:#4285f4;text-decoration:none">备份和历史文件</a></li> |
|||
|
|||
<li><a href="#" onclick="do_google_search(6)" style="font-family:verdana;font-size:20px;color:#4285f4;text-decoration:none">登录页面</a></li> |
|||
|
|||
<li><a href="#" onclick="do_google_search(7)" style="font-family:verdana;font-size:20px;color:#4285f4;text-decoration:none">SQL错误</a></li> |
|||
|
|||
<li><a href="#" onclick="do_google_search(8)" style="font-family:verdana;font-size:20px;color:#4285f4;text-decoration:none">公开文件信息</a></li> |
|||
|
|||
<li><a href="#" onclick="do_google_search(9)" style="font-family:verdana;font-size:20px;color:#4285f4;text-decoration:none">phpinfo()</a></li> |
|||
|
|||
<li><a href="#" onclick="do_google_search(10)" style="font-family:verdana;font-size:20px;color:#4285f4;text-decoration:none">搜索Pastebin.com和其他粘贴站点</a></li> |
|||
|
|||
<li><a href="#" onclick="do_google_search(11)" style="font-family:verdana;font-size:20px;color:#4285f4;text-decoration:none">搜索Github.com和Gitlab.com</a></li> |
|||
|
|||
<li><a href="/" style="font-family:verdana;font-size:20px;color:#4285f4;text-decoration:none">返回博客</a></li> |
|||
</ul> |
|||
|
|||
</div> |
|||
|
|||
<div class="footer"> |
|||
<center> Copyright © 2019 CODING BY <a href="http://www.luckyzmj.cn" style="font-family:verdana;color:#4285f4;text-decoration:none"> luckyzmj </a> GIT HUB: <a href="https://github.com/r00tSe7en/GoogleHackingTool" style="font-family:verdana;color:#4285f4;text-decoration:none"> 在线google Hacking小工具 </a></center> |
|||
</div> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,43 @@ |
|||
function do_google_search(type) { |
|||
site = document.getElementById('sercHead').value; |
|||
|
|||
url1 = 'https://www.google.com/search?q='; |
|||
url2 = url1 + 'site:' + site; |
|||
switch (type) { |
|||
case 1: |
|||
url = url2 + '+intitle:index.of'; |
|||
break; |
|||
case 2: |
|||
url = url2 + '+ext:xml+|+ext:conf+|+ext:cnf+|+ext:reg+|+ext:inf+|+ext:rdp+|+ext:cfg+|+ext:txt+|+ext:ora+|+ext:ini'; |
|||
break; |
|||
case 3: |
|||
url = url2 + '+ext:sql+|+ext:dbf+|+ext:mdb'; |
|||
break; |
|||
case 4: |
|||
url = url2 + '+ext:log'; |
|||
break; |
|||
case 5: |
|||
url = url2 + '+ext:bkf+|+ext:bkp+|+ext:bak+|+ext:old+|+ext:backup'; |
|||
break; |
|||
case 6: |
|||
url = url2 + '+inurl:login'; |
|||
break; |
|||
case 7: |
|||
url = url2 + '+intext:"sql+syntax+near"+|+intext:"syntax+error+has+occurred"+|+intext:"incorrect+syntax+near"+|+intext:"unexpected+end+of+SQL+command"+|+intext:"Warning:+mysql_connect()"+|+intext:"Warning:+mysql_query()"+|+intext:"Warning:+pg_connect()"'; |
|||
break; |
|||
case 8: |
|||
url = url2 + '+ext:doc+|+ext:docx+|+ext:odt+|+ext:pdf+|+ext:rtf+|+ext:sxw+|+ext:psw+|+ext:ppt+|+ext:pptx+|+ext:pps+|+ext:csv'; |
|||
break; |
|||
case 9: |
|||
url = url2 + '+ext:php+intitle:phpinfo+"published+by+the+PHP+Group"'; |
|||
break; |
|||
case 10: |
|||
url = url1 + 'site:pastebin.com+|+site:paste2.org+|+site:pastehtml.com+|+site:slexy.org+|+site:snipplr.com+|+site:snipt.net+|+site:textsnip.com+|+site:bitpaste.app+|+site:justpaste.it+|+site:heypasteit.com+|+site:hastebin.com+|+site:dpaste.org+|+site:dpaste.com+|+site:codepad.org+|+site:jsitor.com+|+site:codepen.io+|+site:jsfiddle.net+|+site:dotnetfiddle.net+|+site:phpfiddle.org+|+site:ide.geeksforgeeks.org+|+site:repl.it+|+site:ideone.com+|+site:paste.debian.net+|+site:paste.org+|+site:paste.org.ru+|+site:codebeautify.org+|+site:codeshare.io+|+site:trello.com'+'+"'+site+'"'; |
|||
break; |
|||
case 11: |
|||
url = url1 + 'site:github.com+|+site:gitlab.com'+'+"'+site+'"'; |
|||
break; |
|||
} |
|||
window.open(url, '', 'scrollbars=yes,menubar=no,height=600,width=800,resizable=yes,toolbar=yes,menubar=no,location=no,status=no'); |
|||
|
|||
} |
|||
@ -0,0 +1,175 @@ |
|||
/** |
|||
* Created by Zcy on 2016/11/1 0001. |
|||
*/ |
|||
|
|||
window.addEventListener('load',windowload,false) |
|||
function windowload(){ |
|||
canvasApp(); |
|||
} |
|||
function canvasSupport(){ |
|||
return Modernizr.canvas; |
|||
} |
|||
function canvasApp(){ |
|||
if(!canvasSupport()){ |
|||
return; |
|||
} |
|||
var canvasElement=document.getElementById('fullstarbg'); |
|||
var cxt=canvasElement.getContext("2d"); |
|||
var windowW=window.innerWidth; |
|||
var windowh=window.innerHeight; |
|||
canvasElement.width=windowW; |
|||
canvasElement.height=windowh; |
|||
//画星星
|
|||
var nums=200; |
|||
var starArr=[]; |
|||
for(var i=0;i<nums;i++){ |
|||
var arrs=["t","f"]; |
|||
var r= Math.random()*1; //生成星星的半径
|
|||
var ax=Math.random()*canvasElement.width; |
|||
var ay=Math.random()*canvasElement.height; |
|||
var opactityS=Math.random()*1; |
|||
opactityS=opactityS>0.7?0.7:opactityS; |
|||
var trues=arrs[Math.floor(Math.random()*2)]; |
|||
|
|||
starArr.push({ |
|||
x:ax, |
|||
y:ay, |
|||
R:r, |
|||
initX:ax, |
|||
initY:ay, |
|||
moves:trues, |
|||
initOpacity:opactityS, |
|||
opacity:opactityS |
|||
}); |
|||
} |
|||
//流线
|
|||
|
|||
var newLine=true; |
|||
var linesArr=[]; |
|||
var conter=0; |
|||
function createLine(){ |
|||
if(newLine==true){ |
|||
var lineNum=Math.ceil(Math.random()*2); |
|||
//#59576a;
|
|||
linesArr=[] |
|||
for(var i=0;i<lineNum;i++){ |
|||
var lx=Math.random()*canvasElement.width; |
|||
var ly=Math.random()*canvasElement.height-Math.random()*500; |
|||
linesArr.push({ |
|||
initX:lx, |
|||
initY:0, |
|||
length:Math.random()*50+30, |
|||
speed:Math.random()*10 |
|||
}) |
|||
} |
|||
newLine=false; |
|||
} |
|||
} |
|||
//3秒之后让红色的圆形运动
|
|||
var redstart=false; |
|||
setTimeout(function(){ |
|||
redstart=true; |
|||
},3000) |
|||
var yred=-0.25*canvasElement.width*0.22; |
|||
var redYlimt=-0.35*canvasElement.width*0.22;; |
|||
function draw(){ |
|||
cxt.clearRect(0,0,canvasElement.width,canvasElement.height); |
|||
var colors=cxt.createLinearGradient(0,0,0,canvasElement.height); |
|||
colors.addColorStop(0,"#090723"); |
|||
colors.addColorStop(0.75,"#090723"); |
|||
colors.addColorStop(1,"#08071e") |
|||
cxt.fillStyle=colors; //08071e
|
|||
cxt.fillRect(0,0,canvasElement.width,canvasElement.height) |
|||
//画圆 color r x y
|
|||
drawCircle("#f7f4d3",canvasElement.width*0.12,0.44*canvasElement.width,redYlimt,"#fcf6ac"); //红
|
|||
drawCircle("#201620",canvasElement.width*0.025,0.95*canvasElement.width,0.32*canvasElement.height); //灰
|
|||
drawCircle("#140c2a",canvasElement.width*0.01,0.75*canvasElement.width,0.22*canvasElement.height); //紫
|
|||
drawCircle("#090929",canvasElement.width*0.018,0.82*canvasElement.width,0.52*canvasElement.height); //蓝
|
|||
if(redstart==true){ |
|||
redYlimt+=1; |
|||
} |
|||
if(redYlimt>yred){ |
|||
redYlimt=yred; |
|||
} |
|||
//STAR
|
|||
for(var i=0;i<starArr.length;i++){ |
|||
var child=starArr[i]; |
|||
cxt.save(); |
|||
cxt.globalAlpha=child.opacity; |
|||
cxt.beginPath(); |
|||
cxt.fillStyle="#ffffff"; |
|||
cxt.arc(child.initX,child.initY,child.R,0,Math.PI*2,false); |
|||
cxt.fill(); |
|||
cxt.closePath(); |
|||
//移动
|
|||
|
|||
if(child.moves=='t'){ |
|||
child.initX-=Math.random()*1*0.12; //星星移动的速度
|
|||
if(child.initX<0){ |
|||
child.initX=child.x; |
|||
} |
|||
} |
|||
//透明度
|
|||
if(child.opacity<0.8){ |
|||
child.opacity+=0.005; |
|||
if(child.opacity>0.7){ |
|||
child.opacity=child.initOpacity; |
|||
} |
|||
} |
|||
cxt.restore(); |
|||
} |
|||
//lines
|
|||
createLine(); |
|||
|
|||
for(var i=0;i<linesArr.length;i++){ |
|||
var child=linesArr[i]; |
|||
cxt.save(); |
|||
cxt.rotate(0); |
|||
cxt.beginPath(); |
|||
cxt.strokeStyle="#59576a"; |
|||
cxt.moveTo(child.initX,child.initY); |
|||
cxt.lineTo(child.initX-Math.cos(Math.PI/180*45)*child.length,child.initY+Math.sin(Math.PI/180*45)*child.length); |
|||
cxt.stroke(); |
|||
cxt.restore(); |
|||
child.speed+=0.1; |
|||
var preX=Math.cos(Math.PI/180*45)*child.speed; |
|||
var preY=Math.sin(Math.PI/180*45)*child.speed; |
|||
child.initX=child.initX-preX; |
|||
child.initY=child.initY+preY; |
|||
if(child.initX<0||child.initY>canvasElement.height){ |
|||
conter=i+1; |
|||
} |
|||
if(conter==linesArr.length){ |
|||
conter=0; |
|||
newLine=true; |
|||
|
|||
|
|||
} |
|||
|
|||
} |
|||
} |
|||
draw(); |
|||
setInterval(draw,20); |
|||
function drawCircle(color,R,x,y,color2){ |
|||
cxt.beginPath(); |
|||
if(color2){ |
|||
var gradient2=cxt.createRadialGradient(x,y,R/2,x,y,R); |
|||
gradient2.addColorStop(0,color); |
|||
gradient2.addColorStop(0.5,color); |
|||
gradient2.addColorStop(1,color2); |
|||
cxt.fillStyle=gradient2; |
|||
}else{ |
|||
cxt.fillStyle=color; |
|||
} |
|||
|
|||
var r=R; |
|||
cxt.arc(x,y,R,0,Math.PI*2,false); |
|||
cxt.fill(); |
|||
cxt.closePath(); |
|||
} |
|||
//代码思路：
|
|||
//星星 随机产生一定数量的星星对象{初始位置:x,y;星星半径}
|
|||
//星星闪烁与运动的原理 每隔一定秒数重新绘制 并且移动位置 与 改变透明度 闪烁与移动可以随机或者一定的规律
|
|||
//
|
|||
//流线 同流星原理类似 斜线根据角度与第一点 求第二点
|
|||
} |
|||
@ -0,0 +1,4 @@ |
|||
--- |
|||
title: 相册 |
|||
layout: "galleries" |
|||
--- |
|||
@ -0,0 +1,5 @@ |
|||
--- |
|||
title: 乖巧小狗 |
|||
type: "gallery" |
|||
layout: "gallery" |
|||
--- |
|||
@ -0,0 +1,5 @@ |
|||
--- |
|||
title: 二次元风 |
|||
type: "gallery" |
|||
layout: "gallery" |
|||
--- |
|||
@ -0,0 +1,5 @@ |
|||
--- |
|||
title: 动漫人物 |
|||
type: "gallery" |
|||
layout: "gallery" |
|||
--- |
|||
@ -0,0 +1,5 @@ |
|||
--- |
|||
title: 动漫插画 |
|||
type: "gallery" |
|||
layout: "gallery" |
|||
--- |
|||
@ -0,0 +1,8 @@ |
|||
--- |
|||
title: 动漫风景 |
|||
type: "gallery" |
|||
layout: "gallery" |
|||
--- |
|||
|
|||
|
|||
|
|||
@ -0,0 +1,5 @@ |
|||
--- |
|||
title: 呆萌猫咪 |
|||
type: "gallery" |
|||
layout: "gallery" |
|||
--- |
|||
@ -0,0 +1,5 @@ |
|||
--- |
|||
title: 城市风光 |
|||
type: "gallery" |
|||
layout: "gallery" |
|||
--- |
|||
@ -0,0 +1,5 @@ |
|||
--- |
|||
title: 清新花卉 |
|||
type: "gallery" |
|||
layout: "gallery" |
|||
--- |
|||
@ -0,0 +1,5 @@ |
|||
--- |
|||
title: 炫酷跑车 |
|||
type: "gallery" |
|||
layout: "gallery" |
|||
--- |
|||
@ -0,0 +1,8 @@ |
|||
--- |
|||
title: 璀璨星空 |
|||
type: "gallery" |
|||
layout: "gallery" |
|||
--- |
|||
|
|||
|
|||
|
|||
@ -0,0 +1,5 @@ |
|||
--- |
|||
title: 甜美食品 |
|||
type: "gallery" |
|||
layout: "gallery" |
|||
--- |
|||
@ -0,0 +1,5 @@ |
|||
--- |
|||
title: 自然风景 |
|||
type: "gallery" |
|||
layout: "gallery" |
|||
--- |
|||
@ -0,0 +1,13 @@ |
|||
--- |
|||
title: 放松一下 |
|||
date: 2019-08-10 16:41:10 |
|||
type: "av" |
|||
layout: "av" |
|||
--- |
|||
|
|||
|
|||
# 影音资源共享 |
|||
|
|||
{% raw %} |
|||
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;"><iframe src="//player.bilibili.com/player.html?aid=2979186&cid=4667585&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></iframe></div> |
|||
{% endraw %} |
|||
@ -0,0 +1,6 @@ |
|||
--- |
|||
title: 视频 |
|||
date: 2019-08-10 16:41:10 |
|||
type: "movies" |
|||
layout: "movies" |
|||
--- |
|||
@ -0,0 +1,7 @@ |
|||
--- |
|||
title: 听听音乐 |
|||
date: 2019-07-19 16:40:27 |
|||
type: "musics" |
|||
layout: "musics" |
|||
--- |
|||
|
|||
@ -0,0 +1,5 @@ |
|||
--- |
|||
title: 听听音乐 |
|||
date: 2019-07-19 16:40:27 |
|||
|
|||
--- |
|||
@ -0,0 +1,8 @@ |
|||
# Created by .ignore support plugin (hsz.mobi) |
|||
.idea |
|||
test.html |
|||
/unpackage/ |
|||
/test/ |
|||
/saves/test.json |
|||
/node_modules/ |
|||
/package-lock.json |
|||
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,31 @@ |
|||
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,//序列号
|
|||
|
|||
}; |
|||
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,503 @@ |
|||
<!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> |
|||
@ -0,0 +1,185 @@ |
|||
{ |
|||
"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" |
|||
} |
|||
@ -0,0 +1,185 @@ |
|||
{ |
|||
"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": "窗口位置" |
|||
} |
|||
@ -0,0 +1,185 @@ |
|||
{ |
|||
"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": "窗口位置" |
|||
} |
|||
@ -0,0 +1,30 @@ |
|||
/** |
|||
* 读取配置示例文件 |
|||
* 修改此文件来实现持久化 |
|||
* 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读取配置错误，初始化失败'); |
|||
} |
|||
}); |
|||
}); |
|||
@ -0,0 +1,38 @@ |
|||
{ |
|||
"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" |
|||
} |
|||
} |
|||
@ -0,0 +1,32 @@ |
|||
{ |
|||
"labels":["社交", "视频", "工具", "YLUI", "购物","壁纸","插件"], |
|||
"apps": [ |
|||
{ |
|||
"title": "动态壁纸-星球大战", |
|||
"icon": "../yl-wallpaper-starwar/preview.png", |
|||
"labels": [ |
|||
"YLUI", |
|||
"壁纸" |
|||
], |
|||
"url": "./res/apps/yl-wallpaper-starwar/setup.html" |
|||
}, |
|||
{ |
|||
"title": "桌面时钟插件", |
|||
"icon": "../yl-clock/preview.png", |
|||
"labels": [ |
|||
"YLUI", |
|||
"插件" |
|||
], |
|||
"url": "./res/apps/yl-clock/setup.html" |
|||
}, |
|||
{ |
|||
"title": "计算器", |
|||
"icon": "../yl-calculator/preview.png", |
|||
"labels": [ |
|||
"YLUI", |
|||
"工具" |
|||
], |
|||
"url": "./res/apps/yl-calculator/setup.html" |
|||
} |
|||
] |
|||
} |
|||
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,56 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="cn"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<title>应用商店</title> |
|||
<meta name="viewport" |
|||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> |
|||
<link rel="stylesheet" href="../../../res/components/font-awesome-4.7.0/css/font-awesome.min.css"/> |
|||
<link rel="stylesheet" href="./style.css"/> |
|||
<script src="../../yl.app.js"></script> |
|||
<script src="../../../res/js/Yuri2.js"></script> |
|||
<link rel="stylesheet" href="../../../res/css/grid.css"/> |
|||
<script src="../../../res/components/vue.min.js"></script> |
|||
</head> |
|||
<body> |
|||
<div id="app"> |
|||
<div id="banner"> |
|||
YLUI 应用商店 |
|||
</div> |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9"> |
|||
<div class="row apps box"> |
|||
<div class="app col-xs-6 col-sm-3 col-md-2 col-lg-2" |
|||
:class="{active:isAppActive(app)}" |
|||
v-show="isAppActive(app)" |
|||
v-for="app in apps" @click="appClick(app)"> |
|||
<img onerror="this.src='./error.png'" :src="app.icon"/> |
|||
<div class="title">{{app.title}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> |
|||
<div class="labels box"> |
|||
<input v-model="search" style="line-height: 1.5em;width: 100%;padding: 0.5em" placeholder="查询"/> |
|||
</div> |
|||
<div class="labels box"> |
|||
<div class="label" |
|||
@click="labelClick(label)" |
|||
:class="{active:label.active}" |
|||
:style="labelStyle(label)" |
|||
v-for="label in labels">{{label.name}} |
|||
</div> |
|||
<div class="clear"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div id="footer"> |
|||
©2018 ylui.yuri2.com |
|||
</div> |
|||
</div> |
|||
<script src="./script.js"></script> |
|||
</body> |
|||
</html> |
|||
|
After Width: | Height: | Size: 82 KiB |
@ -0,0 +1,99 @@ |
|||
var data={ |
|||
labels:[], |
|||
apps:[], |
|||
}; |
|||
|
|||
|
|||
new Vue({ |
|||
el: "#app", |
|||
data: { |
|||
search: "", |
|||
labels: [], |
|||
apps: [], |
|||
}, |
|||
created: function () { |
|||
var that = this; |
|||
Yuri2.loadContentFromUrl('./data.json','get',function (err,str) { |
|||
var data=JSON.parse(str); |
|||
var labels = data.labels; |
|||
var apps =data.apps ; |
|||
var labelsLoaded = []; |
|||
labels.forEach(function (t) { |
|||
labelsLoaded.push({ |
|||
name: t, |
|||
active: true, |
|||
color: that.getRandomColor() |
|||
}) |
|||
}); |
|||
that.$set(that, 'labels', labelsLoaded); |
|||
that.$set(that, 'apps', apps); |
|||
}); |
|||
YLApp.onReady(function () { |
|||
YLApp.eval('getAppVersion','',function (rel) { |
|||
console.log(rel) |
|||
}); |
|||
}) |
|||
}, |
|||
methods: { |
|||
appClick: function (app) { |
|||
if (app.url) { |
|||
YLApp.eval('open',{url:app.url,title:app.title}); |
|||
} |
|||
|
|||
}, |
|||
labelClick: function (l) { |
|||
l.active = !l.active; |
|||
}, |
|||
isAppActive: function (app) { |
|||
var that = this; |
|||
var rel = false; |
|||
var labels = app.labels; |
|||
var hash = {}; |
|||
labels.forEach(function (t) { |
|||
hash[t] = true; |
|||
}); |
|||
this.labelsActive.forEach(function (t) { |
|||
var checkList = [ |
|||
app.title, |
|||
app.url, |
|||
]; |
|||
checkList = checkList.concat(app.labels); |
|||
var inWord = false; |
|||
checkList.forEach(function (t2) { |
|||
if (typeof t2 === "string" && t2.indexOf(that.search) !== -1) { |
|||
inWord = true; |
|||
} |
|||
}); |
|||
if (hash[t] && inWord) { |
|||
rel = true; |
|||
} |
|||
}); |
|||
return rel; |
|||
|
|||
}, |
|||
labelStyle: function (label) { |
|||
return { |
|||
"color": label.active ? "white" : label.color, |
|||
"border-color": label.active ? "white" : label.color, |
|||
"background-color": !label.active ? "white" : label.color, |
|||
} |
|||
}, |
|||
getRandomColor: function () { |
|||
var r = Yuri2.randInt(0, 200); |
|||
var g = Yuri2.randInt(0, 200); |
|||
var b = Yuri2.randInt(0, 200); |
|||
return 'rgb(' + r + ',' + g + ',' + b + ')'; |
|||
}, |
|||
}, |
|||
computed: { |
|||
labelsActive: function () { |
|||
var ls = []; |
|||
this.labels.forEach(function (t) { |
|||
if (t.active) |
|||
ls.push(t.name) |
|||
}); |
|||
return ls; |
|||
}, |
|||
} |
|||
}) |
|||
|
|||
@ -0,0 +1,95 @@ |
|||
|
|||
html, body { |
|||
margin: 0; |
|||
padding: 0; |
|||
height: 100%; |
|||
width: 100%; |
|||
overflow: auto; |
|||
} |
|||
|
|||
.clear { |
|||
clear: both; |
|||
} |
|||
#banner{ |
|||
background-color: #070744; |
|||
color: white; |
|||
font-size: 36px; |
|||
line-height: 4em; |
|||
padding-left: 2em; |
|||
} |
|||
#footer{ |
|||
background-color: gainsboro; |
|||
font-size: 14px; |
|||
text-align: center; |
|||
line-height: 4em; |
|||
padding-left: 2em; |
|||
position: absolute; |
|||
bottom: 0; |
|||
width: 100%; |
|||
} |
|||
#app { |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow: auto; |
|||
} |
|||
|
|||
.box { |
|||
/*border: 1px solid silver;*/ |
|||
/*box-shadow: 3px 3px 5px #d0d0d0;*/ |
|||
margin: 20px auto; |
|||
overflow-x: hidden; |
|||
padding: 1em; |
|||
} |
|||
|
|||
.labels, .apps { |
|||
|
|||
} |
|||
|
|||
.labels { |
|||
|
|||
} |
|||
|
|||
.label { |
|||
float: left; |
|||
border-radius: 0.4em; |
|||
border: 1px solid gray; |
|||
padding: 0.5em; |
|||
font-size: 12px; |
|||
margin: 0.2em; |
|||
cursor: pointer; |
|||
word-break: keep-all; |
|||
} |
|||
|
|||
.label.active { |
|||
|
|||
} |
|||
|
|||
.apps { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.app { |
|||
margin-bottom: 1em; |
|||
transition: all 0.3s; |
|||
cursor: pointer; |
|||
border: 1px solid transparent; |
|||
padding: 1em; |
|||
} |
|||
|
|||
.app:hover { |
|||
border-color: #2D93CA; |
|||
} |
|||
|
|||
.app img { |
|||
width: 100%; |
|||
height:48px; |
|||
} |
|||
|
|||
.app .title { |
|||
font-size: 14px; |
|||
text-align: center; |
|||
line-height: 16px; |
|||
height: 32px; |
|||
overflow: hidden; |
|||
margin-top: 1em; |
|||
} |
|||
@ -0,0 +1,79 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="cn"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> |
|||
<script src="../../yl.app.js"></script> |
|||
<title>示例-APP引导安装</title> |
|||
<style> |
|||
body{ |
|||
padding: 0; |
|||
margin:0; |
|||
} |
|||
.left{float: left} |
|||
.clear{clear: both} |
|||
.btn{ |
|||
padding: 1.5em; |
|||
color: rgb(30,158,116); |
|||
width: 16em; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
margin: 2em auto; |
|||
border: 1px solid rgb(30,158,116); |
|||
transition: all 0.3s; |
|||
} |
|||
.btn:hover{ |
|||
border-radius: 1em; |
|||
color: rgb(36, 190, 139); |
|||
} |
|||
#header{ |
|||
color: lightgray; |
|||
text-align: center; |
|||
background-color: rgb(51,51,51); |
|||
padding: 40px; |
|||
|
|||
} |
|||
#title{ |
|||
font-size: 32px; |
|||
font-weight: bold; |
|||
} |
|||
#sub-title{ |
|||
margin-top: 2em; |
|||
} |
|||
#body{ |
|||
padding: 2em; |
|||
} |
|||
#preview{ |
|||
width: 30%; |
|||
display: block; |
|||
} |
|||
#content{ |
|||
width: 60%; |
|||
margin-left: 5%; |
|||
} |
|||
@media screen and (max-width: 768px) { |
|||
|
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div id="header"> |
|||
<div id="title">APP名称</div> |
|||
<div id="sub-title">APP副标题</div> |
|||
<div class="btn">立即安装</div> |
|||
</div> |
|||
<div id="body"> |
|||
<img id="preview" class="left" src="./preview.jpg"/> |
|||
<div id="content" class="left"> |
|||
<p>介绍性文字</p> |
|||
<ul> |
|||
<li>特性1</li> |
|||
<li>特性2</li> |
|||
<li>特性3</li> |
|||
</ul> |
|||
</div> |
|||
<div class="clear"></div> |
|||
</div> |
|||
|
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,100 @@ |
|||
html,body{ |
|||
margin: 0; |
|||
padding: 0; |
|||
height: 100%; |
|||
background: linear-gradient(to left top,#4CAF50, #2196F3); |
|||
} |
|||
.clear{ |
|||
clear: both;} |
|||
#app{ |
|||
width:80%; |
|||
max-width: 720px; |
|||
height:80%; |
|||
position: absolute; |
|||
top:50%; |
|||
left:50%; |
|||
border-radius: 5px; |
|||
-webkit-transform: translate(-50%,-50%); |
|||
-moz-transform: translate(-50%,-50%); |
|||
transform:translate(-50%,-50%); |
|||
} |
|||
#url-box,#btn-go{ |
|||
color: white; |
|||
height: 40px; |
|||
font-size: 16px; |
|||
line-height: 40px; |
|||
float: left; |
|||
transition: all 0.3s; |
|||
box-sizing: border-box; |
|||
overflow: hidden; |
|||
border: 1px solid rgba(255, 255, 255, 0.54); |
|||
} |
|||
#url-box{ |
|||
width: 60%; |
|||
outline: none; |
|||
border-radius: 8px 0 0 8px; |
|||
margin-left: calc(20% - 2em); |
|||
} |
|||
#btn-go{ |
|||
width: 3em; |
|||
text-align: center; |
|||
border-left: none; |
|||
border-radius: 0 8px 8px 0; |
|||
cursor: pointer; |
|||
} |
|||
#btn-go:hover { |
|||
background-color: rgba(255, 255, 255, 0.29); |
|||
} |
|||
#url-ipt{ |
|||
border: none; |
|||
background-color: transparent; |
|||
color: inherit;outline: none; |
|||
padding: 0 1.5em; |
|||
width: calc(100% - 3em); |
|||
} |
|||
#history-box{ |
|||
list-style: none; |
|||
color: white; |
|||
padding-left: 0; |
|||
margin-top: 6em; |
|||
max-height: 70%; |
|||
overflow: auto; |
|||
padding-right: 2em; |
|||
} |
|||
#history-box li{ |
|||
line-height: 40px; |
|||
height: 40px; |
|||
} |
|||
#history-box .text-one-line{ |
|||
text-overflow: ellipsis; |
|||
word-break: break-all; |
|||
white-space: nowrap; |
|||
height: 36px; |
|||
line-height: 36px; |
|||
overflow: hidden; |
|||
min-width: 0; |
|||
} |
|||
#history-box .left,#history-box .right{ |
|||
height: inherit; |
|||
line-height: inherit; |
|||
color: rgba(255, 255, 255, 0.53); |
|||
transition: all 0.3s; |
|||
cursor: pointer; |
|||
} |
|||
#history-box .left{ |
|||
width: calc(90% - 12em); |
|||
float: left; |
|||
|
|||
} |
|||
#history-box .left:hover { |
|||
text-decoration: underline; |
|||
color: rgba(255, 255, 255, 0.8); |
|||
} |
|||
#history-box .right{ |
|||
width: 12em; |
|||
float: right; |
|||
text-align: right; |
|||
} |
|||
#history-box .right:hover { |
|||
color: rgba(255, 255, 255, 0.8); |
|||
} |
|||
@ -0,0 +1,134 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="cn"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" |
|||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> |
|||
<link rel="stylesheet" href="../../../res/components/font-awesome-4.7.0/css/font-awesome.min.css" /> |
|||
<script src="../../yl.app.js" ></script> |
|||
<script src="../../../res/components/vue.min.js" ></script> |
|||
<script src="../../../res/components/jquery-2.2.4.min.js" ></script> |
|||
<script src="../../../res/components/jquery.nicescroll.min.js" ></script> |
|||
<link rel="stylesheet" href="./index.css" /> |
|||
<title>浏览器</title> |
|||
</head> |
|||
<body> |
|||
<div id="app"> |
|||
<div id="url-box"> |
|||
<input @keyup.enter="visit()" id="url-ipt" spellcheck="false" autofocus v-model="url" /> |
|||
</div> |
|||
<div id="btn-go" @click="visit()"><i class="fa fa-location-arrow fa-fw"></i></div> |
|||
<div class="clear"></div> |
|||
<ul id="history-box"> |
|||
<li v-for="item in list"> |
|||
<span class="left text-one-line" |
|||
@click="visit(item.url)" |
|||
:title="item.url">{{item.url}}</span> |
|||
<span class="right text-one-line"> |
|||
{{new Date(item.date).format('MM-dd hh:mm')}} |
|||
</span> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<script> |
|||
var storageName='yluiAppsBrowser'; |
|||
function urlFormat(url) { |
|||
url=url.replace(/(^\s*)|(\s*$)/g, ""); |
|||
var preg=/^(https?:\/\/|\.\.?\/|\/\/?)/i; |
|||
if(!preg.test(url)){ |
|||
url='//'+url; |
|||
} |
|||
return url; |
|||
} |
|||
|
|||
function jump(url) { |
|||
// url=urlFormat(url); |
|||
if(YLApp.id){ |
|||
YLApp.eval('setWinData',{ |
|||
url :url, |
|||
urlBar:url |
|||
}) |
|||
}else{ |
|||
try{ |
|||
location.href=url; |
|||
}catch (e){ |
|||
alert('不正确的地址') |
|||
} |
|||
} |
|||
} |
|||
|
|||
var vue=new Vue({ |
|||
el:"#app", |
|||
data:{ |
|||
url:"", |
|||
list:[], |
|||
}, |
|||
created:function () { |
|||
Date.prototype.format = function (fmt) { //author: meizz |
|||
if (!fmt) { |
|||
fmt = 'yyyy-MM-dd hh:mm:ss'; |
|||
} |
|||
var o = { |
|||
"M+": this.getMonth() + 1, //月份 |
|||
"d+": this.getDate(), //日 |
|||
"h+": this.getHours(), //小时 |
|||
"m+": this.getMinutes(), //分 |
|||
"s+": this.getSeconds(), //秒 |
|||
"q+": Math.floor((this.getMonth() + 3) / 3), //季度 |
|||
"S": this.getMilliseconds() //毫秒 |
|||
}; |
|||
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); |
|||
for (var k in o) |
|||
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); |
|||
return fmt; |
|||
}; |
|||
if(localStorage[storageName]){ |
|||
this.list=JSON.parse(localStorage[storageName]); |
|||
} |
|||
this.$nextTick(function () { |
|||
$("#history-box").niceScroll({ |
|||
cursorcolor: "#ffffff30", |
|||
cursorwidth: "4px", // 滚动条的宽度，单位：便素 |
|||
cursorborder: "none", // CSS方式定义滚动条边框 |
|||
grabcursorenabled: false, |
|||
}); |
|||
}); |
|||
|
|||
}, |
|||
methods:{ |
|||
save:function () { |
|||
localStorage[storageName]=JSON.stringify(this.list); |
|||
}, |
|||
visit:function (url) { |
|||
url||(url=this.url); |
|||
if(!url) return; |
|||
url= urlFormat(url); |
|||
//查找是否已存在于列表 |
|||
if(this.list.length>0){ |
|||
var found=false,foundIndex=null; |
|||
this.list.forEach(function (t, n) { |
|||
if(found){return} |
|||
if(t.url===url){ |
|||
found=true; |
|||
foundIndex=n; |
|||
} |
|||
}); |
|||
if(found){ |
|||
this.list.splice(foundIndex,1) |
|||
} |
|||
} |
|||
this.list.unshift({ |
|||
url:url, |
|||
date:Date.now() |
|||
}); |
|||
if(this.list.length>50){ |
|||
this.list.pop(); |
|||
} |
|||
this.save(); |
|||
jump(url); |
|||
} |
|||
} |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,43 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="cn"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<title>colorPicker</title> |
|||
<script src="../../components/jquery-2.2.4.min.js"></script> |
|||
<script src="../../components/color-picker/color-picker.js"></script> |
|||
<script src="../../yl.app.js"></script> |
|||
<link type="text/css" rel="stylesheet" href="../../components/color-picker/color-picker.css"/> |
|||
<style> |
|||
html,body{ |
|||
background-color: transparent; |
|||
padding: 0; |
|||
margin: 0; |
|||
overflow: hidden; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div id="picker"></div> |
|||
<script> |
|||
YLApp.onReady(function () { |
|||
var color=YLApp.data.color?YLApp.data.color:'000000'; |
|||
color=color.replace(/^#/,''); |
|||
if(!/^[\da-zA-Z]{6}$/.test(color)){ |
|||
color="000000" |
|||
} |
|||
$('#picker').colpick({ |
|||
flat:true, |
|||
layout:'hex', |
|||
color:color, |
|||
submit:0, |
|||
onChange:function(hsb,hex,rgb,el){ |
|||
if(YLApp.data.parent){ |
|||
var color="#"+hex; |
|||
YLApp.emit('setColorFromColorPicker',color,YLApp.data.parent); |
|||
} |
|||
} |
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@ |
|||
2.0.8 |
|||
@ -0,0 +1,20 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="cn"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<title>Server</title> |
|||
<script src="../../../res/yl.app.js"></script> |
|||
<style> |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<h1>Server</h1> |
|||
<script> |
|||
YLApp.onReady(function () { |
|||
// YLApp.eval('import',null,function (data) { |
|||
// |
|||
// }) |
|||
}) |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,23 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="cn"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<title>Server</title> |
|||
<script src="../../../res/yl.app.js"></script> |
|||
<style> |
|||
body{background-color: white} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<h1>Server</h1> |
|||
<script> |
|||
YLApp.onReady(function () { |
|||
var json= |
|||
|
|||
YLApp.eval('import',null,function (data) { |
|||
console.log(YLApp.id,data) |
|||
}) |
|||
}) |
|||
</script> |
|||
</body> |
|||
</html> |
|||
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,444 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="cn"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<title>系统设置</title> |
|||
<script src="../../components/vue.min.js"></script> |
|||
<script src="../../js/yl-vue-component-icon.js"></script> |
|||
<script src="../../js/Yuri2.js"></script> |
|||
<script src="../../components/jquery-2.2.4.min.js"></script> |
|||
<script src="../../components/clipboard-polyfill.js"></script> |
|||
<script src="../../components/layer-v3.0.3/layer/layer.full.js"></script> |
|||
<link type="text/css" rel="stylesheet" href="../../components/font-awesome-4.7.0/css/font-awesome.min.css"/> |
|||
<!-- element-ui --> |
|||
<link rel="stylesheet" href="../element-ui/index.css"> |
|||
<script src="../element-ui/index.js"></script> |
|||
<script src="../../components/contextMenu/contextMenu.js"></script> |
|||
<link rel="stylesheet" href="../../components/contextMenu/contextMenu.css"> |
|||
<link rel="stylesheet" href="../../css/yl-layer-skin.css"> |
|||
<link rel="stylesheet" href="./style.css"> |
|||
<script src="../../yl.app.js"></script> |
|||
<!--图标模板--> |
|||
<script type="text/x-template" id="tpl-icon"> |
|||
<div :class="[drawer?'icon-drawer-pre':'icon']" :style="{background:nobg?'none':icon.bg}"> |
|||
<template v-if="icon.type==='str'"> |
|||
{{icon.content.substr(0, 1)}} |
|||
</template> |
|||
<i v-if="icon.type==='fa'" class="fa fa-fw" |
|||
:class="[ 'fa-'+icon.content ]"> |
|||
</i> |
|||
<template v-if="icon.type==='img'"> |
|||
<img ondragstart="return false;" class="fa" :src="img?img:icon.content"/> |
|||
</template> |
|||
<div class="badge" v-show="badge">{{badgeText(badge)}}</div> |
|||
</div> |
|||
</script> |
|||
<script src="../../js/yl-vue-component-icon.js"></script> |
|||
</head> |
|||
<body> |
|||
<div id="app" :class="{'small-screen':isSmallScreen}"> |
|||
<div class="tab-title"><i class="fa fa-gear fa-fw"></i> {{YL.lang("SystemOptions")}}</div> |
|||
<div class="tab-left"> |
|||
<ul class="tab-nav"> |
|||
<li v-for="(nav,id) in navs" |
|||
@click="if(!nav.disable) navActive=id" |
|||
:style="navStyle(id)" |
|||
:class="{active:id===navActive,disable:nav.disable}"> |
|||
<i class="fa fa-fw" :class="[ 'fa-'+nav.icon ]"></i>{{nav.text}} |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<div class="tab-right" :class="{active:'app-manager'===navActive}"> |
|||
<div class="show"> |
|||
<h1>{{YL.lang('AppManager')}}</h1> |
|||
<div id="app-manager"> |
|||
<div> |
|||
<input style="padding: 0.5em; width: calc(100% - 7.5em);margin-bottom: 1em; max-width: 36em;outline: none" |
|||
v-model="appSearchWords" |
|||
:placeholder="YL.lang('Search')+'/'+YL.lang('Create')+' '+YL.lang('Application')+'...'"/> |
|||
<el-button @click="appCreate(appSearchWords)" type="primary" size="small" icon="el-icon-plus" >{{YL.lang('Application')}}</el-button> |
|||
<table class="list" style="table-layout: fixed;width: 100%"> |
|||
<tr class="item"> |
|||
<td class="text" width="120" style="font-weight: bold">{{YL.lang('Application')}}</td> |
|||
<td class="text" width="120" style="font-weight: bold">ID</td> |
|||
<td class="text" width="110" style="font-weight: bold">{{YL.lang('Description')}}</td> |
|||
<td class="text" width="50" style="font-weight: bold">{{YL.lang('Copyright')}}</td> |
|||
<td class="text" width="40" style="font-weight: bold">{{YL.lang('AutoRun')}}</td> |
|||
</tr> |
|||
<tr v-for="(app,id) in apps" class="item" |
|||
v-show="appSearchMatch(id)" |
|||
@contextMenu="appContextMenu(id,$event)"> |
|||
<td class="text title" @dblclick="appSetting=app"> |
|||
<yl-icon :icon="app.icon" :img="urlFix(app.icon.content)"></yl-icon> |
|||
<span style="padding-left: 0.5em" :title="app.title">{{app.title}}</span> |
|||
</td> |
|||
<td class="text" :title="id">{{id}}</td> |
|||
<td class="text" :title="app.desc?app.desc:YL.lang('NoMoreDescription')">{{app.desc?app.desc:YL.lang('NoMoreDescription')}}</td> |
|||
<td class="text" :title="app.poweredBy">{{app.poweredBy}}</td> |
|||
<td class="text">{{renderAutoRun(app.autoRun)}}</td> |
|||
</tr> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
<!--抽屉渲染--> |
|||
<transition name="opacity"> |
|||
<div class="shader" v-if="appSetting" @click.self="appSetting=null" |
|||
style="z-index:1"> |
|||
<div class="drawer"> |
|||
<el-form ref="form" :label-position="isSmallScreen?'top':'left'" :model="appSettingForm" label-width="8em" size="mini" |
|||
style="padding:1em ;overflow: auto;height: calc(100% - 2em);"> |
|||
<el-form-item :label="YL.lang('Title')"> |
|||
<el-input spellcheck="false" v-model="appSetting.title" size="mini"></el-input> |
|||
</el-form-item> |
|||
<el-form-item :label="YL.lang('Version')"> |
|||
<el-input spellcheck="false" v-model="appSetting.version" size="mini"></el-input> |
|||
</el-form-item> |
|||
<el-form-item :label="YL.lang('Description')"> |
|||
<el-input spellcheck="false" v-model="appSetting.desc" size="mini"></el-input> |
|||
</el-form-item> |
|||
<el-form-item :label="YL.lang('Copyright')"> |
|||
<el-input spellcheck="false" v-model="appSetting.poweredBy" size="mini"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="URL"> |
|||
<el-input spellcheck="false" v-model="appSetting.url" size="mini" :placeholder="YL.lang('CanBeEmpty')"></el-input> |
|||
</el-form-item> |
|||
<el-form-item :label="YL.lang('Tile')+' '+'URL'"> |
|||
<el-input spellcheck="false" v-model="appSetting.customTile" size="mini" :placeholder="YL.lang('CanBeEmpty')"></el-input> |
|||
</el-form-item> |
|||
<el-form-item :label="YL.lang('OpenMode')"> |
|||
<el-select v-model="appSetting.openMode" :placeholder="YL.lang('PleaseChoose')" size="mini"> |
|||
<el-option :label="YL.lang('Normal')" value="normal"></el-option> |
|||
<el-option :label="YL.lang('Maximize')" value="max"></el-option> |
|||
<el-option :label="YL.lang('Minimize')" value="min"></el-option> |
|||
<el-option :label="YL.lang('Outer')" value="outer"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item :label="YL.lang('IconType')"> |
|||
<el-select v-model="appSetting.icon.type" :placeholder="YL.lang('PleaseChoose')" size="mini"> |
|||
<el-option label="Font Awesome" value="fa"></el-option> |
|||
<el-option :label="YL.lang('Initial')" value="str"></el-option> |
|||
<el-option :label="YL.lang('Image')" value="img"></el-option> |
|||
</el-select> |
|||
<el-button @click="YL.open('ylui-fa')" v-show="appSetting.icon.type === 'fa'" plain size="mini" icon="el-icon-search" style="margin-left: 10px"></el-button> |
|||
<el-button @click="YL.open('ylui-image-host')" v-show="appSetting.icon.type === 'img'" plain size="mini" icon="el-icon-upload" ></el-button> |
|||
</el-form-item> |
|||
<el-form-item :label="YL.lang('IconContent')"> |
|||
<el-input spellcheck="false" v-model="appSetting.icon.content" size="mini"></el-input> |
|||
</el-form-item> |
|||
<el-form-item :label="YL.lang('IconBgColor')"> |
|||
<el-row> |
|||
<el-col :span="2"> |
|||
<div @click="YL.open('yl-color-picker',{data:{color:appSetting.icon.bg,parent:YLApp.id}})" :style="{background:appSetting.icon.bg}" style="width: 90%;height: 27px;margin-top: 1px;border-radius: 3px;box-sizing: border-box;border: 1px solid darkgray;"> </div> |
|||
</el-col> |
|||
<el-col :span="22"> |
|||
<el-input spellcheck="false" v-model="appSetting.icon.bg" size="mini" style="width:147px" :placeholder="YL.lang('LegalCSSColor')"></el-input> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form-item> |
|||
<el-form-item :label="YL.lang('AutoRun')"> |
|||
<el-button-group> |
|||
<el-button @click="reduceAutoRunLevel(appSetting)" plain icon="el-icon-remove" size="mini">{{YL.lang('Degrade')}}</el-button> |
|||
<el-button plain size="mini">{{YL.lang('Current')}}:{{renderAutoRun(appSetting.autoRun)}}</el-button> |
|||
<el-button @click="increaseAutoRunLevel(appSetting)" plain icon="el-icon-circle-plus" size="mini">{{YL.lang('Upgrade')}}</el-button> |
|||
</el-button-group> |
|||
</el-form-item> |
|||
<el-form-item :label="YL.lang('Superscript')"> |
|||
<el-input-number v-model="appSetting.badge" size="mini" :min="0" :max="999"></el-input-number> |
|||
</el-form-item> |
|||
<el-form-item :label="YL.lang('Position')+' - '+YL.lang('AutoOffset')"> |
|||
<el-switch |
|||
style="display: block;position: relative;top: 4px;width: 40px;" |
|||
v-model="appSetting.position.autoOffset" |
|||
inactive-color="gray"> |
|||
</el-switch> |
|||
</el-form-item> |
|||
<el-form-item :label="YL.lang('Position')+' - '+YL.lang('LateralAlignment')"> |
|||
<el-switch |
|||
v-model="appSetting.position.left" |
|||
:active-text="YL.lang('AlignLeft')" |
|||
:inactive-text="YL.lang('AlignRight')" |
|||
inactive-color="#409EFF"> |
|||
</el-switch> |
|||
</el-form-item> |
|||
<el-form-item :label="YL.lang('Position')+' - '+YL.lang('VerticalAlignment')"> |
|||
<el-switch |
|||
v-model="appSetting.position.top" |
|||
:active-text="YL.lang('AlignTop')" |
|||
:inactive-text="YL.lang('AlignBottom')" |
|||
inactive-color="#409EFF"> |
|||
</el-switch> |
|||
</el-form-item> |
|||
<el-form-item :label="YL.lang('Position')+' - '+YL.lang('LateralOffset')"> |
|||
<el-input v-model="appSetting.position.x" size="mini" |
|||
:placeholder="YL.lang('TipsOfSizeSetting')"></el-input> |
|||
</el-form-item> |
|||
<el-form-item :label="YL.lang('Position')+' - '+YL.lang('VerticalOffset')"> |
|||
<el-input v-model="appSetting.position.y" size="mini" |
|||
:placeholder="YL.lang('TipsOfSizeSetting')"></el-input> |
|||
</el-form-item> |
|||
<el-form-item :label="YL.lang('Size')+' - '+YL.lang('Width')"> |
|||
<el-input v-model="appSetting.size.width" size="mini" |
|||
:placeholder="YL.lang('TipsOfSizeSetting')"></el-input> |
|||
</el-form-item> |
|||
<el-form-item :label="YL.lang('Size')+' - '+YL.lang('Height')"> |
|||
<el-input v-model="appSetting.size.height" size="mini" |
|||
:placeholder="YL.lang('TipsOfSizeSetting')"></el-input> |
|||
</el-form-item> |
|||
<el-form-item :label="YL.lang('DisplayMode')"> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-switch |
|||
v-model="appSetting.plugin" |
|||
:active-text="YL.lang('PluginMode')" |
|||
inactive-color="gray"> |
|||
</el-switch> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-switch |
|||
v-model="appSetting.single" |
|||
:active-text="YL.lang('SingleWindow')" |
|||
inactive-color="gray"> |
|||
</el-switch> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-switch |
|||
v-model="appSetting.addressBar" |
|||
:active-text="YL.lang('DisplayAddressBar')" |
|||
inactive-color="gray"> |
|||
</el-switch> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-switch |
|||
v-model="appSetting.background" |
|||
:active-text="YL.lang('BackMode')" |
|||
inactive-color="gray"> |
|||
</el-switch> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<el-switch |
|||
v-model="appSetting.resizable" |
|||
:active-text="YL.lang('Resizable')" |
|||
inactive-color="gray"> |
|||
</el-switch> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-switch |
|||
v-model="appSetting.urlRandomToken" |
|||
:active-text="YL.lang('UrlRandomToken')" |
|||
inactive-color="gray"> |
|||
</el-switch> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</transition> |
|||
</div> |
|||
</div> |
|||
<div class="tab-right" :class="{active:'colors'===navActive}"> |
|||
<div class="show" id="colors"> |
|||
<h1>{{YL.lang('Color')}}</h1> |
|||
<div class="color-choose"> |
|||
<div v-for="color in colors" class="color-block" |
|||
@click="colorChoose=color" |
|||
:style="{'background-color': color}"></div> |
|||
</div> |
|||
<div> |
|||
<div @click="YL.open('yl-color-picker',{data:{color:colorChoose,parent:YLApp.id}})" style="float: left;margin-right:1em;width:4em;height:calc(2em + 2px);" |
|||
:style="{'background-color': colorChoose}"></div> |
|||
<input style="width:103px;margin-right: 20px;float: left;padding: 0.5em;outline: none;" |
|||
:disabled="autoThemeColor" v-model="colorChoose"/> |
|||
<el-switch |
|||
style="display: block;position: relative;top: 4px;float: left;width: 200px;" |
|||
v-model="autoThemeColor" |
|||
:active-text="YL.lang('PickFromBgAuto')" |
|||
inactive-color="gray"> |
|||
</el-switch> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="tab-right" :class="{active:'wallpaper'===navActive}"> |
|||
<div class="show"> |
|||
<h1>{{YL.lang('Wallpaper')}}</h1> |
|||
<img id="img-wallpaper-preview" width="336" height="185" onerror="this.src='./error.png'" :src="wallpaperNowFixed"/> |
|||
<div> |
|||
<el-switch |
|||
style="" |
|||
v-model="wallpaperBlur" |
|||
:active-text="YL.lang('Blur')" |
|||
inactive-color="gray"> |
|||
</el-switch> |
|||
<el-switch |
|||
style="margin-left: 20px" |
|||
v-model="wallpaperSlide" |
|||
:active-text="YL.lang('Slide')" |
|||
inactive-color="gray"> |
|||
</el-switch> |
|||
</div> |
|||
<div v-show="wallpaperSlide"> |
|||
<div style="margin-top: 20px"> |
|||
<el-radio-group v-model="wallpaperSlideRandom" size="small"> |
|||
<el-radio-button :label="false">{{YL.lang('PlaySequentially')}}</el-radio-button> |
|||
<el-radio-button :label="true">{{YL.lang('PlayRandomly')}}</el-radio-button> |
|||
</el-radio-group> |
|||
</div> |
|||
<div style="margin-top: 20px"> |
|||
{{YL.lang('SwitchingFrequency')}} |
|||
<el-select v-model="wallpaperSlideItv" size="small" :placeholder="YL.lang('PleaseChoose')"> |
|||
<el-option :label="'1 '+YL.lang('Minutes')" :value="1"></el-option> |
|||
<el-option :label="'10 '+YL.lang('Minutes')" :value="10"></el-option> |
|||
<el-option :label="'30 '+YL.lang('Minutes')" :value="30"></el-option> |
|||
<el-option :label="'1 '+YL.lang('Hours')" :value="60"></el-option> |
|||
<el-option :label="'6 '+YL.lang('Hours')" :value="360"></el-option> |
|||
<el-option :label="'24 '+YL.lang('Hours')" :value="1440"></el-option> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
<p> |
|||
<input class="ipt-yl" v-model="wallpaperAddUrl" :placeholder="YL.lang('AddPictureOnline')"/> |
|||
<el-button @click="btnAddBgClick" size="medium" |
|||
style="width: 81px;border-radius: inherit;font-size: 12px;">{{YL.lang('Add')}} |
|||
</el-button> |
|||
<el-button @click="YL.open('ylui-image-host')" |
|||
style="border-radius: inherit;margin-left: 13px;font-size: 12px;" |
|||
size="medium" icon="el-icon-upload" ></el-button> |
|||
</p> |
|||
|
|||
<div class="img-bg-preview"> |
|||
<img v-for="bg in wallpapers" |
|||
:style="{'border-color':themeColorNow}" |
|||
@click="YL.vue.configs.wallpaper=bg.image" |
|||
onerror="this.src='./error.png'" |
|||
@contextMenu="imgContextMenu(bg,$event)" |
|||
:src="urlFix(bg.preview?bg.preview:bg.image)"/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="tab-right" :class="{active:'data-manage'===navActive}"> |
|||
<div class="show"> |
|||
<h1>{{YL.lang('DataManager')}}</h1> |
|||
<div style="min-width: 250px;overflow-x: hidden"> |
|||
<el-button-group> |
|||
<el-button plain :type="dataChanged?'primary':''" size="small" @click="layer.msg(YL.lang('DataHasBeenRefreshed'), {icon: 1});refreshData();" icon="el-icon-refresh"><span class="small-screen-hidden">{{YL.lang('Refresh')}}</span></el-button> |
|||
<el-button plain size="small" @click="enableData" :loading="btnEnableLoading" icon="el-icon-sort"><span class="small-screen-hidden">{{YL.lang('TakeEffect')}}</span></el-button> |
|||
<el-button plain size="small" @click="btnClipboard" icon="el-icon-tickets"><span class="small-screen-hidden">{{YL.lang('Copy')}}</span></el-button> |
|||
<el-button plain size="small" @click="$('#ipt-json-file').click()" icon="el-icon-upload2"><input type="file" |
|||
@change="jsonImport" |
|||
id="ipt-json-file"/><span class="small-screen-hidden">{{YL.lang('Import')}}</span></el-button> |
|||
<el-button plain size="small" @click="jsonExport" icon="el-icon-download"><span class="small-screen-hidden">{{YL.lang('Export')}}</span></el-button> |
|||
</el-button-group> |
|||
</div> |
|||
<textarea style="margin: 5px 0 " id="text-data" v-model="textData" spellcheck="false"></textarea> |
|||
</div> |
|||
</div> |
|||
<div class="tab-right" :class="{active:'others'===navActive}"> |
|||
<div class="show"> |
|||
<h1>{{YL.lang('Others')}}</h1> |
|||
<p> |
|||
<el-switch |
|||
v-model="topTaskBar" |
|||
:active-text="YL.lang('TopTaskBar')" |
|||
inactive-color="gray"> |
|||
</el-switch> |
|||
</p> |
|||
<div style="margin-top: 20px"> |
|||
{{YL.lang('MaxNumberOfWindows')}} |
|||
<el-select v-model="openMax" size="small" :placeholder="YL.lang('PleaseChoose')"> |
|||
<el-option label="6" :value="6"></el-option> |
|||
<el-option label="9" :value="9"></el-option> |
|||
<el-option label="12" :value="12"></el-option> |
|||
<el-option label="15" :value="15"></el-option> |
|||
<el-option label="18" :value="18"></el-option> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="tab-right" :class="{active:'YLUI'===navActive}"> |
|||
<div class="show"> |
|||
<h1>YLUI</h1> |
|||
<div style="margin: 15px auto;" :style="{color:themeColorNow,'font-size':isSmallScreen?'22px':'68px'}"> |
|||
<i class=" fa " :class="[ 'fa-'+YL.info.iconBtnStart ]"></i> {{YL.info.softwareName}} |
|||
</div> |
|||
<table class="tb-about-us"> |
|||
<tr> |
|||
<td :width="isSmallScreen?'100':'150'">{{YL.lang('Version')}}</td> |
|||
<td>{{YL.info.version}}</td> |
|||
</tr> |
|||
<tr> |
|||
<td>{{YL.lang('Authorization')}}</td> |
|||
<td>{{YL.static.authorization}}</td> |
|||
</tr> |
|||
<tr> |
|||
<td>{{YL.lang('SerialNumber')}}</td> |
|||
<td>{{YL.static.serialNumber}}</td> |
|||
</tr> |
|||
<tr> |
|||
<td>{{YL.lang('Author')}}</td> |
|||
<td>{{YL.info.author}}</td> |
|||
</tr> |
|||
<tr> |
|||
<td>{{YL.lang('Contact')}}</td> |
|||
<td>{{YL.info.contactInformation}}</td> |
|||
</tr> |
|||
<tr> |
|||
<td>{{YL.lang('OfficialWebsite')}}</td> |
|||
<td> |
|||
<a style="text-decoration: underline;cursor: pointer" onclick="YLApp.open(YL.info.officialWebsite)">{{YL.info.officialWebsite}}</a> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>{{YL.lang('Copyright')}}</td> |
|||
<td style="font-size: 12px">{{YL.info.copyrightDetail}}</td> |
|||
</tr> |
|||
<tr v-if="YL.static.others"> |
|||
<td>{{YL.lang('OtherStatements')}}</td> |
|||
<td style="font-size: 12px">{{YL.info.otherStatements}}</td> |
|||
</tr> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
<div class="tab-right" :class="{active:'aboutUs'===navActive}"> |
|||
<div class="show"> |
|||
<h1>{{YL.lang('AboutUs')}}</h1> |
|||
<div style="margin: 15px auto;" :style="{color:themeColorNow,'font-size':isSmallScreen?'22px':'68px'}"> |
|||
<i class=" fa " :class="[ 'fa-'+YL.static.iconBtnStart ]"></i> {{YL.static.softwareName}} |
|||
</div> |
|||
<table class="tb-about-us"> |
|||
<tr> |
|||
<td :width="isSmallScreen?'100':'150'">{{YL.lang('Version')}}</td> |
|||
<td>{{YL.static.version}}</td> |
|||
</tr> |
|||
<tr> |
|||
<td>{{YL.lang('Author')}}</td> |
|||
<td>{{YL.static.author}}</td> |
|||
</tr> |
|||
<tr> |
|||
<td>{{YL.lang('Contact')}}</td> |
|||
<td>{{YL.static.contactInformation}}</td> |
|||
</tr> |
|||
<tr> |
|||
<td>{{YL.lang('OfficialWebsite')}}</td> |
|||
<td> |
|||
<a style="text-decoration: underline;cursor: pointer" onclick="YLApp.open(YL.static.officialWebsite)">{{YL.static.officialWebsite}}</a> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>{{YL.lang('Copyright')}}</td> |
|||
<td style="font-size: 12px">{{YL.static.copyrightDetail}}</td> |
|||
</tr> |
|||
<tr v-if="YL.static.others"> |
|||
<td>{{YL.lang('OtherStatements')}}</td> |
|||
<td style="font-size: 12px">{{YL.static.otherStatements}}</td> |
|||
</tr> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<script src="./index.js"></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,457 @@ |
|||
var YL = parent.YL; |
|||
YLApp.onReady(function () { |
|||
YLApp.onEvent(function (e) { |
|||
switch (e.event) { |
|||
case "setColorFromColorPicker": |
|||
var color = e.data; |
|||
if ('colors' === vue.navActive) { |
|||
vue.colorChoose = color; |
|||
|
|||
} |
|||
if ('app-manager' === vue.navActive) { |
|||
vue.appSetting.icon.bg = color; |
|||
} |
|||
break; |
|||
case "dataChanged" : |
|||
if(e.from===0){ |
|||
vue.ondataChanged(); |
|||
} |
|||
} |
|||
}); |
|||
|
|||
var vue = new Vue({ |
|||
el: "#app", |
|||
created: function () { |
|||
document.body.focus(); |
|||
var that = this; |
|||
if(YL.static.changeable&&YL.static.dataCenter){ |
|||
this.loadApps(); |
|||
if (YLApp.data.nav) { |
|||
this.navActive = YLApp.data.nav; |
|||
} |
|||
if (YLApp.data.appSetting) { |
|||
this.appSetting = this.apps[YLApp.data.appSetting]; |
|||
} |
|||
this.syncData(); |
|||
this.refreshData(); |
|||
}else{ |
|||
this.navActive ="aboutUs"; |
|||
} |
|||
var fnResize = function () { |
|||
var clientSize = Yuri2.getClientSize(); |
|||
that.isSmallScreen = clientSize.width <= 768; |
|||
}; |
|||
fnResize(); |
|||
$(window).resize(fnResize); |
|||
$("body").css("opacity", 1); |
|||
}, |
|||
data: { |
|||
navActive: 'app-manager', |
|||
navs: { |
|||
"app-manager": { |
|||
icon: "puzzle-piece", |
|||
text: YL.lang('AppManager'), |
|||
disable:!YL.static.changeable |
|||
}, |
|||
"colors": { |
|||
icon: "paint-brush", |
|||
text: YL.lang('Color'), |
|||
disable:!YL.static.changeable |
|||
}, |
|||
"wallpaper": { |
|||
icon: "image", |
|||
text: YL.lang('Wallpaper'), |
|||
disable:!YL.static.changeable |
|||
}, |
|||
"others": { |
|||
icon: "tasks", |
|||
text: YL.lang('Others'), |
|||
disable:!YL.static.changeable |
|||
}, |
|||
"data-manage": { |
|||
icon: "database", |
|||
text: YL.lang('DataManager'), |
|||
disable:!(YL.static.changeable&&YL.static.dataCenter) |
|||
}, |
|||
"YLUI": { |
|||
icon: "yoast", |
|||
text: 'YLUI', |
|||
}, |
|||
"aboutUs": { |
|||
icon: "info-circle", |
|||
text: YL.lang('AboutUs'), |
|||
}, |
|||
}, |
|||
apps: {}, |
|||
appSearchWords: "", |
|||
colors: [ |
|||
"#FFB900", |
|||
"#FF8C00", |
|||
"#F7630C", |
|||
"#CA5010", |
|||
"#DA3B01", |
|||
"#EF6950", |
|||
"#D13438", |
|||
"#D13438", |
|||
"#E74856", |
|||
"#E81123", |
|||
"#EA005E", |
|||
"#C30052", |
|||
"#E3008C", |
|||
"#BF0077", |
|||
"#C239B3", |
|||
"#9A0089", |
|||
"#0078D7", |
|||
"#0063B1", |
|||
"#8E8CD8", |
|||
"#6B69D6", |
|||
"#8764B8", |
|||
"#744DA9", |
|||
"#B146C2", |
|||
"#881798", |
|||
"#0099BC", |
|||
"#2D7D9A", |
|||
"#00B7C3", |
|||
"#038387", |
|||
"#00B294", |
|||
"#018574", |
|||
"#00CC6A", |
|||
"#10893E", |
|||
"#7A7574", |
|||
"#5D5A58", |
|||
"#68768A", |
|||
"#515C6B", |
|||
"#567C73", |
|||
"#486860", |
|||
"#498205", |
|||
"#107C10", |
|||
"#767676", |
|||
"#4C4A48", |
|||
"#69797E", |
|||
"#4A5459", |
|||
"#647C64", |
|||
"#525E54", |
|||
"#847545", |
|||
"#7E735F", |
|||
], |
|||
colorChoose: '', |
|||
autoThemeColor: false, |
|||
themeColorNow: '', |
|||
wallpaperNow: '', |
|||
wallpapers: [], |
|||
wallpaperBlur: false, |
|||
wallpaperSlide: false, |
|||
wallpaperSlideRandom: false, |
|||
wallpaperSlideItv: 5, |
|||
wallpaperAddUrl: '', |
|||
openMax: 9, |
|||
topTaskBar: false, |
|||
activeAppId: null, |
|||
textData: '', |
|||
btnEnableLoading: false, |
|||
appSetting: null,//app高级配置
|
|||
appSettingForm: {}, |
|||
isSmallScreen: false,//是否小屏幕
|
|||
dataChanged:false, |
|||
}, |
|||
watch: { |
|||
appSetting: { |
|||
handler: function (val, oldVal) { |
|||
if (!val) { |
|||
YL.vue.$set(YL.vue, 'apps', Yuri2.jsonDeepCopy(this.apps)); |
|||
layer.msg("已保存"); |
|||
} |
|||
} |
|||
}, |
|||
colorChoose: { |
|||
handler: function (val, oldVal) { |
|||
if (!this.autoThemeColor) { |
|||
YL.vue.configs.themeColor = val; |
|||
} |
|||
} |
|||
}, |
|||
autoThemeColor: { |
|||
handler: function (val, oldVal) { |
|||
YL.vue.configs.autoThemeColor = val; |
|||
if (val) |
|||
YL.vue.backgroundToThemeColor(); |
|||
else |
|||
YL.vue.configs.themeColor = this.colorChoose; |
|||
} |
|||
}, |
|||
wallpaperBlur: { |
|||
handler: function (val, oldVal) { |
|||
YL.vue.configs.wallpaperBlur = this.wallpaperBlur; |
|||
} |
|||
}, |
|||
wallpaperSlide: { |
|||
handler: function (val, oldVal) { |
|||
YL.vue.configs.wallpaperSlide = this.wallpaperSlide; |
|||
} |
|||
}, |
|||
wallpaperSlideRandom: { |
|||
handler: function (val, oldVal) { |
|||
YL.vue.configs.wallpaperSlideRandom = this.wallpaperSlideRandom; |
|||
} |
|||
}, |
|||
wallpaperSlideItv: { |
|||
handler: function (val, oldVal) { |
|||
YL.vue.configs.wallpaperSlideItv = this.wallpaperSlideItv; |
|||
} |
|||
}, |
|||
topTaskBar: { |
|||
handler: function (val, oldVal) { |
|||
YL.vue.configs.topTaskBar = this.topTaskBar; |
|||
} |
|||
}, |
|||
openMax: { |
|||
handler: function (val, oldVal) { |
|||
YL.vue.configs.openMax = this.openMax; |
|||
} |
|||
}, |
|||
}, |
|||
computed: { |
|||
// 计算属性的 getter
|
|||
wallpaperNowFixed: function () { |
|||
return this.urlFix(this.wallpaperNow); |
|||
}, |
|||
}, |
|||
methods: { |
|||
syncData:function () { |
|||
var that=this; |
|||
try { |
|||
var configs = YL.util.dataCopy('configs'); |
|||
that.themeColorNow = configs.themeColor; |
|||
that.autoThemeColor = configs.autoThemeColor; |
|||
that.wallpaperNow = configs.wallpaper; |
|||
that.wallpapers = configs.wallpapers; |
|||
that.wallpaperBlur = configs.wallpaperBlur; |
|||
that.wallpaperSlide = configs.wallpaperSlide; |
|||
that.wallpaperSlideRandom = configs.wallpaperSlideRandom; |
|||
that.wallpaperSlideItv = configs.wallpaperSlideItv; |
|||
that.openMax = configs.openMax; |
|||
that.topTaskBar = configs.topTaskBar; |
|||
if (!that.colorChoose) { |
|||
that.colorChoose = configs.themeColor; |
|||
} |
|||
} catch (e) { |
|||
YL.debug(e) |
|||
} |
|||
}, |
|||
ondataChanged:function () { |
|||
this.dataChanged=true; |
|||
this.syncData(); |
|||
}, |
|||
appCreate: function (title) { |
|||
var id = ''; |
|||
if (/^[\w-.]+$/.test(title) && !this.apps[title]) { |
|||
//可以做id的情况
|
|||
id = title; |
|||
} else { |
|||
do { |
|||
id = 'app-' + YL.util.getID(); |
|||
} while (this.apps[id]) |
|||
} |
|||
var app = YL.util.getAppDataTemplate(); |
|||
app.title = title; |
|||
app.icon.type = 'str'; |
|||
app.icon.content = title; |
|||
this.$set(this.apps,id,app); |
|||
}, |
|||
appContextMenu: function (id, e) { |
|||
var that = this; |
|||
var app = this.apps[id]; |
|||
var menu = [ |
|||
"<span style='color: darkgray'>" + YL.util.getStrFa('pencil') + app.title + "</span>", |
|||
'|', |
|||
[YL.util.getStrFa('play-circle') +YL.lang('Open'), function () { |
|||
YL.open(id); |
|||
}], |
|||
[ |
|||
YL.util.getStrFa('copy') + YL.lang("AddTo"), [ |
|||
[YL.util.getStrFa('desktop') + YL.lang("DesktopIcons"), function () { |
|||
that.appAddToShortcut(id) |
|||
}], |
|||
[YL.util.getStrFa('list-ul') + YL.lang("MainMenu"), function () { |
|||
that.appAddToMenu(id) |
|||
}], |
|||
[YL.util.getStrFa('sliders') + YL.lang("Sidebar"), function () { |
|||
that.appAddToSidebar(id) |
|||
}], |
|||
[YL.util.getStrFa('square') + YL.lang("Tiles"), function () { |
|||
that.appAddToTile(id) |
|||
}], |
|||
] |
|||
], |
|||
[YL.util.getStrFa('cogs') + YL.lang("Advance"), function () { |
|||
that.appSetting = app; |
|||
}], |
|||
'|', |
|||
[YL.util.getStrFa('trash') + YL.lang("Uninstall"), function () { |
|||
that.uninstall(id) |
|||
}], |
|||
]; |
|||
ContextMenu.render(e, menu, this); |
|||
}, |
|||
jsonImport: function () { |
|||
var that = this; |
|||
var el = $("#ipt-json-file"); |
|||
var reader = new FileReader(); |
|||
//将文件以文本形式读入页面
|
|||
reader.readAsText(el[0].files[0], "utf8"); |
|||
reader.onload = function (e) { |
|||
that.textData = e.target.result; |
|||
}; |
|||
}, |
|||
jsonExport: function () { |
|||
var blob = new Blob([this.textData], {type: "text/plain;charset=utf-8"}); |
|||
Yuri2.saveAs(blob, "yl-data.json"); |
|||
}, |
|||
refreshData: function () { |
|||
//读取data
|
|||
var textData = YL.export(); |
|||
this.textData = Yuri2.jsonFormat(textData); // 缩进4个空格
|
|||
this.dataChanged=false; |
|||
}, |
|||
btnClipboard: function () { |
|||
var dt = new clipboard.DT(); |
|||
dt.setData("text/plain", this.textData); |
|||
clipboard.write(dt); |
|||
layer.msg(YL.lang("CopiedToShearPlate")); |
|||
}, |
|||
enableData: function () { |
|||
var that = this; |
|||
this.btnEnableLoading = true; |
|||
setTimeout(function () { |
|||
try { |
|||
var json = JSON.parse(that.textData); |
|||
YL.import(json); |
|||
}catch (e){ |
|||
layer.msg(YL.lang("FormatError")); |
|||
that.btnEnableLoading = false; |
|||
} |
|||
}, 500); |
|||
}, |
|||
renderAutoRun: function (autoRun) { |
|||
try { |
|||
if (autoRun > 0) { |
|||
return "Lv" + Math.floor(autoRun); |
|||
} else { |
|||
return YL.lang("Disabled"); |
|||
} |
|||
} catch (e) { |
|||
return YL.lang("ConfigurationError"); |
|||
} |
|||
}, |
|||
urlFix: function (url) { |
|||
return url[0] === '.' ? "../../../" + url : url; |
|||
}, |
|||
loadApps: function () { |
|||
var apps = YL.util.dataCopy('apps'); |
|||
this.apps = apps; |
|||
}, |
|||
navStyle: function (id) { |
|||
var color = this.themeColorNow; |
|||
return id === this.navActive ? {'color': color, 'border-left': '5px solid ' + color} : {}; |
|||
}, |
|||
uninstall: function (id) { |
|||
var app = this.apps[id]; |
|||
var cfm = layer.confirm(Yuri2.template(YL.lang("UninstallConfirm"),app.title), {skin: "yl"}, function () { |
|||
layer.close(cfm); |
|||
if (YL.uninstall(id)) |
|||
vue.$delete(vue.apps, id); |
|||
}) |
|||
}, |
|||
appOpen: function (id) { |
|||
YL.open(id); |
|||
}, |
|||
appAddToShortcut: function (id) { |
|||
YL.addShortcut(id); |
|||
layer.msg(YL.lang("Added")); |
|||
}, |
|||
appAddToMenu: function (id) { |
|||
YL.addMenuItem(id); |
|||
layer.msg(YL.lang("Added")); |
|||
}, |
|||
appAddToSidebar: function (id) { |
|||
YL.addSidebarBtn(id); |
|||
layer.msg(YL.lang("Added")); |
|||
}, |
|||
appAddToTile: function (id) { |
|||
YL.addTile(id); |
|||
layer.msg(YL.lang("Added")); |
|||
}, |
|||
appSearchMatch: function (id) { |
|||
var app = this.apps[id]; |
|||
var words = this.appSearchWords; |
|||
if (!words) { |
|||
return true; |
|||
} |
|||
var checkList = [ |
|||
id, |
|||
app.title, |
|||
app.desc, |
|||
app.poweredBy, |
|||
this.renderAutoRun(app.autoRun), |
|||
]; |
|||
for (var i in checkList) { |
|||
var item = checkList[i]; |
|||
if (typeof item === 'string' && item.indexOf(words) !== -1) { |
|||
return true; |
|||
} |
|||
} |
|||
return false; |
|||
}, |
|||
btnAutoTheme: function () { |
|||
if (this.autoThemeColor) { |
|||
return {'background': this.themeColorNow, 'color': 'white'}; |
|||
} else { |
|||
return {'background': 'rgb(230,230,230)', 'color': 'black'}; |
|||
} |
|||
}, |
|||
btnAddBgClick: function () { |
|||
var url = this.wallpaperAddUrl; |
|||
if (!url) { |
|||
return |
|||
} |
|||
YL.vue.configs.wallpapers.push({image: url, preview: ""}); |
|||
this.wallpaperAddUrl = ''; |
|||
}, |
|||
imgContextMenu: function (bg, e) { |
|||
var that = this; |
|||
var menu = [ |
|||
[YL.util.getStrFa('play') + YL.lang('Enabled'), function () { |
|||
YL.vue.configs.wallpaper = bg.image; |
|||
}], |
|||
[YL.util.getStrFa('remove') + YL.lang('Delete'), function () { |
|||
var wallpapers = YL.vue.configs.wallpapers; |
|||
for (var i = 0; i < wallpapers.length; i++) { |
|||
if (wallpapers[i].image === bg.image) { |
|||
wallpapers.splice(i, 1); |
|||
return; |
|||
} |
|||
} |
|||
}], |
|||
]; |
|||
ContextMenu.render(e, menu, this); |
|||
}, |
|||
|
|||
_checkAutoRunLevel: function (app) { |
|||
if (isNaN(app.autoRun) || app.autoRun < 0) { |
|||
app.autoRun = 0; |
|||
} |
|||
}, |
|||
reduceAutoRunLevel: function (app) { |
|||
this._checkAutoRunLevel(app); |
|||
app.autoRun--; |
|||
this._checkAutoRunLevel(app); |
|||
}, |
|||
increaseAutoRunLevel: function (app) { |
|||
this._checkAutoRunLevel(app); |
|||
app.autoRun++; |
|||
this._checkAutoRunLevel(app); |
|||
}, |
|||
}, |
|||
}); |
|||
|
|||
}); |
|||
@ -0,0 +1,300 @@ |
|||
.clear { |
|||
clear: both; |
|||
} |
|||
|
|||
.hidden { |
|||
display: none; |
|||
} |
|||
|
|||
html { |
|||
height: 100%; |
|||
} |
|||
|
|||
body { |
|||
padding: 0; |
|||
margin: 0; |
|||
height: 100%; |
|||
line-height: 24px; |
|||
} |
|||
.el-input{ |
|||
max-width: 300px; |
|||
} |
|||
.shader{ |
|||
position: fixed; |
|||
top:0; |
|||
left:0; |
|||
width:100%; |
|||
height:100%; |
|||
background-color: rgba(0,0,0,0.2); |
|||
} |
|||
|
|||
.shader .drawer{ |
|||
position: absolute; |
|||
width: 600px; |
|||
height: 400px; |
|||
left: 50%; |
|||
top: 50%; |
|||
margin-left: -300px; |
|||
margin-top: -200px; |
|||
border: 1px solid darkgrey; |
|||
box-shadow: 0 0 9px gray; |
|||
background-color: white; |
|||
} |
|||
.small-screen .shader .drawer{ |
|||
width: 80%; |
|||
height: 80%; |
|||
top: 10%; |
|||
left: 10%; |
|||
margin-left: 0; |
|||
margin-top: 0; |
|||
} |
|||
|
|||
.small-screen h1{ |
|||
|
|||
} |
|||
.small-screen .small-screen-hidden{ |
|||
display: none; |
|||
margin: 0; |
|||
} |
|||
.ipt-yl { |
|||
width: 10em; |
|||
padding: 8px; |
|||
outline: none; |
|||
border: 1px solid #d8dce5; |
|||
} |
|||
.small-screen .ipt-yl { |
|||
width: 8em; |
|||
} |
|||
#app { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.tab-left { |
|||
position: absolute; |
|||
width: 320px; |
|||
height: calc(100% - 90px); |
|||
font-size: 15px; |
|||
top: 90px; |
|||
overflow: auto; |
|||
} |
|||
.small-screen .tab-left { |
|||
width: 120px; |
|||
font-size: 12px; |
|||
} |
|||
.tab-right { |
|||
position: absolute; |
|||
left: 330px; |
|||
right: 0; |
|||
height: 100%; |
|||
font-size: 15px; |
|||
overflow: auto; |
|||
display: none; |
|||
} |
|||
.small-screen .tab-right { |
|||
left: 130px; |
|||
font-size: 12px; |
|||
} |
|||
.tab-title { |
|||
position: absolute; |
|||
line-height: 50px; |
|||
padding: 0 10px; |
|||
color: #666; |
|||
font-size: 25px; |
|||
top: 16px; |
|||
} |
|||
.small-screen .tab-title{ |
|||
font-size: 18px; |
|||
} |
|||
.tab-left .tab-nav { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
.tab-left .tab-nav li { |
|||
line-height: 50px; |
|||
padding: 0 15px; |
|||
cursor: default; |
|||
} |
|||
.tab-left .tab-nav li.disable { |
|||
color: grey; |
|||
} |
|||
.small-screen .tab-left .tab-nav li { |
|||
line-height: 42px; |
|||
} |
|||
|
|||
.tab-left .tab-nav li.active { |
|||
} |
|||
|
|||
.tab-left .tab-nav li:hover { |
|||
background-color: #E6E6E6; |
|||
} |
|||
|
|||
.tab-left .tab-nav li i { |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
.tab-right .show { |
|||
} |
|||
|
|||
.tab-right .show h1 { |
|||
line-height: 58px; |
|||
font-size: 18px; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.tab-right.active { |
|||
display: block; |
|||
} |
|||
|
|||
body { |
|||
opacity: 0; |
|||
transition: opacity 0.3s; |
|||
} |
|||
|
|||
#app-manager { |
|||
width: 90%; |
|||
max-width:600px; |
|||
} |
|||
|
|||
#app-manager * { |
|||
} |
|||
|
|||
#app-manager .list { |
|||
/*width: 100%;*/ |
|||
} |
|||
|
|||
#app-manager .list .th { |
|||
font-size: 10px; |
|||
line-height: 24px; |
|||
display: inline-block; |
|||
color: #3f3f3f; |
|||
} |
|||
|
|||
#app-manager .list .item { |
|||
padding: 6px; |
|||
position: relative; |
|||
transition: 0.3s all; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
#app-manager .list tr { |
|||
line-height: 30px; |
|||
} |
|||
|
|||
|
|||
#app-manager .list td { |
|||
text-overflow: ellipsis; /* for IE */ |
|||
-moz-text-overflow: ellipsis; /* for Firefox,mozilla */ |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-align: left; |
|||
} |
|||
|
|||
|
|||
#app-manager .list .item:hover { |
|||
background-color: #f3f3f3; |
|||
} |
|||
|
|||
#app-manager .list .item .icon { |
|||
font-size: 18px; |
|||
display: inline-block; |
|||
width: 24px; |
|||
height: 24px; |
|||
position: relative; |
|||
top: 2px; |
|||
line-height: 24px; |
|||
text-align: center; |
|||
box-shadow: 0 0 1px 0 grey; |
|||
color: white; |
|||
} |
|||
|
|||
#app-manager .list .item .icon > img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
#app-manager .list .item .title { |
|||
font-size: 12px; |
|||
line-height: 24px; |
|||
} |
|||
|
|||
#app-manager .list .item .text { |
|||
font-size: 10px; |
|||
line-height: 28px; |
|||
color: gray; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.color-choose { |
|||
width: 384px; |
|||
overflow: auto; |
|||
margin-bottom: 10px; |
|||
} |
|||
.small-screen .color-choose { |
|||
width: 248px; |
|||
} |
|||
#colors .color-choose .color-block { |
|||
float: left; |
|||
margin-right: 2px; |
|||
margin-bottom: 3px; |
|||
width: 46px; |
|||
height: 46px; |
|||
-moz-box-sizing: border-box; |
|||
-webkit-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
.small-screen .color-choose .color-block{ |
|||
width: 36px; |
|||
height: 36px; |
|||
} |
|||
#colors .color-choose .color-block:hover { |
|||
border: 2px solid black; |
|||
} |
|||
#img-wallpaper-preview{ |
|||
width: 336px; |
|||
height: 185px; |
|||
} |
|||
.small-screen #img-wallpaper-preview{ |
|||
width: 90%; |
|||
height: auto; |
|||
} |
|||
.img-bg-preview { |
|||
max-width: 520px; |
|||
} |
|||
|
|||
.img-bg-preview > img { |
|||
float: left; |
|||
display: block; |
|||
width: 80px; |
|||
height: 45px; |
|||
margin-right: 5px; |
|||
margin-bottom: 5px; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.img-bg-preview > img:hover { |
|||
cursor: pointer; |
|||
border: 2px solid; |
|||
} |
|||
|
|||
#text-data { |
|||
outline: none; |
|||
font-size: 10px; |
|||
width: 90%; |
|||
resize: vertical; |
|||
height: 280px; |
|||
} |
|||
|
|||
#ipt-json-file { |
|||
display: none; |
|||
} |
|||
|
|||
.tb-about-us{ |
|||
width: 85%;table-layout: fixed |
|||
} |
|||
|
|||
.tb-about-us td{ |
|||
vertical-align: top; |
|||
word-break: break-all; |
|||
} |
|||
|
After Width: | Height: | Size: 66 KiB |
File diff suppressed because it is too large
@ -0,0 +1,415 @@ |
|||
YL.onReady(function () { |
|||
var lang = YL.static.lang === 'zh-cn' || YL.static.lang === 'zh-tw'? |
|||
{ |
|||
Mon: '星期一', |
|||
MonShort: '一', |
|||
Tues: '星期二', |
|||
TuesShort: '二', |
|||
Wed: '星期三', |
|||
WedShort: '三', |
|||
Thur: '星期四', |
|||
ThurShort: '四', |
|||
Fri: '星期五', |
|||
FriShort: '五', |
|||
Sat: '星期六', |
|||
SatShort: '六', |
|||
Sun: '星期日', |
|||
SunShort: '日', |
|||
Jan: '1月', |
|||
Feb: '2月', |
|||
Mar: '3月', |
|||
Apr: '4月', |
|||
May: '5月', |
|||
June: '6月', |
|||
July: '7月', |
|||
Aug: '8月', |
|||
Sept: '9月', |
|||
Oct: '10月', |
|||
Nov: '11月', |
|||
Dec: '12月', |
|||
}: |
|||
{ |
|||
Mon: 'Monday', |
|||
MonShort: 'Mon', |
|||
Tues: 'Tuesday', |
|||
TuesShort: 'Tues', |
|||
Wed: 'Wednesday', |
|||
WedShort: 'Wed', |
|||
Thur: 'Thursday', |
|||
ThurShort: 'Thur', |
|||
Fri: 'Friday', |
|||
FriShort: 'Fri', |
|||
Sat: 'Saturday', |
|||
SatShort: 'Sat', |
|||
Sun: 'Sunday', |
|||
SunShort: 'Sun', |
|||
Jan: 'Jan', |
|||
Feb: 'Feb', |
|||
Mar: 'Mar', |
|||
Apr: 'Apr', |
|||
May: 'May', |
|||
June: 'June', |
|||
July: 'July', |
|||
Aug: 'Aug', |
|||
Sept: 'Sept', |
|||
Oct: 'Oct', |
|||
Nov: 'Nov', |
|||
Dec: 'Dec', |
|||
}; |
|||
|
|||
var o_box_time = document.getElementById('_box_time'); |
|||
var aDiv_time = o_box_time.getElementsByClassName('div-time'); |
|||
var arrWeek = [lang.Sun, lang.Mon, lang.Tues, lang.Wed, lang.Thur, lang.Fri, lang.Sat]; |
|||
var oCalendar = o_box_time.getElementsByClassName('calendar')[0]; |
|||
var _aStrong = oCalendar.getElementsByTagName('strong'); |
|||
var oDays = oCalendar.getElementsByClassName('_days')[0].getElementsByTagName('ul')[0]; |
|||
var _oHeader = document.getElementsByClassName('_header')[0]; |
|||
var _r_l = _oHeader.getElementsByTagName('span'); |
|||
var _oYears_months = o_box_time.getElementsByClassName('_years_months')[0]; |
|||
var _oYears_months_ul = _oYears_months.getElementsByTagName('ul')[0]; |
|||
var _oNormal = o_box_time.getElementsByClassName('_normal')[0]; |
|||
var _aLi_months = _oYears_months.getElementsByTagName('li'); |
|||
var _delay_time = null; |
|||
var onOff = 0; |
|||
var _oTenYears = o_box_time.getElementsByClassName('_tenyears')[0]; |
|||
var _oTenYears_ul = _oTenYears.firstElementChild; |
|||
var _oTenYears_lis = _oTenYears.getElementsByTagName('li'); |
|||
var _nowDate = new Date(); |
|||
var _setyear = _nowDate.getFullYear(); |
|||
var _setmonth = _nowDate.getMonth(); |
|||
var _setdate = _nowDate.getDate(); |
|||
var _relYear = _setyear; |
|||
var _relMonth = _setmonth; |
|||
var _relDate = _setdate; |
|||
var _temp_ten = 0; |
|||
initDom(); |
|||
showTime(); |
|||
setInterval(showTime, 1000); |
|||
|
|||
function showTime() { |
|||
var date = new Date(); |
|||
var h = date.getHours(); |
|||
var m = date.getMinutes(); |
|||
var s = date.getSeconds(); |
|||
var year = date.getFullYear(); |
|||
var month = date.getMonth() + 1; |
|||
var day = date.getDate(); |
|||
var week = date.getDay(); |
|||
var str; |
|||
str = toZero(h) + ':' + toZero(m) + ':' + toZero(s); |
|||
aDiv_time[0].innerHTML = str; |
|||
str = year + '/' + month + '/' + day + ',' + arrWeek[week]; |
|||
aDiv_time[1].innerHTML = str; |
|||
} |
|||
|
|||
aDiv_time[1].onclick = function () { |
|||
clearTimeout(_delay_time); |
|||
_setyear = _relYear; |
|||
_setmonth = _relMonth; |
|||
_setdate = _relDate; |
|||
showDate(); |
|||
onOff = 0; |
|||
_oYears_months.style.display = 'none'; |
|||
_oNormal.style.display = 'block'; |
|||
_oTenYears.style.display = 'none'; |
|||
for (var i = 0; i < _aLi_months.length; i++) { |
|||
_aLi_months[i].className = ''; |
|||
} |
|||
_aLi_months[_setmonth].className = 'active'; |
|||
}; |
|||
var i; |
|||
for (i = 0; i < 3; i++) { |
|||
_aLi_months[_setmonth + i * 12].className = 'active'; |
|||
} |
|||
for (i = 0; i < _aLi_months.length; i++) { |
|||
(function (n) { |
|||
_aLi_months[n].onclick = function () { |
|||
var i; |
|||
for (i = 0; i < _aLi_months.length; i++) { |
|||
_aLi_months[i].className = ''; |
|||
} |
|||
_setmonth = n % 12; |
|||
for (i = 0; i < _aLi_months.length; i++) { |
|||
_aLi_months[i].className = ''; |
|||
} |
|||
|
|||
for (i = 0; i < 3; i++) { |
|||
_aLi_months[_setmonth + i * 12].className = 'active'; |
|||
} |
|||
console.log(this.offsetLeft, this.offsetTop); |
|||
|
|||
clearTimeout(_delay_time); |
|||
_delay_time = setTimeout(function () { |
|||
_aStrong[0].innerHTML = _setyear + '/' + (_setmonth + 1); |
|||
_oYears_months.style.display = 'none'; |
|||
_oNormal.style.display = 'block'; |
|||
|
|||
|
|||
_fn_block(_oNormal); |
|||
|
|||
_oTenYears.style.display = 'none'; |
|||
// document.title=onOff;
|
|||
showDate(); |
|||
onOff = 0; |
|||
}, 200); |
|||
|
|||
|
|||
} |
|||
})(i); |
|||
} |
|||
|
|||
function _fn_block(ele) { |
|||
ele.style.transition = '0s'; |
|||
ele.style.transform = 'scale(0.5)'; |
|||
setTimeout(function () { |
|||
ele.style.transition = '0.3s'; |
|||
ele.style.transform = 'scale(1)'; |
|||
}, 10); |
|||
} |
|||
|
|||
showDate(); |
|||
|
|||
function showDate() { |
|||
var str = ''; |
|||
if (_setmonth === 0) { |
|||
str = _fn_layout(_setyear - 1, 11, _setdate) + _fn_layout(_setyear, _setmonth, _setdate) + _fn_layout(_setyear, _setmonth + 1, _setdate); |
|||
} else if (_setmonth === 11) { |
|||
str = _fn_layout(_setyear, _setmonth - 1, _setdate) + _fn_layout(_setyear, _setmonth, _setdate) + _fn_layout(_setyear + 1, 0, _setdate); |
|||
} else { |
|||
str = _fn_layout(_setyear, _setmonth - 1, _setdate) + _fn_layout(_setyear, _setmonth, _setdate) + _fn_layout(_setyear, _setmonth + 1, _setdate); |
|||
} |
|||
oDays.innerHTML = str; |
|||
_aStrong[0].innerHTML = _setyear + '/' + (_setmonth + 1); |
|||
} |
|||
|
|||
function _fn_layout(_setyear, _setmonth, _setdate) { |
|||
if (_setyear === _relYear && _setmonth === _relMonth) { |
|||
_setdate = _relDate; |
|||
} else { |
|||
_setdate = 1; |
|||
} |
|||
var _oDate = new Date(); |
|||
var _date; |
|||
_oDate.setDate(_setdate); |
|||
_oDate.setMonth(_setmonth); |
|||
_oDate.setFullYear(_setyear); |
|||
_date = new Date(_oDate); |
|||
_date.setDate(0); |
|||
var _prevDays = _date.getDate(); |
|||
_date = new Date(_oDate); |
|||
_date.setDate(1); |
|||
var _week = _date.getDay(); |
|||
_date = new Date(_oDate); |
|||
_date.setDate(1); |
|||
_date.setMonth(_setmonth + 1); |
|||
_date.setDate(0); |
|||
var _allDays = _date.getDate(); |
|||
var str = ''; |
|||
var num = 0; |
|||
var i; |
|||
if (_week === 0) { |
|||
_week = 7; |
|||
} |
|||
for (i = 0; i < _week; i++) { |
|||
str = '<li class="grey">' + (_prevDays - i) + '</li>' + str; |
|||
num++; |
|||
} |
|||
for (i = 0; i < _allDays; i++) { |
|||
if (i === _setdate - 1) { |
|||
str += '<li class="active">' + (i + 1) + '</li>'; |
|||
} else { |
|||
str += '<li>' + (i + 1) + '</li>'; |
|||
} |
|||
num++; |
|||
} |
|||
for (i = 0; i < 42 - num; i++) { |
|||
str += '<li class="grey">' + (i + 1) + '</li>'; |
|||
} |
|||
return str; |
|||
} |
|||
|
|||
_aStrong[0].onclick = function () { |
|||
clearTimeout(_delay_time); |
|||
if (onOff === 0) { |
|||
_aStrong[0].innerHTML = _setyear; |
|||
_oYears_months.style.display = 'block'; |
|||
_fn_block(_oYears_months); |
|||
_oNormal.style.display = 'none'; |
|||
_oTenYears.style.display = 'none'; |
|||
} else if (onOff === 1) { |
|||
_temp_ten = 0; |
|||
_aStrong[0].innerHTML = Math.floor(_setyear / 10) * 10 + '-' + (Math.floor(_setyear / 10) * 10 + 9); |
|||
_oYears_months.style.display = 'none'; |
|||
_oNormal.style.display = 'none'; |
|||
_oTenYears.style.display = 'block'; |
|||
_fn_block(_oTenYears); |
|||
} else if (onOff === 2) { |
|||
_aStrong[0].innerHTML = _setyear + '/' + (_setmonth + 1); |
|||
_oYears_months.style.display = 'none'; |
|||
_oNormal.style.display = 'block'; |
|||
_fn_block(_oNormal); |
|||
_oTenYears.style.display = 'none'; |
|||
} |
|||
var i; |
|||
for (i = 0; i < _aLi_months.length; i++) { |
|||
_aLi_months[i].className = ''; |
|||
} |
|||
for (i = 0; i < 3; i++) { |
|||
_aLi_months[_setmonth + i * 12].className = 'active'; |
|||
} |
|||
if (onOff === 1) { |
|||
ten(_setyear); |
|||
} |
|||
if (onOff === 2) { |
|||
showDate(); |
|||
} |
|||
onOff++; |
|||
onOff = onOff % 3; |
|||
}; |
|||
|
|||
function ten(_year) { |
|||
_oTenYears_ul.innerHTML = _layout_tenyear(_year - 10) + _layout_tenyear(_year) + _layout_tenyear(_year + 10); |
|||
|
|||
for (var i = 0; i < _oTenYears_lis.length; i++) { |
|||
_oTenYears_lis[i].onclick = function () { |
|||
for (var i = 0; i < _oTenYears_lis.length; i++) { |
|||
_oTenYears_lis[i].className === 'active' && (_oTenYears_lis[i].className = ''); |
|||
} |
|||
this.className = 'active'; |
|||
_setyear = parseInt(this.innerHTML); |
|||
clearTimeout(_delay_time); |
|||
_delay_time = setTimeout(function () { |
|||
onOff = 1; |
|||
_aStrong[0].innerHTML = _setyear; |
|||
_oYears_months.style.display = 'block'; |
|||
_fn_block(_oYears_months); |
|||
_oNormal.style.display = 'none'; |
|||
_oTenYears.style.display = 'none'; |
|||
}, 200); |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
_r_l[0].onclick = function () { |
|||
if (onOff === 0) { |
|||
_setmonth--; |
|||
if (_setmonth === -1) { |
|||
_setmonth = 11; //0-11
|
|||
_setyear--; |
|||
} |
|||
showDate(); |
|||
oDays.style.transition = '0s'; |
|||
oDays.style.top = '-25.2rem'; |
|||
setTimeout(function () { |
|||
oDays.style.transition = '0.5s'; |
|||
oDays.style.top = '-12.6rem'; |
|||
}, 10); |
|||
|
|||
|
|||
} else if (onOff === 1) { |
|||
_setyear--; |
|||
_oYears_months_ul.style.transition = '0s'; |
|||
_oYears_months_ul.style.top = '-21.6rem'; |
|||
setTimeout(function () { |
|||
_oYears_months_ul.style.transition = '0.5s'; |
|||
_oYears_months_ul.style.top = '-10.8rem'; |
|||
}, 10); |
|||
_aStrong[0].innerHTML = _setyear; |
|||
} else if (onOff === 2) { |
|||
_temp_ten--; |
|||
var _temp = _setyear + 10 * _temp_ten; |
|||
_aStrong[0].innerHTML = Math.floor(_temp / 10) * 10 + '-' + (Math.floor(_temp / 10) * 10 + 9); |
|||
ten(_temp); |
|||
|
|||
_oTenYears_ul.style.transition = '0s'; |
|||
_oTenYears_ul.style.top = '-21.6rem'; |
|||
setTimeout(function () { |
|||
_oTenYears_ul.style.transition = '0.5s'; |
|||
_oTenYears_ul.style.top = '-10.8rem'; |
|||
}, 10); |
|||
} |
|||
}; |
|||
_r_l[1].onclick = function () { |
|||
if (onOff === 0) { |
|||
_setmonth++; |
|||
if (_setmonth === 12) { |
|||
_setmonth = 0; //0-11
|
|||
_setyear++; |
|||
} |
|||
|
|||
showDate(); |
|||
oDays.style.transition = '0s'; |
|||
oDays.style.top = '0'; |
|||
setTimeout(function () { |
|||
oDays.style.transition = '0.5s'; |
|||
oDays.style.top = '-12.6rem'; |
|||
}, 10); |
|||
|
|||
} else if (onOff === 1) { |
|||
_setyear++; |
|||
_oYears_months_ul.style.transition = '0s'; |
|||
_oYears_months_ul.style.top = '0'; |
|||
setTimeout(function () { |
|||
_oYears_months_ul.style.transition = '0.5s'; |
|||
_oYears_months_ul.style.top = '-10.8rem'; |
|||
}, 10); |
|||
_aStrong[0].innerHTML = _setyear; |
|||
} else if (onOff === 2) { |
|||
_temp_ten++; |
|||
var _temp = _setyear + 10 * _temp_ten; |
|||
_aStrong[0].innerHTML = Math.floor(_temp / 10) * 10 + '-' + (Math.floor(_temp / 10) * 10 + 9); |
|||
ten(_temp); |
|||
|
|||
_oTenYears_ul.style.transition = '0s'; |
|||
_oTenYears_ul.style.top = '0'; |
|||
setTimeout(function () { |
|||
_oTenYears_ul.style.transition = '0.5s'; |
|||
_oTenYears_ul.style.top = '-10.8rem'; |
|||
}, 10); |
|||
|
|||
} |
|||
}; |
|||
|
|||
function toZero(num) { |
|||
return num < 10 ? '0' + num : '' + num; |
|||
} |
|||
|
|||
function _layout_tenyear(_year) { |
|||
var str = ''; |
|||
var num = Math.floor(_year / 10) * 10; |
|||
var start = num - 1; |
|||
var end = num + 10; |
|||
for (var i = 0; i < 12; i++) { |
|||
if ((start + i) === _setyear && (start + i) >= num && (start + i) < end) { |
|||
str += '<li class="active">' + (start + i) + '</li>'; |
|||
} else if (i === 0 || i === 11) { |
|||
str += '<li class="grey">' + (start + i) + '</li>'; |
|||
} else { |
|||
str += '<li>' + (start + i) + '</li>'; |
|||
} |
|||
} |
|||
return str; |
|||
} |
|||
|
|||
function initDom() { |
|||
var domWeek = o_box_time.getElementsByClassName('_week')[0]; |
|||
var week = [lang.SunShort, lang.MonShort, lang.TuesShort, lang.WedShort, lang.ThurShort, lang.FriShort, lang.SatShort]; |
|||
var months = [lang.Jan, lang.Feb, lang.Mar, lang.Apr, lang.May, lang.June, lang.July, lang.Aug, lang.Sept, lang.Oct, lang.Nov, lang.Dec]; |
|||
week.forEach(function (t) { |
|||
var span = document.createElement('span'); |
|||
span.innerHTML = t; |
|||
domWeek.appendChild(span); |
|||
}); |
|||
var funcAddMonth = function () { |
|||
months.forEach(function (t) { |
|||
var li = document.createElement('li'); |
|||
li.innerHTML = t; |
|||
_oYears_months_ul.appendChild(li); |
|||
}); |
|||
}; |
|||
funcAddMonth(); |
|||
funcAddMonth(); |
|||
funcAddMonth(); |
|||
} |
|||
}); |
|||
@ -0,0 +1,161 @@ |
|||
#_box_time *{ |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
#_box_time li{ |
|||
list-style: none; |
|||
} |
|||
#_box_time .clearfix:after{ |
|||
content: ''; |
|||
visibility: hidden; |
|||
display: block; |
|||
clear: both; |
|||
} |
|||
#_box_time{ |
|||
color: #fff; |
|||
position: absolute; |
|||
bottom:2rem; |
|||
right: 0; |
|||
height: 25rem; |
|||
width:294px; |
|||
} |
|||
#_box_time ._h_m_s{ |
|||
margin-top: 0.6rem; |
|||
height: 3.4rem; |
|||
font-size: 1.7rem; |
|||
line-height: 3.4rem; |
|||
text-indent: 1.2rem; |
|||
} |
|||
#_box_time ._y_m_d{ |
|||
color: rgba(255, 255, 255, 0.50); |
|||
min-width: 12em; |
|||
margin-left: 0.8rem; |
|||
text-indent: 0.4rem; |
|||
font-size: 0.7rem; |
|||
height:1.5rem; |
|||
line-height: 1.5rem; |
|||
margin-bottom: 0.35rem; |
|||
text-align: left; |
|||
} |
|||
#_box_time ._y_m_d:hover{ |
|||
cursor: pointer; |
|||
color: rgba(255, 255, 255, 0.72); |
|||
} |
|||
#_box_time .calendar { |
|||
height: 16.35rem; |
|||
} |
|||
#_box_time .calendar ._header{ |
|||
height: 1.9rem; |
|||
line-height: 1.9rem; |
|||
font-size: 0.9rem; |
|||
color: #fff; |
|||
opacity: 0.8; |
|||
text-indent: 0.3rem; |
|||
position: relative; |
|||
} |
|||
#_box_time .calendar ._header strong{ |
|||
padding-left: 0.9rem; |
|||
height: 1.9rem; |
|||
display: block; |
|||
width: 6.5rem; |
|||
font-weight: normal; |
|||
cursor: pointer; |
|||
} |
|||
#_box_time .calendar ._header strong:hover{ |
|||
text-shadow: 0 0 3px #fff; |
|||
} |
|||
#_box_time .calendar ._header span{ |
|||
cursor: pointer; |
|||
color: #fff; |
|||
position: absolute; |
|||
top:0; |
|||
right: 0; |
|||
height: 1.9rem; |
|||
text-indent: 0.65rem; |
|||
display: inline-block; |
|||
writing-mode: vertical-lr; |
|||
-webkit-writing-mode: vertical-lr; |
|||
font-weight: bold; |
|||
} |
|||
#_box_time .calendar ._header span:hover{ |
|||
text-shadow: 0 0 3px #fff; |
|||
} |
|||
#_box_time .calendar ._header .aL{ |
|||
right: 58px; |
|||
} |
|||
#_box_time .calendar ._header .aR{ |
|||
right: 18px; |
|||
} |
|||
#_box_time .calendar ._week { |
|||
padding: 0 0.6rem 0; |
|||
} |
|||
#_box_time .calendar ._week span{ |
|||
display: block; |
|||
width: 2.4rem; |
|||
font-size: 0.55rem; |
|||
height: 1.85rem; |
|||
float: left; |
|||
line-height: 1.85rem; |
|||
text-align: center; |
|||
} |
|||
#_box_time .calendar ._days { |
|||
height: 12.5rem; |
|||
overflow: hidden; |
|||
margin: 0 0.6rem 0; |
|||
position: relative; |
|||
} |
|||
#_box_time .calendar ._days ul{ |
|||
position: absolute; |
|||
top:-12.6rem; |
|||
left: 0; |
|||
} |
|||
#_box_time .calendar ._days li{ |
|||
/*font-family: arial;*/ |
|||
font-size: 0.9rem; |
|||
display: block; |
|||
width: 2.3rem; |
|||
height: 2rem; |
|||
float: left; |
|||
line-height: 2rem; |
|||
text-align: center; |
|||
margin: 0.05rem; |
|||
} |
|||
#_box_time ._normal{ |
|||
/*display: none;*/ |
|||
} |
|||
#_box_time .grey { color: rgba(236, 247, 255, 0.36); } |
|||
#_box_time .active { |
|||
box-shadow: inset 0 0 0 0.1rem rgba(255, 255, 255, 0.36), inset 0 0 0 0.2rem rgba(255, 255, 255, 0.30); |
|||
background-color: rgba(255, 255, 255, 0.25); |
|||
} |
|||
#_box_time ._years_months{ |
|||
display: none; |
|||
} |
|||
#_box_time ._tenyears{ |
|||
display: none; |
|||
} |
|||
#_box_time ._tenyears,._years_months{ |
|||
margin-left: 0.65rem; |
|||
height: 10.8rem; |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
#_box_time ._tenyears ul,#_box_time ._years_months ul{ |
|||
position: absolute; |
|||
top: -10.8rem; |
|||
left: 0; |
|||
} |
|||
#_box_time ._years_months ul:hover{ |
|||
/*top: -10.8rem;*/ |
|||
} |
|||
#_box_time ._tenyears li,#_box_time ._years_months li{ |
|||
cursor: pointer; |
|||
width: 4.15rem; |
|||
height: 3.6rem; |
|||
float: left; |
|||
line-height: 3.6rem; |
|||
text-align: center; |
|||
} |
|||
#_box_time ._tenyears li:hover,#_box_time ._years_months li:hover{ |
|||
text-shadow: 0 0 1px #fff; |
|||
} |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,423 @@ |
|||
/* |
|||
colpick Color Picker / colpick.com |
|||
*/ |
|||
|
|||
/*Main container*/ |
|||
.colpick { |
|||
position: absolute; |
|||
width: 346px; |
|||
height: 170px; |
|||
overflow: hidden; |
|||
display: none; |
|||
font-family: Arial, Helvetica, sans-serif; |
|||
background:#ebebeb; |
|||
border: 1px solid #bbb; |
|||
-webkit-border-radius: 5px; |
|||
-moz-border-radius: 5px; |
|||
border-radius: 5px; |
|||
|
|||
/*Prevents selecting text when dragging the selectors*/ |
|||
-webkit-user-select: none; |
|||
-moz-user-select: none; |
|||
-ms-user-select: none; |
|||
-o-user-select: none; |
|||
user-select: none; |
|||
} |
|||
.colpick, |
|||
.colpick * { |
|||
-moz-box-sizing: content-box; |
|||
-webkit-box-sizing: content-box; |
|||
box-sizing: content-box; |
|||
} |
|||
/*Color selection box*/ |
|||
.colpick_color { |
|||
position: absolute; |
|||
left: 7px; |
|||
top: 7px; |
|||
width: 156px; |
|||
height: 156px; |
|||
overflow: hidden; |
|||
outline: 1px solid #aaa; |
|||
cursor: crosshair; |
|||
} |
|||
.colpick_color_overlay1 { |
|||
position: absolute; |
|||
left:0; |
|||
top:0; |
|||
width: 156px; |
|||
height: 156px; |
|||
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff'); /* IE6 & IE7 */ |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff')"; /* IE8 */ |
|||
background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0)); |
|||
} |
|||
.colpick_color_overlay2 { |
|||
position: absolute; |
|||
left:0; |
|||
top:0; |
|||
width: 156px; |
|||
height: 156px; |
|||
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000'); /* IE6 & IE7 */ |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000')"; /* IE8 */ |
|||
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); |
|||
} |
|||
/*HSL gradients are different*/ |
|||
.colpick_hsl .colpick_color_overlay1 { |
|||
background: linear-gradient(to right, rgba(128,128,128,1) 0%, rgba(128,128,128,0) 100%); |
|||
} |
|||
.colpick_hsl .colpick_color_overlay2 { |
|||
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%); |
|||
} |
|||
/*Circular color selector*/ |
|||
.colpick_selector_outer { |
|||
background:none; |
|||
position: absolute; |
|||
width: 11px; |
|||
height: 11px; |
|||
margin: -6px 0 0 -6px; |
|||
border: 1px solid black; |
|||
border-radius: 50%; |
|||
} |
|||
.colpick_selector_inner{ |
|||
position: absolute; |
|||
width: 9px; |
|||
height: 9px; |
|||
border: 1px solid white; |
|||
border-radius: 50%; |
|||
} |
|||
/*Vertical hue bar*/ |
|||
.colpick_hue { |
|||
position: absolute; |
|||
top: 6px; |
|||
left: 175px; |
|||
width: 19px; |
|||
height: 156px; |
|||
border: 1px solid #aaa; |
|||
cursor: n-resize; |
|||
} |
|||
/*Hue bar sliding indicator*/ |
|||
.colpick_hue_arrs { |
|||
position: absolute; |
|||
left: -8px; |
|||
width: 35px; |
|||
height: 7px; |
|||
margin: -7px 0 0 0; |
|||
} |
|||
.colpick_hue_larr { |
|||
position:absolute; |
|||
width: 0; |
|||
height: 0; |
|||
border-top: 6px solid transparent; |
|||
border-bottom: 6px solid transparent; |
|||
border-left: 7px solid #858585; |
|||
} |
|||
.colpick_hue_rarr { |
|||
position:absolute; |
|||
right:0; |
|||
width: 0; |
|||
height: 0; |
|||
border-top: 6px solid transparent; |
|||
border-bottom: 6px solid transparent; |
|||
border-right: 7px solid #858585; |
|||
} |
|||
/*New color box*/ |
|||
.colpick_new_color { |
|||
position: absolute; |
|||
left: 207px; |
|||
top: 6px; |
|||
width: 60px; |
|||
height: 27px; |
|||
background: #f00; |
|||
border: 1px solid #8f8f8f; |
|||
} |
|||
/*Current color box*/ |
|||
.colpick_current_color { |
|||
position: absolute; |
|||
left: 277px; |
|||
top: 6px; |
|||
width: 60px; |
|||
height: 27px; |
|||
background: #f00; |
|||
border: 1px solid #8f8f8f; |
|||
} |
|||
/*Input field containers*/ |
|||
.colpick_field, .colpick_hex_field { |
|||
position: absolute; |
|||
height: 20px; |
|||
width: 60px; |
|||
overflow:hidden; |
|||
background:#f3f3f3; |
|||
color:#b8b8b8; |
|||
font-size:12px; |
|||
border:1px solid #bdbdbd; |
|||
-webkit-border-radius: 3px; |
|||
-moz-border-radius: 3px; |
|||
border-radius: 3px; |
|||
} |
|||
.colpick_rgb_r { |
|||
top: 40px; |
|||
left: 207px; |
|||
} |
|||
.colpick_rgb_g { |
|||
top: 67px; |
|||
left: 207px; |
|||
} |
|||
.colpick_rgb_b { |
|||
top: 94px; |
|||
left: 207px; |
|||
} |
|||
.colpick_hsx_h { |
|||
top: 40px; |
|||
left: 277px; |
|||
} |
|||
.colpick_hsx_s { |
|||
top: 67px; |
|||
left: 277px; |
|||
} |
|||
.colpick_hsx_x { |
|||
top: 94px; |
|||
left: 277px; |
|||
} |
|||
.colpick_hex_field { |
|||
width: 68px; |
|||
left: 207px; |
|||
top: 121px; |
|||
} |
|||
/*Text field container on focus*/ |
|||
.colpick_focus { |
|||
border-color: #999; |
|||
} |
|||
/*Field label container*/ |
|||
.colpick_field_letter { |
|||
position: absolute; |
|||
width: 12px; |
|||
height: 20px; |
|||
line-height: 20px; |
|||
padding-left: 4px; |
|||
background: #efefef; |
|||
border-right: 1px solid #bdbdbd; |
|||
font-weight: bold; |
|||
color:#777; |
|||
} |
|||
/*Text inputs*/ |
|||
.colpick_field input, .colpick_hex_field input { |
|||
position: absolute; |
|||
right: 11px; |
|||
margin: 0; |
|||
padding: 0; |
|||
height: 20px; |
|||
line-height: 20px; |
|||
background: transparent; |
|||
border: none; |
|||
font-size: 12px; |
|||
font-family: Arial, Helvetica, sans-serif; |
|||
color: #555; |
|||
text-align: right; |
|||
outline: none; |
|||
} |
|||
.colpick_hex_field input { |
|||
right: 4px; |
|||
} |
|||
/*Field up/down arrows*/ |
|||
.colpick_field_arrs { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
width: 9px; |
|||
height: 21px; |
|||
cursor: n-resize; |
|||
} |
|||
.colpick_field_uarr { |
|||
position: absolute; |
|||
top: 5px; |
|||
width: 0; |
|||
height: 0; |
|||
border-left: 4px solid transparent; |
|||
border-right: 4px solid transparent; |
|||
border-bottom: 4px solid #959595; |
|||
} |
|||
.colpick_field_darr { |
|||
position: absolute; |
|||
bottom:5px; |
|||
width: 0; |
|||
height: 0; |
|||
border-left: 4px solid transparent; |
|||
border-right: 4px solid transparent; |
|||
border-top: 4px solid #959595; |
|||
} |
|||
/*Submit/Select button*/ |
|||
.colpick_submit { |
|||
position: absolute; |
|||
left: 207px; |
|||
top: 149px; |
|||
width: 130px; |
|||
height: 22px; |
|||
line-height:22px; |
|||
background: #efefef; |
|||
text-align: center; |
|||
color: #555; |
|||
font-size: 12px; |
|||
font-weight:bold; |
|||
border: 1px solid #bdbdbd; |
|||
-webkit-border-radius: 3px; |
|||
-moz-border-radius: 3px; |
|||
border-radius: 3px; |
|||
} |
|||
.colpick_submit:hover { |
|||
background:#f3f3f3; |
|||
border-color:#999; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
/*full layout with no submit button*/ |
|||
.colpick_full_ns .colpick_submit, .colpick_full_ns .colpick_current_color{ |
|||
display:none; |
|||
} |
|||
.colpick_full_ns .colpick_new_color { |
|||
width: 130px; |
|||
height: 25px; |
|||
} |
|||
.colpick_full_ns .colpick_rgb_r, .colpick_full_ns .colpick_hsx_h { |
|||
top: 42px; |
|||
} |
|||
.colpick_full_ns .colpick_rgb_g, .colpick_full_ns .colpick_hsx_s { |
|||
top: 73px; |
|||
} |
|||
.colpick_full_ns .colpick_rgb_b, .colpick_full_ns .colpick_hsx_x { |
|||
top: 104px; |
|||
} |
|||
.colpick_full_ns .colpick_hex_field { |
|||
top: 135px; |
|||
} |
|||
|
|||
/*rgbhex layout*/ |
|||
.colpick_rgbhex .colpick_hsx_h, .colpick_rgbhex .colpick_hsx_s, .colpick_rgbhex .colpick_hsx_x { |
|||
display:none; |
|||
} |
|||
.colpick_rgbhex { |
|||
width:282px; |
|||
} |
|||
.colpick_rgbhex .colpick_field, .colpick_rgbhex .colpick_submit { |
|||
width:68px; |
|||
} |
|||
.colpick_rgbhex .colpick_new_color { |
|||
width:34px; |
|||
border-right:none; |
|||
} |
|||
.colpick_rgbhex .colpick_current_color { |
|||
width:34px; |
|||
left:240px; |
|||
border-left:none; |
|||
} |
|||
|
|||
/*rgbhex layout, no submit button*/ |
|||
.colpick_rgbhex_ns .colpick_submit, .colpick_rgbhex_ns .colpick_current_color{ |
|||
display:none; |
|||
} |
|||
.colpick_rgbhex_ns .colpick_new_color{ |
|||
width:68px; |
|||
border: 1px solid #8f8f8f; |
|||
} |
|||
.colpick_rgbhex_ns .colpick_rgb_r { |
|||
top: 42px; |
|||
} |
|||
.colpick_rgbhex_ns .colpick_rgb_g { |
|||
top: 73px; |
|||
} |
|||
.colpick_rgbhex_ns .colpick_rgb_b { |
|||
top: 104px; |
|||
} |
|||
.colpick_rgbhex_ns .colpick_hex_field { |
|||
top: 135px; |
|||
} |
|||
|
|||
/*hex layout*/ |
|||
.colpick_hex .colpick_hsx_h, .colpick_hex .colpick_hsx_s, .colpick_hex .colpick_hsx_x, .colpick_hex .colpick_rgb_r, .colpick_hex .colpick_rgb_g, .colpick_hex .colpick_rgb_b { |
|||
display:none; |
|||
} |
|||
.colpick_hex { |
|||
width:206px; |
|||
height:201px; |
|||
} |
|||
.colpick_hex .colpick_hex_field { |
|||
width:72px; |
|||
height:25px; |
|||
top:168px; |
|||
left:80px; |
|||
} |
|||
.colpick_hex .colpick_hex_field div, .colpick_hex .colpick_hex_field input { |
|||
height: 25px; |
|||
line-height: 25px; |
|||
} |
|||
.colpick_hex .colpick_new_color { |
|||
left:9px; |
|||
top:168px; |
|||
width:30px; |
|||
border-right:none; |
|||
} |
|||
.colpick_hex .colpick_current_color { |
|||
left:39px; |
|||
top:168px; |
|||
width:30px; |
|||
border-left:none; |
|||
} |
|||
.colpick_hex .colpick_submit { |
|||
left:164px; |
|||
top: 168px; |
|||
width:30px; |
|||
height:25px; |
|||
line-height: 25px; |
|||
} |
|||
|
|||
/*hex layout, no submit button*/ |
|||
.colpick_hex_ns .colpick_submit, .colpick_hex_ns .colpick_current_color { |
|||
display:none; |
|||
} |
|||
.colpick_hex_ns .colpick_hex_field { |
|||
width:80px; |
|||
} |
|||
.colpick_hex_ns .colpick_new_color{ |
|||
width:60px; |
|||
border: 1px solid #8f8f8f; |
|||
} |
|||
|
|||
/*Dark color scheme*/ |
|||
.colpick_dark { |
|||
background: #161616; |
|||
border-color: #2a2a2a; |
|||
} |
|||
.colpick_dark .colpick_color { |
|||
outline-color: #333; |
|||
} |
|||
.colpick_dark .colpick_hue { |
|||
border-color: #555; |
|||
} |
|||
.colpick_dark .colpick_field, .colpick_dark .colpick_hex_field { |
|||
background: #101010; |
|||
border-color: #2d2d2d; |
|||
} |
|||
.colpick_dark .colpick_field_letter { |
|||
background: #131313; |
|||
border-color: #2d2d2d; |
|||
color: #696969; |
|||
} |
|||
.colpick_dark .colpick_field input, .colpick_dark .colpick_hex_field input { |
|||
color: #7a7a7a; |
|||
} |
|||
.colpick_dark .colpick_field_uarr { |
|||
border-bottom-color:#696969; |
|||
} |
|||
.colpick_dark .colpick_field_darr { |
|||
border-top-color:#696969; |
|||
} |
|||
.colpick_dark .colpick_focus { |
|||
border-color:#444; |
|||
} |
|||
.colpick_dark .colpick_submit { |
|||
background: #131313; |
|||
border-color:#2d2d2d; |
|||
color:#7a7a7a; |
|||
} |
|||
.colpick_dark .colpick_submit:hover { |
|||
background-color:#101010; |
|||
border-color:#444; |
|||
} |
|||
@ -0,0 +1,561 @@ |
|||
/* |
|||
colpick Color Picker |
|||
Copyright 2013 Jose Vargas. Licensed under GPL license. Based on Stefan Petre's Color Picker www.eyecon.ro, dual licensed under the MIT and GPL licenses |
|||
|
|||
For usage and examples: colpick.com/plugin |
|||
*/ |
|||
|
|||
(function ($) { |
|||
var colpick = function () { |
|||
var |
|||
tpl = '<div class="colpick"><div class="colpick_color"><div class="colpick_color_overlay1"><div class="colpick_color_overlay2"><div class="colpick_selector_outer"><div class="colpick_selector_inner"></div></div></div></div></div><div class="colpick_hue"><div class="colpick_hue_arrs"><div class="colpick_hue_larr"></div><div class="colpick_hue_rarr"></div></div></div><div class="colpick_new_color"></div><div class="colpick_current_color"></div><div class="colpick_hex_field"><div class="colpick_field_letter">#</div><input type="text" maxlength="6" size="6" /></div><div class="colpick_rgb_r colpick_field"><div class="colpick_field_letter">R</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_rgb_g colpick_field"><div class="colpick_field_letter">G</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_rgb_b colpick_field"><div class="colpick_field_letter">B</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsx_h colpick_field"><div class="colpick_field_letter">H</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsx_s colpick_field"><div class="colpick_field_letter">S</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsx_x colpick_field"><div class="colpick_field_letter">B</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_submit"></div></div>', |
|||
defaults = { |
|||
showEvent: 'click', |
|||
onShow: function () {}, |
|||
onBeforeShow: function(){}, |
|||
onHide: function () {}, |
|||
onChange: function () {}, |
|||
onSubmit: function () {}, |
|||
colorScheme: 'light', |
|||
color: '3289c7', |
|||
livePreview: true, |
|||
flat: false, |
|||
layout: 'full', |
|||
submit: 1, |
|||
submitText: 'OK', |
|||
height: 156, |
|||
hsl: false |
|||
}, |
|||
//Fill the inputs of the plugin
|
|||
fillRGBFields = function (hsx, cal) { |
|||
var rgb = $(cal).data('colpick').hsl ? hslToRgb(hsx) : hsbToRgb(hsx); |
|||
$(cal).data('colpick').fields |
|||
.eq(1).val(rgb.r).end() |
|||
.eq(2).val(rgb.g).end() |
|||
.eq(3).val(rgb.b).end(); |
|||
}, |
|||
fillHSXFields = function (hsx, cal) { |
|||
|
|||
$(cal).data('colpick').fields |
|||
.eq(4).val(Math.round(hsx.h)).end() |
|||
.eq(5).val(Math.round(hsx.s)).end() |
|||
.eq(6).val(Math.round(hsx.x)).end(); |
|||
}, |
|||
fillHexFields = function (hsx, cal) { |
|||
$(cal).data('colpick').fields.eq(0).val($(cal).data('colpick').hsl ? hslToHex(hsx) : hsbToHex(hsx)); |
|||
}, |
|||
//Set the round selector position
|
|||
setSelector = function (hsx, cal) { |
|||
$(cal).data('colpick').selector.css('backgroundColor', '#' + ($(cal).data('colpick').hsl ? hslToHex({h:hsx.h,s:100,x:50}) : hsbToHex({h:hsx.h,s:100,x:100})) ); |
|||
$(cal).data('colpick').selectorIndic.css({ |
|||
left: parseInt($(cal).data('colpick').height * hsx.s/100, 10), |
|||
top: parseInt($(cal).data('colpick').height * (100-hsx.x)/100, 10) |
|||
}); |
|||
}, |
|||
//Set the hue selector position
|
|||
setHue = function (hsx, cal) { |
|||
$(cal).data('colpick').hue.css('top', parseInt($(cal).data('colpick').height - $(cal).data('colpick').height * hsx.h/360, 10)); |
|||
}, |
|||
//Set current and new colors
|
|||
setCurrentColor = function (hsx, cal) { |
|||
$(cal).data('colpick').currentColor.css('backgroundColor', '#' + ($(cal).data('colpick').hsl ? hslToHex(hsx) : hsbToHex(hsx)) ); |
|||
}, |
|||
setNewColor = function (hsx, cal) { |
|||
$(cal).data('colpick').newColor.css('backgroundColor', '#' + ($(cal).data('colpick').hsl ? hslToHex(hsx) : hsbToHex(hsx)) ); |
|||
}, |
|||
//Called when the new color is changed
|
|||
change = function (ev) { |
|||
var cal = $(this).parent().parent(), col; |
|||
if (this.parentNode.className.indexOf('_hex') > 0) { |
|||
cal.data('colpick').color = col = cal.data('colpick').hsl ? hexToHsl(fixHex(this.value)) : hexToHsb(fixHex(this.value)); |
|||
fillRGBFields(col, cal.get(0)); |
|||
fillHSXFields(col, cal.get(0)); |
|||
} else if (this.parentNode.className.indexOf('_hsx') > 0) { |
|||
cal.data('colpick').color = col = fixHsx({ |
|||
h: parseInt(cal.data('colpick').fields.eq(4).val(), 10), |
|||
s: parseInt(cal.data('colpick').fields.eq(5).val(), 10), |
|||
x: parseInt(cal.data('colpick').fields.eq(6).val(), 10) |
|||
}); |
|||
fillRGBFields(col, cal.get(0)); |
|||
fillHexFields(col, cal.get(0)); |
|||
} else { |
|||
var rgb = { |
|||
r: parseInt(cal.data('colpick').fields.eq(1).val(), 10), |
|||
g: parseInt(cal.data('colpick').fields.eq(2).val(), 10), |
|||
b: parseInt(cal.data('colpick').fields.eq(3).val(), 10) |
|||
}; |
|||
cal.data('colpick').color = col = cal.data('colpick').hsl ? rgbToHsl(fixRgb(rgb)) : rgbToHsb(fixRgb(rgb)); |
|||
fillHexFields(col, cal.get(0)); |
|||
fillHSXFields(col, cal.get(0)); |
|||
} |
|||
setSelector(col, cal.get(0)); |
|||
setHue(col, cal.get(0)); |
|||
setNewColor(col, cal.get(0)); |
|||
cal.data('colpick').onChange.apply(cal.parent(), [col, cal.data('colpick').hsl ? hslToHex(col) : hsbToHex(col), cal.data('colpick').hsl ? hslToRgb(col) : hsbToRgb(col), cal.data('colpick').el, 0]); |
|||
}, |
|||
//Change style on blur and on focus of inputs
|
|||
blur = function (ev) { |
|||
$(this).parent().removeClass('colpick_focus'); |
|||
}, |
|||
focus = function () { |
|||
$(this).parent().parent().data('colpick').fields.parent().removeClass('colpick_focus'); |
|||
$(this).parent().addClass('colpick_focus'); |
|||
}, |
|||
//Increment/decrement arrows functions
|
|||
downIncrement = function (ev) { |
|||
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false; |
|||
var field = $(this).parent().find('input').focus(); |
|||
var current = { |
|||
el: $(this).parent().addClass('colpick_slider'), |
|||
max: this.parentNode.className.indexOf('_hsx_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsx') > 0 ? 100 : 255), |
|||
y: ev.pageY, |
|||
field: field, |
|||
val: parseInt(field.val(), 10), |
|||
preview: $(this).parent().parent().data('colpick').livePreview |
|||
}; |
|||
$(document).mouseup(current, upIncrement); |
|||
$(document).mousemove(current, moveIncrement); |
|||
}, |
|||
moveIncrement = function (ev) { |
|||
ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val - ev.pageY + ev.data.y, 10)))); |
|||
if (ev.data.preview) { |
|||
change.apply(ev.data.field.get(0), [true]); |
|||
} |
|||
return false; |
|||
}, |
|||
upIncrement = function (ev) { |
|||
change.apply(ev.data.field.get(0), [true]); |
|||
ev.data.el.removeClass('colpick_slider').find('input').focus(); |
|||
$(document).off('mouseup', upIncrement); |
|||
$(document).off('mousemove', moveIncrement); |
|||
return false; |
|||
}, |
|||
//Hue slider functions
|
|||
downHue = function (ev) { |
|||
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false; |
|||
var current = { |
|||
cal: $(this).parent(), |
|||
y: $(this).offset().top |
|||
}; |
|||
$(document).on('mouseup touchend',current,upHue); |
|||
$(document).on('mousemove touchmove',current,moveHue); |
|||
|
|||
var pageY = ((ev.type == 'touchstart') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY ); |
|||
change.apply( |
|||
current.cal.data('colpick') |
|||
.fields.eq(4).val(parseInt(360*(current.cal.data('colpick').height - (pageY - current.y))/current.cal.data('colpick').height, 10)) |
|||
.get(0), |
|||
[current.cal.data('colpick').livePreview] |
|||
); |
|||
return false; |
|||
}, |
|||
moveHue = function (ev) { |
|||
var pageY = ((ev.type == 'touchmove') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY ); |
|||
change.apply( |
|||
ev.data.cal.data('colpick') |
|||
.fields.eq(4).val(parseInt(360*(ev.data.cal.data('colpick').height - Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageY - ev.data.y))))/ev.data.cal.data('colpick').height, 10)) |
|||
.get(0), |
|||
[ev.data.preview] |
|||
); |
|||
return false; |
|||
}, |
|||
upHue = function (ev) { |
|||
//fillRGBFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
|
|||
//fillHexFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
|
|||
$(document).off('mouseup touchend',upHue); |
|||
$(document).off('mousemove touchmove',moveHue); |
|||
return false; |
|||
}, |
|||
//Color selector functions
|
|||
downSelector = function (ev) { |
|||
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false; |
|||
var current = { |
|||
cal: $(this).parent(), |
|||
pos: $(this).offset() |
|||
}; |
|||
current.preview = current.cal.data('colpick').livePreview; |
|||
|
|||
$(document).on('mouseup touchend',current,upSelector); |
|||
$(document).on('mousemove touchmove',current,moveSelector); |
|||
|
|||
var payeX,pageY; |
|||
if(ev.type == 'touchstart') { |
|||
pageX = ev.originalEvent.changedTouches[0].pageX, |
|||
pageY = ev.originalEvent.changedTouches[0].pageY; |
|||
} else { |
|||
pageX = ev.pageX; |
|||
pageY = ev.pageY; |
|||
} |
|||
|
|||
change.apply( |
|||
current.cal.data('colpick').fields |
|||
.eq(6).val(parseInt(100*(current.cal.data('colpick').height - (pageY - current.pos.top))/current.cal.data('colpick').height, 10)).end() |
|||
.eq(5).val(parseInt(100*(pageX - current.pos.left)/current.cal.data('colpick').height, 10)) |
|||
.get(0), |
|||
[current.preview] |
|||
); |
|||
return false; |
|||
}, |
|||
moveSelector = function (ev) { |
|||
var payeX,pageY; |
|||
if(ev.type == 'touchmove') { |
|||
pageX = ev.originalEvent.changedTouches[0].pageX, |
|||
pageY = ev.originalEvent.changedTouches[0].pageY; |
|||
} else { |
|||
pageX = ev.pageX; |
|||
pageY = ev.pageY; |
|||
} |
|||
|
|||
change.apply( |
|||
ev.data.cal.data('colpick').fields |
|||
.eq(6).val(parseInt(100*(ev.data.cal.data('colpick').height - Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageY - ev.data.pos.top))))/ev.data.cal.data('colpick').height, 10)).end() |
|||
.eq(5).val(parseInt(100*(Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageX - ev.data.pos.left))))/ev.data.cal.data('colpick').height, 10)) |
|||
.get(0), |
|||
[ev.data.preview] |
|||
); |
|||
return false; |
|||
}, |
|||
upSelector = function (ev) { |
|||
//fillRGBFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
|
|||
//fillHexFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
|
|||
$(document).off('mouseup touchend',upSelector); |
|||
$(document).off('mousemove touchmove',moveSelector); |
|||
return false; |
|||
}, |
|||
//Submit button
|
|||
clickSubmit = function (ev) { |
|||
var cal = $(this).parent(); |
|||
var col = cal.data('colpick').color; |
|||
cal.data('colpick').origColor = col; |
|||
setCurrentColor(col, cal.get(0)); |
|||
cal.data('colpick').onSubmit(col, cal.data('colpick').hsl ? hslToHex(col) : hsbToHex(col), cal.data('colpick').hsl ? hslToRgb(col) : hsbToRgb(col), cal.data('colpick').el); |
|||
}, |
|||
//Show/hide the color picker
|
|||
show = function (ev) { |
|||
// Prevent the trigger of any direct parent
|
|||
ev.stopPropagation(); |
|||
var cal = $('#' + $(this).data('colpickId')); |
|||
cal.data('colpick').onBeforeShow.apply(this, [cal.get(0)]); |
|||
var pos = $(this).offset(); |
|||
var top = pos.top + this.offsetHeight; |
|||
var left = pos.left; |
|||
var viewPort = getViewport(); |
|||
var calW = cal.width(); |
|||
if (left + calW > viewPort.l + viewPort.w) { |
|||
left -= calW; |
|||
} |
|||
cal.css({left: left + 'px', top: top + 'px'}); |
|||
if (cal.data('colpick').onShow.apply(this, [cal.get(0)]) != false) { |
|||
cal.show(); |
|||
} |
|||
//Hide when user clicks outside
|
|||
$('html').mousedown({cal:cal}, hide); |
|||
cal.mousedown(function(ev){ev.stopPropagation();}) |
|||
}, |
|||
hide = function (ev) { |
|||
if (ev.data.cal.data('colpick').onHide.apply(this, [ev.data.cal.get(0)]) != false) { |
|||
ev.data.cal.hide(); |
|||
} |
|||
$('html').off('mousedown', hide); |
|||
}, |
|||
getViewport = function () { |
|||
var m = document.compatMode == 'CSS1Compat'; |
|||
return { |
|||
l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft), |
|||
w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth) |
|||
}; |
|||
}, |
|||
//Fix the values if the user enters a negative or high value
|
|||
fixHsx = function (hsx) { |
|||
return { |
|||
h: Math.min(360, Math.max(0, hsx.h)), |
|||
s: Math.min(100, Math.max(0, hsx.s)), |
|||
x: Math.min(100, Math.max(0, hsx.x)) |
|||
}; |
|||
}, |
|||
fixRgb = function (rgb) { |
|||
return { |
|||
r: Math.min(255, Math.max(0, rgb.r)), |
|||
g: Math.min(255, Math.max(0, rgb.g)), |
|||
b: Math.min(255, Math.max(0, rgb.b)) |
|||
}; |
|||
}, |
|||
fixHex = function (hex) { |
|||
var len = 6 - hex.length; |
|||
if (len > 0) { |
|||
var o = []; |
|||
for (var i=0; i<len; i++) { |
|||
o.push('0'); |
|||
} |
|||
o.push(hex); |
|||
hex = o.join(''); |
|||
} |
|||
return hex; |
|||
}, |
|||
restoreOriginal = function () { |
|||
var cal = $(this).parent(); |
|||
var col = cal.data('colpick').origColor; |
|||
cal.data('colpick').color = col; |
|||
fillRGBFields(col, cal.get(0)); |
|||
fillHexFields(col, cal.get(0)); |
|||
fillHSXFields(col, cal.get(0)); |
|||
setSelector(col, cal.get(0)); |
|||
setHue(col, cal.get(0)); |
|||
setNewColor(col, cal.get(0)); |
|||
}; |
|||
return { |
|||
init: function (opt) { |
|||
opt = $.extend({}, defaults, opt||{}); |
|||
//Set color
|
|||
if (typeof opt.color == 'string') { |
|||
opt.color = opt.hsl ? hexToHsl(opt.color) : hexToHsb(opt.color); |
|||
} else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) { |
|||
opt.color = opt.hsl ? rgbToHsl(opt.color) : rgbToHsb(opt.color); |
|||
} else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) { |
|||
opt.color = opt.hsl ? fixHsl(opt.color) : fixHsb(opt.color); |
|||
} else { |
|||
return this; |
|||
} |
|||
|
|||
//For each selected DOM element
|
|||
return this.each(function () { |
|||
//If the element does not have an ID
|
|||
if (!$(this).data('colpickId')) { |
|||
var options = $.extend({}, opt); |
|||
options.origColor = opt.color; |
|||
//Generate and assign a random ID
|
|||
var id = 'collorpicker_' + parseInt(Math.random() * 1000); |
|||
$(this).data('colpickId', id); |
|||
//Set the tpl's ID and get the HTML
|
|||
var cal = $(tpl).attr('id', id); |
|||
//Add class according to layout
|
|||
cal.addClass('colpick_'+options.layout+(options.submit?'':' colpick_'+options.layout+'_ns')); |
|||
//Add class if the color scheme is not default
|
|||
if(options.colorScheme != 'light') cal.addClass('colpick_'+options.colorScheme); |
|||
//Add class if HSL is enabled
|
|||
if(options.hsl) cal.addClass('colpick_hsl'); |
|||
//Setup submit button
|
|||
cal.find('div.colpick_submit').html(options.submitText).click(clickSubmit); |
|||
//Setup input fields
|
|||
options.fields = cal.find('input').change(change).blur(blur).focus(focus); |
|||
cal.find('div.colpick_field_arrs').mousedown(downIncrement).end().find('div.colpick_current_color').click(restoreOriginal); |
|||
//Setup hue selector
|
|||
options.selector = cal.find('div.colpick_color').on('mousedown touchstart',downSelector); |
|||
options.selectorIndic = options.selector.find('div.colpick_selector_outer'); |
|||
//Store parts of the plugin
|
|||
options.el = this; |
|||
options.hue = cal.find('div.colpick_hue_arrs'); |
|||
huebar = options.hue.parent(); |
|||
//Paint the hue bar
|
|||
var UA = navigator.userAgent.toLowerCase(); |
|||
var isIE = navigator.appName === 'Microsoft Internet Explorer'; |
|||
var IEver = isIE ? parseFloat( UA.match( /msie ([0-9]{1,}[\.0-9]{0,})/ )[1] ) : 0; |
|||
var ngIE = ( isIE && IEver < 10 ); |
|||
var stops = ['#ff0000','#ff0080','#ff00ff','#8000ff','#0000ff','#0080ff','#00ffff','#00ff80','#00ff00','#80ff00','#ffff00','#ff8000','#ff0000']; |
|||
if(ngIE) { |
|||
var i, div; |
|||
for(i=0; i<=11; i++) { |
|||
div = $('<div></div>').attr('style','height:8.333333%; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='+stops[i]+', endColorstr='+stops[i+1]+'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='+stops[i]+', endColorstr='+stops[i+1]+')";'); |
|||
huebar.append(div); |
|||
} |
|||
} else { |
|||
stopList = stops.join(','); |
|||
huebar.attr('style','background:-webkit-linear-gradient(top center,'+stopList+'); background:-moz-linear-gradient(top center,'+stopList+'); background:linear-gradient(to bottom,'+stopList+'); '); |
|||
} |
|||
cal.find('div.colpick_hue').on('mousedown touchstart',downHue); |
|||
options.newColor = cal.find('div.colpick_new_color'); |
|||
options.currentColor = cal.find('div.colpick_current_color'); |
|||
//Store options and fill with default color
|
|||
cal.data('colpick', options); |
|||
fillRGBFields(options.color, cal.get(0)); |
|||
fillHSXFields(options.color, cal.get(0)); |
|||
fillHexFields(options.color, cal.get(0)); |
|||
setHue(options.color, cal.get(0)); |
|||
setSelector(options.color, cal.get(0)); |
|||
setCurrentColor(options.color, cal.get(0)); |
|||
setNewColor(options.color, cal.get(0)); |
|||
//Append to body if flat=false, else show in place
|
|||
if (options.flat) { |
|||
cal.appendTo(this).show(); |
|||
cal.css({ |
|||
position: 'relative', |
|||
display: 'block' |
|||
}); |
|||
} else { |
|||
cal.appendTo(document.body); |
|||
$(this).on(options.showEvent, show); |
|||
cal.css({ |
|||
position:'absolute' |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
//Shows the picker
|
|||
showPicker: function() { |
|||
return this.each( function () { |
|||
if ($(this).data('colpickId')) { |
|||
show.apply(this); |
|||
} |
|||
}); |
|||
}, |
|||
//Hides the picker
|
|||
hidePicker: function() { |
|||
return this.each( function () { |
|||
if ($(this).data('colpickId')) { |
|||
$('#' + $(this).data('colpickId')).hide(); |
|||
} |
|||
}); |
|||
}, |
|||
//Sets a color as new and current (default)
|
|||
setColor: function(col, setCurrent) { |
|||
setCurrent = (typeof setCurrent === "undefined") ? 1 : setCurrent; |
|||
if (typeof col == 'string') { |
|||
col = hexToHsb(col); |
|||
} else if (col.r != undefined && col.g != undefined && col.b != undefined) { |
|||
col = rgbToHsb(col); |
|||
} else if (col.h != undefined && col.s != undefined && col.b != undefined) { |
|||
col = fixHsb(col); |
|||
} else { |
|||
return this; |
|||
} |
|||
return this.each(function(){ |
|||
if ($(this).data('colpickId')) { |
|||
var cal = $('#' + $(this).data('colpickId')); |
|||
cal.data('colpick').color = col; |
|||
cal.data('colpick').origColor = col; |
|||
fillRGBFields(col, cal.get(0)); |
|||
fillHSXFields(col, cal.get(0)); |
|||
fillHexFields(col, cal.get(0)); |
|||
setHue(col, cal.get(0)); |
|||
setSelector(col, cal.get(0)); |
|||
|
|||
setNewColor(col, cal.get(0)); |
|||
cal.data('colpick').onChange.apply(cal.parent(), [ |
|||
col, |
|||
cal.data('colpick').hsl ? hslToHex(col) : hsbToHex(col), |
|||
cal.data('colpick').hsl ? hslToRgb(col) : hsbToRgb(col), |
|||
cal.data('colpick').el, |
|||
1 |
|||
]); |
|||
if(setCurrent) { |
|||
setCurrentColor(col, cal.get(0)); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
}; |
|||
}(); |
|||
//Color space convertions
|
|||
var hexToRgb = function (hex) { |
|||
var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16); |
|||
return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)}; |
|||
}; |
|||
var hexToHsb = function (hex) { |
|||
return rgbToHsb(hexToRgb(hex)); |
|||
}; |
|||
var hexToHsl = function (hex) { |
|||
return rgbToHsl(hexToRgb(hex)); |
|||
}; |
|||
var rgbToHsb = function (rgb) { |
|||
var hsb = {h: 0, s: 0, x: 0}; |
|||
var min = Math.min(rgb.r, rgb.g, rgb.b); |
|||
var max = Math.max(rgb.r, rgb.g, rgb.b); |
|||
var delta = max - min; |
|||
hsb.x = max; |
|||
hsb.s = max != 0 ? 255 * delta / max : 0; |
|||
if (hsb.s != 0) { |
|||
if (rgb.r == max) hsb.h = (rgb.g - rgb.b) / delta; |
|||
else if (rgb.g == max) hsb.h = 2 + (rgb.b - rgb.r) / delta; |
|||
else hsb.h = 4 + (rgb.r - rgb.g) / delta; |
|||
} else hsb.h = -1; |
|||
hsb.h *= 60; |
|||
if (hsb.h < 0) hsb.h += 360; |
|||
hsb.s *= 100/255; |
|||
hsb.x *= 100/255; |
|||
return hsb; |
|||
}; |
|||
var rgbToHsl = function (rgb) { |
|||
return hsbToHsl(rgbToHsb(rgb)); |
|||
}; |
|||
var hsbToHsl = function(hsb) { |
|||
var hsl = {h: 0, s: 0, x: 0}; |
|||
hsl.h = hsb.h; |
|||
hsl.x = hsb.x*(200-hsb.s)/200; |
|||
hsl.s = hsb.x*hsb.s/(100-Math.abs(2*hsl.x-100)); |
|||
return hsl; |
|||
}; |
|||
var hslToHsb = function(hsl) { |
|||
var hsb = {h: 0, s: 0, x: 0}; |
|||
hsb.h = hsl.h; |
|||
hsb.x = (200*hsl.x + hsl.s*(100-Math.abs(2*hsl.x-100)))/200 |
|||
hsb.s = 200*(hsb.x-hsl.x)/hsb.x; |
|||
return hsb; |
|||
}; |
|||
var hsbToRgb = function (hsb) { |
|||
var rgb = {}; |
|||
var h = hsb.h; |
|||
var s = hsb.s*255/100; |
|||
var v = hsb.x*255/100; |
|||
if(s == 0) { |
|||
rgb.r = rgb.g = rgb.b = v; |
|||
} else { |
|||
var t1 = v; |
|||
var t2 = (255-s)*v/255; |
|||
var t3 = (t1-t2)*(h%60)/60; |
|||
if(h==360) h = 0; |
|||
if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3} |
|||
else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3} |
|||
else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3} |
|||
else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3} |
|||
else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3} |
|||
else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3} |
|||
else {rgb.r=0; rgb.g=0; rgb.b=0} |
|||
} |
|||
return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)}; |
|||
}; |
|||
var hslToRgb = function(hsl) { |
|||
return hsbToRgb(hslToHsb(hsl)); |
|||
}; |
|||
var rgbToHex = function (rgb) { |
|||
var hex = [ |
|||
rgb.r.toString(16), |
|||
rgb.g.toString(16), |
|||
rgb.b.toString(16) |
|||
]; |
|||
$.each(hex, function (nr, val) { |
|||
if (val.length == 1) { |
|||
hex[nr] = '0' + val; |
|||
} |
|||
}); |
|||
return hex.join(''); |
|||
}; |
|||
var hsbToHex = function (hsb) { |
|||
return rgbToHex(hsbToRgb(hsb)); |
|||
}; |
|||
var hslToHex = function (hsl) { |
|||
return hsbToHex(hslToHsb(hsl)); |
|||
}; |
|||
$.fn.extend({ |
|||
colpick: colpick.init, |
|||
colpickHide: colpick.hidePicker, |
|||
colpickShow: colpick.showPicker, |
|||
colpickSetColor: colpick.setColor |
|||
}); |
|||
$.extend({ |
|||
colpick:{ |
|||
rgbToHex: rgbToHex, |
|||
rgbToHsb: rgbToHsb, |
|||
rgbToHsl: rgbToHsl, |
|||
hsbToHex: hsbToHex, |
|||
hsbToRgb: hsbToRgb, |
|||
hsbToHsl: hsbToHsl, |
|||
hexToHsb: hexToHsb, |
|||
hexToHsl: hexToHsl, |
|||
hexToRgb: hexToRgb, |
|||
hslToHsb: hslToHsb, |
|||
hslToRgb: hslToRgb, |
|||
hslToHex: hslToHex |
|||
} |
|||
}); |
|||
})(jQuery); |
|||
@ -0,0 +1,97 @@ |
|||
# contextMenu |
|||
自由定制页面元素的右键菜单。 |
|||
|
|||
 |
|||
|
|||
> 是的同类的插件很多，作者造轮子是因为当初寻找右键菜单插件的时候，找了几个都有bug，要么经不起环境的考验，只能跑通demo。如果你也在寻找一款右键菜单插件，不如试试这一款，应该不会让你失望。 |
|||
|
|||
## 最新版本 |
|||
v2.2.5 |
|||
## 原理 |
|||
该插件通过指定的参数，渲染出一个漂亮的右键菜单，并绑定菜单项点击事件。 |
|||
|
|||
需要的参数有： |
|||
|
|||
1. 右键事件e。指定一个事件e，它可能是通过原生js、jq，甚至vue捕捉的；该插件将获取点击的位置，并阻止事件冒泡，屏蔽默认的右键菜单。 |
|||
2. 菜单描述数组menu。menu数组决定了你想渲染出什么样的菜单。 |
|||
|
|||
## 特色 |
|||
|
|||
* 侵入性小，这个插件几乎不会影响全局，除了ContextMenu全局变量。 |
|||
* 兼容性好，在各个屏幕尺寸和有无滚动条的场景都有不错的渲染效果。 |
|||
* 支持多层嵌套的DOM触发的事件，以最里层为准（详见demo）。 |
|||
* 支持二级菜单。 |
|||
|
|||
## 准备 |
|||
|
|||
1. 下载源码(并点赞) |
|||
2. 引入 jquery |
|||
3. 引入 contextMenu.css |
|||
4. 引入 contextMenu.js |
|||
|
|||
## 典型用法 |
|||
|
|||
~~~js |
|||
$('body').contextmenu(function (e) { |
|||
var menu=[ |
|||
'menu1', //合理的html或纯文字 |
|||
'menu2', |
|||
'|', //分隔符 |
|||
[ |
|||
'click me', //title |
|||
function (dom) {alert('Hi')} // 点击菜单项的回调 |
|||
], |
|||
]; |
|||
ContextMenu.render(e,menu,this); //开始渲染 |
|||
}); |
|||
~~~ |
|||
|
|||
## API |
|||
`ContextMenu.render(e,menu,param,theme)` |
|||
|
|||
**e**:点击事件对象，如`$('body').contextmenu(function (e){})`。 |
|||
|
|||
**menu**: |
|||
|
|||
menu为`true`代表禁用系统默认菜单，但是不渲染自定义菜单； |
|||
|
|||
menu为数组表示渲染自定义右键菜单； |
|||
~~~js |
|||
var menu=[ |
|||
'文字1', //纯文字或html将直接被渲染，做为一个提示性菜单项 |
|||
'文字2', |
|||
'|', //简单的一个分隔符 |
|||
['功能1',function(param){alert("功能1点击")}], //这种格式说明这个菜单项可以被点击并产生回调 |
|||
[ |
|||
'子菜单',[ |
|||
'文字3', |
|||
'文字4', |
|||
'|', |
|||
['功能2',function(param){alert("功能2点击")}], |
|||
] |
|||
] //声明一个子菜单，子菜单内部的声明格式和父级一样 |
|||
] |
|||
~~~ |
|||
|
|||
**param**:菜单点击回调的第一个参数 |
|||
|
|||
**theme**:主题（目前可选主题"light"） |
|||
|
|||
## 其他 |
|||
注意：为了获得正确的屏幕尺寸，添加了一个`html,body:{height:100%}`的样式，请确保该样式生效不被覆盖。 |
|||
|
|||
## 更多项目 |
|||
[Yuri2'Projects](https://github.com/yuri2peter/) |
|||
|
|||
## TOOD |
|||
|
|||
* 右键菜单，二级垂直方向有可能溢出 |
|||
|
|||
## 更新记录 |
|||
|
|||
* v2.2.5 修复文字溢出（title提示）和子菜单底部溢出 |
|||
* v2.2.3 优化css |
|||
* v2.2.2 新增第三个参数[bool] disable 临时禁用菜单点击功能 `['功能2',function(param){alert("功能2点击")},true]` |
|||
* v2.2.1 优化css |
|||
* v2.2.0 新增主题切换功能 |
|||
* v2.1.1 修复了二级菜单溢出屏幕的问题，更好的兼容性 |
|||
@ -0,0 +1,92 @@ |
|||
|
|||
html, body { |
|||
height: 100%; |
|||
padding: 0; |
|||
margin: 0; |
|||
} |
|||
|
|||
.yuri2-context-menu { |
|||
left: 0; |
|||
top: 0; |
|||
position: fixed; |
|||
width: 150px; |
|||
height: auto; |
|||
background-color: rgb(61, 61, 61); |
|||
display: block; |
|||
/*border-radius: 5px;*/ |
|||
z-index: 99999999; |
|||
color: white; |
|||
/*overflow: hidden;*/ |
|||
} |
|||
.yuri2-context-menu.sub { |
|||
left: 98%; |
|||
position: absolute; |
|||
display: none; |
|||
} |
|||
.yuri2-context-menu.sub.left { |
|||
left: auto; |
|||
right: 98%; |
|||
} |
|||
.yuri2-context-menu ul li:hover .yuri2-context-menu.sub { |
|||
display: block; |
|||
} |
|||
.yuri2-context-menu ul.left .yuri2-context-menu.sub{ |
|||
left: -100%; |
|||
} |
|||
.yuri2-context-menu ul { |
|||
margin: 0px; |
|||
padding: 0px; |
|||
box-shadow: 0 0 16px rgba(0, 0, 0, 0.54); |
|||
} |
|||
|
|||
.yuri2-context-menu ul li { |
|||
transition: background-color 0.5s; |
|||
cursor: default; |
|||
padding: 0px 1em; |
|||
list-style: none; |
|||
line-height: 30px; |
|||
height: 30px; |
|||
font-size: 10px; |
|||
/*overflow: hidden;*/ |
|||
position: relative; |
|||
} |
|||
.yuri2-context-menu ul li div.title{ |
|||
width: 80%; |
|||
overflow: hidden; |
|||
height: 100%; |
|||
float: left; |
|||
word-break: break-all; |
|||
} |
|||
.yuri2-context-menu ul li div.title.disable { |
|||
color: darkgrey; |
|||
} |
|||
.yuri2-context-menu ul li.sub:after { |
|||
content: ">"; |
|||
float: right; |
|||
transform: scale3d(0.5,1.5,1); |
|||
position: relative; |
|||
} |
|||
.yuri2-context-menu ul li:hover { |
|||
background-color: #636363; |
|||
} |
|||
|
|||
.yuri2-context-menu ul li a { |
|||
text-decoration: none; |
|||
display: block; |
|||
height: 100%; |
|||
color: #333; |
|||
outline: none; |
|||
} |
|||
|
|||
.yuri2-context-menu ul hr { |
|||
margin: 0; |
|||
height: 0; |
|||
border: 0; |
|||
border-bottom: rgba(132, 132, 132, 0.47) 1px solid; |
|||
border-top: none |
|||
} |
|||
|
|||
/*浅色主题*/ |
|||
.yuri2-context-menu.light {background-color: #e0e0e0;border-color: #535353;color: #333333;} |
|||
.yuri2-context-menu.light ul li:hover {background-color: #707070;color: #ffffff;} |
|||
.yuri2-context-menu.light ul hr{border-color: #535353;} |
|||
@ -0,0 +1,96 @@ |
|||
/** |
|||
* contextMenu v2.2.4 |
|||
* @author Yuri2(yuri2peter@qq.com) |
|||
* @link https://github.com/yuri2peter/contextMenu
|
|||
* Enjoy! (●'◡'●) |
|||
* 基于jq的右键菜单（动态绑定） |
|||
* @author Yuri2 |
|||
*/ |
|||
window.ContextMenu={ |
|||
_className:'yuri2-context-menu', |
|||
_stopProp:function (e) { |
|||
if (e.cancelable) { |
|||
// 判断默认行为是否已经被禁用
|
|||
if (!e.defaultPrevented) { |
|||
e.preventDefault(); |
|||
} |
|||
} |
|||
e.stopImmediatePropagation(); |
|||
e.stopPropagation(); |
|||
}, |
|||
_getMainContent:function(text){ |
|||
return text.replace(/<\/?.+?>/g,""); |
|||
}, |
|||
render:function (e, menu, trigger,theme) { |
|||
theme||(theme=''); |
|||
var x=e.clientX,y=e.clientY; |
|||
this._stopProp(e); |
|||
this._removeContextMenu(); |
|||
if(menu===true){return;} |
|||
if(typeof menu === 'object' && menu.length===0){menu=[['...']]} |
|||
var dom = $("<div class='"+ContextMenu._className+" "+theme+"'><ul></ul></div>"); |
|||
$('body').append(dom); |
|||
var ul=dom.find('ul'); |
|||
if(x+150>document.body.clientWidth){x-=150;ul.addClass('left')} |
|||
menu.forEach(function (item) { |
|||
if(item==='|'){ |
|||
ul.append($('<hr/>')); |
|||
} |
|||
else if(typeof(item)==='string'){ |
|||
ul.append($('<li><div class="title" title="'+ContextMenu._getMainContent(item)+'">'+item+'</div></li>')); |
|||
} |
|||
else if(typeof(item)==='object'){ |
|||
var sub=$('<li><div class="title '+(item[2]===true?'disable':'')+'" title="'+ContextMenu._getMainContent(item[0])+'">'+item[0]+'</div></li>'); |
|||
ul.append(sub); |
|||
if(typeof(item[1])==='object'){ |
|||
var subMenu=$("<div class='sub "+ContextMenu._className+" "+theme+"'>\</div>"); |
|||
var subUl=$("<ul></ul>"); |
|||
sub.addClass('sub'); |
|||
subMenu.append(subUl); |
|||
if(x+300>document.body.clientWidth){subMenu.addClass('left')} |
|||
sub.append(subMenu); |
|||
var counterForTop = -1; |
|||
item[1].forEach(function (t) { |
|||
if(t==='|'){ |
|||
subUl.append($('<hr/>')); |
|||
} |
|||
else if(typeof(t)==='string'){ |
|||
subUl.append($('<li><div class="title" title="'+ContextMenu._getMainContent(t)+'">'+t+'</div></li>')); |
|||
counterForTop++; |
|||
} |
|||
else if(typeof(t)==='object'){ |
|||
var subLi=$('<li><div class="title '+(t[2]===true?'disable':'')+'" title="'+ContextMenu._getMainContent(t[0])+'">'+t[0]+'</div></li>'); |
|||
subUl.append(subLi); |
|||
if(t[2]!==true){ |
|||
subLi.click(trigger,t[1]); |
|||
subLi.click(function () {ContextMenu._removeContextMenu();}); |
|||
} |
|||
counterForTop++; |
|||
} |
|||
}); |
|||
if(y+dom.height()>document.body.clientHeight && document.body.clientHeight>0){ |
|||
subMenu.css('top','-'+(counterForTop*30)+'px') |
|||
} |
|||
} |
|||
else if(typeof(item[1])==='function' &&item[2]!==true){ |
|||
sub.click(trigger,item[1]); |
|||
sub.click(function () {ContextMenu._removeContextMenu();}); |
|||
} |
|||
} |
|||
}); |
|||
//修正坐标
|
|||
if(y+dom.height()>document.body.clientHeight && document.body.clientHeight>0){y-=dom.height()} |
|||
dom.css({ |
|||
top:y, |
|||
left:x, |
|||
}); |
|||
}, |
|||
_removeContextMenu:function () { |
|||
$('.'+ContextMenu._className).remove(); |
|||
}, |
|||
}; |
|||
|
|||
$(document).click(function (e) { |
|||
if ($(e.target).hasClass(ContextMenu._className) || $(e.target).parents('.'+ContextMenu._className).length > 0) return; |
|||
ContextMenu._removeContextMenu(); |
|||
}); |
|||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -0,0 +1,2 @@ |
|||
/*! layer mobile-v2.0.0 Web弹层组件 MIT License http://layer.layui.com/mobile By 贤心 */ |
|||
;!function(e){"use strict";var t=document,n="querySelectorAll",i="getElementsByClassName",a=function(e){return t[n](e)},s={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:"scale"},l={extend:function(e){var t=JSON.parse(JSON.stringify(s));for(var n in e)t[n]=e[n];return t},timer:{},end:{}};l.touch=function(e,t){e.addEventListener("click",function(e){t.call(this,e)},!1)};var r=0,o=["layui-m-layer"],c=function(e){var t=this;t.config=l.extend(e),t.view()};c.prototype.view=function(){var e=this,n=e.config,s=t.createElement("div");e.id=s.id=o[0]+r,s.setAttribute("class",o[0]+" "+o[0]+(n.type||0)),s.setAttribute("index",r);var l=function(){var e="object"==typeof n.title;return n.title?'<h3 style="'+(e?n.title[1]:"")+'">'+(e?n.title[0]:n.title)+"</h3>":""}(),c=function(){"string"==typeof n.btn&&(n.btn=[n.btn]);var e,t=(n.btn||[]).length;return 0!==t&&n.btn?(e='<span yes type="1">'+n.btn[0]+"</span>",2===t&&(e='<span no type="0">'+n.btn[1]+"</span>"+e),'<div class="layui-m-layerbtn">'+e+"</div>"):""}();if(n.fixed||(n.top=n.hasOwnProperty("top")?n.top:100,n.style=n.style||"",n.style+=" top:"+(t.body.scrollTop+n.top)+"px"),2===n.type&&(n.content='<i></i><i class="layui-m-layerload"></i><i></i><p>'+(n.content||"")+"</p>"),n.skin&&(n.anim="up"),"msg"===n.skin&&(n.shade=!1),s.innerHTML=(n.shade?"<div "+("string"==typeof n.shade?'style="'+n.shade+'"':"")+' class="layui-m-layershade"></div>':"")+'<div class="layui-m-layermain" '+(n.fixed?"":'style="position:static;"')+'><div class="layui-m-layersection"><div class="layui-m-layerchild '+(n.skin?"layui-m-layer-"+n.skin+" ":"")+(n.className?n.className:"")+" "+(n.anim?"layui-m-anim-"+n.anim:"")+'" '+(n.style?'style="'+n.style+'"':"")+">"+l+'<div class="layui-m-layercont">'+n.content+"</div>"+c+"</div></div></div>",!n.type||2===n.type){var d=t[i](o[0]+n.type),y=d.length;y>=1&&layer.close(d[0].getAttribute("index"))}document.body.appendChild(s);var u=e.elem=a("#"+e.id)[0];n.success&&n.success(u),e.index=r++,e.action(n,u)},c.prototype.action=function(e,t){var n=this;e.time&&(l.timer[n.index]=setTimeout(function(){layer.close(n.index)},1e3*e.time));var a=function(){var t=this.getAttribute("type");0==t?(e.no&&e.no(),layer.close(n.index)):e.yes?e.yes(n.index):layer.close(n.index)};if(e.btn)for(var s=t[i]("layui-m-layerbtn")[0].children,r=s.length,o=0;o<r;o++)l.touch(s[o],a);if(e.shade&&e.shadeClose){var c=t[i]("layui-m-layershade")[0];l.touch(c,function(){layer.close(n.index,e.end)})}e.end&&(l.end[n.index]=e.end)},e.layer={v:"2.0",index:r,open:function(e){var t=new c(e||{});return t.index},close:function(e){var n=a("#"+o[0]+e)[0];n&&(n.innerHTML="",t.body.removeChild(n),clearTimeout(l.timer[e]),delete l.timer[e],"function"==typeof l.end[e]&&l.end[e](),delete l.end[e])},closeAll:function(){for(var e=t[i](o[0]),n=0,a=e.length;n<a;n++)layer.close(0|e[0].getAttribute("index"))}},"function"==typeof define?define(function(){return layer}):function(){var e=document.scripts,n=e[e.length-1],i=n.src,a=i.substring(0,i.lastIndexOf("/")+1);n.getAttribute("merge")||document.head.appendChild(function(){var e=t.createElement("link");return e.href=a+"need/layer.css?2.0",e.type="text/css",e.rel="styleSheet",e.id="layermcss",e}())}()}(window); |
|||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 11 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 701 B |
|
After 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
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue