11.24 V1 total front_end project
This commit is contained in:
daddyhuu
parent
33fbbc6d3c
commit
322fec424b
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
23
babel.config.js
Normal file
23
babel.config.js
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
// module.exports = {
|
||||||
|
// presets: [
|
||||||
|
// '@vue/cli-plugin-babel/preset',
|
||||||
|
// ["@babel/preset-env", { "modules": false }]
|
||||||
|
// ],
|
||||||
|
// plugins: [
|
||||||
|
// [
|
||||||
|
// "@babel/plugin-transform-runtime",
|
||||||
|
// {
|
||||||
|
// "corejs": 2,
|
||||||
|
// "sourceType": "unambiguous"
|
||||||
|
// }
|
||||||
|
// ],
|
||||||
|
|
||||||
|
// ]
|
||||||
|
|
||||||
|
// }
|
||||||
19
jsconfig.json
Normal file
19
jsconfig.json
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"module": "esnext",
|
||||||
|
"baseUrl": "./",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"src/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"lib": [
|
||||||
|
"esnext",
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"scripthost"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
11941
package-lock.json
generated
Normal file
11941
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
65
package.json
Normal file
65
package.json
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
{
|
||||||
|
"name": "finacial",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@jiaminghi/data-view": "^2.10.0",
|
||||||
|
"axios": "^1.4.0",
|
||||||
|
"core-js": "^3.8.3",
|
||||||
|
"cytoscape": "^3.27.0",
|
||||||
|
"cytoscape-all-paths": "^0.1.0",
|
||||||
|
"cytoscape-automove": "^1.10.3",
|
||||||
|
"cytoscape-bubblesets": "^3.2.0",
|
||||||
|
"cytoscape-cxtmenu": "^3.5.0",
|
||||||
|
"cytoscape-euler": "^1.2.2",
|
||||||
|
"cytoscape-expand-collapse": "^4.1.0",
|
||||||
|
"cytoscape-layers": "^2.4.3",
|
||||||
|
"cytoscape-spread": "^3.0.0",
|
||||||
|
"cytoscape-undo-redo": "^1.3.3",
|
||||||
|
"d3": "^7.8.5",
|
||||||
|
"echarts": "^4.9.0",
|
||||||
|
"element-ui": "^2.15.13",
|
||||||
|
"less": "^4.1.2",
|
||||||
|
"less-loader": "^6.0.0",
|
||||||
|
"mockjs": "^1.1.0",
|
||||||
|
"vue": "^2.6.14",
|
||||||
|
"vue-router": "^3.6.5",
|
||||||
|
"vuex": "^3.6.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.12.16",
|
||||||
|
"@babel/eslint-parser": "^7.12.16",
|
||||||
|
"@babel/preset-env": "^7.22.9",
|
||||||
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||||
|
"@vue/cli-service": "~5.0.0",
|
||||||
|
"babel-plugin-component": "^1.1.1",
|
||||||
|
"eslint": "^7.32.0",
|
||||||
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
|
"vue-template-compiler": "^2.6.14"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/essential",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "@babel/eslint-parser"
|
||||||
|
},
|
||||||
|
"rules": {}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead"
|
||||||
|
]
|
||||||
|
}
|
||||||
18
public/index.html
Normal file
18
public/index.html
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<!-- <link rel="icon" href="Logo.ico"> -->
|
||||||
|
<link rel="icon" href="数据显示.ico">
|
||||||
|
<title>资本市场系统性风险平台</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
37
src/App.vue
Normal file
37
src/App.vue
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<!-- 路由出口 -->
|
||||||
|
<!-- 路由匹配组建将渲染到这里 -->
|
||||||
|
<router-view> </router-view>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// import http from './utils/request'//导入接口？？
|
||||||
|
// import {getData} from './api'
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">//消除固定样式
|
||||||
|
html,body,h3{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.superscript{ // 1、上标
|
||||||
|
font-size: 13px;
|
||||||
|
padding:10px;
|
||||||
|
color:#fff;
|
||||||
|
background-color: rgba(2, 167, 240, 0.729411764705882);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
BIN
src/assets/Logo.png
Normal file
BIN
src/assets/Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
src/assets/background.jpg
Normal file
BIN
src/assets/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/r-c.png
Normal file
BIN
src/assets/r-c.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
22
src/assets/svg/card.svg
Normal file
22
src/assets/svg/card.svg
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="259px" height="170px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<mask fill="white" id="clip336">
|
||||||
|
<path d="M 251 0 L 31.3118811881188 0 L 2 31.9661016949153 L 2 163.305084745763 L 251 163.305084745763 L 251 0 Z " fill-rule="evenodd" />
|
||||||
|
</mask>
|
||||||
|
<filter x="201px" y="107px" width="259px" height="170px" filterUnits="userSpaceOnUse" id="filter337">
|
||||||
|
<feOffset dx="3" dy="3" in="SourceAlpha" result="shadowOffsetInner" />
|
||||||
|
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner" result="shadowGaussian" />
|
||||||
|
<feComposite in2="shadowGaussian" operator="atop" in="SourceAlpha" result="shadowComposite" />
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.349019607843137 0 " in="shadowComposite" />
|
||||||
|
</filter>
|
||||||
|
<g id="widget338">
|
||||||
|
<path d="M 251 0 L 31.3118811881188 0 L 2 31.9661016949153 L 2 163.305084745763 L 251 163.305084745763 L 251 0 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 201 107 )" />
|
||||||
|
<path d="M 251 0 L 31.3118811881188 0 L 2 31.9661016949153 L 2 163.305084745763 L 251 163.305084745763 L 251 0 Z " stroke-width="2" stroke="#555555" fill="none" transform="matrix(1 0 0 1 201 107 )" mask="url(#clip336)" />
|
||||||
|
</g>
|
||||||
|
</defs>
|
||||||
|
<g transform="matrix(1 0 0 1 -201 -107 )">
|
||||||
|
<use xlink:href="#widget338" filter="url(#filter337)" />
|
||||||
|
<use xlink:href="#widget338" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
src/assets/数据显示.png
Normal file
BIN
src/assets/数据显示.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 420 B |
85
src/bigscreen/大屏.vue
Normal file
85
src/bigscreen/大屏.vue
Normal file
|
|
@ -0,0 +1,85 @@
|
||||||
|
<template>
|
||||||
|
<div id="home">
|
||||||
|
<dv-full-screen-container>
|
||||||
|
<!--一行两等份-->
|
||||||
|
<div class="head">大规模泛金融知识图谱系统</div>
|
||||||
|
<div class="module-box">
|
||||||
|
|
||||||
|
<div style="flex: 0 1 25%">
|
||||||
|
<dv-border-box-12 style="width: 100%; height: 180px">
|
||||||
|
<div style="color:white;padding:10px 10px;">类型统计</div>
|
||||||
|
</dv-border-box-12>
|
||||||
|
<dv-border-box-12 style="width: 100%; height: 180px">
|
||||||
|
<div style="color:white;padding:10px 10px;">健康指数</div>
|
||||||
|
</dv-border-box-12>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="flex: 0 1 50%">
|
||||||
|
<dv-border-box-8 style="width: 100%; height: 360px"></dv-border-box-8>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="flex: 0 1 25%">
|
||||||
|
<dv-border-box-12 style="width: 100%; height: 180px">
|
||||||
|
<div style="color:white;padding:10px 10px;">图谱统计</div>
|
||||||
|
</dv-border-box-12>
|
||||||
|
<dv-border-box-12 style="width: 100%; height: 180px">
|
||||||
|
<div style="color:white;padding:10px 10px;">区域分析</div>
|
||||||
|
</dv-border-box-12>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="module-box">
|
||||||
|
<div style="flex: 0 1 25%">
|
||||||
|
<dv-border-box-12 style="width: 100%; height: 180px;">
|
||||||
|
<div style="color:white;padding:10px 10px;">当前事件统计</div>
|
||||||
|
</dv-border-box-12>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="flex: 0 1 50%">
|
||||||
|
<dv-border-box-8 style="width: 100%; height: 180px;">
|
||||||
|
<div style="color:white;padding:10px 10px;">行业风险价值曲线图</div>
|
||||||
|
</dv-border-box-8>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="flex: 0 1 25%">
|
||||||
|
<dv-border-box-12 style="width: 100%; height: 180px;">
|
||||||
|
<div style="color:white;padding:10px 10px;">行业价值评估</div>
|
||||||
|
</dv-border-box-12>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</dv-full-screen-container>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
methods: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.head{
|
||||||
|
color: aliceblue;
|
||||||
|
text-align:center;
|
||||||
|
padding-top:12px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
#home {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url("../assets/background.jpg") center center no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute; /*/绝对定位 */
|
||||||
|
}
|
||||||
|
.module-box {
|
||||||
|
display: flex;
|
||||||
|
justify-self: space-between;
|
||||||
|
margin: 1px;
|
||||||
|
padding-left:15px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
62
src/bigscreen/大屏10-27.vue
Normal file
62
src/bigscreen/大屏10-27.vue
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
<!-- -->
|
||||||
|
<template>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="home">
|
||||||
|
|
||||||
|
<!-- 全屏容器dv-full-screen-container -->
|
||||||
|
<dv-full-screen-container>
|
||||||
|
<!-- 边框dv-border-box -->
|
||||||
|
|
||||||
|
<div style="flex:0 1 50%;padding-bottom: 10px;"> <!-- flex-grow | flex-shrink | flex-basis */没懂 -->
|
||||||
|
<dv-border-box-7 style="width: 100%;height:60px;">
|
||||||
|
<div style="color: aliceblue;text-align: center;padding: 10px;">大规模泛金融知识图谱系统"</div>
|
||||||
|
<dv-decoration-10 style="width:100%;height:5px;" />
|
||||||
|
</dv-border-box-7>
|
||||||
|
</div>
|
||||||
|
<div style="flex:0 1 50%"> <!-- flex-grow | flex-shrink | flex-basis */没懂 -->
|
||||||
|
<dv-border-box-7 style="width: 100%;height: 200px;">
|
||||||
|
<region/>
|
||||||
|
</dv-border-box-7>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</dv-full-screen-container>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import region from "../components/region.vue";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
region
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
|
||||||
|
|
||||||
|
#home {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url("../assets/background.jpg") center center no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position:absolute;/*/绝对定位 */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
243
src/components/CommonAside.vue
Normal file
243
src/components/CommonAside.vue
Normal file
|
|
@ -0,0 +1,243 @@
|
||||||
|
<!-- 侧导航栏 -->
|
||||||
|
<template>
|
||||||
|
<el-menu
|
||||||
|
default-active="1-4-1"
|
||||||
|
class="el-menu-vertical-demo"
|
||||||
|
@open="handleOpen"
|
||||||
|
@close="handleClose"
|
||||||
|
:collapse="isCollapse"
|
||||||
|
background-color="#000000"
|
||||||
|
text-color="#fff"
|
||||||
|
active-text-color="#ffd04b"
|
||||||
|
style="height:1200px">
|
||||||
|
<!-- style="height:auto" -->
|
||||||
|
<!-- <img src="/image/Logo.png" width="100%" > -->
|
||||||
|
<!-- <img src="/image/Logo.png" /> -->
|
||||||
|
<div style="display=flex;">
|
||||||
|
<!-- <img src="../assets/Logo.png" width="12%" style="display:inline-block;padding-right: 3px;" align="absmiddle"> -->
|
||||||
|
<img src="../assets/数据显示.png" width="12%" style="display:inline-block;padding-left: 1px;padding-right: 5px;" align="absmiddle">
|
||||||
|
<!-- align="absmiddle"让图像和文字一样高 -->
|
||||||
|
<h3 style="display:inline-block;" @click = "bigscreen">资本市场系统性风险平台</h3>
|
||||||
|
<!-- -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 循环遍历所有的单导航栏 -->
|
||||||
|
<!-- 没有子菜单 -->
|
||||||
|
<el-menu-item @click='clickMenu(item)' v-for="item in nochildren" :key='item.name' :index='item.name'>
|
||||||
|
<!-- : 是v-bind: -->
|
||||||
|
<i :class="`el-icon-${item.icon}`"></i> <!-- 图标，官网可选 -->
|
||||||
|
<span slot="title">{{ item.label }}</span>
|
||||||
|
</el-menu-item>
|
||||||
|
|
||||||
|
<!-- 有子菜单 -->
|
||||||
|
<el-submenu v-for="item in hasChildren" :key='item.label' :index='item.label'><!-- index都是为了确保唯一性 -->
|
||||||
|
<template slot="title">
|
||||||
|
<i :class="`el-icon-${item.icon}`"></i>
|
||||||
|
<span slot="title">{{ item.label }}</span>
|
||||||
|
</template>
|
||||||
|
<el-menu-item-group v-for='subItem in item.children' :key='subItem.path'>
|
||||||
|
<el-menu-item @click='clickMenu(subItem)' :index="subItem.path" style="padding-left: 70px;">{{subItem.label}}</el-menu-item>
|
||||||
|
</el-menu-item-group>
|
||||||
|
|
||||||
|
</el-submenu>
|
||||||
|
|
||||||
|
</el-menu>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isCollapse: false, //不折叠
|
||||||
|
menuData: [
|
||||||
|
|
||||||
|
{
|
||||||
|
path: "/",
|
||||||
|
name: "home",
|
||||||
|
label: "首页",
|
||||||
|
icon: "s-home",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/market_entities",//1
|
||||||
|
name: "market_entities",
|
||||||
|
label: "市场主体分析",
|
||||||
|
icon: "s-flag",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
//2
|
||||||
|
label: "市场风险分析",
|
||||||
|
icon: "s-marketing",
|
||||||
|
|
||||||
|
children:[
|
||||||
|
{
|
||||||
|
path: "/systematic_risk",//2-1
|
||||||
|
name: "systematic_risk",
|
||||||
|
label: "系统性风险分析",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/individual_risk",//2-2
|
||||||
|
name: "individual_risk",
|
||||||
|
label: "个体风险分析",
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/influential_entities",//3
|
||||||
|
name: "influential_entities",
|
||||||
|
label: "高影响主体分析",
|
||||||
|
icon: "star-off",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// path: "/warning",//4
|
||||||
|
label: "预警服务",
|
||||||
|
icon: "bell",
|
||||||
|
children:[
|
||||||
|
{
|
||||||
|
path: "/warning",//4-1
|
||||||
|
name: "warning",
|
||||||
|
label: "预警服务",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/risk_warning",//4-1
|
||||||
|
name: "risk_warning",
|
||||||
|
label: "风险预警",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/abnormal_detection",//4-2
|
||||||
|
name: "abnormal_detection",
|
||||||
|
label: "异常检测",
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
],
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/health",//5
|
||||||
|
name: "health",
|
||||||
|
label: "健康指数",
|
||||||
|
icon: "umbrella",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/pressure",//6
|
||||||
|
name: "pressure",
|
||||||
|
label: "压力测试",
|
||||||
|
icon: "s-help",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/quotation",//7
|
||||||
|
name: "quotation",
|
||||||
|
label: "行情分析",
|
||||||
|
icon: "s-data",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// path: "/event",//8
|
||||||
|
label: "事件分析",
|
||||||
|
icon: "document",
|
||||||
|
children:[
|
||||||
|
{
|
||||||
|
path: "/event_analysis",//2
|
||||||
|
name: "event_analysis",
|
||||||
|
label: "事件分析",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/event_graph",//2
|
||||||
|
name: "event_graph",
|
||||||
|
label: "事件图谱",
|
||||||
|
},]
|
||||||
|
},
|
||||||
|
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
bigscreen(){//点击标题跳转大屏
|
||||||
|
this.$router.push('/bigscreen');
|
||||||
|
},
|
||||||
|
handleOpen(key, keyPath) {
|
||||||
|
console.log(key, keyPath);
|
||||||
|
},
|
||||||
|
handleClose(key, keyPath) {
|
||||||
|
console.log(key, keyPath);
|
||||||
|
},
|
||||||
|
//点击菜单
|
||||||
|
clickMenu(item){
|
||||||
|
// 当页面的路由this.$route.path 与 跳转的路由item.path 不一致才允许跳转
|
||||||
|
if (this.$route.path !== item.path && !(this.$route.path === '/home' && (item.path === '/'))) {//$route是当前路径的路由
|
||||||
|
this.$router.push(item.path)//$router是整个的router实例
|
||||||
|
}
|
||||||
|
this.$store.commit('selectMenu', item)//点击获取新路由对象,store在这里不用import
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
hasChildren() {//有子菜单才需要用
|
||||||
|
return this.menuData.filter((item) => item.children);
|
||||||
|
},
|
||||||
|
nochildren() {
|
||||||
|
return this.menuData.filter((item) => !item.children);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.el-menu-vertical-demo:not(.el-menu--collapse) {//背景？？
|
||||||
|
width: 220px;
|
||||||
|
min-height: 300px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.el-menu-item, .el-submenu__title {//导航选项间隔
|
||||||
|
height: 40px;//导航选项之间
|
||||||
|
line-height: 45px;//导航上边距
|
||||||
|
|
||||||
|
}
|
||||||
|
.el-dropdown-menu__item, .el-menu-item {//导航字体大小
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu{
|
||||||
|
height:100vh;//背景布满
|
||||||
|
h3{
|
||||||
|
// color: #fff;
|
||||||
|
// text-align: center;
|
||||||
|
// line-height: normal;
|
||||||
|
// font-size: 13px;
|
||||||
|
font-family: 'Arial Normal', 'Arial', sans-serif;
|
||||||
|
font-weight: bold;//字体加粗
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 4;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/deep/ .el-menu-item-group__title { // 有孩子的标题
|
||||||
|
padding: 0px 0 0px 0px;//去掉距离
|
||||||
|
line-height: normal;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .el-submenu__title {
|
||||||
|
font-size: 13px;
|
||||||
|
height: 40px!important;
|
||||||
|
line-height: 50px!important;
|
||||||
|
|
||||||
|
}
|
||||||
|
/deep/ .el-submenu__icon-arrow {
|
||||||
|
position: absolute;
|
||||||
|
top: 70%;//和文字调整一致
|
||||||
|
color:#fff;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
161
src/components/CommonHeader.vue
Normal file
161
src/components/CommonHeader.vue
Normal file
|
|
@ -0,0 +1,161 @@
|
||||||
|
<!-- 上导航栏 -->
|
||||||
|
<template>
|
||||||
|
<div class="header-container">
|
||||||
|
|
||||||
|
<div class="l-content">
|
||||||
|
<!-- tag -->
|
||||||
|
<div class="tags" >
|
||||||
|
|
||||||
|
<el-tag v-for="(item,index) in tags"
|
||||||
|
:key="item.path"
|
||||||
|
:closable="item.name!=='home'"
|
||||||
|
:effect="$route.name === item.name ? 'dark' : 'plain'"
|
||||||
|
@click="changeMenu(item)"
|
||||||
|
@close="handledClose(item,index)"
|
||||||
|
style="margin-left: 5px"><!-- 只有非首页才显示closable，点击该页颜色加深effect-->
|
||||||
|
{{ item.label }}
|
||||||
|
</el-tag>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!--
|
||||||
|
<el-breadcrumb separator="">
|
||||||
|
<el-breadcrumb-item :to="{ path: '/' }">
|
||||||
|
<el-button size="small" >首页</el-button>
|
||||||
|
</el-breadcrumb-item>
|
||||||
|
<el-breadcrumb-item><a href="/">
|
||||||
|
<el-button size="small" >风险主体总量<i class="el-icon-close" size="mini " ></i>
|
||||||
|
|
||||||
|
</el-button>
|
||||||
|
</a></el-breadcrumb-item>
|
||||||
|
</el-breadcrumb> -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <span class="text">首页</span> -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- 用户信息 登录注册 -->
|
||||||
|
<div class="r-content">
|
||||||
|
<!--练习的弹出框 -->
|
||||||
|
<el-dialog
|
||||||
|
title="提示"
|
||||||
|
:visible.sync="dialogVisible"
|
||||||
|
width="30%">
|
||||||
|
<span>这是一段信息</span>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<!-- 右侧登录页面设计 -->
|
||||||
|
<el-dropdown>
|
||||||
|
<span class="el-dropdown-link">
|
||||||
|
<el-button icon=el-icon-s-custom circle> </el-button> <!--登录图表按钮-->
|
||||||
|
<span class="text">用户信息</span>
|
||||||
|
<i class="el-icon-arrow-down el-icon--right"></i> <!--下拉-->
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item>
|
||||||
|
<!-- 点击后改变弹出框生效情况 -->
|
||||||
|
<el-button type="text" @click="dialogVisible = true">注册</el-button>
|
||||||
|
</el-dropdown-item>
|
||||||
|
|
||||||
|
<el-dropdown-item>
|
||||||
|
<el-button type="text" @click="dialogVisible = true">登录</el-button>
|
||||||
|
</el-dropdown-item>
|
||||||
|
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {mapState,mapMutations} from 'vuex'
|
||||||
|
export default {
|
||||||
|
name: "CommonTag",
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
dialogVisible:false,//用户登录页面
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState({//mapState返回一个对象，表示扩展运算符，起到解构的作用...
|
||||||
|
tags: state => state.tab.tabsList
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
//调用Mutations,获取closeTag，并添加到当前页面中（讲解34）
|
||||||
|
...mapMutations(['closeTag']),
|
||||||
|
//点击tag跳转的功能
|
||||||
|
changeMenu(item){
|
||||||
|
// console.log(item)
|
||||||
|
this.$router.push({name: item.name})//点击一个，新增一个，面包屑tab增加一个
|
||||||
|
},
|
||||||
|
//点击tag x删除
|
||||||
|
handledClose(item,index){ //index是获取的索引
|
||||||
|
//点击tag删除 tabsList里面的数据
|
||||||
|
// 方法1
|
||||||
|
// this.$store.commit('closeTag')
|
||||||
|
// 方法2,调用store中的Mutations
|
||||||
|
this.closeTag(item)
|
||||||
|
const length=this.tags.length-1
|
||||||
|
//删除之后的跳转逻辑
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
|
||||||
|
.header-container{
|
||||||
|
padding: 0 30px;
|
||||||
|
background-color: #33333325;
|
||||||
|
height: 60px;
|
||||||
|
display: flex;//相邻的两个内容一行显示
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.text{
|
||||||
|
color:rgba(0, 0, 0, 0.719);
|
||||||
|
font-size: 13px;
|
||||||
|
margin-left: 5px;//左间距
|
||||||
|
margin-bottom: 10px;//下间距
|
||||||
|
|
||||||
|
}
|
||||||
|
.l-content{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: end; // 中间
|
||||||
|
}
|
||||||
|
.r-content{
|
||||||
|
margin-top: 5px;//下间距
|
||||||
|
align-items: top; // 中间
|
||||||
|
.el-button.is-circle {
|
||||||
|
border-radius: 100%;
|
||||||
|
padding: 3px;//边框和内部距离
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button {//按钮边框
|
||||||
|
background: #ffffff00;
|
||||||
|
border: 1px solid #00040e;
|
||||||
|
color: #000104;
|
||||||
|
font-size: 16px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
154
src/components/addline.vue
Normal file
154
src/components/addline.vue
Normal file
|
|
@ -0,0 +1,154 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="form">
|
||||||
|
<!-- inline="true"表单域在一行 -->
|
||||||
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||||
|
<el-form-item label="公司名称">
|
||||||
|
<el-input v-model="formInline.company_str" placeholder="公司名称：" size="mini"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="onSubmit" icon="el-icon-search" size="mini">查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<div id='echarts' ref="echarts_1" style="height:300px;width:600px;margin-left: 200px;"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import * as echarts from "echarts"
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 新数据
|
||||||
|
x:['2000/6/5','2000/6/6','2000/6/7','2000/6/8','2000/6/9','2000/6/10','2000/6/11','2000/6/12','2000/6/13','2000/6/14','2000/6/15','2000/6/16','2000/6/17','2000/6/18','2000/6/19','2000/6/20','2000/6/21','2000/6/22','2000/6/23','2000/6/24','2000/6/25','2000/6/26','2000/6/27','2000/6/28','2000/6/29','2000/6/30','2000/7/1','2000/7/2','2000/7/3','2000/7/4','2000/7/5','2000/7/6','2000/7/7','2000/7/8','2000/7/9','2000/7/10','2000/7/11','2000/7/12','2000/7/13','2000/7/14','2000/7/15','2000/7/16','2000/7/17','2000/7/18','2000/7/19','2000/7/20','2000/7/21','2000/7/22','2000/7/23','2000/7/24'],
|
||||||
|
y1:[200,269,286,153,297,243,184,178,292,298,283,282,228,251,320,316,131,173,138,329,197,246,257,232,271,161,212,147,200,348,251,119,190,132,147,211,255,323,190,157,123,269,106,183,237,296,156,61,101,301],
|
||||||
|
y2:[319,162,213,69,167,337,171,283,285,203,322,81,185,259,212,305,206,236,70,224,309,254,86,107,334,153,243,141,251,306,306,317,271,290,254,220,154,156,54,70,133,223,265,51,339,270,184,332,163,197],
|
||||||
|
y3:[329,113,251,118,324,328,140,284,231,189,192,275,73,311,313,299,199,300,249,160,263,272,159,245,222,104,203,283,332,147,278,339,207,159,66,106,338,63,258,191,246,141,243,90,290,330,93,76,134,86],
|
||||||
|
y4:[284,265,335,75,234,121,66,258,104,291,197,248,56,340,120,327,328,81,179,282,211,90,147,320,150,200,236,210,205,192,318,184,98,228,55,66,231,151,63,149,329,127,111,57,64,55,119,137,247,270],
|
||||||
|
|
||||||
|
formInline: {
|
||||||
|
company_str: '',
|
||||||
|
},
|
||||||
|
legend_1:['银行'],
|
||||||
|
series_1:[{
|
||||||
|
name: '银行',
|
||||||
|
type: 'line',
|
||||||
|
data: [200,269,286,153,297,243,184,178,292,298,283,282,228,251,320,316,131,173,138,329,197,246,257,232,271,161,212,147,200,348,251,119,190,132,147,211,255,323,190,157,123,269,106,183,237,296,156,61,101,301],
|
||||||
|
}],
|
||||||
|
|
||||||
|
|
||||||
|
option_1 : {
|
||||||
|
title: [{
|
||||||
|
x :'center',
|
||||||
|
y:'bottom',
|
||||||
|
|
||||||
|
text: '各行业风险价值（机构处于极端困难情况时）的时序变化'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
legend: {data:
|
||||||
|
this.series_1
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
saveAsImage: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: this.x,//其中的一个数据
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: '银行',
|
||||||
|
type: 'line',
|
||||||
|
// stack: 'Total',
|
||||||
|
data: [200,269,286,153,297,243,184,178,292,298,283,282,228,251,320,316,131,173,138,329,197,246,257,232,271,161,212,147,200,348,251,119,190,132,147,211,255,323,190,157,123,269,106,183,237,296,156,61,101,301],
|
||||||
|
}],
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
linedata_1:[
|
||||||
|
{
|
||||||
|
name: '银行',
|
||||||
|
type: 'line',
|
||||||
|
data: [200,269,286,153,297,243,184,178,292,298,283,282,228,251,320,316,131,173,138,329,197,246,257,232,271,161,212,147,200,348,251,119,190,132,147,211,255,323,190,157,123,269,106,183,237,296,156,61,101,301],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '北京银行',
|
||||||
|
type: 'line',
|
||||||
|
data: [319,162,213,69,167,337,171,283,285,203,322,81,185,259,212,305,206,236,70,224,309,254,86,107,334,153,243,141,251,306,306,317,271,290,254,220,154,156,54,70,133,223,265,51,339,270,184,332,163,197],
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '中国银行',
|
||||||
|
type: 'line',
|
||||||
|
data: [329,113,251,118,324,328,140,284,231,189,192,275,73,311,313,299,199,300,249,160,263,272,159,245,222,104,203,283,332,147,278,339,207,159,66,106,338,63,258,191,246,141,243,90,290,330,93,76,134,86],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Direct',
|
||||||
|
type: 'line',
|
||||||
|
data: [284,265,335,75,234,121,66,258,104,291,197,248,56,340,120,327,328,81,179,282,211,90,147,320,150,200,236,210,205,192,318,184,98,228,55,66,231,151,63,149,329,127,111,57,64,55,119,137,247,270],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Search Engine',
|
||||||
|
type: 'line',
|
||||||
|
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
// 风险价值动态变化
|
||||||
|
this.onSubmit()
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onSubmit() {
|
||||||
|
if (this.formInline.company_str!==''){
|
||||||
|
console.log(this.formInline.company_str)
|
||||||
|
let tmp=this.linedata_1.find(item => item.name === this.formInline.company_str) //es6
|
||||||
|
this.option_1.series.push(tmp)
|
||||||
|
console.log(this.option_1.series)
|
||||||
|
|
||||||
|
}
|
||||||
|
let echarts1 = echarts.init(this.$refs.echarts_1)
|
||||||
|
echarts1.setOption(this.option_1)
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
|
||||||
|
|
||||||
|
// 第一层
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
80
src/components/echarts/HalfDoughnut.vue
Normal file
80
src/components/echarts/HalfDoughnut.vue
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
<template>
|
||||||
|
<!-- 半圆饼图-Half Doughnut Chart -->
|
||||||
|
<div id="banyuan" style="width: 800px; height: 400px;padding-left:250px"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
export default {
|
||||||
|
mounted() {
|
||||||
|
var myChart = echarts.init(document.getElementById("banyuan"));
|
||||||
|
var option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: "item",
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: "异常类型占比",
|
||||||
|
left: "center",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 17,
|
||||||
|
lineHeight: 85,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '0%',
|
||||||
|
top: '0%',
|
||||||
|
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
top: "15%",
|
||||||
|
left: "center",
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "proportion of abnormal risk",
|
||||||
|
type: "pie",
|
||||||
|
radius: ["40%", "80%"],
|
||||||
|
center: ["50%", "70%"],
|
||||||
|
// adjust the start angle
|
||||||
|
startAngle: 180,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
formatter(param) {
|
||||||
|
// correct the percentage
|
||||||
|
return param.name + " (" + param.percent * 2 + "%)";
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 300, name: "股价波动异常" },
|
||||||
|
{ value: 350, name: "高频交易" },
|
||||||
|
{ value: 200, name: "资产泡沫" },
|
||||||
|
{ value: 120, name: "事件风险波及" },
|
||||||
|
{ value: 110, name: "风险事件时长" },
|
||||||
|
{ value: 280, name: "事件热度异常" },
|
||||||
|
{
|
||||||
|
// make an record to fill the bottom 50%
|
||||||
|
value: 300+350+200+120+110+280,
|
||||||
|
itemStyle: {
|
||||||
|
// stop the chart from rendering this piece
|
||||||
|
color: "none",
|
||||||
|
decal: {
|
||||||
|
symbol: "none",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
103
src/components/echarts/ZhiFang(1).vue
Normal file
103
src/components/echarts/ZhiFang(1).vue
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
<template>
|
||||||
|
<div id="zhifang" style="width: 85%; height: 400px"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
export default {
|
||||||
|
mounted() {
|
||||||
|
var myChart = echarts.init(document.getElementById("zhifang"));
|
||||||
|
var option = {
|
||||||
|
title:{
|
||||||
|
text: "交易量/频次及股票变换趋势",
|
||||||
|
left: "center",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 17,
|
||||||
|
lineHeight: 30,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "cross",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
right: "20%",
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ["交易量","收盘价"],
|
||||||
|
padding:[70,0,0,100],
|
||||||
|
orient: 'vertical',
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
alignWithLabel: true,
|
||||||
|
show:false
|
||||||
|
},
|
||||||
|
axisLabel:{
|
||||||
|
interval:0,
|
||||||
|
rotate:30
|
||||||
|
},
|
||||||
|
data: ['2021-1-1', '2021-1-2', '2021-1-3', '2021-1-4', '2021-1-5', '2021-1-6', '2021-1-7', '2021-1-8', '2021-1-9', '2021-1-10', '2021-1-11', '2021-1-12'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
name: "交易量",
|
||||||
|
position: "right",
|
||||||
|
alignTicks: true,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: "{value}支",
|
||||||
|
textStyle:{
|
||||||
|
color:'blue'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
name: "收盘价",
|
||||||
|
position: "left",
|
||||||
|
alignTicks: true,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: "{value}元",
|
||||||
|
textStyle:{
|
||||||
|
color:'green'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "交易量",
|
||||||
|
type: "bar",
|
||||||
|
data: [
|
||||||
|
100, 120, 80, 230, 150,90, 170, 162, 250, 110, 60, 200,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "收盘价",
|
||||||
|
type: "line",
|
||||||
|
yAxisIndex: 1,
|
||||||
|
data: [
|
||||||
|
10, 25, 30, 19, 12, 16, 26, 23, 20, 17, 21, 15,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
213
src/components/industryComponent.vue
Normal file
213
src/components/industryComponent.vue
Normal file
|
|
@ -0,0 +1,213 @@
|
||||||
|
<template>
|
||||||
|
<el-select v-model="industry" placeholder="选择行业" size="mini">
|
||||||
|
<el-option v-for="item in options_industry" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "industryComponent",
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
industry:'',
|
||||||
|
options_industry: [{
|
||||||
|
value: "新闻和出版业",
|
||||||
|
label: "新闻和出版业"}, {
|
||||||
|
value: "保险业",
|
||||||
|
label: "保险业"}, {
|
||||||
|
value: "铁路运输业",
|
||||||
|
label: "铁路运输业"}, {
|
||||||
|
value: "电力、热力生产和供应业",
|
||||||
|
label: "电力、热力生产和供应业"}, {
|
||||||
|
value: "专业技术服务业",
|
||||||
|
label: "专业技术服务业"}, {
|
||||||
|
value: "汽车制造业",
|
||||||
|
label: "汽车制造业"}, {
|
||||||
|
value: "零售业",
|
||||||
|
label: "零售业"}, {
|
||||||
|
value: "医药制造业",
|
||||||
|
label: "医药制造业"}, {
|
||||||
|
value: "电气机械和器材制造业",
|
||||||
|
label: "电气机械和器材制造业"}, {
|
||||||
|
value: "科技推广和应用服务业",
|
||||||
|
label: "科技推广和应用服务业"}, {
|
||||||
|
value: "金属制品业",
|
||||||
|
label: "金属制品业"}, {
|
||||||
|
value: "非金属矿物制品业",
|
||||||
|
label: "非金属矿物制品业"}, {
|
||||||
|
value: "软件和信息技术服务业",
|
||||||
|
label: "软件和信息技术服务业"}, {
|
||||||
|
value: "计算机、通信和其他电子设备制造业",
|
||||||
|
label: "计算机、通信和其他电子设备制造业"}, {
|
||||||
|
value: "化学原料和化学制品制造业",
|
||||||
|
label: "化学原料和化学制品制造业"}, {
|
||||||
|
value: "航空运输业",
|
||||||
|
label: "航空运输业"}, {
|
||||||
|
value: "石油、煤炭及其他燃料加工业",
|
||||||
|
label: "石油、煤炭及其他燃料加工业"}, {
|
||||||
|
value: "石油和天然气开采业",
|
||||||
|
label: "石油和天然气开采业"}, {
|
||||||
|
value: "电信、广播电视和卫星传输服务",
|
||||||
|
label: "电信、广播电视和卫星传输服务"}, {
|
||||||
|
value: "土木工程建筑业",
|
||||||
|
label: "土木工程建筑业"}, {
|
||||||
|
value: "互联网和相关服务",
|
||||||
|
label: "互联网和相关服务"}, {
|
||||||
|
value: "有色金属冶炼和压延加工业",
|
||||||
|
label: "有色金属冶炼和压延加工业"}, {
|
||||||
|
value: "商务服务业",
|
||||||
|
label: "商务服务业"}, {
|
||||||
|
value: "资本市场服务",
|
||||||
|
label: "资本市场服务"}, {
|
||||||
|
value: "铁路、船舶、航空航天和其他运输设备制造业",
|
||||||
|
label: "铁路、船舶、航空航天和其他运输设备制造业"}, {
|
||||||
|
value: "多式联运和运输代理业",
|
||||||
|
label: "多式联运和运输代理业"}, {
|
||||||
|
value: "装卸搬运和仓储业",
|
||||||
|
label: "装卸搬运和仓储业"}, {
|
||||||
|
value: "水的生产和供应业",
|
||||||
|
label: "水的生产和供应业"}, {
|
||||||
|
value: "批发业",
|
||||||
|
label: "批发业"}, {
|
||||||
|
value: "文教、工美、体育和娱乐用品制造业",
|
||||||
|
label: "文教、工美、体育和娱乐用品制造业"}, {
|
||||||
|
value: "房地产业",
|
||||||
|
label: "房地产业"}, {
|
||||||
|
value: "开采专业及辅助性活动",
|
||||||
|
label: "开采专业及辅助性活动"}, {
|
||||||
|
value: "通用设备制造业",
|
||||||
|
label: "通用设备制造业"}, {
|
||||||
|
value: "煤炭开采和洗选业",
|
||||||
|
label: "煤炭开采和洗选业"}, {
|
||||||
|
value: "食品制造业",
|
||||||
|
label: "食品制造业"}, {
|
||||||
|
value: "农副食品加工业",
|
||||||
|
label: "农副食品加工业"}, {
|
||||||
|
value: "有色金属矿采选业",
|
||||||
|
label: "有色金属矿采选业"}, {
|
||||||
|
value: "研究和试验发展",
|
||||||
|
label: "研究和试验发展"}, {
|
||||||
|
value: "酒、饮料和精制茶制造业",
|
||||||
|
label: "酒、饮料和精制茶制造业"}, {
|
||||||
|
value: "教育",
|
||||||
|
label: "教育"}, {
|
||||||
|
value: "专用设备制造业",
|
||||||
|
label: "专用设备制造业"}, {
|
||||||
|
value: "房屋建筑业",
|
||||||
|
label: "房屋建筑业"}, {
|
||||||
|
value: "纺织服装、服饰业",
|
||||||
|
label: "纺织服装、服饰业"}, {
|
||||||
|
value: "橡胶和塑料制品业",
|
||||||
|
label: "橡胶和塑料制品业"}, {
|
||||||
|
value: "水上运输业",
|
||||||
|
label: "水上运输业"}, {
|
||||||
|
value: "货币金融服务",
|
||||||
|
label: "货币金融服务"}, {
|
||||||
|
value: "黑色金属冶炼和压延加工业",
|
||||||
|
label: "黑色金属冶炼和压延加工业"}, {
|
||||||
|
value: "住宿业",
|
||||||
|
label: "住宿业"}, {
|
||||||
|
value: "燃气生产和供应业",
|
||||||
|
label: "燃气生产和供应业"}, {
|
||||||
|
value: "道路运输业",
|
||||||
|
label: "道路运输业"}, {
|
||||||
|
value: "生态保护和环境治理业",
|
||||||
|
label: "生态保护和环境治理业"}, {
|
||||||
|
value: "纺织业",
|
||||||
|
label: "纺织业"}, {
|
||||||
|
value: "化学纤维制造业",
|
||||||
|
label: "化学纤维制造业"}, {
|
||||||
|
value: "其他制造业",
|
||||||
|
label: "其他制造业"}, {
|
||||||
|
value: "广播、电视、电影和录音制作业",
|
||||||
|
label: "广播、电视、电影和录音制作业"}, {
|
||||||
|
value: "仪器仪表制造业",
|
||||||
|
label: "仪器仪表制造业"}, {
|
||||||
|
value: "皮革、毛皮、羽毛及其制品和制鞋业",
|
||||||
|
label: "皮革、毛皮、羽毛及其制品和制鞋业"}, {
|
||||||
|
value: "造纸和纸制品业",
|
||||||
|
label: "造纸和纸制品业"}, {
|
||||||
|
value: "印刷和记录媒介复制业",
|
||||||
|
label: "印刷和记录媒介复制业"}, {
|
||||||
|
value: "餐饮业",
|
||||||
|
label: "餐饮业"}, {
|
||||||
|
value: "公共设施管理业",
|
||||||
|
label: "公共设施管理业"}, {
|
||||||
|
value: "其他金融业",
|
||||||
|
label: "其他金融业"}, {
|
||||||
|
value: "土地管理业",
|
||||||
|
label: "土地管理业"}, {
|
||||||
|
value: "林业",
|
||||||
|
label: "林业"}, {
|
||||||
|
value: "农业",
|
||||||
|
label: "农业"}, {
|
||||||
|
value: "废弃资源综合利用业",
|
||||||
|
label: "废弃资源综合利用业"}, {
|
||||||
|
value: "畜牧业",
|
||||||
|
label: "畜牧业"}, {
|
||||||
|
value: "文化艺术业",
|
||||||
|
label: "文化艺术业"}, {
|
||||||
|
value: "建筑装饰、装修和其他建筑业",
|
||||||
|
label: "建筑装饰、装修和其他建筑业"}, {
|
||||||
|
value: "黑色金属矿采选业",
|
||||||
|
label: "黑色金属矿采选业"}, {
|
||||||
|
value: "其他采矿业",
|
||||||
|
label: "其他采矿业"}, {
|
||||||
|
value: "机动车、电子产品和日用产品修理业",
|
||||||
|
label: "机动车、电子产品和日用产品修理业"}, {
|
||||||
|
value: "家具制造业",
|
||||||
|
label: "家具制造业"}, {
|
||||||
|
value: "建筑安装业",
|
||||||
|
label: "建筑安装业"}, {
|
||||||
|
value: "其他服务业",
|
||||||
|
label: "其他服务业"}, {
|
||||||
|
value: "社会工作",
|
||||||
|
label: "社会工作"}, {
|
||||||
|
value: "渔业",
|
||||||
|
label: "渔业"}, {
|
||||||
|
value: "体育",
|
||||||
|
label: "体育"}, {
|
||||||
|
value: "居民服务业",
|
||||||
|
label: "居民服务业"}, {
|
||||||
|
value: "邮政业",
|
||||||
|
label: "邮政业"}, {
|
||||||
|
value: "金属制品、机械和设备修理业",
|
||||||
|
label: "金属制品、机械和设备修理业"}, {
|
||||||
|
value: "卫生",
|
||||||
|
label: "卫生"}, {
|
||||||
|
value: "木材加工和木、竹、藤、棕、草制品业",
|
||||||
|
label: "木材加工和木、竹、藤、棕、草制品业"}, {
|
||||||
|
value: "农、林、牧、渔专业及辅助性活动",
|
||||||
|
label: "农、林、牧、渔专业及辅助性活动"}, {
|
||||||
|
value: "非金属矿采选业",
|
||||||
|
label: "非金属矿采选业"}, {
|
||||||
|
value: "租赁业",
|
||||||
|
label: "租赁业"}, {
|
||||||
|
value: "水利管理业",
|
||||||
|
label: "水利管理业"},
|
||||||
|
|
||||||
|
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
},
|
||||||
|
model: {
|
||||||
|
prop: 'value',
|
||||||
|
event: 'change'
|
||||||
|
},
|
||||||
|
watch:{
|
||||||
|
value(newValue){
|
||||||
|
this.industry=newValue
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
74
src/components/pagination.vue
Normal file
74
src/components/pagination.vue
Normal file
|
|
@ -0,0 +1,74 @@
|
||||||
|
<!-- 分页 -->
|
||||||
|
<template>
|
||||||
|
<div class="pagination">
|
||||||
|
<el-button type="button" @click="jumpFirstPage" size="mini">首页</el-button>
|
||||||
|
<!-- layout="total, prev, pager, next, jumper" -->
|
||||||
|
<!-- layout="prev, next"就只显示上一页、下一页 -->
|
||||||
|
<el-pagination
|
||||||
|
background prev-text="上一页" next-text="下一页"
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
:current-page="currentPage"
|
||||||
|
:page-size=page_size
|
||||||
|
layout="prev, next"
|
||||||
|
:total="total"
|
||||||
|
style="display: inline-block;padding-left: 0px;">
|
||||||
|
</el-pagination>
|
||||||
|
<el-button type="button" @click="jumpLastPage" size="mini">尾页</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
// 接收外部数据
|
||||||
|
props:{
|
||||||
|
total:{
|
||||||
|
type:Number,
|
||||||
|
default:100
|
||||||
|
},
|
||||||
|
page_size:{
|
||||||
|
type:Number,
|
||||||
|
default:10
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleSizeChange(val) {
|
||||||
|
console.log(`每页 ${val} 条`);
|
||||||
|
},
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
console.log(`当前页: ${val}`);
|
||||||
|
// 将页码传给父组件
|
||||||
|
this.$emit('CurrentChange',val)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 添加首页、尾页跳转方法
|
||||||
|
jumpFirstPage () {
|
||||||
|
this.$refs.pagination.handleCurrentChange(1);
|
||||||
|
this.$emit('handleCurrentChange', 1);
|
||||||
|
},
|
||||||
|
jumpLastPage () {
|
||||||
|
let font = this.$refs.pagination
|
||||||
|
let cpage = Math.ceil(font.total / font.pageSize);
|
||||||
|
font.handleCurrentChange(cpage);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentPage: 5,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.pagination{
|
||||||
|
display:flex;
|
||||||
|
justify-content:center;//左右贴边
|
||||||
|
padding: 40px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
393
src/components/quterComponent.vue
Normal file
393
src/components/quterComponent.vue
Normal file
|
|
@ -0,0 +1,393 @@
|
||||||
|
<template>
|
||||||
|
<div class="el-quarter-picker">
|
||||||
|
<el-popover
|
||||||
|
v-model="visible"
|
||||||
|
:disabled="!canPopover"
|
||||||
|
:tabindex="null"
|
||||||
|
placement="bottom-start"
|
||||||
|
transition="el-zoom-in-top"
|
||||||
|
trigger="click">
|
||||||
|
|
||||||
|
<div class="el-date-picker">
|
||||||
|
<div class="el-picker-panel__body">
|
||||||
|
<div class="el-date-picker__header el-date-picker__header--bordered" style="margin:0px; line-height:30px">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
@click="clickLast"
|
||||||
|
aria-label="前一年"
|
||||||
|
class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"></button>
|
||||||
|
<span role="button" class="el-date-picker__header-label" @click="clickYear">{{ title }}</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
@click="clickNext"
|
||||||
|
aria-label="后一年"
|
||||||
|
class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"></button>
|
||||||
|
</div>
|
||||||
|
<div class="el-picker-panel__content" style="margin:0px; width:100%">
|
||||||
|
<table class="el-month-table" style="">
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="line in lineCount" :key="line">
|
||||||
|
<td v-for="index in (line * 4 <= viewList.length ? 4 : viewList.length - (line - 1) * 4)" :key="index" :class="{ today: viewList[(line - 1) * 4 + index - 1].current, current: viewList[(line - 1) * 4 + index - 1].active }">
|
||||||
|
<div><a class="cell" @click="clickItem(viewList[(line - 1) * 4 + index - 1])">{{ viewList[(line - 1) * 4 + index - 1].label }}</a></div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-input
|
||||||
|
slot="reference"
|
||||||
|
@change="changeText"
|
||||||
|
@mouseenter.native="mouseEnter"
|
||||||
|
@mouseleave.native="mouseLeave"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
v-model="text"
|
||||||
|
:size="size"
|
||||||
|
:readonly="!canEdit"
|
||||||
|
:disabled="disabled">
|
||||||
|
<i slot="prefix" class="el-input__icon el-icon-date"></i>
|
||||||
|
<i slot="suffix" class="el-input__icon el-icon-circle-close" v-show="showClear" style="cursor:pointer" @click.stop="clear"></i>
|
||||||
|
</el-input>
|
||||||
|
</el-popover>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ElQuarterPicker',
|
||||||
|
props: {
|
||||||
|
placeholder: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
readonly: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
clearable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
editable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
format: {
|
||||||
|
type: String,
|
||||||
|
default: 'yyyy年第Q季度'
|
||||||
|
},
|
||||||
|
valueFormat: {
|
||||||
|
type: String,
|
||||||
|
default: 'yyyy-qq'
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
model: {
|
||||||
|
prop: 'value',
|
||||||
|
event: 'change'
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value(val) {
|
||||||
|
// console.log('change-------', val)
|
||||||
|
this.changeValue(val)
|
||||||
|
},
|
||||||
|
readonly(val) {
|
||||||
|
this.canEdit = !val && this.editable
|
||||||
|
this.canPopover = !this.disabled && !val
|
||||||
|
},
|
||||||
|
editable(val) {
|
||||||
|
this.canEdit = !this.readonly && val
|
||||||
|
},
|
||||||
|
disabled(val) {
|
||||||
|
this.canPopover = !val && !this.readonly
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
visible: false,
|
||||||
|
showClear: false, // 控制清空按钮展示
|
||||||
|
canEdit: true, // 是否可编辑
|
||||||
|
canPopover: true, // 选择器弹出是否可用
|
||||||
|
text: '', // 文本框值
|
||||||
|
viewType: 1, // 视图类型，1季度，2年度
|
||||||
|
viewYear: 0, // 当前年份
|
||||||
|
viewList: [], // 数据列表
|
||||||
|
lineCount: 0, // 数据行数
|
||||||
|
title: '', // 选择器标题
|
||||||
|
data: [0, 0] // 当前选择年度-季度
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// console.log('mounted--------', this.value)
|
||||||
|
this.changeValue(this.value)
|
||||||
|
|
||||||
|
// 设置文本框是否可编辑
|
||||||
|
this.canEdit = !this.readonly && this.editable
|
||||||
|
this.canPopover = !this.disabled && !this.readonly
|
||||||
|
|
||||||
|
// 监听按键(上下左右键可以切换季度)
|
||||||
|
document.onkeydown = (event) => {
|
||||||
|
if (this.visible) {
|
||||||
|
const data = [this.data[0], this.data[1]]
|
||||||
|
if (data[0] < 1 || data[1] < 1) {
|
||||||
|
// 以当前季度为标准
|
||||||
|
const curDate = new Date()
|
||||||
|
data[0] = curDate.getFullYear()
|
||||||
|
data[1] = parseInt(curDate.getMonth() / 3) + 1
|
||||||
|
}
|
||||||
|
if (event.code === 'ArrowLeft') {
|
||||||
|
// 上一个季度
|
||||||
|
if (data[1] === 1) {
|
||||||
|
data[0] = data[0] - 1
|
||||||
|
data[1] = 4
|
||||||
|
} else {
|
||||||
|
data[1] = data[1] - 1
|
||||||
|
}
|
||||||
|
} else if (event.code === 'ArrowRight') {
|
||||||
|
// 下一个季度
|
||||||
|
if (data[1] === 4) {
|
||||||
|
data[0] = data[0] + 1
|
||||||
|
data[1] = 1
|
||||||
|
} else {
|
||||||
|
data[1] = data[1] + 1
|
||||||
|
}
|
||||||
|
} else if (event.code === 'ArrowUp') {
|
||||||
|
// 上一年季度
|
||||||
|
data[0] = data[0] - 1
|
||||||
|
} else if (event.code === 'ArrowDown') {
|
||||||
|
// 下一年季度
|
||||||
|
data[0] = data[0] + 1
|
||||||
|
} else {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 超过年限的不处理
|
||||||
|
if (data[0] < 1000 || data[0] > 9999) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.data = data
|
||||||
|
this.viewType = 1
|
||||||
|
this.viewYear = data[0]
|
||||||
|
this.$emit('change', this.formatTo(data, this.valueFormat))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
document.onkeydown = null
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 季度文本变更
|
||||||
|
changeText() {
|
||||||
|
if (this.checkFormat(this.format, this.text)) {
|
||||||
|
// 设置值
|
||||||
|
this.formatFrom(this.text, this.format)
|
||||||
|
this.$emit('change', this.formatTo(this.data, this.valueFormat))
|
||||||
|
} else {
|
||||||
|
// 输入了无效的格式，还原回原来的值
|
||||||
|
if (this.data[0] < 1 || this.data[1] < 1) {
|
||||||
|
this.text = ''
|
||||||
|
} else {
|
||||||
|
this.text = this.formatTo(this.data, this.format)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.visible = false
|
||||||
|
},
|
||||||
|
// 鼠标进入
|
||||||
|
mouseEnter() {
|
||||||
|
if (!this.disabled && !this.readonly && this.clearable && this.text !== '') {
|
||||||
|
this.showClear = true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 鼠标离开
|
||||||
|
mouseLeave() {
|
||||||
|
if (!this.disabled && this.clearable) {
|
||||||
|
this.showClear = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 清除季度
|
||||||
|
clear() {
|
||||||
|
this.showClear = false
|
||||||
|
this.visible = false
|
||||||
|
this.$emit('change', '')
|
||||||
|
},
|
||||||
|
// 季度值变更
|
||||||
|
changeValue(val) {
|
||||||
|
this.viewType = 1
|
||||||
|
if (val) {
|
||||||
|
// 反向格式化
|
||||||
|
this.formatFrom(val, this.valueFormat)
|
||||||
|
this.text = this.formatTo(this.data, this.format)
|
||||||
|
this.viewYear = this.data[0]
|
||||||
|
} else {
|
||||||
|
this.text = ''
|
||||||
|
this.data = [0, 0]
|
||||||
|
this.viewYear = new Date().getFullYear()
|
||||||
|
}
|
||||||
|
this.initView()
|
||||||
|
},
|
||||||
|
// 初始化视图数据
|
||||||
|
initView() {
|
||||||
|
const list = []
|
||||||
|
const curDate = new Date()
|
||||||
|
const curYear = curDate.getFullYear()
|
||||||
|
const curQuarter = parseInt(curDate.getMonth() / 3) + 1
|
||||||
|
if (this.viewType === 1) {
|
||||||
|
let index = 0
|
||||||
|
for (const i of '一二三四') {
|
||||||
|
index++
|
||||||
|
const item = { label: '第' + i + '季度', year: this.viewYear, quarter: index, current: false, active: false }
|
||||||
|
if (this.viewYear === curYear && index === curQuarter) {
|
||||||
|
item.current = true
|
||||||
|
} else if (this.viewYear === this.data[0] && index === this.data[1]) {
|
||||||
|
item.active = true
|
||||||
|
}
|
||||||
|
list.push(item)
|
||||||
|
}
|
||||||
|
this.title = this.viewYear + ' 年'
|
||||||
|
} else {
|
||||||
|
const start = parseInt(this.viewYear / 10) * 10
|
||||||
|
this.viewYear = start
|
||||||
|
for (let i = 0; i < 10; i++) {
|
||||||
|
const year = start + i
|
||||||
|
const item = { label: year + '', year: year, current: false, active: false }
|
||||||
|
if (year === curYear) {
|
||||||
|
item.current = true
|
||||||
|
} else if (year === this.data[0]) {
|
||||||
|
item.active = true
|
||||||
|
}
|
||||||
|
list.push(item)
|
||||||
|
}
|
||||||
|
this.title = start + ' 年 - ' + (start + 9) + ' 年'
|
||||||
|
}
|
||||||
|
this.viewList = list
|
||||||
|
this.lineCount = parseInt(list.length / 4)
|
||||||
|
if (list.length % 4 > 0) {
|
||||||
|
this.lineCount++
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 校验季度格式是否正确
|
||||||
|
checkFormat(pattern, val) {
|
||||||
|
// 格式转成正则表达式
|
||||||
|
let text = ''
|
||||||
|
for (const char of pattern) {
|
||||||
|
const dict = '\\^$.+?*[]{}!'
|
||||||
|
if (dict.indexOf(char) === -1) {
|
||||||
|
text += char
|
||||||
|
} else {
|
||||||
|
text += '\\' + char
|
||||||
|
}
|
||||||
|
}
|
||||||
|
text = text.replace('yyyy', '[1-9]\\d{3}')
|
||||||
|
text = text.replace('qq', '0[1-4]')
|
||||||
|
text = text.replace('q', '[1-4]')
|
||||||
|
text = text.replace('Q', '[一二三四]')
|
||||||
|
text = '^' + text + '$'
|
||||||
|
const patt = new RegExp(text)
|
||||||
|
return patt.test(val)
|
||||||
|
},
|
||||||
|
// 格式化季度到指定格式
|
||||||
|
formatTo(data, pattern) {
|
||||||
|
let text = pattern.replace('yyyy', '' + data[0])
|
||||||
|
text = text.replace('qq', '0' + data[1])
|
||||||
|
text = text.replace('q', '' + data[1])
|
||||||
|
text = text.replace('Q', '一二三四'.substr(data[1] - 1, 1))
|
||||||
|
return text
|
||||||
|
},
|
||||||
|
// 以指定格式解析季度
|
||||||
|
formatFrom(str, pattern) {
|
||||||
|
const year = this.findText(str, pattern, 'yyyy')
|
||||||
|
const quarter = this.findText(str, pattern, ['qq', 'q', 'Q'])
|
||||||
|
this.data = [year, quarter]
|
||||||
|
},
|
||||||
|
// 查找文本数值
|
||||||
|
findText(str, pattern, find) {
|
||||||
|
if (find instanceof Array) {
|
||||||
|
for (const f of find) {
|
||||||
|
const val = this.findText(str, pattern, f)
|
||||||
|
if (val !== -1) {
|
||||||
|
return val
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return -1
|
||||||
|
}
|
||||||
|
const index = pattern.indexOf(find)
|
||||||
|
if (index === -1) {
|
||||||
|
return index
|
||||||
|
}
|
||||||
|
const val = str.substr(index, find.length)
|
||||||
|
if (find === 'Q') {
|
||||||
|
return '一二三四'.indexOf(val) + 1
|
||||||
|
} else {
|
||||||
|
return parseInt(val)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 年份点击
|
||||||
|
clickYear() {
|
||||||
|
if (this.viewType !== 1) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// 切换年度选择器
|
||||||
|
this.viewType = 2
|
||||||
|
this.initView()
|
||||||
|
},
|
||||||
|
// 季度选择
|
||||||
|
clickItem(item) {
|
||||||
|
// console.log('select--------', item)
|
||||||
|
if (this.viewType === 1) {
|
||||||
|
// 选择季度
|
||||||
|
this.$emit('change', this.formatTo([item.year, item.quarter], this.valueFormat))
|
||||||
|
this.visible = false
|
||||||
|
} else {
|
||||||
|
// 选择年度
|
||||||
|
this.viewType = 1
|
||||||
|
this.viewYear = item.year
|
||||||
|
this.initView()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 上一年
|
||||||
|
clickLast() {
|
||||||
|
if (this.viewYear > 1000) {
|
||||||
|
if (this.viewType === 1) {
|
||||||
|
this.viewYear--
|
||||||
|
this.initView()
|
||||||
|
} else {
|
||||||
|
this.viewYear = this.viewYear - 10
|
||||||
|
this.initView()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 下一年
|
||||||
|
clickNext() {
|
||||||
|
if (this.viewYear < 9999) {
|
||||||
|
if (this.viewType === 1) {
|
||||||
|
this.viewYear++
|
||||||
|
this.initView()
|
||||||
|
} else {
|
||||||
|
this.viewYear = this.viewYear + 10
|
||||||
|
this.initView()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.el-quarter-picker {
|
||||||
|
width: 220px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
337
src/components/region.vue
Normal file
337
src/components/region.vue
Normal file
|
|
@ -0,0 +1,337 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="echartsGroup">
|
||||||
|
<!-- 返回中国地图 -->
|
||||||
|
<div class="button" v-show="isReturnChina" @click="returnChinaFn()">返回中国地图</div>
|
||||||
|
<!-- echarts 图表 -->
|
||||||
|
<div ref="china_map" style="height: 450px;width:800px"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import tmpJson from 'echarts/map/json/china.json'
|
||||||
|
import * as echarts from "echarts"
|
||||||
|
import 'echarts/map/js/china.js' // 核心文件
|
||||||
|
// require('echarts/theme/macarons')
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
mapData: [//自己做的模拟数据 后续根据业务展示
|
||||||
|
{name: '湖北',value:88},
|
||||||
|
{name: '广东',value:11024},
|
||||||
|
{name: '上海',value:5},
|
||||||
|
{name: '山东',value:15},
|
||||||
|
{name: '湖南',value:14},
|
||||||
|
{name: '重庆',value:0},
|
||||||
|
{name: '四川',value:65},
|
||||||
|
{name: '新疆',value:36},
|
||||||
|
{name: '黑龙江',value:12},
|
||||||
|
{name: '西藏',value:68},
|
||||||
|
{name: '青海',value:31},
|
||||||
|
{name: '内蒙古',value:28},
|
||||||
|
{name: '陕西',value:12},
|
||||||
|
{name: '辽宁',value:88},
|
||||||
|
{name: '云南',value:23},
|
||||||
|
|
||||||
|
],
|
||||||
|
provData:[
|
||||||
|
{name:'深圳市',value:99},
|
||||||
|
{name:'深圳市',value:1005},
|
||||||
|
{name:'佛山市',value: 55564}
|
||||||
|
],
|
||||||
|
guangdong:[ //省份公司的数据
|
||||||
|
{name: '深圳市',value:23,children:['福田','南山','龙华']},
|
||||||
|
],
|
||||||
|
provinces:{ //数据
|
||||||
|
台湾: 'taiwan',
|
||||||
|
河北: 'hebei',
|
||||||
|
山西: 'shanxi',
|
||||||
|
辽宁: 'liaoning',
|
||||||
|
吉林: 'jilin',
|
||||||
|
黑龙江: 'heilongjiang',
|
||||||
|
江苏: 'jiangsu',
|
||||||
|
浙江: 'zhejiang',
|
||||||
|
安徽: 'anhui',
|
||||||
|
福建: 'fujian',
|
||||||
|
江西: 'jiangxi',
|
||||||
|
山东: 'shandong',
|
||||||
|
河南: 'henan',
|
||||||
|
湖北: 'hubei',
|
||||||
|
湖南: 'hunan',
|
||||||
|
广东: 'guangdong',
|
||||||
|
海南: 'hainan',
|
||||||
|
四川: 'sichuan',
|
||||||
|
贵州: 'guizhou',
|
||||||
|
云南: 'yunnan',
|
||||||
|
陕西: 'shanxi1',
|
||||||
|
甘肃: 'gansu',
|
||||||
|
青海: 'qinghai',
|
||||||
|
新疆: 'xinjiang',
|
||||||
|
广西: 'guangxi',
|
||||||
|
内蒙古: 'neimenggu',
|
||||||
|
宁夏: 'ningxia',
|
||||||
|
西藏: 'xizang',
|
||||||
|
北京: 'beijing',
|
||||||
|
天津: 'tianjin',
|
||||||
|
上海: 'shanghai',
|
||||||
|
重庆: 'chongqing',
|
||||||
|
香港: 'xianggang',
|
||||||
|
澳门: 'aomen'
|
||||||
|
},
|
||||||
|
isReturnChina:true, //是否显示返回中国地图
|
||||||
|
options:null, //echarts 存数据
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
window.clickRoute= this.clickRoute;
|
||||||
|
|
||||||
|
// this.$nextTick(_=>{
|
||||||
|
// this.chinaMaprsult('china')
|
||||||
|
// console.log("mounted调用成功")
|
||||||
|
// })
|
||||||
|
this.chinaMaprsult('china',null)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 中国地图点击省份 显示当前省份的详细的地区。
|
||||||
|
chinaMapHidden(chinaMap) {//（调用）
|
||||||
|
console.log("chinaMapHidden调用成功")
|
||||||
|
let that = this
|
||||||
|
chinaMap.off('click')//这里解决多次触发点击事件 但是还会执行2次 引用echarts地图，点击各个省份时，点击一个调用两次接口，再点击一次，调用四次接口，再点击调用八次。。。。依次叠加，问题在于，没有将地图上的点击事件清空
|
||||||
|
chinaMap.on('click',async function(params){
|
||||||
|
if (params.name in that.provinces) {
|
||||||
|
var tmp=that.provinces[params.name]
|
||||||
|
let s = await import('echarts/map/js/province/'+tmp+'.js')
|
||||||
|
console.log(s)
|
||||||
|
if (s){
|
||||||
|
// chinaMap.clear
|
||||||
|
let tmpData=[
|
||||||
|
{name:'深圳市',value:99},
|
||||||
|
{name:'深圳市',value:1005},
|
||||||
|
{name:'佛山市',value: 55564}
|
||||||
|
]
|
||||||
|
that.chinaMaprsult(params.name,tmpData)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 渲染地图
|
||||||
|
chinaMaprsult(name=null,tmpData){
|
||||||
|
console.log("chinaMaprsult调用成功")
|
||||||
|
let _this = this;
|
||||||
|
// console.log(name)
|
||||||
|
name=='china'?this.isReturnChina=false:this.isReturnChina=true; //省份地图就显示返回按钮
|
||||||
|
let chinaMap = echarts.init(this.$refs.china_map) //获取dom元素，初始化
|
||||||
|
// let tmpJson=import('echarts/map/json/china.json')
|
||||||
|
console.log(tmpJson)
|
||||||
|
echarts.registerMap('china',tmpJson)
|
||||||
|
var data=this.data
|
||||||
|
this.options = {
|
||||||
|
// tooltip: { // 鼠标移到图里面的浮动提示框
|
||||||
|
// formatter:function (params) {
|
||||||
|
// return params.name
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
|
||||||
|
visualMap: //图例
|
||||||
|
{
|
||||||
|
min: 800,
|
||||||
|
max: 3000,
|
||||||
|
text: ['High', 'Low'],
|
||||||
|
realtime: false,
|
||||||
|
calculable: true,
|
||||||
|
inRange: {
|
||||||
|
color: [ 'lightyellow', 'red']
|
||||||
|
}},
|
||||||
|
tooltip: { // 鼠标移到图里面的浮动提示框
|
||||||
|
trigger: 'item', //数据项图形触发
|
||||||
|
// triggerOn: 'click', //这里根据业务需要给点击事件做跳转,所以不能做悬浮了,如果做悬浮 点击不了文字跳转
|
||||||
|
formatter:
|
||||||
|
'产业数量: {c0}<br />'
|
||||||
|
// function(params){
|
||||||
|
// console.log(params)
|
||||||
|
// let dat=params.data
|
||||||
|
// return params.data
|
||||||
|
//
|
||||||
|
// }
|
||||||
|
// function(params) {
|
||||||
|
// var name = params.name
|
||||||
|
// var toolipData = []
|
||||||
|
// _this.provinceData.forEach(item=>{
|
||||||
|
// if(name == item.name){
|
||||||
|
// toolipData = item.children
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// var htmlStr = ''
|
||||||
|
// toolipData.forEach(item=>{
|
||||||
|
// htmlStr += `<li class="list-li" name="${item}"><div οnclick="clickRoute()" >${item}</div></li>`
|
||||||
|
// })
|
||||||
|
// console.log(toolipData)
|
||||||
|
// console.log(params.name)
|
||||||
|
// return `<div class="list-wrap"><div class="list-title">${name}</div><ul class="list-ul">${htmlStr}</ul></div>`
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
|
||||||
|
geo: {
|
||||||
|
map: name , // 拿到对应的地图
|
||||||
|
roam: false,
|
||||||
|
nameProperty:'NAME',
|
||||||
|
label: { // 页面初始化加载的文字
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#ccc", // 页面初始化的地图文字颜色
|
||||||
|
fontSize:10// // 页面初始化的地图文字大小
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// formatter:'{b}: {@score}{c}'
|
||||||
|
},
|
||||||
|
|
||||||
|
itemStyle: { //设置样式
|
||||||
|
// normal:
|
||||||
|
// {
|
||||||
|
// borderWidth: .5, //区域边框宽度
|
||||||
|
// borderColor: 'rgba(119, 156, 255, 1)',
|
||||||
|
// areaColor: {
|
||||||
|
// x: 0,
|
||||||
|
// y: 0,
|
||||||
|
// x2: 0,
|
||||||
|
// y2: 1,
|
||||||
|
// colorStops: [{
|
||||||
|
// offset: 0,
|
||||||
|
// color: '#073684' // 0% 处的颜色
|
||||||
|
// }, {
|
||||||
|
// offset: 1,
|
||||||
|
// color: '#061E3D' // 100% 处的颜色
|
||||||
|
// }],
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// emphasis: { // 移入背景颜色
|
||||||
|
// // areaColor: '#ff00ff',
|
||||||
|
// areaColor: '#F9D92E',
|
||||||
|
// show: true,
|
||||||
|
// textStyle: {
|
||||||
|
// color: '#000',
|
||||||
|
// fontSize: "12px"
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dataset:{
|
||||||
|
source: name=='china'?this.mapData:tmpData
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "map",
|
||||||
|
geoIndex: 0,
|
||||||
|
itemStyle: {//地图区域的多边形 图形样式
|
||||||
|
normal: {//是图形在默认状态下的样式
|
||||||
|
label: {
|
||||||
|
show: true,//是否显示标签
|
||||||
|
textStyle: {
|
||||||
|
color: "black"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
zoom: 5, //地图缩放比例,默认为1
|
||||||
|
emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
|
||||||
|
label: { show: true }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true, //显示省份标签
|
||||||
|
textStyle:{color:"#696969"},//省份标签字体颜色
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'effectScatter',
|
||||||
|
coordinateSystem: 'geo',
|
||||||
|
rippleEffect: {
|
||||||
|
brushType: 'fill',
|
||||||
|
scale:0
|
||||||
|
},
|
||||||
|
showEffectOn: 'render',
|
||||||
|
label: {
|
||||||
|
lineHeight: 30,
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
color: '#081727',
|
||||||
|
position: 'inside',
|
||||||
|
padding:[5,0,0,0],
|
||||||
|
verticalAlign: 'middle',
|
||||||
|
formatter: function(para) {
|
||||||
|
return '{cnNum|' + para.data.value[2] + '}'
|
||||||
|
// return para.data.value[2]
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
cnNum: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: '#081727',
|
||||||
|
lineHeight:28,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
symbol: 'roundRect',
|
||||||
|
// symbolRotate: 20,
|
||||||
|
symbolSize: [40,28],
|
||||||
|
data: [],
|
||||||
|
zlevel: 1,
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
chinaMap.setOption(this.options)
|
||||||
|
console.log(chinaMap.getOption())
|
||||||
|
console.log(echarts.getMap('china'))
|
||||||
|
this.chinaMapHidden(chinaMap)
|
||||||
|
},
|
||||||
|
// 返回中国地图（调用）
|
||||||
|
returnChinaFn(){
|
||||||
|
console.log("returnChinaFn调用成功")
|
||||||
|
this.chinaMaprsult('china');
|
||||||
|
},
|
||||||
|
// 点击跳转页面
|
||||||
|
clickRoute(){
|
||||||
|
console.log("clickRoute调用成功")
|
||||||
|
alert("点击了,做其他操作!")
|
||||||
|
// this.$router.push('/')
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.echartsGroup{
|
||||||
|
width: 500px;
|
||||||
|
height: 500px;
|
||||||
|
position:relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
.echartsGroup .button{
|
||||||
|
width:100px;
|
||||||
|
height:40px;
|
||||||
|
line-height:40px;
|
||||||
|
text-align:center;
|
||||||
|
border:1px solid #ccc;
|
||||||
|
border-radius: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
position:absolute;
|
||||||
|
top:10px;
|
||||||
|
left:10px;
|
||||||
|
z-index:99;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-ul{
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.list-li{
|
||||||
|
pointer-events: all;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
54
src/config/drag.js
Normal file
54
src/config/drag.js
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
//使用Vue.directive()定义一个全局指令
|
||||||
|
//1.参数一：指令的名称，定义时指令前面不需要写v-
|
||||||
|
//2.参数二：是一个对象，该对象中有相关的操作函数
|
||||||
|
//3.在调用的时候必须写v-
|
||||||
|
const drag = Vue.directive('drag', {
|
||||||
|
//1.指令绑定到元素上回立刻执行bind函数，只执行一次
|
||||||
|
//2.每个函数中第一个参数永远是el，表示绑定指令的元素，el参数是原生js对象
|
||||||
|
//3.通过el.focus()是无法获取焦点的，因为只有插入DOM后才生效
|
||||||
|
bind: function (el) {
|
||||||
|
el.style.cursor = "move"; //鼠标样式变move样式
|
||||||
|
},
|
||||||
|
//inserted表示一个元素，插入到DOM中会执行inserted函数，只触发一次
|
||||||
|
inserted: function (el) {
|
||||||
|
el.onmousedown = function (e) {
|
||||||
|
var distX = e.pageX - el.offsetLeft;
|
||||||
|
var distY = e.pageY - el.offsetTop;
|
||||||
|
console.log("元素本身的高：" + el.clientHeight + ",元素本身的宽：" + el.clientWidth)
|
||||||
|
|
||||||
|
if (e.preventDefault) {
|
||||||
|
e.preventDefault();
|
||||||
|
} else{
|
||||||
|
e.returnValue=false;
|
||||||
|
};//解决快速拖动滞后问题
|
||||||
|
|
||||||
|
document.onmousemove = function (e) {
|
||||||
|
|
||||||
|
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
|
||||||
|
let left = e.clientX - distX;
|
||||||
|
let top = e.clientY - distY;
|
||||||
|
|
||||||
|
if (left <= 0) {
|
||||||
|
left = 5; //设置成5是为了不离边缘太近
|
||||||
|
} else if (left > document.documentElement.clientWidth - el.clientWidth) {
|
||||||
|
//document.documentElement.clientWidth 屏幕的可视宽度
|
||||||
|
left = document.documentElement.clientWidth - el.clientWidth - 5
|
||||||
|
}
|
||||||
|
if (top <= 0) {
|
||||||
|
top = 5;
|
||||||
|
} else if (top > document.documentElement.clientHeight - el.clientHeight) {
|
||||||
|
top = document.documentElement.clientHeight - el.clientHeight - 5
|
||||||
|
}
|
||||||
|
el.style.left = left + 'px';
|
||||||
|
el.style.top = top + 'px';
|
||||||
|
}
|
||||||
|
document.onmouseup = function () {
|
||||||
|
document.onmousemove = document.onmouseup = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//当VNode更新的时候会执行updated，可以触发多次
|
||||||
|
updated: function (el) {}
|
||||||
|
})
|
||||||
|
export default drag;
|
||||||
37
src/main.js
Normal file
37
src/main.js
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import ElementUI from 'element-ui';//全局引入
|
||||||
|
// import {Row,Button} from 'element-ui';//按需引入
|
||||||
|
import 'element-ui/lib/theme-chalk/index.css';
|
||||||
|
import router from './router'
|
||||||
|
import store from './store'
|
||||||
|
// import axios from 'axios'
|
||||||
|
import drag from '@/config/drag';//弹窗可以拖拽
|
||||||
|
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
Vue.use(ElementUI);//全局引入
|
||||||
|
// axios.defaults.baseURL = 'http://61.240.140.173:8000/proxy_url'
|
||||||
|
|
||||||
|
// Vue.use(Row)//按需引入
|
||||||
|
// Vue.use(Button)//按需引入
|
||||||
|
|
||||||
|
// 5以上的echarts不用引入，4要引入
|
||||||
|
// import * as echarts from 'echarts'
|
||||||
|
|
||||||
|
import echarts from "echarts";
|
||||||
|
Vue.prototype.$echarts = echarts;
|
||||||
|
|
||||||
|
|
||||||
|
// 将自动注册所有组件为全局组件
|
||||||
|
import dataV from '@jiaminghi/data-view'
|
||||||
|
Vue.use(dataV)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
router,
|
||||||
|
store,
|
||||||
|
render: h => h(App),
|
||||||
|
}).$mount('#app')
|
||||||
|
|
||||||
|
|
||||||
171
src/plugins/debug/debug.js
Normal file
171
src/plugins/debug/debug.js
Normal file
|
|
@ -0,0 +1,171 @@
|
||||||
|
// use this to isolate the scope
|
||||||
|
(function () {
|
||||||
|
|
||||||
|
if(!$axure.document.configuration.showConsole) { return; }
|
||||||
|
|
||||||
|
$(document).ready(function () {
|
||||||
|
$axure.player.createPluginHost({
|
||||||
|
id: 'debugHost',
|
||||||
|
context: 'inspect',
|
||||||
|
title: 'Console',
|
||||||
|
gid: 3
|
||||||
|
});
|
||||||
|
|
||||||
|
generateDebug();
|
||||||
|
|
||||||
|
$('#variablesClearLink').click(clearvars_click);
|
||||||
|
$('#traceClear').click(cleartrace_click);
|
||||||
|
$('#traceToggle').click(stoptrace_click);
|
||||||
|
$('#traceStart').click(starttrace_click);
|
||||||
|
$('#traceClear').hide();
|
||||||
|
$('#traceToggle').hide();
|
||||||
|
|
||||||
|
$('#closeConsole').click(close);
|
||||||
|
|
||||||
|
var currentStack= [];
|
||||||
|
var finishedStack = [];
|
||||||
|
|
||||||
|
$axure.messageCenter.addMessageListener(function (message, data) {
|
||||||
|
if(message == 'axCompositeEventMessage') {
|
||||||
|
for(var i = 0; i < data.length; i++) {
|
||||||
|
processMessages(data[i].message, data[i].data);
|
||||||
|
}
|
||||||
|
} else processMessages(message, data);
|
||||||
|
});
|
||||||
|
|
||||||
|
var processMessages = function(message, data) {
|
||||||
|
if(message == 'globalVariableValues') {
|
||||||
|
$('#variablesDiv').empty();
|
||||||
|
for(var key in data) {
|
||||||
|
var value = data[key] == '' ? '(blank)' : data[key];
|
||||||
|
$('#variablesDiv').append('<div class="variableList"><div class="variableName">' + key + '</div><div class="variableValue">' + value + '</div></div>');
|
||||||
|
}
|
||||||
|
} else if(message == 'axEvent') {
|
||||||
|
var addToStack = "<div class='axEventBlock'>";
|
||||||
|
addToStack += "<div class='axEventContainer'>";
|
||||||
|
addToStack += " <div class='axTime'>" + new Date().toLocaleTimeString() + "</div>";
|
||||||
|
addToStack += " <div class='axEvent'>" + data.event.description + ": </div>";
|
||||||
|
addToStack += " <div class='axLabel'>" + data.label + " (" + data.type + ")</div>";
|
||||||
|
addToStack += "</div>";
|
||||||
|
|
||||||
|
currentStack.push(addToStack);
|
||||||
|
} else if (message == 'axEventComplete') {
|
||||||
|
currentStack[currentStack.length - 1] += "</div>";
|
||||||
|
finishedStack.push(currentStack.pop());
|
||||||
|
if(currentStack.length == 0) {
|
||||||
|
$('#traceEmptyState').hide();
|
||||||
|
$('#traceClear').show();
|
||||||
|
$('#traceToggle').show();
|
||||||
|
|
||||||
|
for(var i = finishedStack.length - 1; i >= 0; i--) {
|
||||||
|
if($('#traceDiv').children().length > 99) $('#traceDiv').children().last().remove();
|
||||||
|
$('#traceDiv').prepend(finishedStack[i]);
|
||||||
|
}
|
||||||
|
finishedStack = [];
|
||||||
|
}
|
||||||
|
} else if (message == 'axCase') {
|
||||||
|
//var addToStack = "<div class='axCaseContainer' style='background-color: #" + data.color + "'>";
|
||||||
|
var addToStack = "<div class='axCaseContainer'>";
|
||||||
|
addToStack += " <div class='axCaseItem'>" + data.item + "</div>";
|
||||||
|
if (data.description) { addToStack += " <div class='axCaseDescription' title='" + data.description + "'>" + data.description + "</div>" };
|
||||||
|
addToStack += "</div>";
|
||||||
|
|
||||||
|
currentStack[currentStack.length - 1] += addToStack;
|
||||||
|
} else if (message == 'axAction') {
|
||||||
|
var addToStack = "<div class='axActionContainer'>";
|
||||||
|
addToStack += " <div class='axActionItem'>" + data.name + "</div>";
|
||||||
|
//addToStack += " <div class='axActionItem'>" + data.item + "</div>";
|
||||||
|
//if (data.description) { addToStack += " <div class='axActionDescription' title='" + data.description + "'>" + data.description + "</div>" };
|
||||||
|
addToStack += "</div>";
|
||||||
|
|
||||||
|
currentStack[currentStack.length - 1] += addToStack;
|
||||||
|
} else if (message == 'axInfo') {
|
||||||
|
var addToStack = "<div class='axInfoContainer'>";
|
||||||
|
addToStack += " <div class='axInfoItem'>" + data.item + "</div>";
|
||||||
|
if (data.description) { addToStack += " <div class='axInfoDescription' title='" + data.longDescription + "'>" + data.description + "</div>" };
|
||||||
|
addToStack += "</div>";
|
||||||
|
|
||||||
|
currentStack[currentStack.length - 1] += addToStack;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// bind to the page load
|
||||||
|
$axure.page.bind('load.debug', function () {
|
||||||
|
var traceStr = $axure.player.getHashStringVar(TRACE_VAR_NAME);
|
||||||
|
if (traceStr.length > 0) $axure.messageCenter.setState("isTracing", true);
|
||||||
|
else $axure.messageCenter.setState("isTracing", false);
|
||||||
|
$axure.messageCenter.postMessage('getGlobalVariables', '');
|
||||||
|
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
function clearvars_click(event) {
|
||||||
|
$axure.messageCenter.postMessage('resetGlobalVariables', '');
|
||||||
|
}
|
||||||
|
|
||||||
|
function close() {
|
||||||
|
$axure.player.pluginClose("debugHost");
|
||||||
|
}
|
||||||
|
|
||||||
|
function cleartrace_click(event) {
|
||||||
|
$('#traceDiv').html('');
|
||||||
|
}
|
||||||
|
|
||||||
|
function starttrace_click(event) {
|
||||||
|
$axure.messageCenter.setState("isTracing", true);
|
||||||
|
//$('#traceDiv').html('');
|
||||||
|
$('#traceEmptyState').hide();
|
||||||
|
$('#traceClear').show();
|
||||||
|
$('#traceToggle').text('Stop Trace');
|
||||||
|
$('#traceToggle').off("click");
|
||||||
|
$('#traceToggle').click(stoptrace_click);
|
||||||
|
$('#traceToggle').show();
|
||||||
|
console.log("starting trace");
|
||||||
|
$axure.player.setVarInCurrentUrlHash(TRACE_VAR_NAME, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function stoptrace_click(event) {
|
||||||
|
$axure.messageCenter.setState("isTracing", false);
|
||||||
|
$('#traceDiv').prepend('<div class="tracePausedNotification">Trace Paused<div>');
|
||||||
|
$('#traceToggle').text('Restart Trace');
|
||||||
|
$('#traceToggle').off("click");
|
||||||
|
$('#traceToggle').click(starttrace_click);
|
||||||
|
console.log("stopping trace");
|
||||||
|
$axure.player.deleteVarFromCurrentUrlHash(TRACE_VAR_NAME);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function generateDebug() {
|
||||||
|
var pageNotesUi = "<div id='debugHeader'>";
|
||||||
|
pageNotesUi += "<div id='debugToolbar'>";
|
||||||
|
pageNotesUi += "<div id='consoleTitle' class='pluginNameHeader'>Console</div>";
|
||||||
|
|
||||||
|
pageNotesUi += "</div>";
|
||||||
|
pageNotesUi += "</div>";
|
||||||
|
|
||||||
|
pageNotesUi += "<div id='variablesContainer' style='max-height:300px; overflow-y:auto'>";
|
||||||
|
pageNotesUi += "<div id='variablesTitle' class='sectionTitle'>Variables</div>";
|
||||||
|
pageNotesUi += "<a id='variablesClearLink' class='traceOption'>Reset Variables</a>";
|
||||||
|
pageNotesUi += "<div id='variablesDiv'></div></div>";
|
||||||
|
pageNotesUi += "<div id='traceContainer'>";
|
||||||
|
|
||||||
|
pageNotesUi += "<div id='traceHeader'>";
|
||||||
|
pageNotesUi += "<span class='sectionTitle'>Trace</span><a id='traceClear' class='traceOption'>Clear Trace</a><a id='traceToggle' class='traceOption'>Stop Trace</a>";
|
||||||
|
pageNotesUi += "</div>";
|
||||||
|
pageNotesUi += "</div>";
|
||||||
|
pageNotesUi += "<div id='debugScrollContainer'>";
|
||||||
|
pageNotesUi += "<div id='debugContainer'>";
|
||||||
|
|
||||||
|
|
||||||
|
pageNotesUi += "<div id='traceEmptyState'>";
|
||||||
|
pageNotesUi += "<div class='startInstructions'>Click the button below to start recording interactions as you click through the prototype.</div>";
|
||||||
|
pageNotesUi += "<div id='traceStart' class='startButton'>Start Trace</div>";
|
||||||
|
pageNotesUi += "</div>";
|
||||||
|
pageNotesUi += "<div id='traceDiv'></div></div>";
|
||||||
|
pageNotesUi += "</div></div>";
|
||||||
|
|
||||||
|
$('#debugHost').html(pageNotesUi);
|
||||||
|
$('#traceEmptyState').show();
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
265
src/plugins/debug/styles/debug.css
Normal file
265
src/plugins/debug/styles/debug.css
Normal file
|
|
@ -0,0 +1,265 @@
|
||||||
|
#debugHost {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #4a4a4a;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#debugHostBtn {
|
||||||
|
order: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
#debugHostBtn a {
|
||||||
|
background: url('images/console_panel_on.svg') no-repeat center center, linear-gradient(transparent, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
#debugHostBtn a.selected, #debugHostBtn a.selected:hover {
|
||||||
|
background: url('images/console_panel_off.svg') no-repeat center center, linear-gradient(transparent, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
#debugToolbar {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#variablesClearLink {
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#variablesClearLink:hover {
|
||||||
|
color: #0a6cd6;
|
||||||
|
}
|
||||||
|
|
||||||
|
#traceClearLink {
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#traceClearLink:hover {
|
||||||
|
color: #0a6cd6;
|
||||||
|
}
|
||||||
|
|
||||||
|
#debugScrollContainer
|
||||||
|
{
|
||||||
|
overflow: auto;
|
||||||
|
width: 100%;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#debugContainer {
|
||||||
|
padding: 10px 0px 10px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#consoleTitle {
|
||||||
|
clear: right;
|
||||||
|
margin: 12px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.variableName
|
||||||
|
{
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.variableDiv
|
||||||
|
{
|
||||||
|
margin-bottom: 20px;
|
||||||
|
line-height: 16px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#variablesDiv
|
||||||
|
{
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#variablesContainer {
|
||||||
|
border-bottom: solid 1px #e7e7e7;
|
||||||
|
padding: 0px 10px 12px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#traceContainer {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
padding: 15px 10px 0px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#variablesTitle {
|
||||||
|
margin-bottom: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionTitle {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #2c2c2c;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.debugToolbarButton
|
||||||
|
{
|
||||||
|
font-size: 1em;
|
||||||
|
color: #069;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axEventBlock {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
margin: 5px 0px 5px 0px;
|
||||||
|
line-height: 21px;
|
||||||
|
border-bottom: solid 5px #e7e7e7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axEventContainer {
|
||||||
|
background-color: #e7e7e7;
|
||||||
|
padding: 0px 10px 0px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axTime {
|
||||||
|
margin: 0px 0px 0px 5px;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #575757;
|
||||||
|
display: inline-block;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axLabel {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axEvent {
|
||||||
|
margin: 0px 0px 2px 0px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: bold;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axCaseContainer, .axActionContainer, .axInfoContainer {
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0px 10px 0px 10px;
|
||||||
|
}
|
||||||
|
.axCaseContainer {
|
||||||
|
border-top: solid 2px #e7e7e7;
|
||||||
|
/*background-color: #47b6b5;*/
|
||||||
|
background-color: #e7e7e7;
|
||||||
|
/*color: #ffffff;*/
|
||||||
|
}
|
||||||
|
.axActionContainer {
|
||||||
|
border-top: solid 3px #e7e7e7;
|
||||||
|
}
|
||||||
|
.axInfoContainer {
|
||||||
|
border-top: solid 1px #e7e7e7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axCaseItem, .axActionItem, .axInfoItem {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.axCaseItem {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.axActionItem {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.axInfoItem {
|
||||||
|
color: #8c8c8c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axCaseDescription {
|
||||||
|
flex: 5 0 33%;
|
||||||
|
margin-left: 10px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
/*.axActionDescription, .axInfoDescription {
|
||||||
|
flex: 5 0 33%;
|
||||||
|
margin-left: 10px;
|
||||||
|
text-align: right;
|
||||||
|
}*/
|
||||||
|
.axCaseDescription, .axActionDescription {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.axInfoDescription, .axActionDescription {
|
||||||
|
color: #8c8c8c;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.variableName {
|
||||||
|
width: 55%;
|
||||||
|
line-height: 0.92;
|
||||||
|
text-align: left;
|
||||||
|
color: #0891b3;
|
||||||
|
display: inline-block;
|
||||||
|
word-wrap: break-word;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.variableValue {
|
||||||
|
width: 45%;
|
||||||
|
line-height: 0.92;
|
||||||
|
text-align: right;
|
||||||
|
color: #373d48;
|
||||||
|
display: inline-block;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.traceEvent {
|
||||||
|
border-bottom: solid 1px #e7e7e7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tracePausedNotification {
|
||||||
|
height: 25px;
|
||||||
|
/*background-color: #e7e7e7;*/
|
||||||
|
border-radius: 5px;
|
||||||
|
line-height: 25px;
|
||||||
|
margin: 5px 10px;
|
||||||
|
text-align: center
|
||||||
|
}
|
||||||
|
|
||||||
|
#traceEmptyState.emptyStateContainer {
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.variableList{
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.traceOption {
|
||||||
|
margin-left: 11px;
|
||||||
|
height: 16px;
|
||||||
|
float: right;
|
||||||
|
font-size: 12px;
|
||||||
|
font-style: italic;
|
||||||
|
line-height: 1.45;
|
||||||
|
text-align: right;
|
||||||
|
color: #8c8c8c;
|
||||||
|
text-decoration: underline;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.startInstructions {
|
||||||
|
margin: auto;
|
||||||
|
width: 179px;
|
||||||
|
font-size: 11px;
|
||||||
|
text-align: center;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.startButton {
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 10px;
|
||||||
|
width: 181px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: solid 1px #008fe0;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 24px;
|
||||||
|
color: #008fe0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.debugLinksContainer {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
3
src/plugins/debug/styles/images/console_panel_off.svg
Normal file
3
src/plugins/debug/styles/images/console_panel_off.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||||
|
<path fill="#008DCB" fill-rule="evenodd" d="M14 2.5l-2 1V2H2v12h12v1a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v1.5zm-2.981 3.702c.78-1.06 1.407-1.803 1.882-2.23.475-.428.938-.641 1.389-.641.54 0 .913.184 1.118.553.11.192.164.424.164.698 0 .28-.113.536-.339.769a1.1 1.1 0 0 1-.82.348c-.198 0-.422-.075-.672-.225-.25-.15-.439-.226-.569-.226-.253 0-.494.13-.723.39-.229.26-.623.81-1.184 1.65l.195 1.026c.102.526.188.959.256 1.297.069.338.144.651.226.938.11.397.219.684.328.862.11.177.27.266.482.266.191 0 .424-.14.697-.42.15-.15.38-.427.687-.83l.43.297a8.113 8.113 0 0 1-1.409 1.733c-.578.546-1.143.82-1.697.82-.465 0-.848-.192-1.148-.574-.171-.205-.322-.486-.452-.841a11.32 11.32 0 0 1-.282-.98 24.82 24.82 0 0 0-.23-.866l-.144.246c-.677 1.162-1.172 1.918-1.487 2.266-.471.52-1.018.78-1.64.78-.356 0-.665-.122-.928-.364a1.172 1.172 0 0 1-.395-.898c0-.294.097-.565.292-.815.195-.25.467-.374.815-.374.212 0 .474.075.785.226.31.15.514.225.61.225.212 0 .395-.094.548-.282.154-.188.457-.654.908-1.4l.41-.676c-.068-.287-.142-.64-.22-1.056-.079-.417-.16-.845-.241-1.282l-.164-.872c-.117-.629-.301-1.042-.554-1.24-.144-.117-.38-.175-.708-.175a14.992 14.992 0 0 0-.636.051v-.564c.616-.075 1.29-.17 2.026-.287a52.738 52.738 0 0 0 1.471-.246c.205.274.374.605.508.995.133.39.234.803.302 1.24l.113.688z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
3
src/plugins/debug/styles/images/console_panel_on.svg
Normal file
3
src/plugins/debug/styles/images/console_panel_on.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||||
|
<path fill="#6D6D6D" fill-rule="evenodd" d="M14 2.5l-2 1V2H2v12h12v1a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v1.5zm-2.981 3.702c.78-1.06 1.407-1.803 1.882-2.23.475-.428.938-.641 1.389-.641.54 0 .913.184 1.118.553.11.192.164.424.164.698 0 .28-.113.536-.339.769a1.1 1.1 0 0 1-.82.348c-.198 0-.422-.075-.672-.225-.25-.15-.439-.226-.569-.226-.253 0-.494.13-.723.39-.229.26-.623.81-1.184 1.65l.195 1.026c.102.526.188.959.256 1.297.069.338.144.651.226.938.11.397.219.684.328.862.11.177.27.266.482.266.191 0 .424-.14.697-.42.15-.15.38-.427.687-.83l.43.297a8.113 8.113 0 0 1-1.409 1.733c-.578.546-1.143.82-1.697.82-.465 0-.848-.192-1.148-.574-.171-.205-.322-.486-.452-.841a11.32 11.32 0 0 1-.282-.98 24.82 24.82 0 0 0-.23-.866l-.144.246c-.677 1.162-1.172 1.918-1.487 2.266-.471.52-1.018.78-1.64.78-.356 0-.665-.122-.928-.364a1.172 1.172 0 0 1-.395-.898c0-.294.097-.565.292-.815.195-.25.467-.374.815-.374.212 0 .474.075.785.226.31.15.514.225.61.225.212 0 .395-.094.548-.282.154-.188.457-.654.908-1.4l.41-.676c-.068-.287-.142-.64-.22-1.056-.079-.417-.16-.845-.241-1.282l-.164-.872c-.117-.629-.301-1.042-.554-1.24-.144-.117-.38-.175-.708-.175a14.992 14.992 0 0 0-.636.051v-.564c.616-.075 1.29-.17 2.026-.287a52.738 52.738 0 0 0 1.471-.246c.205.274.374.605.508.995.133.39.234.803.302 1.24l.113.688z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
474
src/plugins/page_notes/page_notes.js
Normal file
474
src/plugins/page_notes/page_notes.js
Normal file
|
|
@ -0,0 +1,474 @@
|
||||||
|
// use this to isolate the scope
|
||||||
|
(function () {
|
||||||
|
// No notes shown specified by generation config
|
||||||
|
if (!$axure.document.configuration.showPageNotes && !$axure.document.configuration.showAnnotationsSidebar && !$axure.document.configuration.showAnnotations) { return; }
|
||||||
|
|
||||||
|
$(window.document).ready(function () {
|
||||||
|
// Load right panel for Page Notes
|
||||||
|
if ($axure.document.configuration.showPageNotes || $axure.document.configuration.showAnnotationsSidebar) {
|
||||||
|
$axure.player.createPluginHost({
|
||||||
|
id: 'pageNotesHost',
|
||||||
|
context: 'inspect',
|
||||||
|
title: 'Documentation',
|
||||||
|
gid: 2,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load footnotes on widgets
|
||||||
|
if ($axure.document.configuration.showAnnotations) {
|
||||||
|
$('#overflowMenuContainer').prepend('<div id="showNotesOption" class="showOption" style="order: 3"><div class="overflowOptionCheckbox"></div>Show Note Markers</div>');
|
||||||
|
}
|
||||||
|
|
||||||
|
createNotesOverlay();
|
||||||
|
generatePageNotes();
|
||||||
|
|
||||||
|
if ($axure.player.isMobileMode()) {
|
||||||
|
$('#showNotesOption').hide();
|
||||||
|
} else {
|
||||||
|
$('#showNotesOption').click(footnotes_click);
|
||||||
|
$('#showNotesOption').find('.overflowOptionCheckbox').addClass('selected');
|
||||||
|
}
|
||||||
|
|
||||||
|
function populateNotes(pageForNotes) {
|
||||||
|
var hasNotes = false;
|
||||||
|
if ($axure.document.configuration.showPageNotes) {
|
||||||
|
var pageNoteUi = '';
|
||||||
|
|
||||||
|
function populatePageNotes(pageOrMaster) {
|
||||||
|
//populate the page notes
|
||||||
|
var notes = pageOrMaster.notes;
|
||||||
|
if (notes && !$.isEmptyObject(notes)) {
|
||||||
|
pageNoteUi += "<div class='notesPageNameHeader'>" + pageOrMaster.pageName + "</div>";
|
||||||
|
|
||||||
|
var showNames = $axure.document.configuration.showPageNoteNames;
|
||||||
|
for(var noteName in notes) {
|
||||||
|
pageNoteUi += "<div class='pageNoteContainer'>";
|
||||||
|
if(showNames) {
|
||||||
|
pageNoteUi += "<div class='pageNoteName'>" + noteName + "</div>";
|
||||||
|
}
|
||||||
|
pageNoteUi += "<div class='pageNote'>" + linkify(notes[noteName]) + "</div>";
|
||||||
|
pageNoteUi += "</div>";
|
||||||
|
//$('#pageNotesContent').append(pageNoteUi);
|
||||||
|
|
||||||
|
hasNotes = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
populatePageNotes(pageForNotes);
|
||||||
|
if (pageForNotes.masterNotes) {
|
||||||
|
for (var i = 0; i < pageForNotes.masterNotes.length; i++) {
|
||||||
|
populatePageNotes(pageForNotes.masterNotes[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (pageNoteUi.length > 0) {
|
||||||
|
pageNoteUi += "<div class='lineDivider'></div>";
|
||||||
|
var pageNotesHeader = "<div id='pageNotesSectionHeader' class='notesSectionHeader pluginNameHeader'>Page Notes</div>";
|
||||||
|
$('#pageNotesContent').append(pageNotesHeader + pageNoteUi);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($axure.document.configuration.showAnnotationsSidebar) {
|
||||||
|
var widgetNoteUi = '';
|
||||||
|
//var widgetNotes = pageForNotes.widgetNotes;
|
||||||
|
function populateWidgetNotes(widgetNotes){
|
||||||
|
if (widgetNotes) {
|
||||||
|
for (var i = 0; i < widgetNotes.length; i++) {
|
||||||
|
var widgetNote = widgetNotes[i];
|
||||||
|
widgetNoteUi += "<div class='widgetNoteContainer' data-id='" + widgetNote["ownerId"] + "'>";
|
||||||
|
widgetNoteUi += "<div class='widgetNoteFootnote'>" + widgetNote["fn"] + "</div>";
|
||||||
|
widgetNoteUi += "<div class='widgetNoteLabel'>" + widgetNote["label"] + "</div>";
|
||||||
|
|
||||||
|
for (var widgetNoteName in widgetNote) {
|
||||||
|
if (widgetNoteName != "label" && widgetNoteName != "fn" && widgetNoteName != "ownerId") {
|
||||||
|
widgetNoteUi += "<div class='pageNoteName'>" + widgetNoteName + "</div>";
|
||||||
|
widgetNoteUi += "<div class='pageNote'>" + linkify(widgetNote[widgetNoteName]) + "</div>";
|
||||||
|
//widgetNoteUi += "<div class='nondottedDivider'></div>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
widgetNoteUi += "</div>";
|
||||||
|
//widgetNoteUi += "<div class='nondottedDivider'></div>";
|
||||||
|
//$('#pageNotesContent').append(widgetNoteUi);
|
||||||
|
hasNotes = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
populateWidgetNotes(pageForNotes.widgetNotes);
|
||||||
|
if (pageForNotes.masterNotes) {
|
||||||
|
for (var i = 0; i < pageForNotes.masterNotes.length; i++) {
|
||||||
|
populateWidgetNotes(pageForNotes.masterNotes[i].widgetNotes);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (widgetNoteUi.length > 0) {
|
||||||
|
var widgetNotesHeader = "<div id='widgetNotesSectionHeader' class='notesSectionHeader pluginNameHeader'>Widget Notes</div>";
|
||||||
|
$('#pageNotesContent').append(widgetNotesHeader + widgetNoteUi);
|
||||||
|
|
||||||
|
//$('.widgetNoteContainer').children(':last-child').remove();
|
||||||
|
//$('.widgetNoteFootnote').append("<div class='annnoteline'></div><div class='annnoteline'></div><div class='annnoteline'></div>");
|
||||||
|
$('.widgetNoteContainer').click(function () {
|
||||||
|
var wasSelected = $(this).hasClass('widgetNoteContainerSelected');
|
||||||
|
$('.widgetNoteContainerSelected').removeClass('widgetNoteContainerSelected');
|
||||||
|
if (!wasSelected) $(this).addClass('widgetNoteContainerSelected');
|
||||||
|
|
||||||
|
var dimStr = $('.currentAdaptiveView').attr('data-dim');
|
||||||
|
var h = dimStr ? dimStr.split('x')[1] : '0';
|
||||||
|
var $leftPanel = $('.leftPanel:visible');
|
||||||
|
var leftPanelOffset = (!$axure.player.isMobileMode() && $leftPanel.length > 0) ? $leftPanel.width() : 0;
|
||||||
|
var $rightPanel = $('.rightPanel:visible');
|
||||||
|
var rightPanelOffset = (!$axure.player.isMobileMode() && $rightPanel.length > 0) ? $rightPanel.width() : 0;
|
||||||
|
var viewDimensions = {
|
||||||
|
h: h != '0' ? h : '',
|
||||||
|
scaleVal: $('.vpScaleOption').find('.selectedRadioButton').parent().attr('val'),
|
||||||
|
height: $('.rightPanel').height(),
|
||||||
|
panelWidthOffset: leftPanelOffset + rightPanelOffset
|
||||||
|
};
|
||||||
|
$axure.messageCenter.postMessage('toggleSelectWidgetNote', { id: this.getAttribute('data-id'), value: !wasSelected, view: viewDimensions});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//if (pageForNotes.masterNotes) {
|
||||||
|
// for (var i = 0; i < pageForNotes.masterNotes.length; i++) {
|
||||||
|
// var master = pageForNotes.masterNotes[i];
|
||||||
|
// hasNotes = populateNotes(master) || hasNotes;
|
||||||
|
// }
|
||||||
|
//}
|
||||||
|
}
|
||||||
|
|
||||||
|
return hasNotes;
|
||||||
|
}
|
||||||
|
|
||||||
|
// bind to the page load
|
||||||
|
$axure.page.bind('load.page_notes', function () {
|
||||||
|
closeAllDialogs();
|
||||||
|
|
||||||
|
var hasNotes = false;
|
||||||
|
|
||||||
|
$('#pageNotesContent').html("");
|
||||||
|
hasNotes = populateNotes($axure.page);
|
||||||
|
|
||||||
|
if(hasNotes) $('#pageNotesEmptyState').hide();
|
||||||
|
else $('#pageNotesEmptyState').show();
|
||||||
|
|
||||||
|
//If footnotes enabled for this prototype...
|
||||||
|
if ($axure.player.isMobileMode()) {
|
||||||
|
$axure.messageCenter.postMessage('annotationToggle', false);
|
||||||
|
} else if($axure.document.configuration.showAnnotations == true) {
|
||||||
|
//If the fn var is defined and set to 0, hide footnotes
|
||||||
|
//else if hide-footnotes button selected, hide them
|
||||||
|
var fnVal = $axure.player.getHashStringVar(FOOTNOTES_VAR_NAME);
|
||||||
|
if(fnVal.length > 0 && fnVal == 0) {
|
||||||
|
$('#showNotesOption').find('.overflowOptionCheckbox').removeClass('selected');
|
||||||
|
$axure.messageCenter.postMessage('annotationToggle', false);
|
||||||
|
} else if(!$('#showNotesOption').find('.overflowOptionCheckbox').hasClass('selected')) {
|
||||||
|
//If the footnotes button isn't selected, hide them on this loaded page
|
||||||
|
$axure.messageCenter.postMessage('annotationToggle', false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get multiple click call if not removing beforehand
|
||||||
|
$('#notesOverlay').off('click');
|
||||||
|
$('#notesOverlay').on('click', '.closeNotesDialog', function () {
|
||||||
|
var ownerId = $(this).attr("data-ownerid");
|
||||||
|
_toggleAnnDialog(ownerId);
|
||||||
|
});
|
||||||
|
|
||||||
|
$axure.player.updatePlugins();
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
$axure.messageCenter.addMessageListener(function (message, data) {
|
||||||
|
//var messageData = { id: elementId, x: event.pageX, y: event.pageY }
|
||||||
|
if (message == 'toggleAnnDialog') {
|
||||||
|
_toggleAnnDialog(data.id, data.x, data.y, data.page);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
function linkify(text) {
|
||||||
|
var urlRegex = /(\b(((https?|ftp|file):\/\/)|(www\.))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
|
||||||
|
return text.replace(urlRegex, function (url, b, c) {
|
||||||
|
var url2 = (c == 'www.') ? 'http://' + url : url;
|
||||||
|
return '<a href="' + url2 + '" target="_blank" class="noteLink">' + url + '</a>';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getWidgetNotesHtml(ownerId, page) {
|
||||||
|
var pageForNotes = page || $axure.page;
|
||||||
|
var widgetNoteUi = '';
|
||||||
|
|
||||||
|
widgetNoteUi += "<div data-ownerid='" + ownerId + "' class='closeNotesDialog'></div>";
|
||||||
|
widgetNoteUi += "<div class='notesDialogScroll'>";
|
||||||
|
|
||||||
|
function getNotesForPage(widgetNotes) {
|
||||||
|
for (var i = 0; i < widgetNotes.length; i++) {
|
||||||
|
var widgetNote = widgetNotes[i];
|
||||||
|
if (widgetNote["ownerId"] == ownerId) {
|
||||||
|
widgetNoteUi += "<div class='widgetNoteContainer' data-id='" + widgetNote["ownerId"] + "'>";
|
||||||
|
widgetNoteUi += "<div class='widgetNoteFootnote'>" + widgetNote["fn"] + "</div>";
|
||||||
|
widgetNoteUi += "<div class='widgetNoteLabel'>" + widgetNote["label"] + "</div>";
|
||||||
|
|
||||||
|
for (var widgetNoteName in widgetNote) {
|
||||||
|
if (widgetNoteName != "label" && widgetNoteName != "fn" && widgetNoteName != "ownerId") {
|
||||||
|
widgetNoteUi += "<div class='pageNoteName'>" + widgetNoteName + "</div>";
|
||||||
|
widgetNoteUi += "<div class='pageNote'>" + linkify(widgetNote[widgetNoteName]) + "</div>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
widgetNoteUi += "</div>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getNotesForPage(pageForNotes.widgetNotes);
|
||||||
|
if (pageForNotes.masterNotes) {
|
||||||
|
for (var i = 0; i < pageForNotes.masterNotes.length; i++) {
|
||||||
|
getNotesForPage(pageForNotes.masterNotes[i].widgetNotes);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
widgetNoteUi += "</div>";
|
||||||
|
widgetNoteUi += "<div class='resizeNotesDialog'></div>";
|
||||||
|
|
||||||
|
return widgetNoteUi;
|
||||||
|
}
|
||||||
|
|
||||||
|
var maxZIndex = 1;
|
||||||
|
var dialogs = {};
|
||||||
|
var _toggleAnnDialog = function (id, srcLeft, srcTop, page) {
|
||||||
|
|
||||||
|
if(dialogs[id]) {
|
||||||
|
var $dialog = dialogs[id];
|
||||||
|
// reset the dialog
|
||||||
|
dialogs[id] = undefined;
|
||||||
|
$dialog.find('.notesDialogScroll').getNiceScroll().remove();
|
||||||
|
$dialog.remove();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var bufferH = 10;
|
||||||
|
var bufferV = 10;
|
||||||
|
var blnLeft = false;
|
||||||
|
var blnAbove = false;
|
||||||
|
var mfPos = $('#mainPanelContainer').position();
|
||||||
|
var viewablePanelLeftMargin = parseInt($('#mainPanelContainer').css('margin-left'));
|
||||||
|
|
||||||
|
var sourceTop = srcTop + mfPos.top;
|
||||||
|
var sourceLeft = srcLeft + viewablePanelLeftMargin;
|
||||||
|
|
||||||
|
var width = 300;
|
||||||
|
var height = 300;
|
||||||
|
|
||||||
|
if(sourceLeft > width + bufferH) {
|
||||||
|
blnLeft = true;
|
||||||
|
}
|
||||||
|
if(sourceTop > height + bufferV) {
|
||||||
|
blnAbove = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
var top = 0;
|
||||||
|
var left = 0;
|
||||||
|
if(blnAbove) top = sourceTop - height - 20;
|
||||||
|
else top = sourceTop + 10;
|
||||||
|
if(blnLeft) left = sourceLeft - width - 4;
|
||||||
|
else left = sourceLeft - 6;
|
||||||
|
|
||||||
|
//need to set the zindex
|
||||||
|
maxZIndex = maxZIndex + 1;
|
||||||
|
|
||||||
|
var $dialog = $('<div class="notesDialog"></div>')
|
||||||
|
.appendTo('#notesOverlay')
|
||||||
|
.html(getWidgetNotesHtml(id, page));
|
||||||
|
|
||||||
|
$dialog.css({ 'left': left, 'top': top, 'z-index': maxZIndex });
|
||||||
|
|
||||||
|
$dialog.find('.notesDialogScroll').niceScroll({ cursorcolor: "#8c8c8c", cursorborder: "0px solid #fff" });
|
||||||
|
|
||||||
|
$dialog.find('.notesDialogScroll').on($axure.eventNames.mouseDownName, function(event) {
|
||||||
|
event.stopPropagation();
|
||||||
|
});
|
||||||
|
|
||||||
|
$dialog.find('.closeNotesDialog').on($axure.eventNames.mouseDownName, function (event) {
|
||||||
|
event.stopPropagation();
|
||||||
|
});
|
||||||
|
|
||||||
|
$dialog.on($axure.eventNames.mouseDownName, startDialogMove);
|
||||||
|
var startMouseX;
|
||||||
|
var startMouseY;
|
||||||
|
var startDialogX;
|
||||||
|
var startDialogY;
|
||||||
|
function startDialogMove() {
|
||||||
|
startMouseX = window.event.pageX;
|
||||||
|
startMouseY = window.event.pageY;
|
||||||
|
var position = $dialog.position();
|
||||||
|
startDialogX = position.left;
|
||||||
|
startDialogY = position.top;
|
||||||
|
|
||||||
|
$dialog.addClass('active');
|
||||||
|
$('<div class="splitterMask"></div>').insertAfter($('#notesOverlay'));
|
||||||
|
$(document).bind($axure.eventNames.mouseMoveName, doDialogMove).bind($axure.eventNames.mouseUpName, endDialogMove);
|
||||||
|
|
||||||
|
$dialog.find('.notesDialogScroll').getNiceScroll().hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
function doDialogMove() {
|
||||||
|
var currentX = window.event.pageX;
|
||||||
|
var currentY = window.event.pageY;
|
||||||
|
$dialog.css({ 'left': startDialogX + currentX - startMouseX, 'top': startDialogY + currentY - startMouseY });
|
||||||
|
}
|
||||||
|
|
||||||
|
function endDialogMove() {
|
||||||
|
$('div.splitterMask').remove();
|
||||||
|
$dialog.removeClass('active');
|
||||||
|
$(document).unbind($axure.eventNames.mouseMoveName, doDialogMove).unbind($axure.eventNames.mouseUpName, endDialogMove);
|
||||||
|
|
||||||
|
$dialog.find('.notesDialogScroll').getNiceScroll().resize();
|
||||||
|
$dialog.find('.notesDialogScroll').getNiceScroll().show();
|
||||||
|
}
|
||||||
|
|
||||||
|
$dialog.find('.resizeNotesDialog').on($axure.eventNames.mouseDownName, startDialogResize);
|
||||||
|
|
||||||
|
var startDialogW;
|
||||||
|
var startDialogH;
|
||||||
|
function startDialogResize() {
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
startMouseX = window.event.pageX;
|
||||||
|
startMouseY = window.event.pageY;
|
||||||
|
startDialogW = Number($dialog.css('width').replace('px',''));
|
||||||
|
startDialogH = Number($dialog.css('height').replace('px', ''));
|
||||||
|
|
||||||
|
$dialog.addClass('active');
|
||||||
|
$('<div class="splitterMask"></div>').insertAfter($('#notesOverlay'));
|
||||||
|
$(document).bind($axure.eventNames.mouseMoveName, doDialogResize).bind($axure.eventNames.mouseUpName, endDialogResize);
|
||||||
|
|
||||||
|
$dialog.find('.notesDialogScroll').getNiceScroll().hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
function doDialogResize() {
|
||||||
|
var currentX = window.event.pageX;
|
||||||
|
var currentY = window.event.pageY;
|
||||||
|
var newWidth = Math.max(200, startDialogW + currentX - startMouseX);
|
||||||
|
var newHeight = Math.max(200, startDialogH + currentY - startMouseY);
|
||||||
|
$dialog.css({ 'width': newWidth, 'height': newHeight });
|
||||||
|
}
|
||||||
|
|
||||||
|
function endDialogResize() {
|
||||||
|
$('div.splitterMask').remove();
|
||||||
|
$dialog.removeClass('active');
|
||||||
|
$(document).unbind($axure.eventNames.mouseMoveName, doDialogResize).unbind($axure.eventNames.mouseUpName, endDialogResize);
|
||||||
|
|
||||||
|
$dialog.find('.notesDialogScroll').getNiceScroll().resize();
|
||||||
|
$dialog.find('.notesDialogScroll').getNiceScroll().show();
|
||||||
|
}
|
||||||
|
|
||||||
|
dialogs[id] = $dialog;
|
||||||
|
|
||||||
|
// scroll ... just for IE
|
||||||
|
//window.scrollTo(scrollX, scrollY);
|
||||||
|
};
|
||||||
|
|
||||||
|
$(document).on('sidebarCollapse', function (event, data) {
|
||||||
|
clearSelection();
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).on('pluginShown', function (event, data) {
|
||||||
|
if(data != 2) {
|
||||||
|
clearSelection();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function clearSelection() {
|
||||||
|
var selectedNote = $('#pageNotesContainer').find('.widgetNoteContainerSelected');
|
||||||
|
if(selectedNote.length > 0) {
|
||||||
|
selectedNote.removeClass('widgetNoteContainerSelected');
|
||||||
|
//var dimStr = $('.currentAdaptiveView').attr('data-dim');
|
||||||
|
//var h = dimStr ? dimStr.split('x')[1] : '0';
|
||||||
|
//var $leftPanel = $('.leftPanel:visible');
|
||||||
|
//var leftPanelOffset = (!$axure.player.isMobileMode() && $leftPanel.length > 0) ? $leftPanel.width() : 0;
|
||||||
|
//var $rightPanel = $('.rightPanel:visible');
|
||||||
|
//var rightPanelOffset = (!$axure.player.isMobileMode() && $rightPanel.length > 0) ? $rightPanel.width() : 0;
|
||||||
|
//var viewDimensions = {
|
||||||
|
// h: h != '0' ? h : '',
|
||||||
|
// scaleVal: $('.vpScaleOption').find('.selectedRadioButton').parent().attr('val'),
|
||||||
|
// scrollLeft: $('#clipFrameScroll').scrollLeft(),
|
||||||
|
// scrollTop: $('#clipFrameScroll').scrollTop(),
|
||||||
|
// height: $('.rightPanel').height(),
|
||||||
|
// panelWidthOffset: leftPanelOffset + rightPanelOffset
|
||||||
|
//};
|
||||||
|
//$axure.messageCenter.postMessage('toggleSelectWidgetNote', { id: '', value: false, view: viewDimensions });
|
||||||
|
$axure.messageCenter.postMessage('toggleSelectWidgetNote', { id: '', value: false });
|
||||||
|
//$axure.messageCenter.postMessage('toggleSelectWidgetNote', '');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeAllDialogs() {
|
||||||
|
for (var id in dialogs) {
|
||||||
|
var $dialog = dialogs[id];
|
||||||
|
if ($dialog !== undefined) _toggleAnnDialog(id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$axure.player.toggleFootnotes = function(val) {
|
||||||
|
var scaleCheckDiv = $('#showNotesOption').find('.overflowOptionCheckbox');
|
||||||
|
if (scaleCheckDiv.hasClass('selected')) {
|
||||||
|
if (!val) $('#showNotesOption').click();
|
||||||
|
} else {
|
||||||
|
if (val) $('#showNotesOption').click();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function footnotes_click(event) {
|
||||||
|
var scaleCheckDiv = $('#showNotesOption').find('.overflowOptionCheckbox');
|
||||||
|
if (scaleCheckDiv.hasClass('selected')) {
|
||||||
|
closeAllDialogs();
|
||||||
|
|
||||||
|
scaleCheckDiv.removeClass('selected');
|
||||||
|
$axure.messageCenter.postMessage('annotationToggle', false);
|
||||||
|
//Add 'fn' hash string var so that footnotes stay hidden across reloads
|
||||||
|
$axure.player.setVarInCurrentUrlHash(FOOTNOTES_VAR_NAME, 0);
|
||||||
|
} else {
|
||||||
|
scaleCheckDiv.addClass('selected');
|
||||||
|
$axure.messageCenter.postMessage('annotationToggle', true);
|
||||||
|
//Delete 'fn' hash string var if it exists since default is visible
|
||||||
|
$axure.player.deleteVarFromCurrentUrlHash(FOOTNOTES_VAR_NAME);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function createNotesOverlay() {
|
||||||
|
var $targetPanel = $('#clippingBounds');
|
||||||
|
|
||||||
|
if (!$('#notesOverlay').length) {
|
||||||
|
var notesOverlay = document.createElement('div');
|
||||||
|
notesOverlay.setAttribute('id', 'notesOverlay');
|
||||||
|
|
||||||
|
$targetPanel.prepend(notesOverlay);
|
||||||
|
$(notesOverlay).append(' ');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function generatePageNotes() {
|
||||||
|
var pageNotesUi = "<div id='pageNotesHeader'>";
|
||||||
|
|
||||||
|
pageNotesUi += "<div id='pageNotesToolbar' style='height: 12px;'>";
|
||||||
|
pageNotesUi += "</div>";
|
||||||
|
pageNotesUi += "</div>";
|
||||||
|
|
||||||
|
|
||||||
|
pageNotesUi += "<div id='pageNotesScrollContainer'>";
|
||||||
|
pageNotesUi += "<div id='pageNotesContainer'>";
|
||||||
|
pageNotesUi += "<div id='pageNotesEmptyState' class='emptyStateContainer'><div class='emptyStateTitle'>No notes for this page.</div><div class='emptyStateContent'>Notes added in Axure RP will appear here.</div><div class='dottedDivider'></div></div>";
|
||||||
|
pageNotesUi += "<span id='pageNotesContent'></span>";
|
||||||
|
pageNotesUi += "</div></div>";
|
||||||
|
|
||||||
|
$('#pageNotesHost').html(pageNotesUi);
|
||||||
|
|
||||||
|
if(!$axure.document.configuration.showAnnotations) {
|
||||||
|
$('#pageNotesHost .pageNameHeader').css('padding-right', '55px');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
3
src/plugins/page_notes/styles/images/notes_panel_off.svg
Normal file
3
src/plugins/page_notes/styles/images/notes_panel_off.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
|
||||||
|
<path fill="#008DCB" fill-rule="evenodd" d="M1 0h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm1 2v12h10V2H2zm2 2h6a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 3h6a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 3h6a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 340 B |
3
src/plugins/page_notes/styles/images/notes_panel_on.svg
Normal file
3
src/plugins/page_notes/styles/images/notes_panel_on.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
|
||||||
|
<path fill="#6D6D6D" fill-rule="evenodd" d="M1 0h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm1 2v12h10V2H2zm2 2h6a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 3h6a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 3h6a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 340 B |
209
src/plugins/page_notes/styles/page_notes.css
Normal file
209
src/plugins/page_notes/styles/page_notes.css
Normal file
|
|
@ -0,0 +1,209 @@
|
||||||
|
#pageNotesHost {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pageNotesHostBtn {
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pageNotesHostBtn a {
|
||||||
|
background: url('images/notes_panel_on.svg') no-repeat center center,linear-gradient(transparent, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
#pageNotesHostBtn a.selected, #pageNotesHostBtn a.selected:hover {
|
||||||
|
background: url('images/notes_panel_off.svg') no-repeat center center,linear-gradient(transparent, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
#pageNotesScrollContainer {
|
||||||
|
overflow: auto;
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pageNotesContent {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageNoteContainer {
|
||||||
|
padding: 0px 12px 8px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobileMode .pageNoteContainer {
|
||||||
|
padding: 0px 16px 8px 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageNoteName {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #2c2c2c;
|
||||||
|
margin: 15px 0px 5px 0px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageNote {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #2a2e38;
|
||||||
|
line-height: 1.67;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageNote ul {
|
||||||
|
list-style: disc;
|
||||||
|
padding: 0px 0px 0px 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageNote ul ul{
|
||||||
|
list-style: circle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageNote ul ul ul{
|
||||||
|
list-style: square;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageNote ul ul ul ul {
|
||||||
|
list-style: disc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageNote ul ul ul ul ul {
|
||||||
|
list-style: circle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageNote ul ul ul ul ul ul {
|
||||||
|
list-style: square;
|
||||||
|
}
|
||||||
|
|
||||||
|
.widgetNoteContainer {
|
||||||
|
padding: 12px;
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
border-top: 1px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobileMode .widgetNoteContainer {
|
||||||
|
padding: 12px 16px 12px 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.widgetNoteContainerSelected {
|
||||||
|
background-color: white;
|
||||||
|
border-bottom: 1px solid #c2c2c2;
|
||||||
|
border-top: 1px solid #c2c2c2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.widgetNoteFootnote {
|
||||||
|
display: inline-block;
|
||||||
|
padding-top: 1px;
|
||||||
|
background-color: #fff849;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 16px;
|
||||||
|
margin-right: 8px;
|
||||||
|
padding: 0px 5px;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.annnoteline {
|
||||||
|
display: inline-block;
|
||||||
|
width: 9px;
|
||||||
|
height: 1px;
|
||||||
|
border-bottom: 1px solid white;
|
||||||
|
margin-top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.widgetNoteLabel {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #58167d;
|
||||||
|
margin-top: 4px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noteLink {
|
||||||
|
text-decoration: inherit;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noteLink:hover {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notesSectionHeader {
|
||||||
|
margin: 0px 8px 0px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notesPageNameHeader {
|
||||||
|
margin: 8px 8px 15px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobileMode .notesPageNameHeader {
|
||||||
|
margin: 18px 14px 5px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#notesOverlay {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
position: absolute;
|
||||||
|
overflow: visible;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.closeNotesDialog {
|
||||||
|
position: absolute;
|
||||||
|
top: 6px;
|
||||||
|
right: 6px;
|
||||||
|
width: 11px;
|
||||||
|
height: 10px;
|
||||||
|
object-fit: contain;
|
||||||
|
background: url(../../../resources/images/close_x.svg) no-repeat center center, linear-gradient(transparent, transparent);
|
||||||
|
margin-left: auto;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.resizeNotesDialog {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 2px;
|
||||||
|
right: 2px;
|
||||||
|
width: 11px;
|
||||||
|
height: 10px;
|
||||||
|
object-fit: contain;
|
||||||
|
background: url(../../../resources/images/resize.svg) no-repeat center center, linear-gradient(transparent, transparent);
|
||||||
|
margin-left: auto;
|
||||||
|
cursor: nwse-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.notesDialog {
|
||||||
|
position: absolute;
|
||||||
|
padding: 16px 3px 10px 3px;
|
||||||
|
background-color: #efefef;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
line-height: normal;
|
||||||
|
border: #8F949A solid 1px;
|
||||||
|
box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.4);
|
||||||
|
cursor: move;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.notesDialog.active {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.notesDialog .widgetNoteContainer {
|
||||||
|
cursor: auto;
|
||||||
|
padding: 2px 26px 16px 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.notesDialogScroll {
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
height: 100%;
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobileMode .pageNoteName, .mobileMode #pageNotesToolbar, .mobileMode .dottedDivider {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
479
src/plugins/recordplay/recordplay.js
Normal file
479
src/plugins/recordplay/recordplay.js
Normal file
|
|
@ -0,0 +1,479 @@
|
||||||
|
// use this to isolate the scope
|
||||||
|
(function() {
|
||||||
|
|
||||||
|
if(!$axure.document.configuration.showRecordPlay) { return; }
|
||||||
|
|
||||||
|
$(window.document).ready(function() {
|
||||||
|
$axure.player.createPluginHost({
|
||||||
|
id: 'recordPlayHost',
|
||||||
|
context: 'interface',
|
||||||
|
title: 'Recording'
|
||||||
|
});
|
||||||
|
_generateRecordPlay();
|
||||||
|
|
||||||
|
$('#recordButton').click(_recordClick);
|
||||||
|
$('#playButton').click(_playClick);
|
||||||
|
$('#stopButton').click(_stopClick);
|
||||||
|
$('#deleteButton').click(_deleteClick);
|
||||||
|
|
||||||
|
// bind to the page load
|
||||||
|
|
||||||
|
$axure.page.bind('load.page_notes', function() {
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
type: "POST",
|
||||||
|
url: '/RecordController/ListRecordings',
|
||||||
|
success: function(response) {
|
||||||
|
|
||||||
|
$('#recordNameHeader').html("");
|
||||||
|
$('#recordPlayContent').html("");
|
||||||
|
//populate the notes
|
||||||
|
|
||||||
|
axRecordingList = [];
|
||||||
|
|
||||||
|
if(!eventList) {
|
||||||
|
recordingIndex = 0;
|
||||||
|
eventList = [];
|
||||||
|
recordingStartTime = 0;
|
||||||
|
bulkEventElement = "";
|
||||||
|
lastBulkEvent = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
for(var idx in response.recordingList) {
|
||||||
|
getOneRecording(response.recordingList[idx]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
// dataType: 'json'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
var nameMatcher = new RegExp("^axRecording[0-9]{4}$", "i");
|
||||||
|
var indexMatcher = new RegExp("[0-9]{4}$", "i");
|
||||||
|
|
||||||
|
var convertFromJson = function(oneRecording) {
|
||||||
|
|
||||||
|
if(nameMatcher.exec(oneRecording.recordingName)) {
|
||||||
|
var myArray = indexMatcher.exec(oneRecording.recordingName);
|
||||||
|
var currIdx = parseInt(myArray);
|
||||||
|
if(recordingIndex < currIdx) {
|
||||||
|
recordingIndex = currIdx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
for(var idx in oneRecording.eventList) {
|
||||||
|
var thisEvent = oneRecording.eventList[idx];
|
||||||
|
thisEvent.eventInfo = {};
|
||||||
|
thisEvent.eventInfo.srcElement = thisEvent.elementID;
|
||||||
|
// TODO: check that this is correct.
|
||||||
|
|
||||||
|
if(isBulkMouse(thisEvent.eventType)) {
|
||||||
|
thisEvent.eventInfo.mousePositions = [];
|
||||||
|
thisEvent.eventInfo.mousePositions = thisEvent.mousePositions;
|
||||||
|
thisEvent.timeStamp = thisEvent.mousePositions[0].timeStamp;
|
||||||
|
}
|
||||||
|
if(isSingleMouse(thisEvent.eventType)) {
|
||||||
|
thisEvent.eventInfo.cursor = {};
|
||||||
|
thisEvent.eventInfo.cursor = thisEvent.cursor;
|
||||||
|
|
||||||
|
}
|
||||||
|
if(thisEvent.eventType === 'OnDrag') {
|
||||||
|
thisEvent.eventInfo.dragInfo = {};
|
||||||
|
thisEvent.eventInfo.dragInfo = thisEvent.dragInfo;
|
||||||
|
thisEvent.timeStamp = thisEvent.dragInfo.startTime;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
return oneRecording;
|
||||||
|
};
|
||||||
|
|
||||||
|
var getOneRecording = function(recordingItem) {
|
||||||
|
$.ajax({
|
||||||
|
type: "POST",
|
||||||
|
url: '/RecordController/GetRecording',
|
||||||
|
data: { 'recordingId': recordingItem.recordingId },
|
||||||
|
success: function(response) {
|
||||||
|
axRecordingList[axRecordingList.length] = convertFromJson(response);
|
||||||
|
var axRecordingContainer = $('#recordingContainer').find('li').filter('.recordingRootNode');
|
||||||
|
axRecordingContainer.append(_formAxRecordingBranch(response));
|
||||||
|
_attachEventTriggers(response);
|
||||||
|
}, // dataType: 'json'
|
||||||
|
});
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
var axRecordingList;
|
||||||
|
var eventList;
|
||||||
|
var recordingIndex;
|
||||||
|
var recordingStartTime;
|
||||||
|
var recordingId;
|
||||||
|
var recordingName;
|
||||||
|
|
||||||
|
|
||||||
|
var leadingZeros = function(number, digits) { // because this thing doesn't have string.format (or does it?)
|
||||||
|
var recurseLeadingZeros = function(number, digitsLeft) {
|
||||||
|
if(digitsLeft > 0) {
|
||||||
|
return recurseLeadingZeros("0" + number, digitsLeft - 1);
|
||||||
|
} else {
|
||||||
|
return number;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return recurseLeadingZeros(number, digits - String(number).length);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
var generateRecordingName = function() {
|
||||||
|
return "axRecording" + leadingZeros(recordingIndex, 4);
|
||||||
|
};
|
||||||
|
|
||||||
|
var isSingleMouse = function(eventType) {
|
||||||
|
return (eventType === 'OnClick' ||
|
||||||
|
eventType === 'OnMouseUp' ||
|
||||||
|
eventType === 'OnMouseDown' ||
|
||||||
|
eventType === 'OnMouseOver' ||
|
||||||
|
eventType === 'OnKeyUp' ||
|
||||||
|
eventType === 'OnSelectedChange' ||
|
||||||
|
eventType === 'OnSelect' ||
|
||||||
|
eventType === 'OnUnselect' ||
|
||||||
|
eventType === 'OnTextChange' ||
|
||||||
|
eventType === 'OnMouseOut');
|
||||||
|
};
|
||||||
|
|
||||||
|
var isBulkMouse = function(eventType) {
|
||||||
|
return (eventType === 'OnMouseHover' ||
|
||||||
|
eventType === 'OnMouseMove');
|
||||||
|
};
|
||||||
|
|
||||||
|
var bulkEventElement;
|
||||||
|
var lastBulkEvent;
|
||||||
|
|
||||||
|
|
||||||
|
$axure.messageCenter.addMessageListener(function(message, eventData) {
|
||||||
|
var lastEvent, lastBulkData;
|
||||||
|
|
||||||
|
if(message === 'logEvent') {
|
||||||
|
|
||||||
|
if(bulkEventElement !== eventData.elementID) {
|
||||||
|
lastBulkEvent = {};
|
||||||
|
bulkEventElement = eventData.elementID;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(isBulkMouse(eventData.eventType)) {
|
||||||
|
lastEvent = lastBulkEvent[eventData.eventType];
|
||||||
|
|
||||||
|
if(lastEvent) {
|
||||||
|
// this is the second or third or whatever onmousemove in a row
|
||||||
|
lastBulkData = lastEvent.eventInfo.mousePositions;
|
||||||
|
lastBulkData[lastBulkData.length] = {
|
||||||
|
cursor: eventData.eventInfo.cursor,
|
||||||
|
timeStamp: eventData.timeStamp
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
|
||||||
|
eventData.eventInfo.mousePositions = [];
|
||||||
|
eventData.eventInfo.mousePositions[0] = {
|
||||||
|
cursor: eventData.eventInfo.cursor,
|
||||||
|
timeStamp: eventData.timeStamp
|
||||||
|
};
|
||||||
|
eventList[eventList.length] = eventData;
|
||||||
|
lastBulkEvent[eventData.eventType] = eventData;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
var z = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(isSingleMouse(eventData.eventType) ) {
|
||||||
|
eventList[eventList.length] = eventData;
|
||||||
|
lastBulkEvent = {};
|
||||||
|
bulkEventElement = eventData.elementID;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(eventData.eventType === 'OnDrag') {
|
||||||
|
|
||||||
|
lastEvent = lastBulkEvent[eventData.eventType];
|
||||||
|
|
||||||
|
if (lastEvent) {
|
||||||
|
// this is the second or third or whatever onmousemove in a row
|
||||||
|
lastBulkData = lastEvent.eventInfo.mousePositions;
|
||||||
|
lastBulkData[lastBulkData.length] = {
|
||||||
|
dragInfo: eventData.eventInfo.dragInfo,
|
||||||
|
timeStamp: eventData.timeStamp
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
eventData.eventInfo.mousePositions = [];
|
||||||
|
eventData.eventInfo.mousePositions[0] = {
|
||||||
|
dragInfo: eventData.eventInfo.dragInfo,
|
||||||
|
timeStamp: eventData.timeStamp
|
||||||
|
};
|
||||||
|
eventList[eventList.length] = eventData;
|
||||||
|
lastBulkEvent[eventData.eventType] = eventData;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// if(eventData.eventType === 'OnKeyUp') {
|
||||||
|
// transmissionFields.eventInfo = eventData.eventInfo;
|
||||||
|
// $.ajax({
|
||||||
|
// type: "POST",
|
||||||
|
// url: '/RecordController/LogMouseClick',
|
||||||
|
// data: transmissionFields,
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
var _recordClick = function(event) {
|
||||||
|
$('#recordButton').addClass('recordPlayButtonSelected');
|
||||||
|
recordingIndex++;
|
||||||
|
// $axure.recording.startRecord();
|
||||||
|
|
||||||
|
recordingStartTime = new Date().getTime();
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
type: "POST",
|
||||||
|
url: '/RecordController/CreateRecording',
|
||||||
|
data: {
|
||||||
|
'recordingName': generateRecordingName(),
|
||||||
|
timeStamp: recordingStartTime
|
||||||
|
},
|
||||||
|
success: function(response) {
|
||||||
|
recordingId = response.recordingId;
|
||||||
|
recordingName = response.recordingName;
|
||||||
|
$axure.messageCenter.postMessage('startRecording', {'recordingId' : recordingId, 'recordingName': recordingName});
|
||||||
|
},
|
||||||
|
// dataType: 'json'
|
||||||
|
});
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
var _playClick = function(event) {
|
||||||
|
$('#playButton').addClass('recordPlayButtonSelected');
|
||||||
|
};
|
||||||
|
|
||||||
|
var _stopClick = function(event) {
|
||||||
|
var axRecording, axObjectDictionary, axRecordingContainer, transmissionFields;
|
||||||
|
$('#sitemapLinksContainer').toggle();
|
||||||
|
if($('#recordButton').is('.recordPlayButtonSelected')) {
|
||||||
|
$('#recordButton').removeClass('recordPlayButtonSelected');
|
||||||
|
// $axure.recording.stopRecord();
|
||||||
|
|
||||||
|
axRecording = {
|
||||||
|
'recordingId' : recordingId,
|
||||||
|
'recordingName': recordingName,
|
||||||
|
'eventList': eventList
|
||||||
|
};
|
||||||
|
|
||||||
|
axRecordingList[axRecordingList.length] = axRecording;
|
||||||
|
axRecordingContainer = $('#recordingContainer').find('li').filter('.recordingRootNode');
|
||||||
|
axRecordingContainer.append(_formAxRecordingBranch(axRecording));
|
||||||
|
_attachEventTriggers(axRecording);
|
||||||
|
|
||||||
|
lastBulkEvent = {};
|
||||||
|
|
||||||
|
var recordingStepList = [];
|
||||||
|
|
||||||
|
for(var eventListIdx in eventList) {
|
||||||
|
var eventListItem = eventList[eventListIdx];
|
||||||
|
|
||||||
|
if(eventListItem.eventType === 'OnDrag') {
|
||||||
|
var lastDrag = eventListItem.eventInfo.mousePositions[eventListItem.eventInfo.mousePositions.length - 1].dragInfo;
|
||||||
|
eventListItem.eventInfo.dragInfo.currentX = lastDrag.currentX;
|
||||||
|
eventListItem.eventInfo.dragInfo.currentY = lastDrag.currentY;
|
||||||
|
eventListItem.eventInfo.dragInfo.currentTime = lastDrag.currentTime;
|
||||||
|
eventListItem.eventInfo.dragInfo.xDelta = eventListItem.eventInfo.dragInfo.currentX - eventListItem.eventInfo.dragInfo.lastX;
|
||||||
|
eventListItem.eventInfo.dragInfo.yDelta = eventListItem.eventInfo.dragInfo.currentY - eventListItem.eventInfo.dragInfo.lastY;
|
||||||
|
transmissionFields = {};
|
||||||
|
transmissionFields = tackItOn(transmissionFields, eventListItem, ['eventType', 'elementID', 'path']);
|
||||||
|
transmissionFields = tackItOn(transmissionFields, eventListItem.eventInfo, ['dragInfo']);
|
||||||
|
transmissionFields.recordingId = recordingId;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(isSingleMouse(eventListItem.eventType)) {
|
||||||
|
transmissionFields = {};
|
||||||
|
transmissionFields = tackItOn(transmissionFields, eventListItem, ['timeStamp', 'eventType', 'elementID', 'path']);
|
||||||
|
transmissionFields = tackItOn(transmissionFields, eventListItem.eventInfo, ['cursor']);
|
||||||
|
transmissionFields.recordingId = recordingId;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(isBulkMouse(eventListItem.eventType)) {
|
||||||
|
transmissionFields = {};
|
||||||
|
transmissionFields = tackItOn(transmissionFields, eventListItem, ['eventType', 'elementID', 'path']);
|
||||||
|
transmissionFields = tackItOn(transmissionFields, eventListItem.eventInfo, ['mousePositions']);
|
||||||
|
transmissionFields.recordingId = recordingId;
|
||||||
|
}
|
||||||
|
recordingStepList[recordingStepList.length] = transmissionFields;
|
||||||
|
}
|
||||||
|
|
||||||
|
eventList = [];
|
||||||
|
$axure.messageCenter.postMessage('stopRecording', axObjectDictionary);
|
||||||
|
|
||||||
|
var jsonText = {
|
||||||
|
'recordingName': recordingName,
|
||||||
|
'recordingId': recordingId,
|
||||||
|
recordingStart: new Date().getTime(),
|
||||||
|
recordingEnd: recordingStartTime,
|
||||||
|
'eventList': recordingStepList
|
||||||
|
};
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
type: "POST",
|
||||||
|
url: '/RecordController/StopRecording',
|
||||||
|
data: { 'jsonText': JSON.stringify(jsonText) }
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if($('#playButton').is('.recordPlayButtonSelected')) {
|
||||||
|
$('#playButton').removeClass('recordPlayButtonSelected');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var _deleteClick = function(event) {
|
||||||
|
$.ajax({
|
||||||
|
type: "POST",
|
||||||
|
url: '/RecordController/DeleteRecordings',
|
||||||
|
success: function(response) {
|
||||||
|
var x = true;
|
||||||
|
}, // dataType: 'json'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
var tackItOn = function(destination, source, fields) {
|
||||||
|
|
||||||
|
for(var idx in fields) {
|
||||||
|
destination[fields[idx]] = source[fields[idx]];
|
||||||
|
}
|
||||||
|
return destination;
|
||||||
|
};
|
||||||
|
|
||||||
|
var makeFirstLetterLower = function(eventName) {
|
||||||
|
return eventName.substr(0, 1).toLowerCase() + eventName.substr(1);
|
||||||
|
};
|
||||||
|
|
||||||
|
var _attachEventTriggers = function(axRecording) {
|
||||||
|
for(var eventIdx in axRecording.eventList) {
|
||||||
|
var eventObject = axRecording.eventList[eventIdx];
|
||||||
|
var eventID = axRecording['recordingId'] + '_' + eventObject.timeStamp;
|
||||||
|
currentEvent = eventID;
|
||||||
|
$('#' + eventID).click(_triggerEvent(axRecording['recordingId'], eventObject.timeStamp));
|
||||||
|
// $('#' + eventID).click(event.trigger);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var _formAxRecordingBranch = function(axRecording) {
|
||||||
|
var eventObject, eventID, RDOID;
|
||||||
|
var recordPlayUi = '<ul class="recordingTree">';
|
||||||
|
recordPlayUi += "<li class='recordingNode recordingExpandableNode'>";
|
||||||
|
recordPlayUi += '<div class="recordingContainer" style="margin-left:15px">';
|
||||||
|
recordPlayUi += '<a class="recordingPlusMinusLink"><span class="recordingMinus"></span></a>';
|
||||||
|
recordPlayUi += '<a class="recordingPageLink" nodeurl="home.html">';
|
||||||
|
recordPlayUi += '<span class="recordingPageIcon"></span>';
|
||||||
|
recordPlayUi += '<span class="recordingPageName">' + axRecording['recordingName'] + '</span>';
|
||||||
|
recordPlayUi += '</a>';
|
||||||
|
|
||||||
|
recordPlayUi += '<ul>';
|
||||||
|
|
||||||
|
for(eventID in axRecording.eventList) {
|
||||||
|
|
||||||
|
eventObject = axRecording.eventList[eventID];
|
||||||
|
|
||||||
|
recordPlayUi += '<li class="recordingNode recordingLeafNode">';
|
||||||
|
recordPlayUi += '<div class="recordingEventContainer" style="margin-left:44px">';
|
||||||
|
var eventID = axRecording['recordingId'] + '_' + eventObject.timeStamp;
|
||||||
|
recordPlayUi += '<a id="' + eventID + '" class="sitemapPageLink">';
|
||||||
|
recordPlayUi += 'Event ID: ' + eventID + '<br/>';
|
||||||
|
|
||||||
|
recordPlayUi += '<span class="sitemapPageIcon"></span>';
|
||||||
|
recordPlayUi += '<span class="sitemapPageName">';
|
||||||
|
|
||||||
|
recordPlayUi += 'elementID: ' + eventObject.elementID + '<br/>';
|
||||||
|
recordPlayUi += 'eventType: ' + eventObject.eventType + '<br/>';
|
||||||
|
// recordPlayUi += 'cursor: ' + eventObject.eventInfo.cursor.x + ',' + eventObject.eventInfo.cursor.y + '<br/>';
|
||||||
|
|
||||||
|
for(RDOID in eventObject.path) {
|
||||||
|
recordPlayUi += '/' + eventObject.path[RDOID];
|
||||||
|
}
|
||||||
|
recordPlayUi += '<br/>';
|
||||||
|
recordPlayUi += '</span>';
|
||||||
|
recordPlayUi += '</a>';
|
||||||
|
recordPlayUi += '</div>';
|
||||||
|
recordPlayUi += '</li>';
|
||||||
|
}
|
||||||
|
|
||||||
|
recordPlayUi += '</ul>';
|
||||||
|
|
||||||
|
recordPlayUi += '</div>';
|
||||||
|
|
||||||
|
recordPlayUi += "</li>";
|
||||||
|
recordPlayUi += "</ul>";
|
||||||
|
|
||||||
|
return recordPlayUi;
|
||||||
|
};
|
||||||
|
|
||||||
|
var currentEvent = '';
|
||||||
|
|
||||||
|
var _triggerEvent = function(axRecording, timeStamp) {
|
||||||
|
// $axure.messageCenter.postMessage('triggerEvent', false);
|
||||||
|
|
||||||
|
|
||||||
|
for(var axRecordingIdx in axRecordingList) {
|
||||||
|
if(axRecordingList[axRecordingIdx].recordingId === axRecording) {
|
||||||
|
for(var eventIdx in axRecordingList[axRecordingIdx].eventList) {
|
||||||
|
if(axRecordingList[axRecordingIdx].eventList[eventIdx].timeStamp === timeStamp) {
|
||||||
|
|
||||||
|
var thisEvent = axRecordingList[axRecordingIdx].eventList[eventIdx];
|
||||||
|
// thisEvent.trigger();
|
||||||
|
|
||||||
|
var thisEventInfo, lowerEventType;
|
||||||
|
lowerEventType = thisEvent.eventType.toLowerCase();
|
||||||
|
if(lowerEventType === 'onclick' || lowerEventType === 'onmousein') {
|
||||||
|
thisEventInfo = {};
|
||||||
|
thisEventInfo = tackItOn(thisEventInfo, thisEvent.eventInfo, ['cursor', 'timeStamp', 'srcElement']);
|
||||||
|
if(thisEvent.eventInfo.inputType) {
|
||||||
|
thisEventInfo = tackItOn(thisEventInfo, thisEvent.eventInfo, ['inputType', 'inputValue']);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
thisEventInfo = thisEvent.eventInfo;
|
||||||
|
}
|
||||||
|
|
||||||
|
var thisParameters = {
|
||||||
|
'element': thisEvent.elementID,
|
||||||
|
'eventInfo': thisEventInfo,
|
||||||
|
// 'axEventObject': thisEvent.eventObject,
|
||||||
|
'eventType': thisEvent.eventType
|
||||||
|
};
|
||||||
|
|
||||||
|
return function() {
|
||||||
|
$axure.messageCenter.postMessage('playEvent', thisParameters);
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var _generateRecordPlay = function() {
|
||||||
|
var recordPlayUi = "<div id='recordPlayContainer'>";
|
||||||
|
|
||||||
|
recordPlayUi += "<div id='recordPlayToolbar'>";
|
||||||
|
|
||||||
|
recordPlayUi += "<div style='height:30px;'>";
|
||||||
|
|
||||||
|
recordPlayUi += "<a id='recordButton' title='Start a Recording' class='recordPlayButton'></a>";
|
||||||
|
recordPlayUi += "<a id='playButton' title='Play Back a Recording' class='recordPlayButton'></a>";
|
||||||
|
recordPlayUi += "<a id='stopButton' title='Stop' class='recordPlayButton'></a>";
|
||||||
|
recordPlayUi += "<a id='deleteButton' title='Delete All Recordings' class='recordPlayButton'></a>";
|
||||||
|
recordPlayUi += "</div>";
|
||||||
|
|
||||||
|
recordPlayUi += "<div id='recordingContainer'><li class='recordingNode recordingRootNode'></li></div>";
|
||||||
|
recordPlayUi += "</div>";
|
||||||
|
|
||||||
|
$('#recordPlayHost').html(recordPlayUi);
|
||||||
|
};
|
||||||
|
|
||||||
|
})();
|
||||||
90
src/plugins/recordplay/styles/recordplay.css
Normal file
90
src/plugins/recordplay/styles/recordplay.css
Normal file
|
|
@ -0,0 +1,90 @@
|
||||||
|
#recordPlayHost {
|
||||||
|
font-size: 12px;
|
||||||
|
color:#333;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#recordPlayContainer
|
||||||
|
{
|
||||||
|
overflow: auto;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 10px 10px 10px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#recordPlayToolbar
|
||||||
|
{
|
||||||
|
margin: 5px 5px 5px 5px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#recordPlayToolbar .recordPlayButton
|
||||||
|
{
|
||||||
|
float: left;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
#recordPlayToolbar .recordPlayButton:hover
|
||||||
|
{
|
||||||
|
border: 1px solid rgb(0,157,217);
|
||||||
|
background-color : rgb(166,221,242);
|
||||||
|
}
|
||||||
|
|
||||||
|
#recordPlayToolbar .recordPlayButton:active
|
||||||
|
{
|
||||||
|
border: 1px solid rgb(0,157,217);
|
||||||
|
background-color : rgb(204,235,248);
|
||||||
|
}
|
||||||
|
|
||||||
|
#recordPlayToolbar .recordPlayButtonSelected {
|
||||||
|
border: 1px solid rgb(0,157,217);
|
||||||
|
background-color : rgb(204,235,248);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* removed images */
|
||||||
|
/*#recordButton {
|
||||||
|
background: url('../../sitemap/styles/images/233_hyperlink_16.png') no-repeat center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#playButton {
|
||||||
|
background: url('../../sitemap/styles/images/225_responsive_16.png') no-repeat center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#stopButton {
|
||||||
|
background: url('../../sitemap/styles/images/228_togglenotes_16.png') no-repeat center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#deleteButton {
|
||||||
|
background: url('../../sitemap/styles/images/231_event_16.png') no-repeat center center;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
#recordNameHeader
|
||||||
|
{
|
||||||
|
/* yeah??*/
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: bold;
|
||||||
|
height: 23px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
#recordPlayContent
|
||||||
|
{
|
||||||
|
/* yeah??*/
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recordPlayName
|
||||||
|
{
|
||||||
|
font-size: 12px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-decoration: underline;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recordPlay
|
||||||
|
{
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
562
src/plugins/sitemap/sitemap.js
Normal file
562
src/plugins/sitemap/sitemap.js
Normal file
|
|
@ -0,0 +1,562 @@
|
||||||
|
var currentNodeUrl = '';
|
||||||
|
var allNodeUrls = [];
|
||||||
|
|
||||||
|
var openNextPage = $axure.player.openNextPage = function () {
|
||||||
|
var index = allNodeUrls.indexOf(currentNodeUrl) + 1;
|
||||||
|
if(index >= allNodeUrls.length) return;
|
||||||
|
var nextNodeUrl = allNodeUrls[index];
|
||||||
|
currentNodeUrl = nextNodeUrl;
|
||||||
|
$('.sitemapPageLink[nodeUrl="' + nextNodeUrl + '"]').parent().mousedown();
|
||||||
|
};
|
||||||
|
|
||||||
|
var openPreviousPage = $axure.player.openPreviousPage = function () {
|
||||||
|
var index = allNodeUrls.indexOf(currentNodeUrl) - 1;
|
||||||
|
if(index < 0) return;
|
||||||
|
var nextNodeUrl = allNodeUrls[index];
|
||||||
|
currentNodeUrl = nextNodeUrl;
|
||||||
|
$('.sitemapPageLink[nodeUrl="' + nextNodeUrl + '"]').parent().mousedown();
|
||||||
|
};
|
||||||
|
|
||||||
|
// use this to isolate the scope
|
||||||
|
(function() {
|
||||||
|
|
||||||
|
var SHOW_HIDE_ANIMATION_DURATION = 0;
|
||||||
|
|
||||||
|
var HIGHLIGHT_INTERACTIVE_VAR_NAME = 'hi';
|
||||||
|
|
||||||
|
var currentPageLoc = '';
|
||||||
|
var currentPlayerLoc = '';
|
||||||
|
var currentPageHashString = '';
|
||||||
|
|
||||||
|
$(window.document).ready(function() {
|
||||||
|
$axure.player.createPluginHost({
|
||||||
|
id: 'sitemapHost',
|
||||||
|
context: 'project',
|
||||||
|
title: 'Project Pages',
|
||||||
|
gid: 1,
|
||||||
|
});
|
||||||
|
|
||||||
|
$(window.document).bind('keyup', function (e) {
|
||||||
|
if (e.target.localName == "textarea" || e.target.localName == "input" || event.target.isContentEditable) return;
|
||||||
|
switch(e.which) {
|
||||||
|
case 188:
|
||||||
|
openPreviousPage();
|
||||||
|
break;
|
||||||
|
case 190:
|
||||||
|
openNextPage();
|
||||||
|
break;
|
||||||
|
default: return; // exit this handler for other keys
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
generateSitemap();
|
||||||
|
var pageCount = $('.sitemapPageLink').length;
|
||||||
|
|
||||||
|
$('.leftArrow').click(openPreviousPage);
|
||||||
|
$('.rightArrow').click(openNextPage);
|
||||||
|
|
||||||
|
$('.sitemapPlusMinusLink').click(collapse_click);
|
||||||
|
$('.sitemapPageLink').parent().mousedown(node_click);
|
||||||
|
|
||||||
|
$('#interfaceAdaptiveViewsListContainer').hide();
|
||||||
|
|
||||||
|
$('#projectOptionsShowHotspots').click(showHotspots_click);
|
||||||
|
$('#searchIcon').click(searchBoxClose_click);
|
||||||
|
$('#searchDiv').click(searchBoxExpand_click);
|
||||||
|
$('#searchBox').keyup(search_input_keyup);
|
||||||
|
|
||||||
|
// bind to the page load
|
||||||
|
$axure.page.bind('load.sitemap', function() {
|
||||||
|
currentPageLoc = $axure.page.location.split("#")[0];
|
||||||
|
var decodedPageLoc = decodeURI(currentPageLoc);
|
||||||
|
currentNodeUrl = decodedPageLoc.substr(decodedPageLoc.lastIndexOf('/') ? decodedPageLoc.lastIndexOf('/') + 1 : 0);
|
||||||
|
currentPlayerLoc = $(location).attr('href').split("#")[0].split("?")[0];
|
||||||
|
currentPageHashString = '#p=' + currentNodeUrl.substr(0, currentNodeUrl.lastIndexOf('.'));
|
||||||
|
|
||||||
|
$axure.player.setVarInCurrentUrlHash(PAGE_ID_NAME, $axure.player.getPageIdByUrl(currentNodeUrl));
|
||||||
|
$axure.player.setVarInCurrentUrlHash(PAGE_URL_NAME, currentNodeUrl.substring(0, currentNodeUrl.lastIndexOf('.html')));
|
||||||
|
|
||||||
|
$('#sitemapTreeContainer').find('.sitemapHighlight').removeClass('sitemapHighlight');
|
||||||
|
var $currentNode = $('.sitemapPageLink[nodeUrl="' + currentNodeUrl + '"]');
|
||||||
|
$currentNode.parent().parent().addClass('sitemapHighlight');
|
||||||
|
|
||||||
|
var pageName = $axure.page.pageName;
|
||||||
|
$('.pageNameHeader').html(pageName);
|
||||||
|
|
||||||
|
if ($currentNode.length > 0 && pageCount > 1) {
|
||||||
|
var currentNode = $currentNode[0];
|
||||||
|
var currentNum = $('.sitemapPageLink').index(currentNode) + 1;
|
||||||
|
$('.pageCountHeader').html('(' + currentNum + ' of ' + pageCount + ')');
|
||||||
|
} else $('.pageCountHeader').html('');
|
||||||
|
|
||||||
|
//If highlight var is present and set to 1 or else if
|
||||||
|
//sitemap highlight button is selected then highlight interactive elements
|
||||||
|
var hiVal = $axure.player.getHashStringVar(HIGHLIGHT_INTERACTIVE_VAR_NAME);
|
||||||
|
if(hiVal.length > 0 && hiVal == 1) {
|
||||||
|
$('#showHotspotsOption').find('.overflowOptionCheckbox').addClass('selected');
|
||||||
|
if ($('#projectOptionsHotspotsCheckbox').length > 0) $('#projectOptionsHotspotsCheckbox').addClass('selected');
|
||||||
|
$axure.messageCenter.postMessage('highlightInteractive', true);
|
||||||
|
} else if ($('#showHotspotsOption').find('.overflowOptionCheckbox').hasClass('selected')) {
|
||||||
|
$axure.messageCenter.postMessage('highlightInteractive', true);
|
||||||
|
}
|
||||||
|
|
||||||
|
generateAdaptiveViews(false);
|
||||||
|
if (MOBILE_DEVICE) generateAdaptiveViews(true);
|
||||||
|
|
||||||
|
$axure.player.suspendRefreshViewPort = true;
|
||||||
|
|
||||||
|
//Set the current view if it is defined in the hash string
|
||||||
|
//If the view is invalid, set it to 'auto' in the string
|
||||||
|
//ELSE set the view based on the currently selected view in the toolbar menu
|
||||||
|
var viewStr = $axure.player.getHashStringVar(ADAPTIVE_VIEW_VAR_NAME);
|
||||||
|
if(viewStr.length > 0) {
|
||||||
|
var $view = $('.adaptiveViewOption[val="' + viewStr + '"]');
|
||||||
|
if($view.length > 0) $view.click();
|
||||||
|
else $('.adaptiveViewOption[val="auto"]').click();
|
||||||
|
} else if($('.selectedRadioButton').length > 0) {
|
||||||
|
var $viewOption = $('.selectedRadioButton').parents('.adaptiveViewOption');
|
||||||
|
$viewOption.click();
|
||||||
|
}
|
||||||
|
updateAdaptiveViewHeader();
|
||||||
|
|
||||||
|
function setDefaultScaleForDevice() {
|
||||||
|
if(MOBILE_DEVICE && $axure.player.isMobileMode()) {
|
||||||
|
$('.projectOptionsScaleRow[val="0"]').click();
|
||||||
|
} else {
|
||||||
|
$('.vpScaleOption[val="0"]').click();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var scaleStr = $axure.player.getHashStringVar(SCALE_VAR_NAME);
|
||||||
|
if(scaleStr.length > 0) {
|
||||||
|
var $scale = $('.vpScaleOption[val="' + scaleStr + '"]');
|
||||||
|
if($scale.length > 0) $scale.click();
|
||||||
|
else setDefaultScaleForDevice();
|
||||||
|
} else {
|
||||||
|
setDefaultScaleForDevice();
|
||||||
|
}
|
||||||
|
|
||||||
|
var rotateStr = $axure.player.getHashStringVar(ROT_VAR_NAME);
|
||||||
|
if(rotateStr.length > 0) {
|
||||||
|
$('#vpRotate').prop('checked', true);
|
||||||
|
}
|
||||||
|
|
||||||
|
$axure.player.suspendRefreshViewPort = false;
|
||||||
|
|
||||||
|
if (!$axure.player.isViewOverridden()) $axure.messageCenter.postMessage('setAdaptiveViewForSize', { 'width': $('#mainPanel').width(), 'height': $('#mainPanel').height() });
|
||||||
|
|
||||||
|
$axure.player.refreshViewPort();
|
||||||
|
|
||||||
|
$axure.messageCenter.postMessage('finishInit');
|
||||||
|
|
||||||
|
showMainPanel();
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
var $vpContainer = $('#interfaceScaleListContainer');
|
||||||
|
|
||||||
|
var scaleOptions = '<div class="vpScaleOption" val="0"><div class="scaleRadioButton"><div class="selectedRadioButtonFill"></div></div>Default Scale</div>';
|
||||||
|
scaleOptions += '<div class="vpScaleOption" val="1"><div class="scaleRadioButton"><div class="selectedRadioButtonFill"></div></div>Scale to Width</div>';
|
||||||
|
scaleOptions += '<div class="vpScaleOption" val="2"><div class="scaleRadioButton"><div class="selectedRadioButtonFill"></div></div>Scale to Fit</div>';
|
||||||
|
$(scaleOptions).appendTo($vpContainer);
|
||||||
|
|
||||||
|
$('#overflowMenuContainer').append('<div id="showHotspotsOption" class="showOption" style="order: 1"><div class="overflowOptionCheckbox"></div>Show Hotspots</div>');
|
||||||
|
$('#overflowMenuContainer').append($vpContainer);
|
||||||
|
$vpContainer.show();
|
||||||
|
|
||||||
|
$('#showHotspotsOption').click(showHotspots_click);
|
||||||
|
$('.vpScaleOption').click(vpScaleOption_click);
|
||||||
|
$('.vpScaleOption').mouseup(function (event) {
|
||||||
|
event.stopPropagation();
|
||||||
|
});
|
||||||
|
|
||||||
|
if (MOBILE_DEVICE) {
|
||||||
|
var scaleOptions = '<div class="projectOptionsScaleRow" val="1"><div class="scaleRadioButton"><div class="selectedRadioButtonFill"></div></div>Scale to fit width</div>';
|
||||||
|
scaleOptions += '<div class="projectOptionsScaleRow" val="0"><div class="scaleRadioButton"><div class="selectedRadioButtonFill"></div></div>Original size (100%)</div>';
|
||||||
|
scaleOptions += '<div class="projectOptionsScaleRow" val="2" style="border-bottom: solid 1px #c7c7c7"><div class="scaleRadioButton"><div class="selectedRadioButtonFill"></div></div>Fit all to screen</div>';
|
||||||
|
$(scaleOptions).appendTo($('#projectOptionsScaleContainer'));
|
||||||
|
|
||||||
|
$('.projectOptionsScaleRow').click(vpScaleOption_click);
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#searchBox').focusin(function() {
|
||||||
|
if($(this).is('.searchBoxHint')) {
|
||||||
|
$(this).val('');
|
||||||
|
$(this).removeClass('searchBoxHint');
|
||||||
|
}
|
||||||
|
}).focusout(function() {
|
||||||
|
if($(this).val() == '') {
|
||||||
|
$(this).addClass('searchBoxHint');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
$('#searchBox').focusout();
|
||||||
|
});
|
||||||
|
|
||||||
|
var _formatViewDimension = function(dim) {
|
||||||
|
if(dim == 0) return 'any';
|
||||||
|
if(dim.toString().includes('.')) return dim.toFixed(2);
|
||||||
|
return dim;
|
||||||
|
};
|
||||||
|
|
||||||
|
function generateAdaptiveViews(forProjectOptions) {
|
||||||
|
var $container = forProjectOptions ? $('#projectOptionsAdaptiveViewsContainer') : $('#interfaceAdaptiveViewsListContainer');
|
||||||
|
var $viewSelect = forProjectOptions ? $('#projectOptionsViewSelect') : $('#viewSelect');
|
||||||
|
var adaptiveViewOptionClass = forProjectOptions ? 'projectOptionsAdaptiveViewRow' : 'adaptiveViewOption';
|
||||||
|
var currentViewClass = forProjectOptions ? '' : 'currentAdaptiveView';
|
||||||
|
|
||||||
|
$container.empty();
|
||||||
|
$viewSelect.empty();
|
||||||
|
|
||||||
|
//Fill out adaptive view container with prototype's defined adaptive views, as well as the default, and Auto
|
||||||
|
var viewsList = '<div class="' + adaptiveViewOptionClass + '" val="auto"><div class="adapViewRadioButton selectedRadioButton"><div class="selectedRadioButtonFill"></div></div>Adaptive</div>';
|
||||||
|
var viewSelect = '<option value="auto">Adaptive</option>';
|
||||||
|
if (typeof $axure.page.defaultAdaptiveView.name != 'undefined') {
|
||||||
|
//If the name is a blank string, make the view name the width if non-zero, else 'any'
|
||||||
|
var defaultView = $axure.page.defaultAdaptiveView;
|
||||||
|
var defaultViewName = defaultView.name;
|
||||||
|
|
||||||
|
var widthString = _formatViewDimension(defaultView.size.width);
|
||||||
|
var heightString = _formatViewDimension(defaultView.size.height);
|
||||||
|
|
||||||
|
var viewString = defaultViewName + ' (' + widthString + ' x ' + heightString + ')';
|
||||||
|
|
||||||
|
viewsList += '<div class="' + adaptiveViewOptionClass + ' ' + currentViewClass + '" val="default"data-dim="' + defaultView.size.width + 'x' + defaultView.size.height + '">' +
|
||||||
|
'<div class="adapViewRadioButton"><div class="selectedRadioButtonFill"></div></div>' + viewString + '</div>';
|
||||||
|
viewSelect += '<option value="default">' + viewString + '</option>';
|
||||||
|
}
|
||||||
|
|
||||||
|
var useViews = $axure.document.configuration.useViews;
|
||||||
|
var hasViews = false;
|
||||||
|
if(useViews) {
|
||||||
|
for(var viewIndex = 0; viewIndex < $axure.page.adaptiveViews.length; viewIndex++) {
|
||||||
|
var currView = $axure.page.adaptiveViews[viewIndex];
|
||||||
|
|
||||||
|
var widthString = _formatViewDimension(currView.size.width);
|
||||||
|
var heightString = _formatViewDimension(currView.size.height);
|
||||||
|
|
||||||
|
var viewString = currView.name + ' (' + widthString + ' x ' + heightString + ')';
|
||||||
|
viewsList += '<div class="' + adaptiveViewOptionClass +
|
||||||
|
((forProjectOptions && (viewIndex == $axure.page.adaptiveViews.length - 1)) ? '" style="border-bottom: solid 1px #c7c7c7; margin-bottom: 15px;' : '') +
|
||||||
|
'" val="' +
|
||||||
|
currView.id +
|
||||||
|
'" data-dim="' +
|
||||||
|
currView.size.width +
|
||||||
|
'x' +
|
||||||
|
currView.size.height +
|
||||||
|
'"><div class="adapViewRadioButton"><div class="selectedRadioButtonFill"></div></div>' +
|
||||||
|
viewString +
|
||||||
|
'</div>';
|
||||||
|
viewSelect += '<option value="' + currView.id + '">' + viewString + '</option>';
|
||||||
|
|
||||||
|
hasViews = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$container.append(viewsList);
|
||||||
|
$viewSelect.append(viewSelect);
|
||||||
|
|
||||||
|
if (!hasViews) {
|
||||||
|
if (forProjectOptions) {
|
||||||
|
$('#projectOptionsAdaptiveViewsHeader').hide();
|
||||||
|
$('#projectOptionsAdaptiveViewsContainer').hide();
|
||||||
|
} else $('#interfaceAdaptiveViewsContainer').hide();
|
||||||
|
} else {
|
||||||
|
if (forProjectOptions) {
|
||||||
|
$('#projectOptionsAdaptiveViewsHeader').show();
|
||||||
|
$('#projectOptionsAdaptiveViewsContainer').show();
|
||||||
|
} else $('#interfaceAdaptiveViewsContainer').show();
|
||||||
|
}
|
||||||
|
|
||||||
|
$(('.' + adaptiveViewOptionClass)).click(adaptiveViewOption_click);
|
||||||
|
|
||||||
|
if (!forProjectOptions) {
|
||||||
|
$(('.' + adaptiveViewOptionClass)).mouseup(function (event) {
|
||||||
|
event.stopPropagation();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function collapse_click(event) {
|
||||||
|
if($(this).children('.sitemapPlus').length > 0) {
|
||||||
|
expand_click($(this));
|
||||||
|
} else {
|
||||||
|
$(this)
|
||||||
|
.children('.sitemapMinus').removeClass('sitemapMinus').addClass('sitemapPlus').end()
|
||||||
|
.closest('li').children('ul').hide(SHOW_HIDE_ANIMATION_DURATION);
|
||||||
|
}
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
|
|
||||||
|
function expand_click($this) {
|
||||||
|
$this
|
||||||
|
.children('.sitemapPlus').removeClass('sitemapPlus').addClass('sitemapMinus').end()
|
||||||
|
.closest('li').children('ul').show(SHOW_HIDE_ANIMATION_DURATION);
|
||||||
|
}
|
||||||
|
|
||||||
|
function searchBoxExpand_click(event) {
|
||||||
|
if (!$('#searchIcon').hasClass('sitemapToolbarButtonSelected')) {
|
||||||
|
$('#searchIcon').addClass('sitemapToolbarButtonSelected')
|
||||||
|
$('#searchBox').width(0);
|
||||||
|
$('#searchBox').show();
|
||||||
|
$('#searchBox').animate({ width: '95%' }, { duration: 200, complete: function () { $('#searchBox').focus(); } });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function searchBoxClose_click(event) {
|
||||||
|
if ($('#searchIcon').hasClass('sitemapToolbarButtonSelected')) {
|
||||||
|
$('#searchBox').animate({ width: '0%' }, { duration: 200,
|
||||||
|
complete: function () {
|
||||||
|
$('#searchBox').hide();
|
||||||
|
$('#searchIcon').removeClass('sitemapToolbarButtonSelected')
|
||||||
|
}});
|
||||||
|
$('#searchBox').val('');
|
||||||
|
$('#searchBox').keyup();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function node_click(event) {
|
||||||
|
hideMainPanel();
|
||||||
|
$('#sitemapTreeContainer').find('.sitemapHighlight').removeClass('sitemapHighlight');
|
||||||
|
$(this).parent().addClass('sitemapHighlight');
|
||||||
|
$axure.page.navigate($(this).children('.sitemapPageLink')[0].getAttribute('nodeUrl'), true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideMainPanel() {
|
||||||
|
$('#mainPanel').css('opacity', '0');
|
||||||
|
$('#clippingBounds').css('opacity', '0');
|
||||||
|
}
|
||||||
|
function showMainPanel() {
|
||||||
|
$('#mainPanel').animate({ opacity: 1 }, 10);
|
||||||
|
$('#clippingBounds').animate({ opacity: 1 }, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
$axure.messageCenter.addMessageListener(function(message, data) {
|
||||||
|
if(message == 'adaptiveViewChange') {
|
||||||
|
$('.adaptiveViewOption').removeClass('currentAdaptiveView');
|
||||||
|
if(data.viewId) {$('.adaptiveViewOption[val="' + data.viewId + '"]').addClass('currentAdaptiveView');}
|
||||||
|
else $('.adaptiveViewOption[val="default"]').addClass('currentAdaptiveView');
|
||||||
|
|
||||||
|
//when we set adaptive view through user event, we want to update the checkmark on sitemap
|
||||||
|
if(data.forceSwitchTo) {
|
||||||
|
$('.adapViewRadioButton').find('.selectedRadioButtonFill').hide();
|
||||||
|
$('.adapViewRadioButton').removeClass('selectedRadioButton');
|
||||||
|
$('div[val="' + data.forceSwitchTo + '"]').find('.adapViewRadioButton').addClass('selectedRadioButton');
|
||||||
|
$('div[val="' + data.forceSwitchTo + '"]').find('.selectedRadioButtonFill').show();
|
||||||
|
}
|
||||||
|
|
||||||
|
updateAdaptiveViewHeader();
|
||||||
|
$axure.player.refreshViewPort();
|
||||||
|
|
||||||
|
} else if(message == 'previousPage') {
|
||||||
|
openPreviousPage();
|
||||||
|
} else if(message == 'nextPage') {
|
||||||
|
openNextPage();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$axure.player.toggleHotspots = function (val) {
|
||||||
|
var overflowMenuCheckbox = $('#showHotspotsOption').find('.overflowOptionCheckbox');
|
||||||
|
if ($(overflowMenuCheckbox).hasClass('selected')) {
|
||||||
|
if (!val) $('#showHotspotsOption').click();
|
||||||
|
} else {
|
||||||
|
if (val) $('#showHotspotsOption').click();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showHotspots_click(event) {
|
||||||
|
var overflowMenuCheckbox = $('#showHotspotsOption').find('.overflowOptionCheckbox');
|
||||||
|
var projOptionsCheckbox = $('#projectOptionsHotspotsCheckbox');
|
||||||
|
|
||||||
|
if ($(overflowMenuCheckbox).hasClass('selected')) {
|
||||||
|
overflowMenuCheckbox.removeClass('selected');
|
||||||
|
if (projOptionsCheckbox.length > 0 ) projOptionsCheckbox.removeClass('selected');
|
||||||
|
$axure.messageCenter.postMessage('highlightInteractive', false);
|
||||||
|
//Delete 'hi' hash string var if it exists since default is unselected
|
||||||
|
$axure.player.deleteVarFromCurrentUrlHash(HIGHLIGHT_INTERACTIVE_VAR_NAME);
|
||||||
|
} else {
|
||||||
|
overflowMenuCheckbox.addClass('selected');
|
||||||
|
if (projOptionsCheckbox.length > 0) projOptionsCheckbox.addClass('selected');
|
||||||
|
$axure.messageCenter.postMessage('highlightInteractive', true);
|
||||||
|
//Add 'hi' hash string var so that stay highlighted across reloads
|
||||||
|
$axure.player.setVarInCurrentUrlHash(HIGHLIGHT_INTERACTIVE_VAR_NAME, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function adaptiveViewOption_click(event) {
|
||||||
|
var currVal = $(this).attr('val');
|
||||||
|
|
||||||
|
$('.adaptiveViewOption').removeClass('currentAdaptiveView');
|
||||||
|
if(currVal) {$('.adaptiveViewOption[val="' + currVal + '"]').addClass('currentAdaptiveView');}
|
||||||
|
else $('.adaptiveViewOption[val="default"]').addClass('currentAdaptiveView');
|
||||||
|
|
||||||
|
$('.adapViewRadioButton').find('.selectedRadioButtonFill').hide();
|
||||||
|
$('.adapViewRadioButton').removeClass('selectedRadioButton');
|
||||||
|
$('div[val="' + currVal + '"]').find('.adapViewRadioButton').addClass('selectedRadioButton');
|
||||||
|
$('div[val="' + currVal + '"]').find('.selectedRadioButtonFill').show();
|
||||||
|
|
||||||
|
selectAdaptiveView(currVal);
|
||||||
|
$axure.player.closePopup();
|
||||||
|
updateAdaptiveViewHeader();
|
||||||
|
}
|
||||||
|
|
||||||
|
var selectAdaptiveView = $axure.player.selectAdaptiveView = function(currVal) {
|
||||||
|
if (currVal == 'auto') {
|
||||||
|
$axure.messageCenter.postMessage('setAdaptiveViewForSize', { 'width': $('#mainPanel').width(), 'height': $('#mainPanel').height() });
|
||||||
|
$axure.player.deleteVarFromCurrentUrlHash(ADAPTIVE_VIEW_VAR_NAME);
|
||||||
|
} else {
|
||||||
|
currentPageLoc = $axure.page.location.split("#")[0];
|
||||||
|
var decodedPageLoc = decodeURI(currentPageLoc);
|
||||||
|
var nodeUrl = decodedPageLoc.substr(decodedPageLoc.lastIndexOf('/')
|
||||||
|
? decodedPageLoc.lastIndexOf('/') + 1
|
||||||
|
: 0);
|
||||||
|
var adaptiveData = {
|
||||||
|
src: nodeUrl
|
||||||
|
};
|
||||||
|
|
||||||
|
adaptiveData.view = currVal;
|
||||||
|
$axure.messageCenter.postMessage('switchAdaptiveView', adaptiveData);
|
||||||
|
$axure.player.setVarInCurrentUrlHash(ADAPTIVE_VIEW_VAR_NAME, currVal);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$axure.player.updateAdaptiveViewHeader = updateAdaptiveViewHeader = function () {
|
||||||
|
var hasDefinedDim = true;
|
||||||
|
var dimensionlessViewStr = '(any x any)';
|
||||||
|
|
||||||
|
var viewString = $('.adaptiveViewOption.currentAdaptiveView').text();
|
||||||
|
if (viewString != null && viewString.indexOf(dimensionlessViewStr) >= 0) hasDefinedDim = false;
|
||||||
|
|
||||||
|
if (!hasDefinedDim) {
|
||||||
|
var viewName = viewString.substring(0, viewString.lastIndexOf(' ('));
|
||||||
|
var widthString = $('#mainPanelContainer').width();
|
||||||
|
viewString = viewName + ' (' + widthString + ' x any)';
|
||||||
|
}
|
||||||
|
|
||||||
|
$('.adaptiveViewHeader').html(viewString);
|
||||||
|
}
|
||||||
|
|
||||||
|
$axure.player.selectScaleOption = function (scaleVal) {
|
||||||
|
var $scale = $('.vpScaleOption[val="' + scaleVal + '"]');
|
||||||
|
if ($scale.length > 0) $scale.click();
|
||||||
|
}
|
||||||
|
|
||||||
|
function vpScaleOption_click(event) {
|
||||||
|
var scaleCheckDiv = $(this).find('.scaleRadioButton');
|
||||||
|
var scaleVal = $(this).attr('val');
|
||||||
|
if (scaleCheckDiv.hasClass('selectedRadioButton')) return false;
|
||||||
|
|
||||||
|
var $selectedScaleOption = $('.vpScaleOption[val="' + scaleVal + '"], .projectOptionsScaleRow[val="' + scaleVal + '"]');
|
||||||
|
var $allScaleOptions = $('.vpScaleOption, .projectOptionsScaleRow');
|
||||||
|
$allScaleOptions.find('.scaleRadioButton').removeClass('selectedRadioButton');
|
||||||
|
$allScaleOptions.find('.selectedRadioButtonFill').hide();
|
||||||
|
$selectedScaleOption.find('.scaleRadioButton').addClass('selectedRadioButton');
|
||||||
|
$selectedScaleOption.find('.selectedRadioButtonFill').show();
|
||||||
|
|
||||||
|
if (scaleVal == '0') {
|
||||||
|
$axure.player.deleteVarFromCurrentUrlHash(SCALE_VAR_NAME);
|
||||||
|
} else if (typeof scaleVal !== 'undefined') {
|
||||||
|
$axure.player.setVarInCurrentUrlHash(SCALE_VAR_NAME, scaleVal);
|
||||||
|
}
|
||||||
|
|
||||||
|
$axure.player.refreshViewPort();
|
||||||
|
}
|
||||||
|
|
||||||
|
function search_input_keyup(event) {
|
||||||
|
var searchVal = $(this).val().toLowerCase();
|
||||||
|
//If empty search field, show all nodes, else grey+hide all nodes and
|
||||||
|
//ungrey+unhide all matching nodes, as well as unhide their parent nodes
|
||||||
|
if(searchVal == '') {
|
||||||
|
$('.sitemapPageName').removeClass('sitemapGreyedName');
|
||||||
|
$('.sitemapNode').show();
|
||||||
|
} else {
|
||||||
|
$('.sitemapNode').hide();
|
||||||
|
|
||||||
|
$('.sitemapPageName').addClass('sitemapGreyedName').each(function() {
|
||||||
|
var nodeName = $(this).text().toLowerCase();
|
||||||
|
if(nodeName.indexOf(searchVal) != -1) {
|
||||||
|
$(this).removeClass('sitemapGreyedName').parents('.sitemapNode:first').show().parents('.sitemapExpandableNode').show();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function generateSitemap() {
|
||||||
|
var treeUl = "<div id='sitemapHeader'' class='sitemapHeader'>";
|
||||||
|
treeUl += "<div id='sitemapToolbar' class='sitemapToolbar'>";
|
||||||
|
|
||||||
|
treeUl += '<div id="searchDiv"><span id="searchIcon" class="sitemapToolbarButton"></span><input id="searchBox" type="text"/></div>';
|
||||||
|
treeUl += "<div class='leftArrow sitemapToolbarButton'></div>";
|
||||||
|
treeUl += "<div class='rightArrow sitemapToolbarButton'></div>";
|
||||||
|
|
||||||
|
treeUl += "</div>";
|
||||||
|
treeUl += "</div>";
|
||||||
|
|
||||||
|
///////////////////
|
||||||
|
|
||||||
|
var sitemapTitle = $axure.player.getProjectName();
|
||||||
|
if (!sitemapTitle) sitemapTitle = "Pages";
|
||||||
|
treeUl += "<div class='sitemapPluginNameHeader pluginNameHeader'>" + sitemapTitle + "</div>";
|
||||||
|
|
||||||
|
treeUl += "<div id='sitemapTreeContainer'>";
|
||||||
|
treeUl += "<ul class='sitemapTree' style='clear:both;'>";
|
||||||
|
var rootNodes = $axure.document.sitemap.rootNodes;
|
||||||
|
for(var i = 0; i < rootNodes.length; i++) {
|
||||||
|
treeUl += generateNode(rootNodes[i], 0);
|
||||||
|
}
|
||||||
|
treeUl += "</ul></div>";
|
||||||
|
|
||||||
|
if (!MOBILE_DEVICE) {
|
||||||
|
treeUl += "<div id='changePageInstructions' class='pageSwapInstructions'>Use ";
|
||||||
|
treeUl += '<span class="backKeys"></span>';
|
||||||
|
treeUl += " and ";
|
||||||
|
treeUl += '<span class="forwardKeys"></span>';
|
||||||
|
treeUl += " keys<br>to move between pages";
|
||||||
|
treeUl += "</div>";
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#sitemapHost').html(treeUl);
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateNode(node, level) {
|
||||||
|
var hasChildren = (node.children && node.children.length > 0);
|
||||||
|
var margin, returnVal;
|
||||||
|
if(hasChildren) {
|
||||||
|
margin = (9 + level * 17);
|
||||||
|
returnVal = "<li class='sitemapNode sitemapExpandableNode'><div><div class='sitemapPageLinkContainer' style='margin-left:" + margin + "px'><a class='sitemapPlusMinusLink'><span class='sitemapMinus'></span></a>";
|
||||||
|
} else {
|
||||||
|
margin = (19 + level * 17);
|
||||||
|
returnVal = "<li class='sitemapNode sitemapLeafNode'><div><div class='sitemapPageLinkContainer' style='margin-left:" + margin + "px'>";
|
||||||
|
}
|
||||||
|
|
||||||
|
var isFolder = node.type == "Folder";
|
||||||
|
if(!isFolder) {
|
||||||
|
returnVal += "<a class='sitemapPageLink' nodeUrl='" + node.url + "'>";
|
||||||
|
allNodeUrls.push(node.url);
|
||||||
|
}
|
||||||
|
returnVal += "<span class='sitemapPageIcon";
|
||||||
|
if(node.type == "Flow"){ returnVal += " sitemapFlowIcon";}
|
||||||
|
if(isFolder) { returnVal += " sitemapFolderIcon"; }
|
||||||
|
|
||||||
|
returnVal += "'></span><span class='sitemapPageName'>";
|
||||||
|
returnVal += $('<div/>').text(node.pageName).html();
|
||||||
|
returnVal += "</span>";
|
||||||
|
if(!isFolder) returnVal += "</a>";
|
||||||
|
returnVal += "</div></div>";
|
||||||
|
|
||||||
|
if(hasChildren) {
|
||||||
|
returnVal += "<ul>";
|
||||||
|
for(var i = 0; i < node.children.length; i++) {
|
||||||
|
var child = node.children[i];
|
||||||
|
returnVal += generateNode(child, level + 1);
|
||||||
|
}
|
||||||
|
returnVal += "</ul>";
|
||||||
|
}
|
||||||
|
returnVal += "</li>";
|
||||||
|
return returnVal;
|
||||||
|
}
|
||||||
|
})();
|
||||||
7
src/plugins/sitemap/styles/images/back_keys.svg
Normal file
7
src/plugins/sitemap/styles/images/back_keys.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||||
|
<g fill="none" fill-rule="evenodd">
|
||||||
|
<rect width="18" height="18" x="1" y="1" stroke="#E1E0E0" stroke-width="2" rx="4"/>
|
||||||
|
<rect width="19" height="19" x=".5" y=".5" stroke="#979797" rx="4"/>
|
||||||
|
<path fill="#666" d="M9 5V4L4.448 6.5v1L9 9.5v-1C6.733 7.513 5.567 7.013 5.5 7c.069-.017 1.235-.683 3.5-2zM5.292 14.262a.675.675 0 0 1 .195-.477.676.676 0 0 1 .225-.147.753.753 0 0 1 .288-.054c.12 0 .227.022.321.066a.641.641 0 0 1 .234.183.827.827 0 0 1 .141.27c.032.102.048.213.048.333 0 .18-.026.367-.078.561a2.996 2.996 0 0 1-.222.576 3.439 3.439 0 0 1-.84 1.053l-.18-.174a.222.222 0 0 1-.078-.168c0-.052.028-.106.084-.162.04-.044.091-.103.153-.177s.125-.159.189-.255.123-.202.177-.318c.054-.116.093-.24.117-.372h-.078a.709.709 0 0 1-.282-.054.647.647 0 0 1-.219-.153.698.698 0 0 1-.144-.234.834.834 0 0 1-.051-.297z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 940 B |
14
src/plugins/sitemap/styles/images/closed_item.svg
Normal file
14
src/plugins/sitemap/styles/images/closed_item.svg
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="5px" height="8px" viewBox="0 0 5 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>open item copy</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="Tree-item" transform="translate(-6.000000, -9.000000)" fill="#8C8C8C">
|
||||||
|
<g id="closed-item" transform="translate(5.062500, 9.000000)">
|
||||||
|
<polygon id="Rectangle-13" transform="translate(3.500000, 4.000000) rotate(-90.000000) translate(-3.500000, -4.000000) " points="0 1.6 7 1.6 3.5 6.4"></polygon>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 820 B |
15
src/plugins/sitemap/styles/images/flow.svg
Normal file
15
src/plugins/sitemap/styles/images/flow.svg
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg width="13" height="13" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||||
|
<g id="Page-1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||||
|
<g id="flow" sketch:type="MSArtboardGroup">
|
||||||
|
<rect id="Rectangle-38" fill="#62666b" sketch:type="MSShapeGroup" x="1" y="10" width="3" height="3"/>
|
||||||
|
<rect id="Rectangle-38-Copy" fill="#62666b" sketch:type="MSShapeGroup" x="9" y="10" width="3" height="3"/>
|
||||||
|
<path d="M6.90806226,0.277785818 C8.60537484,1.36088413 12,3.52708074 12,3.52708074 L6.47274687,7 L1,3.52708074 L6.47274687,0 C6.47274687,0 6.76295713,0.185190545 6.90806226,0.277785818 Z" id="Shape" fill="#62666b" sketch:type="MSShapeGroup"/>
|
||||||
|
<path d="M7.33917705,2.07093789 C8.05945137,2.55245016 9.5,3.51547471 9.5,3.51547471 L6.48513465,5.5 L3.5,3.51547471 L6.48513465,1.5 C6.48513465,1.5 7.05449625,1.88062526 7.33917705,2.07093789 Z" id="Shape-Copy-3" fill="#ffffff" sketch:type="MSShapeGroup"/>
|
||||||
|
<path d="M2.45,9 L10.55,9 L11,9 L11,8 L10.55,8 L2.45,8 L2,8 L2,9 L2.45,9 L2.45,9 Z" id="Shape" fill="#62666b" sketch:type="MSShapeGroup"/>
|
||||||
|
<path d="M7,7.66666667 L7,6.33333333 L7,6 L6,6 L6,6.33333333 L6,7.66666667 L6,8 L7,8 L7,7.66666667 L7,7.66666667 Z" id="Shape" fill="#62666b" sketch:type="MSShapeGroup"/>
|
||||||
|
<path d="M3,10.6666667 L3,9.33333333 L3,9 L2,9 L2,9.33333333 L2,10.6666667 L2,11 L3,11 L3,10.6666667 L3,10.6666667 Z" id="Shape-Copy" fill="#62666b" sketch:type="MSShapeGroup"/>
|
||||||
|
<path d="M11,10.6666667 L11,9.33333333 L11,9 L10,9 L10,9.33333333 L10,10.6666667 L10,11 L11,11 L11,10.6666667 L11,10.6666667 Z" id="Shape-Copy-2" fill="#62666b" sketch:type="MSShapeGroup"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
6
src/plugins/sitemap/styles/images/folder_closed_blue.svg
Normal file
6
src/plugins/sitemap/styles/images/folder_closed_blue.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
|
||||||
|
<g fill="#138CDE" fill-rule="evenodd">
|
||||||
|
<path d="M2 4.061h11v8.485H2z"/>
|
||||||
|
<path d="M2 3h4.583v3.182H2z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 224 B |
10
src/plugins/sitemap/styles/images/forward_keys.svg
Normal file
10
src/plugins/sitemap/styles/images/forward_keys.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||||
|
<g fill="none" fill-rule="evenodd">
|
||||||
|
<rect width="18" height="18" x="1" y="1" stroke="#E1E0E0" stroke-width="2" rx="4"/>
|
||||||
|
<rect width="19" height="19" x=".5" y=".5" stroke="#979797" rx="4"/>
|
||||||
|
<path fill="#666" d="M4.448 8.5v1L9 7V6L4.448 4v1c2.267.987 3.433 1.487 3.5 1.5-.069.017-1.235.683-3.5 2z"/>
|
||||||
|
<text fill="#666" font-family="Lato-Regular, Lato" font-size="12">
|
||||||
|
<tspan x="4.728" y="16">.</tspan>
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 563 B |
3
src/plugins/sitemap/styles/images/left_arrow.svg
Normal file
3
src/plugins/sitemap/styles/images/left_arrow.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="6" height="11" viewBox="0 0 6 11">
|
||||||
|
<path fill="#6D6D6D" fill-rule="evenodd" d="M5.5 11L0 5.5 5.5 0v2L2 5.5 5.5 9z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 175 B |
12
src/plugins/sitemap/styles/images/open_item.svg
Normal file
12
src/plugins/sitemap/styles/images/open_item.svg
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="9px" height="10px" viewBox="0 0 9 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>open item</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="open-item" fill="#8C8C8C">
|
||||||
|
<polygon id="Rectangle-13" points="0 0 9 0 4.5 6"></polygon>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 577 B |
6
src/plugins/sitemap/styles/images/page_lt_grey.svg
Normal file
6
src/plugins/sitemap/styles/images/page_lt_grey.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="11" viewBox="0 0 9 11">
|
||||||
|
<g fill="none" fill-rule="evenodd" stroke="#979797">
|
||||||
|
<path d="M.5.5h8v10h-8z"/>
|
||||||
|
<path stroke-linecap="square" d="M2.5 7.5h4M2.5 3.5h4M2.5 5.5h4"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 265 B |
3
src/plugins/sitemap/styles/images/right_arrow.svg
Normal file
3
src/plugins/sitemap/styles/images/right_arrow.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="6" height="11" viewBox="0 0 6 11">
|
||||||
|
<path fill="#6D6D6D" fill-rule="evenodd" d="M.5 11L6 5.5.5 0v2L4 5.5.5 9z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 170 B |
6
src/plugins/sitemap/styles/images/search_off.svg
Normal file
6
src/plugins/sitemap/styles/images/search_off.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11">
|
||||||
|
<g fill="none" fill-rule="evenodd" stroke="#018DCC" transform="translate(1 1)">
|
||||||
|
<path stroke-linecap="square" d="M6.5 6.5l2.791 2.865"/>
|
||||||
|
<circle cx="3.5" cy="3.5" r="3.5"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 293 B |
6
src/plugins/sitemap/styles/images/search_on.svg
Normal file
6
src/plugins/sitemap/styles/images/search_on.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11">
|
||||||
|
<g fill="none" fill-rule="evenodd" stroke="#535353" transform="translate(1 1)">
|
||||||
|
<path stroke-linecap="square" d="M6.5 6.5l2.791 2.865"/>
|
||||||
|
<circle cx="3.5" cy="3.5" r="3.5"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 293 B |
3
src/plugins/sitemap/styles/images/sitemap_panel_off.svg
Normal file
3
src/plugins/sitemap/styles/images/sitemap_panel_off.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" viewBox="0 0 16 14">
|
||||||
|
<path fill="#008DCB" fill-rule="nonzero" d="M14.965 6C15.532 6 16 6.433 16 7s-.434 1-1.002 1H1.002A.983.983 0 0 1 0 7c0-.567.434-1 1.002-1h13.963zm-4.001 6c.568 0 1.036.433 1.036 1s-.435 1-1.003 1H1.003A.984.984 0 0 1 0 13c0-.567.435-1 1.003-1h9.96zM1.003 2A.984.984 0 0 1 0 1c0-.567.435-1 1.003-1h9.994A.984.984 0 0 1 12 1c0 .567-.435 1-1.003 1H1.003z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 451 B |
3
src/plugins/sitemap/styles/images/sitemap_panel_on.svg
Normal file
3
src/plugins/sitemap/styles/images/sitemap_panel_on.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" viewBox="0 0 16 14">
|
||||||
|
<path fill="#6D6D6D" fill-rule="nonzero" d="M14.965 6C15.532 6 16 6.433 16 7s-.434 1-1.002 1H1.002A.983.983 0 0 1 0 7c0-.567.434-1 1.002-1h13.963zm-4.001 6c.568 0 1.036.433 1.036 1s-.435 1-1.003 1H1.003A.984.984 0 0 1 0 13c0-.567.435-1 1.003-1h9.96zM1.003 2A.984.984 0 0 1 0 1c0-.567.435-1 1.003-1h9.994A.984.984 0 0 1 12 1c0 .567-.435 1-1.003 1H1.003z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 451 B |
384
src/plugins/sitemap/styles/sitemap.css
Normal file
384
src/plugins/sitemap/styles/sitemap.css
Normal file
|
|
@ -0,0 +1,384 @@
|
||||||
|
|
||||||
|
#sitemapHost {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sitemapHostBtn a {
|
||||||
|
background: url('images/sitemap_panel_on.svg') no-repeat center center, linear-gradient(transparent, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
#sitemapHostBtn a.selected, #sitemapHostBtn a.selected:hover {
|
||||||
|
background: url('images/sitemap_panel_off.svg') no-repeat center center, linear-gradient(transparent, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
#sitemapHost .pageButtonHeader {
|
||||||
|
top: -27px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sitemapTreeContainer {
|
||||||
|
overflow: auto;
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobileMode #sitemapTreeContainer {
|
||||||
|
margin-left: 5px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sitemapTree {
|
||||||
|
margin: 0px 0px 10px 0px;
|
||||||
|
overflow:visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sitemapTree ul {
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0px 0px 0px 0px;
|
||||||
|
padding-left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.sitemapTree {
|
||||||
|
display: inline-block;
|
||||||
|
min-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageSwapInstructions {
|
||||||
|
width: 129px;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
color: #8c8c8c;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 12px 0px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sitemapMinus, .sitemapPlus {
|
||||||
|
vertical-align:middle;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
margin-right: 3px;
|
||||||
|
width: 7px;
|
||||||
|
height: 8px;
|
||||||
|
object-fit: contain;
|
||||||
|
display:inline-block;
|
||||||
|
}
|
||||||
|
.sitemapMinus {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
background: url('images/open_item.svg') no-repeat center center, linear-gradient(transparent,transparent);
|
||||||
|
}
|
||||||
|
.sitemapPlus {
|
||||||
|
margin-bottom: 2px;
|
||||||
|
background: url('images/closed_item.svg') no-repeat center center, linear-gradient(transparent,transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobileMode .sitemapMinus, .mobileMode .sitemapPlus {
|
||||||
|
width: 10.5px;
|
||||||
|
height: 12px;
|
||||||
|
margin-right: 5px;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sitemapPageLink {
|
||||||
|
margin-left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sitemapPageIcon {
|
||||||
|
margin: 0px 6px -3px 3px;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
display: inline-block;
|
||||||
|
background: url('images/page_lt_grey.svg') no-repeat center center, linear-gradient(transparent,transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobileMode .sitemapPageIcon {
|
||||||
|
margin-right: 7px;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sitemapFolderIcon {
|
||||||
|
background: url('images/folder_closed_blue.svg') no-repeat center center, linear-gradient(transparent,transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobileMode .sitemapFolderIcon {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
margin-left: 1px;
|
||||||
|
background-position-y: 1px;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sitemapFlowIcon {
|
||||||
|
background: url('images/flow.svg') no-repeat center center, linear-gradient(transparent,transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sitemapFolderOpenIcon {
|
||||||
|
background: url('images/folder_open.png') no-repeat center center;
|
||||||
|
background: url('images/folder_open.svg') no-repeat center center, linear-gradient(transparent,transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sitemapPageName {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.93;
|
||||||
|
color: #4a4a4a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sitemapPageName.mobileText {
|
||||||
|
line-height: 1.69;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sitemapNode {
|
||||||
|
white-space:nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sitemapPageLinkContainer {
|
||||||
|
cursor: pointer;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobileMode .sitemapPageLinkContainer {
|
||||||
|
margin-bottom: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sitemapHighlight {
|
||||||
|
background-color: #e6e6e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sitemapGreyedName
|
||||||
|
{
|
||||||
|
color: #AAA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sitemapPluginNameHeader {
|
||||||
|
margin: 13px 9px 5px 9px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #444444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sitemapHeader {
|
||||||
|
padding-top: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobileMode .sitemapHeader {
|
||||||
|
padding-top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sitemapToolbar {
|
||||||
|
margin: 0px 3px 0px 5px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sitemapToolbarButton {
|
||||||
|
width: 19px;
|
||||||
|
height: 18px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hashover .sitemapToolbarButton:hover {
|
||||||
|
border-radius: 3px;
|
||||||
|
background-color: #e6e6e6 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sitemapToolbarButton.sitemapToolbarButtonSelected, .sitemapToolbarButton.sitemapToolbarButtonSelected:hover{
|
||||||
|
background-color: inherit !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftArrow {
|
||||||
|
background: url('images/left_arrow.svg') no-repeat center center, linear-gradient(transparent,transparent);
|
||||||
|
margin-left: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightArrow {
|
||||||
|
background: url('images/right_arrow.svg') no-repeat center center, linear-gradient(transparent,transparent);
|
||||||
|
margin-left: 3px;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchIcon {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
object-fit: contain;
|
||||||
|
background: url('images/search_on.svg') no-repeat center center, linear-gradient(transparent,transparent);
|
||||||
|
vertical-align: bottom;
|
||||||
|
padding: 5px 4px 5px 4px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchIcon.sitemapToolbarButtonSelected {
|
||||||
|
padding: 5px 3px 5px 5px;
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
border-bottom-left-radius: 5px;
|
||||||
|
border-left: solid 1px #cccccc;
|
||||||
|
border-top: solid 1px #cccccc;
|
||||||
|
border-bottom: solid 1px #cccccc;
|
||||||
|
background: url('images/search_off.svg') no-repeat center center, linear-gradient(transparent,transparent);
|
||||||
|
background-color: #FFFFFF !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.backKeys {
|
||||||
|
width: 20px;
|
||||||
|
height: 21px;
|
||||||
|
object-fit: contain;
|
||||||
|
vertical-align: bottom;
|
||||||
|
margin: 2px;
|
||||||
|
display: inline-block;
|
||||||
|
background: url('images/back_keys.svg') no-repeat center center, linear-gradient(transparent,transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.forwardKeys {
|
||||||
|
width: 20px;
|
||||||
|
height: 21px;
|
||||||
|
object-fit: contain;
|
||||||
|
vertical-align: bottom;
|
||||||
|
margin: 2px;
|
||||||
|
display: inline-block;
|
||||||
|
background: url('images/forward_keys.svg') no-repeat center center, linear-gradient(transparent,transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
#interfaceAdaptiveViewsListContainer {
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
width: 220px;
|
||||||
|
left: 155px;
|
||||||
|
padding: 6px 9px;
|
||||||
|
top: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#interfaceScaleListContainer {
|
||||||
|
padding: 7.5px 9px 12px 16px;
|
||||||
|
margin-top: 9px;
|
||||||
|
border-top: solid 1px #bdbcbc;
|
||||||
|
order: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adaptiveViewOption, .vpPresetOption, .vpScaleOption {
|
||||||
|
padding: 3px 0px 3px 0px;
|
||||||
|
color: #3B3B3B;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projectOptionsScaleRow, .projectOptionsAdaptiveViewRow, .projectOptionsHotspotsRow {
|
||||||
|
border-top: solid 1px #c7c7c7;
|
||||||
|
display: flex;
|
||||||
|
padding: 13px 7px 13px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adaptiveViewOption:hover, .vpScaleOption:hover, .vpPresetOption:hover, .projectOptionsAdaptiveViewRow:hover, .projectOptionsScaleRow:hover
|
||||||
|
{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scaleRadioButton, .adapViewRadioButton {
|
||||||
|
border: solid 1px #8c8c8c;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 48px;
|
||||||
|
margin-right: 12px;
|
||||||
|
top: 2px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobileMode .scaleRadioButton, .mobileMode .adapViewRadioButton {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 60px;
|
||||||
|
margin-right: 22px;
|
||||||
|
margin-left: 22px;
|
||||||
|
top: 0px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectedRadioButton {
|
||||||
|
border: solid 1px #20aca9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectedRadioButtonFill {
|
||||||
|
position: relative;
|
||||||
|
display: none;
|
||||||
|
background-color: #20aca9;
|
||||||
|
margin: auto;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 30px;
|
||||||
|
top: 2px;
|
||||||
|
}
|
||||||
|
.mobileMode .selectedRadioButtonFill {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 48px;
|
||||||
|
top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchDiv {
|
||||||
|
display: flex;
|
||||||
|
margin-right: auto;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchBox {
|
||||||
|
display: none;
|
||||||
|
width: 0%;
|
||||||
|
height: 22px;
|
||||||
|
padding-left: 5px;
|
||||||
|
border-radius: 0px 5px 5px 0px;
|
||||||
|
border-right: solid 1px #cccccc;
|
||||||
|
border-top: solid 1px #cccccc;
|
||||||
|
border-bottom: solid 1px #cccccc;
|
||||||
|
border-left: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchBox:focus {
|
||||||
|
outline-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBoxHint {
|
||||||
|
color: #8f949a;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sitemapHost.popup #searchDiv{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sitemapHost.popup #sitemapHeader{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sitemapHost.popup #changePageInstructions{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobileMode #sitemapHeader {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Expo Sitemap
|
||||||
|
******************************************************************************/
|
||||||
|
|
||||||
|
.expoSitemapNode {
|
||||||
|
padding: 15px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sitemapPageImg {
|
||||||
|
max-width: 90%;
|
||||||
|
max-height: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup .sitemapPageImg {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup .expoSitemapNode {
|
||||||
|
padding: 0 0 0 10px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
375
src/register/index.vue
Normal file
375
src/register/index.vue
Normal file
|
|
@ -0,0 +1,375 @@
|
||||||
|
<template>
|
||||||
|
<div class="register-container">
|
||||||
|
<article class="header">
|
||||||
|
<header>
|
||||||
|
<el-avatar icon="el-icon-user-solid" shape="circle" />
|
||||||
|
<span class="login">
|
||||||
|
<em class="bold">已有账号？</em>
|
||||||
|
<router-link to="/login">
|
||||||
|
<el-button type="primary" size="mini">登录</el-button>
|
||||||
|
</router-link>
|
||||||
|
<!-- <a href="/login" >-->
|
||||||
|
<!-- <el-button type="primary" size="mini">登录</el-button>-->
|
||||||
|
<!-- </a>-->
|
||||||
|
</span>
|
||||||
|
</header>
|
||||||
|
</article>
|
||||||
|
<section>
|
||||||
|
<el-form
|
||||||
|
ref="ruleForm"
|
||||||
|
:model="ruleForm"
|
||||||
|
:rules="rules"
|
||||||
|
label-width="100px"
|
||||||
|
autocomplete="off"
|
||||||
|
:hide-required-asterisk="true"
|
||||||
|
size="medium"
|
||||||
|
>
|
||||||
|
<div style="padding-top: 10px">
|
||||||
|
<el-form-item label="账号" prop="account">
|
||||||
|
<el-col :span="10">
|
||||||
|
<el-input v-model="ruleForm.account" />
|
||||||
|
</el-col>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="邮箱" prop="email">
|
||||||
|
<el-col :span="10">
|
||||||
|
<el-input
|
||||||
|
v-model="ruleForm.email"
|
||||||
|
placeholder="输入邮箱并点击发送验证码"
|
||||||
|
/>
|
||||||
|
</el-col>
|
||||||
|
<el-button
|
||||||
|
:loading="codeLoading"
|
||||||
|
:disabled="isDisable"
|
||||||
|
size="small"
|
||||||
|
round
|
||||||
|
@click="sendMsg"
|
||||||
|
>发送验证码</el-button>
|
||||||
|
|
||||||
|
<span class="status">{{ statusMsg }}</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="验证码" prop="code">
|
||||||
|
<el-col :span="10">
|
||||||
|
<el-input
|
||||||
|
v-model="ruleForm.code"
|
||||||
|
maxlength="8"
|
||||||
|
placeholder="请登录邮箱接收验证码"
|
||||||
|
/>
|
||||||
|
</el-col>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="密码" prop="pwd">
|
||||||
|
<el-col :span="10">
|
||||||
|
<el-input v-model="ruleForm.pwd" type="password" />
|
||||||
|
</el-col>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="确认密码" prop="cpwd">
|
||||||
|
<el-col :span="10">
|
||||||
|
<el-input v-model="ruleForm.cpwd" type="password" />
|
||||||
|
</el-col>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
style="width: 40%"
|
||||||
|
@click="register"
|
||||||
|
>注册</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="error">{{ error }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import { getEmailCode, register } from '@/api/register'
|
||||||
|
// import { encrypt } from '@/utils/rsaEncrypt'
|
||||||
|
import http from "@/utils/request";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'register',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
statusMsg: '',
|
||||||
|
error: '',
|
||||||
|
isDisable: false,
|
||||||
|
codeLoading: false,
|
||||||
|
ruleForm: {
|
||||||
|
name:'',
|
||||||
|
account:'',
|
||||||
|
email: '',
|
||||||
|
code: '',
|
||||||
|
pwd: '',
|
||||||
|
cpwd: ''
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
name: [{
|
||||||
|
required: true,
|
||||||
|
type: 'string',
|
||||||
|
message: '请输入姓名',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
account: [{
|
||||||
|
required: true,
|
||||||
|
type: 'string',
|
||||||
|
message: '账户名',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
email: [{
|
||||||
|
required: true,
|
||||||
|
type: 'email',
|
||||||
|
message: '请输入邮箱',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
code: [{
|
||||||
|
required: true,
|
||||||
|
type: 'string',
|
||||||
|
message: '请输入验证码',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
pwd: [{
|
||||||
|
required: true,
|
||||||
|
message: '创建密码',
|
||||||
|
trigger: 'blur'
|
||||||
|
}, { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/, message: '密码必须同时包含数字与字母,且长度为 6-20位' }],
|
||||||
|
cpwd: [{
|
||||||
|
required: true,
|
||||||
|
message: '确认密码',
|
||||||
|
trigger: 'blur'
|
||||||
|
}, {
|
||||||
|
validator: (rule, value, callback) => {
|
||||||
|
if (value === '') {
|
||||||
|
callback(new Error('请再次输入密码'))
|
||||||
|
} else if (value !== this.ruleForm.pwd) {
|
||||||
|
callback(new Error('两次输入密码不一致'))
|
||||||
|
} else {
|
||||||
|
callback()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
trigger: 'blur'
|
||||||
|
}]
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
sendMsg: function() {
|
||||||
|
const self = this
|
||||||
|
let emailPass
|
||||||
|
let timerid
|
||||||
|
if (timerid) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
self.statusMsg = ''
|
||||||
|
this.$refs['ruleForm'].validateField('email', (valid) => {
|
||||||
|
emailPass = valid
|
||||||
|
})
|
||||||
|
// 向后台API验证码发送
|
||||||
|
if (!emailPass) {
|
||||||
|
self.codeLoading = true
|
||||||
|
self.statusMsg = '验证码已发送...'
|
||||||
|
http.get('/users/send',{params:{
|
||||||
|
email:self.ruleForm.email
|
||||||
|
}}).then((res)=>{
|
||||||
|
let count = 60
|
||||||
|
self.ruleForm.code = ''
|
||||||
|
self.codeLoading = false
|
||||||
|
self.isDisable = true
|
||||||
|
self.statusMsg = `验证码已发送,${count--}秒后重新发送`
|
||||||
|
timerid = window.setInterval(function() {
|
||||||
|
self.statusMsg = `验证码已发送,${count--}秒后重新发送`
|
||||||
|
if (count <= 0) {
|
||||||
|
window.clearInterval(timerid)
|
||||||
|
self.isDisable = false
|
||||||
|
self.statusMsg = ''
|
||||||
|
}
|
||||||
|
}, 1000)
|
||||||
|
}).catch(err => {
|
||||||
|
console.log(err.response)
|
||||||
|
this.isDisable = false
|
||||||
|
this.statusMsg = ''
|
||||||
|
this.codeLoading = false
|
||||||
|
console.log(err.response.data.message)
|
||||||
|
})
|
||||||
|
|
||||||
|
// getEmailCode(self.ruleForm.email).then(res => {
|
||||||
|
// this.$message({
|
||||||
|
// showClose: true,
|
||||||
|
// message: '发送成功，验证码有效期5分钟',
|
||||||
|
// type: 'success'
|
||||||
|
// })
|
||||||
|
|
||||||
|
}
|
||||||
|
else alert('wrong'+emailPass )
|
||||||
|
},
|
||||||
|
|
||||||
|
// 用户注册
|
||||||
|
register: function() {
|
||||||
|
console.log(sessionStorage.getItem('verify_code'))
|
||||||
|
this.$refs['ruleForm'].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
// const user = {
|
||||||
|
// code: this.ruleForm.code,
|
||||||
|
// email: this.ruleForm.email,
|
||||||
|
// //这里删除源码的加密
|
||||||
|
// password: this.ruleForm.pwd
|
||||||
|
// }
|
||||||
|
http.get('/users/register',{
|
||||||
|
params:{
|
||||||
|
username:this.ruleForm.account,
|
||||||
|
email:this.ruleForm.email,
|
||||||
|
password:this.ruleForm.pwd,
|
||||||
|
security_code:this.ruleForm.code
|
||||||
|
}
|
||||||
|
}).then((res)=>{
|
||||||
|
alert(res.data)
|
||||||
|
}).catch((error)=>{
|
||||||
|
alert(error)
|
||||||
|
})
|
||||||
|
// register(user).then(res => {
|
||||||
|
// console.log(res)
|
||||||
|
// this.$message({
|
||||||
|
// showClose: true,
|
||||||
|
// message: '注册成功，正在跳转到登录界面...',
|
||||||
|
// type: 'success'
|
||||||
|
// })
|
||||||
|
// setTimeout(() => {
|
||||||
|
// this.$router.push('/')
|
||||||
|
// }, 2000)
|
||||||
|
// }).catch(err => {
|
||||||
|
// console.log(err.response.data.message)
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
/* 修复input 背景不协调 和光标变色 */
|
||||||
|
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
|
||||||
|
|
||||||
|
$bg: #283443;
|
||||||
|
$light_gray: #fff;
|
||||||
|
$cursor: #fff;
|
||||||
|
|
||||||
|
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
|
||||||
|
.register-container .el-input input {
|
||||||
|
color: $cursor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* reset element-ui css */
|
||||||
|
.register-container {
|
||||||
|
.el-input {
|
||||||
|
display: inline-block;
|
||||||
|
height: 47px;
|
||||||
|
width: 95%;
|
||||||
|
|
||||||
|
input {
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
-webkit-appearance: none;
|
||||||
|
padding: 12px 5px 12px 15px;
|
||||||
|
color: $light_gray;
|
||||||
|
height: 47px;
|
||||||
|
caret-color: $cursor;
|
||||||
|
|
||||||
|
&:-webkit-autofill {
|
||||||
|
box-shadow: 0 0 0px 1000px $bg inset !important;
|
||||||
|
-webkit-text-fill-color: $cursor !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-form-item {
|
||||||
|
label {
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 12px;
|
||||||
|
color: $light_gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$bg: #2d3a4b;
|
||||||
|
$dark_gray: #889aa4;
|
||||||
|
$light_gray: #eee;
|
||||||
|
|
||||||
|
.register-container {
|
||||||
|
min-height: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
background-color: $bg;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
border-bottom: 2px solid rgb(235, 232, 232);
|
||||||
|
min-width: 980px;
|
||||||
|
color: #666;
|
||||||
|
|
||||||
|
header {
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 10px 0;
|
||||||
|
width: 980px;
|
||||||
|
|
||||||
|
.login {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-style: normal;
|
||||||
|
color: $light_gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> section {
|
||||||
|
margin: 0 auto 30px;
|
||||||
|
padding-top: 30px;
|
||||||
|
width: 980px;
|
||||||
|
min-height: 300px;
|
||||||
|
padding-right: 100px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.status {
|
||||||
|
font-size: 12px;
|
||||||
|
margin-left: 20px;
|
||||||
|
color: #e6a23c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tips {
|
||||||
|
float: right;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
&:first-of-type {
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 修改验证器样式 */
|
||||||
|
::v-deep .el-form-item.is-error .el-input__inner {
|
||||||
|
border-color: #889aa4;
|
||||||
|
}
|
||||||
|
::v-deep .el-form-item.is-error .el-input__validateIcon {
|
||||||
|
color: #889aa4;
|
||||||
|
}
|
||||||
|
::v-deep .el-form-item__error {
|
||||||
|
color: #e6a23c;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
35
src/resources/Other.html
Normal file
35
src/resources/Other.html
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<br />
|
||||||
|
<div style="width:100%; text-align:center; font-family:Arial; font-size:12px;" id=other></div>
|
||||||
|
<br />
|
||||||
|
<div style="width:100%; text-align:center; font-family:Arial; font-size:12px;">
|
||||||
|
<button onclick="parent.window.close();">
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<SCRIPT src="axurerp_pagescript.js"></SCRIPT>
|
||||||
|
|
||||||
|
<script language=javascript>
|
||||||
|
function getQueryVariable(variable) {
|
||||||
|
var query = window.location.hash.substring(1);
|
||||||
|
var vars = query.split("&&&");
|
||||||
|
for (var i=0;i<vars.length;i++) {
|
||||||
|
var pair = vars[i].split("=");
|
||||||
|
if (pair[0] == variable) {
|
||||||
|
return decodeURI(pair[1]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var other = document.getElementById('other');
|
||||||
|
other.innerHTML = getQueryVariable('other');
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
src/resources/chrome/allow-access.png
Normal file
BIN
src/resources/chrome/allow-access.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
BIN
src/resources/chrome/axure-chrome-extension.crx
Normal file
BIN
src/resources/chrome/axure-chrome-extension.crx
Normal file
Binary file not shown.
BIN
src/resources/chrome/axure_logo.png
Normal file
BIN
src/resources/chrome/axure_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
187
src/resources/chrome/chrome.html
Normal file
187
src/resources/chrome/chrome.html
Normal file
|
|
@ -0,0 +1,187 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Install the Axure RP Chrome Extension</title>
|
||||||
|
<style type="text/css">
|
||||||
|
*
|
||||||
|
{
|
||||||
|
font-family: NunitoSans, Helvetica, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
body
|
||||||
|
{
|
||||||
|
text-align: center;
|
||||||
|
background-color: #fafafa;
|
||||||
|
}
|
||||||
|
p
|
||||||
|
{
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
div.container
|
||||||
|
{
|
||||||
|
width: 980px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
a
|
||||||
|
{
|
||||||
|
text-decoration: none;
|
||||||
|
color: #009dda;
|
||||||
|
}
|
||||||
|
.button
|
||||||
|
{
|
||||||
|
background: #A502B3;
|
||||||
|
font: normal 16px Arial, sans-serif;
|
||||||
|
color: #FFFFFF;
|
||||||
|
padding: 10px 30px 10px 30px;
|
||||||
|
border: 2px solid #A502B3;
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
a:hover.button
|
||||||
|
{
|
||||||
|
border: 2px solid #A502B3;
|
||||||
|
color: #A502B3;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
div.left
|
||||||
|
{
|
||||||
|
width: 400px;
|
||||||
|
float: left;
|
||||||
|
margin-right: 80px;
|
||||||
|
}
|
||||||
|
div.right
|
||||||
|
{
|
||||||
|
width: 400px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
div.buttonContainer
|
||||||
|
{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h1
|
||||||
|
{
|
||||||
|
font-size: 36px;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 50px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
h2
|
||||||
|
{
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #08639C;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h3
|
||||||
|
{
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: normal;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.heading
|
||||||
|
{
|
||||||
|
border-bottom: 1px solid black;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #000000;
|
||||||
|
|
||||||
|
}
|
||||||
|
span.faq
|
||||||
|
{
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
font-weight: normal;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #333333;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<img src="axure_logo.png" alt="axure" />
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<h1>
|
||||||
|
AXURE RP EXTENSION FOR CHROME</h1>
|
||||||
|
<p style="font-size: 14px; color: #666666; margin-top: 10px;">
|
||||||
|
Google Chrome requires an extension to view locally stored projects. Alternatively,
|
||||||
|
upload your RP file to <a href="https://www.axure.cloud">Axure Cloud</a> or use a different
|
||||||
|
browser. You can also Preview from Axure RP.</p>
|
||||||
|
<img src="preview-rp.png" alt="preview"/>
|
||||||
|
<h3 class="heading">
|
||||||
|
VIEW LOCAL PROJECTS IN CHROME</h3>
|
||||||
|
<div class="left">
|
||||||
|
<h3>
|
||||||
|
1. Install Extension from Chrome Store</h3>
|
||||||
|
<div class="buttonContainer">
|
||||||
|
<a class="button" href="https://chrome.google.com/webstore/detail/dogkpdfcklifaemcdfbildhcofnopogp"
|
||||||
|
target="_blank">Install Extension</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<h3>
|
||||||
|
2. Open "More Tools > Extensions"</h3>
|
||||||
|
<img src="extensions.png" alt="extensions"/>
|
||||||
|
</div>
|
||||||
|
<div style="clear: both; height: 20px;">
|
||||||
|
</div>
|
||||||
|
<div class="left">
|
||||||
|
<h3>
|
||||||
|
3. View Axure RP Extension Details</h3>
|
||||||
|
<img src="details.png" alt="extension details"/>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<h3>
|
||||||
|
4. Check "Allow access to file URLs"</h3>
|
||||||
|
<img src="allow-access.png" alt="allow access"/>
|
||||||
|
</div>
|
||||||
|
<div style="clear: both; height: 20px;">
|
||||||
|
</div>
|
||||||
|
<div class="left">
|
||||||
|
<h3>
|
||||||
|
5. Click the button below</h3>
|
||||||
|
<div class="buttonContainer">
|
||||||
|
<a class="button" href="../../start.html">View in Chrome</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="clear: both; height: 20px;">
|
||||||
|
</div>
|
||||||
|
<h3 class="heading">
|
||||||
|
EXTENSION FAQ</h3>
|
||||||
|
<p>
|
||||||
|
<span class="faq">What is a Chrome Extension?</span> Extensions are downloadable
|
||||||
|
plug-ins for Google Chrome that modify the browser
|
||||||
|
and allow you additional capabilities.
|
||||||
|
</p>
|
||||||
|
<p style="margin-top: 25px;">
|
||||||
|
<span class="faq">Why do I need to install the extension?</span> Google requires
|
||||||
|
this extension to be installed to allow the viewing of local files in
|
||||||
|
Chrome
|
||||||
|
</p>
|
||||||
|
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||||
|
<span class="faq">Why does this extension require a high access level?</span> This
|
||||||
|
extension requires a high access level to allow the viewing of the file://
|
||||||
|
protocol. Axure does not track or access any of your information.
|
||||||
|
</p>
|
||||||
|
<h3 class="heading">
|
||||||
|
WE'RE HERE TO HELP</h3>
|
||||||
|
<p>
|
||||||
|
Need help or have any questions? Contact our support team at <a href="mailto:support@axure.com">
|
||||||
|
support@axure.com</a>.
|
||||||
|
</p>
|
||||||
|
<div style="clear: both; height: 20px;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
src/resources/chrome/details.png
Normal file
BIN
src/resources/chrome/details.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/resources/chrome/extensions.png
Normal file
BIN
src/resources/chrome/extensions.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
130
src/resources/chrome/firefox.html
Normal file
130
src/resources/chrome/firefox.html
Normal file
|
|
@ -0,0 +1,130 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Axure RP - Firefox Local File Restrictions</title>
|
||||||
|
<style type="text/css">
|
||||||
|
*
|
||||||
|
{
|
||||||
|
font-family: Helvetica, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
body
|
||||||
|
{
|
||||||
|
text-align: center;
|
||||||
|
background-color: #fafafa;
|
||||||
|
}
|
||||||
|
p
|
||||||
|
{
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
div.container
|
||||||
|
{
|
||||||
|
width: 980px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
a
|
||||||
|
{
|
||||||
|
text-decoration: none;
|
||||||
|
color: #009dda;
|
||||||
|
}
|
||||||
|
.button
|
||||||
|
{
|
||||||
|
background: #A502B3;
|
||||||
|
font: normal 16px Arial, sans-serif;
|
||||||
|
color: #FFFFFF;
|
||||||
|
padding: 10px 30px 10px 30px;
|
||||||
|
border: 2px solid #A502B3;
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
a:hover.button
|
||||||
|
{
|
||||||
|
border: 2px solid #A502B3;
|
||||||
|
color: #A502B3;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
div.left
|
||||||
|
{
|
||||||
|
width: 400px;
|
||||||
|
float: left;
|
||||||
|
margin-right: 80px;
|
||||||
|
}
|
||||||
|
div.right
|
||||||
|
{
|
||||||
|
width: 400px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
div.buttonContainer
|
||||||
|
{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h1
|
||||||
|
{
|
||||||
|
font-size: 36px;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 50px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
h2
|
||||||
|
{
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #08639C;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h3
|
||||||
|
{
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
.heading
|
||||||
|
{
|
||||||
|
border-bottom: 1px solid black;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
span.faq
|
||||||
|
{
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: normal;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #333333;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<img src="axure_logo.png" alt="axure" />
|
||||||
|
<br />
|
||||||
|
<h1>
|
||||||
|
FIREFOX LOCAL FILE RESTRICTIONS</h1>
|
||||||
|
<p style="font-size: 16px; line-height: 24px; color: #666666; margin-top: 10px;">
|
||||||
|
Firefox does not permit locally stored files to be viewed. Use Preview to view your projects in progress.
|
||||||
|
<img src="preview-rp.png" alt="preview"/>
|
||||||
|
</p>
|
||||||
|
<p style="font-size: 16px; line-height: 24px; color: #666666; margin-top: 10px;">
|
||||||
|
Alternatively, you can choose a different web browser, upload your RP file to <a href="https://app.axure.cloud">Axure Cloud</a> or publish the local files to a web server.</p>
|
||||||
|
<h3 class="heading">
|
||||||
|
We're Here to Help</h3>
|
||||||
|
<p>
|
||||||
|
Need help or have any questions? Drop us a line at <a href="mailto:support@axure.com">
|
||||||
|
support@axure.com</a>.
|
||||||
|
</p>
|
||||||
|
<div style="clear: both; height: 20px;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
src/resources/chrome/preview-rp.png
Normal file
BIN
src/resources/chrome/preview-rp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
155
src/resources/chrome/safari.html
Normal file
155
src/resources/chrome/safari.html
Normal file
|
|
@ -0,0 +1,155 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Axure RP - Safari Local File Restrictions</title>
|
||||||
|
<style type="text/css">
|
||||||
|
*
|
||||||
|
{
|
||||||
|
font-family: Helvetica, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
body
|
||||||
|
{
|
||||||
|
text-align: center;
|
||||||
|
background-color: #fafafa;
|
||||||
|
}
|
||||||
|
p
|
||||||
|
{
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
div.container
|
||||||
|
{
|
||||||
|
width: 980px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
a
|
||||||
|
{
|
||||||
|
text-decoration: none;
|
||||||
|
color: #009dda;
|
||||||
|
}
|
||||||
|
.button
|
||||||
|
{
|
||||||
|
background: #A502B3;
|
||||||
|
font: normal 16px Arial, sans-serif;
|
||||||
|
color: #FFFFFF;
|
||||||
|
padding: 10px 30px 10px 30px;
|
||||||
|
border: 2px solid #A502B3;
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
a:hover.button
|
||||||
|
{
|
||||||
|
border: 2px solid #A502B3;
|
||||||
|
color: #A502B3;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
div.left
|
||||||
|
{
|
||||||
|
width: 400px;
|
||||||
|
float: left;
|
||||||
|
margin-right: 80px;
|
||||||
|
}
|
||||||
|
div.right
|
||||||
|
{
|
||||||
|
width: 400px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
div.buttonContainer
|
||||||
|
{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h1
|
||||||
|
{
|
||||||
|
font-size: 36px;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 50px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
h2
|
||||||
|
{
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #08639C;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h3
|
||||||
|
{
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
.heading
|
||||||
|
{
|
||||||
|
border-bottom: 1px solid black;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
span.faq
|
||||||
|
{
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: normal;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #333333;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<img src="axure_logo.png" alt="axure" />
|
||||||
|
<br />
|
||||||
|
<h1>
|
||||||
|
SAFARI LOCAL FILE RESTRICTIONS</h1>
|
||||||
|
<p style="font-size: 16px; line-height: 24px; color: #666666; margin-top: 10px;">
|
||||||
|
To view locally stored projects in Safari, you will need to "disable local file restrictions". Alternatively,
|
||||||
|
you can upload your RP file to <a href="https://www.axure.cloud">Axure Cloud</a> or publish the local files to a web server. You can also Preview from Axure RP.</p>
|
||||||
|
<img src="preview-rp.png" alt="preview"/>
|
||||||
|
<h3 class="heading">
|
||||||
|
VIEW LOCAL PROJECTS IN SAFARI</h3>
|
||||||
|
<div class="">
|
||||||
|
<h3>
|
||||||
|
1. Open "Safari > Preferences > Advanced" from the top menu, and check the option to "Show Develop menu in menu bar"</h3>
|
||||||
|
<img src="safari_advanced.png" alt="advanced" />
|
||||||
|
</div>
|
||||||
|
<div style="clear: both; height: 20px;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="">
|
||||||
|
<h3>
|
||||||
|
2. In the Develop menu that appears in the menu bar, click "Develop > Disable Local File Restrictions" to un-select the menu option</h3>
|
||||||
|
<img src="safari_restrictions.png" alt="extensions" />
|
||||||
|
</div>
|
||||||
|
<div style="clear: both; height: 20px;">
|
||||||
|
</div>
|
||||||
|
<div class="left">
|
||||||
|
<h3>
|
||||||
|
3. Click the button below
|
||||||
|
</h3>
|
||||||
|
<div class="buttonContainer">
|
||||||
|
<a class="button" href="../../start.html">View in Safari</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="clear: both; height: 20px;">
|
||||||
|
</div>
|
||||||
|
<h3 class="heading">
|
||||||
|
We're Here to Help</h3>
|
||||||
|
<p>
|
||||||
|
Need help or have any questions? Drop us a line at <a href="mailto:support@axure.com">
|
||||||
|
support@axure.com</a>.
|
||||||
|
</p>
|
||||||
|
<div style="clear: both; height: 20px;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
src/resources/chrome/safari_advanced.png
Normal file
BIN
src/resources/chrome/safari_advanced.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
BIN
src/resources/chrome/safari_restrictions.png
Normal file
BIN
src/resources/chrome/safari_restrictions.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
BIN
src/resources/chrome/splitter.gif
Normal file
BIN
src/resources/chrome/splitter.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/resources/chrome/splitter.png
Normal file
BIN
src/resources/chrome/splitter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 251 B |
292
src/resources/css/axure_rp_page.css
Normal file
292
src/resources/css/axure_rp_page.css
Normal file
|
|
@ -0,0 +1,292 @@
|
||||||
|
/* so the window resize fires within a frame in IE7 */
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobileFrameCursor div * {
|
||||||
|
cursor: inherit !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0px;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
font-feature-settings: "kern" 1;
|
||||||
|
-webkit-font-feature-settings: "kern";
|
||||||
|
-moz-font-feature-settings: "kern";
|
||||||
|
-moz-font-feature-settings: "kern=1";
|
||||||
|
font-kerning: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin:0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
background: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* to match IE with C, FF */
|
||||||
|
input {
|
||||||
|
padding: 1px 0px 1px 0px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=text]::-ms-clear {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
margin: 0px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.focused:focus, .selectedFocused:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.intcases {
|
||||||
|
font-family: arial;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align:left;
|
||||||
|
border:1px solid #AAA;
|
||||||
|
background:#FFF none repeat scroll 0% 0%;
|
||||||
|
z-index:9999;
|
||||||
|
visibility:hidden;
|
||||||
|
position:absolute;
|
||||||
|
padding: 0px;
|
||||||
|
border-radius: 3px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.intcaselink {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 3px 8px 3px 8px;
|
||||||
|
margin: 5px;
|
||||||
|
background:#EEE none repeat scroll 0% 0%;
|
||||||
|
border:1px solid #AAA;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.refpageimage {
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
top: 0px;
|
||||||
|
font-size: 0px;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
background-image: url(images/newwindow.gif);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.annnoteimage {
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
top: 0px;
|
||||||
|
font-size: 0px;
|
||||||
|
/*width: 16px;
|
||||||
|
height: 12px;*/
|
||||||
|
cursor: help;
|
||||||
|
/*background-image: url(images/note.gif);*/
|
||||||
|
/*background-repeat: no-repeat;*/
|
||||||
|
width: 13px;
|
||||||
|
height: 12px;
|
||||||
|
padding-top: 1px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #138CDD;
|
||||||
|
-moz-box-shadow: 1px 1px 3px #aaa;
|
||||||
|
-webkit-box-shadow: 1px 1px 3px #aaa;
|
||||||
|
box-shadow: 1px 1px 3px #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.annnoteline {
|
||||||
|
display: inline-block;
|
||||||
|
width: 9px;
|
||||||
|
height: 1px;
|
||||||
|
border-bottom: 1px solid white;
|
||||||
|
margin-top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.annnotelabel {
|
||||||
|
/*position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
top: 0px;*/
|
||||||
|
font-family: Helvetica,Arial;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
padding-top: 1px;
|
||||||
|
background-color: #fff849;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 14px;
|
||||||
|
margin-right: 3px;
|
||||||
|
padding: 0px 4px;
|
||||||
|
color: #000;
|
||||||
|
|
||||||
|
-moz-box-shadow: 1px 1px 3px #aaa;
|
||||||
|
-webkit-box-shadow: 1px 1px 3px #aaa;
|
||||||
|
box-shadow: 1px 1px 3px #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.annnote {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
cursor: help;
|
||||||
|
line-height: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.annotation {
|
||||||
|
font-size: 12px;
|
||||||
|
padding-left: 2px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.annotationName {
|
||||||
|
/*font-size: 13px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
white-space: nowrap;*/
|
||||||
|
|
||||||
|
font-family: 'Trebuchet MS';
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.annotationValue {
|
||||||
|
font-family: Arial, Helvetica, Sans-Serif;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #4a4a4a;
|
||||||
|
line-height: 21px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noteLink {
|
||||||
|
text-decoration: inherit;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noteLink:hover {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* this is a fix for the issue where dialogs jump around and takes the text-align from the body */
|
||||||
|
.dialogFix {
|
||||||
|
position:absolute;
|
||||||
|
text-align:left;
|
||||||
|
border: 1px solid #8f949a;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes pulsate {
|
||||||
|
from {
|
||||||
|
box-shadow: 0 0 10px #15d6ba;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
box-shadow: 0 0 20px #15d6ba;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes pulsate {
|
||||||
|
from {
|
||||||
|
-webkit-box-shadow: 0 0 10px #15d6ba;
|
||||||
|
box-shadow: 0 0 10px #15d6ba;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-box-shadow: 0 0 20px #15d6ba;
|
||||||
|
box-shadow: 0 0 20px #15d6ba;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-keyframes pulsate {
|
||||||
|
from {
|
||||||
|
-moz-box-shadow: 0 0 10px #15d6ba;
|
||||||
|
box-shadow: 0 0 10px #15d6ba;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-moz-box-shadow: 0 0 20px #15d6ba;
|
||||||
|
box-shadow: 0 0 20px #15d6ba;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.legacyPulsateBorder {
|
||||||
|
/*border: 5px solid #15d6ba;
|
||||||
|
margin: -5px;*/
|
||||||
|
-moz-box-shadow: 0 0 10px 3px #15d6ba;
|
||||||
|
box-shadow: 0 0 10px 3px #15d6ba;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pulsateBorder {
|
||||||
|
animation-name: pulsate;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
animation-duration: 0.9s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-direction: alternate;
|
||||||
|
|
||||||
|
-webkit-animation-name: pulsate;
|
||||||
|
-webkit-animation-timing-function: ease-in-out;
|
||||||
|
-webkit-animation-duration: 0.9s;
|
||||||
|
-webkit-animation-iteration-count: infinite;
|
||||||
|
-webkit-animation-direction: alternate;
|
||||||
|
|
||||||
|
-moz-animation-name: pulsate;
|
||||||
|
-moz-animation-timing-function: ease-in-out;
|
||||||
|
-moz-animation-duration: 0.9s;
|
||||||
|
-moz-animation-iteration-count: infinite;
|
||||||
|
-moz-animation-direction: alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ax_default_hidden, .ax_default_unplaced{
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.widgetNoteSelected {
|
||||||
|
-moz-box-shadow: 0 0 10px 3px #138CDD;
|
||||||
|
box-shadow: 0 0 10px 3px #138CDD;
|
||||||
|
/*-moz-box-shadow: 0 0 20px #3915d6;
|
||||||
|
box-shadow: 0 0 20px #3915d6;*/
|
||||||
|
/*border: 3px solid #3915d6;*/
|
||||||
|
/*margin: -3px;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.singleImg {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ios-safari {
|
||||||
|
overflow: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ios-safari-html {
|
||||||
|
display: block;
|
||||||
|
overflow: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ios-safari-fixed {
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none;
|
||||||
|
width: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ios-safari-fixed div {
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
1052
src/resources/css/default.css
Normal file
1052
src/resources/css/default.css
Normal file
File diff suppressed because it is too large
Load Diff
25
src/resources/css/images/images.html
Normal file
25
src/resources/css/images/images.html
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>
|
||||||
|
<img border="0" src="note.gif" width="1" height="1">
|
||||||
|
<img border="0" src="newwindow.gif" width="1" height="1">
|
||||||
|
<img border="0" src="ui-bg_flat_0_aaaaaa_40x100.png" width="1" height="1">
|
||||||
|
<img border="0" src="ui-bg_glass_55_fbf9ee_1x400.png" width="1" height="1">
|
||||||
|
<img border="0" src="ui-bg_glass_65_ffffff_1x400.png" width="1" height="1">
|
||||||
|
<img border="0" src="ui-bg_glass_75_dadada_1x400.png" width="1" height="1">
|
||||||
|
<img border="0" src="ui-bg_glass_75_e6e6e6_1x400.png" width="1" height="1">
|
||||||
|
<img border="0" src="ui-bg_glass_75_ffffff_1x400.png" width="1" height="1">
|
||||||
|
<img border="0" src="ui-bg_highlight-soft_75_cccccc_1x100.png" width="1" height="1">
|
||||||
|
<img border="0" src="ui-bg_inset-soft_95_fef1ec_1x100.png" width="1" height="1">
|
||||||
|
<img border="0" src="ui-icons_222222_256x240.png" width="1" height="1">
|
||||||
|
<img border="0" src="ui-icons_2e83ff_256x240.png" width="1" height="1">
|
||||||
|
<img border="0" src="ui-icons_454545_256x240.png" width="1" height="1">
|
||||||
|
<img border="0" src="ui-icons_888888_256x240.png" width="1" height="1">
|
||||||
|
<img border="0" src="ui-icons_cd0a0a_256x240.png" width="1" height="1">
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
src/resources/css/images/newwindow.gif
Normal file
BIN
src/resources/css/images/newwindow.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 B |
BIN
src/resources/css/images/note.gif
Normal file
BIN
src/resources/css/images/note.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 B |
BIN
src/resources/css/images/touch.cur
Normal file
BIN
src/resources/css/images/touch.cur
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
32
src/resources/css/images/touch.svg
Normal file
32
src/resources/css/images/touch.svg
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>touch_update</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs>
|
||||||
|
<circle id="path-1" cx="859" cy="783" r="24"></circle>
|
||||||
|
<filter x="-26.0%" y="-26.0%" width="152.1%" height="152.1%" filterUnits="objectBoundingBox" id="filter-2">
|
||||||
|
<feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
|
||||||
|
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||||
|
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||||
|
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
|
||||||
|
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||||
|
</filter>
|
||||||
|
<filter x="-41.7%" y="-41.7%" width="183.3%" height="183.3%" filterUnits="objectBoundingBox" id="filter-3">
|
||||||
|
<feGaussianBlur stdDeviation="7.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
|
||||||
|
<feOffset dx="5" dy="8" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
|
||||||
|
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
|
||||||
|
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.356034873 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="Sitemap-expanded" transform="translate(-827.000000, -751.000000)" fill-rule="nonzero">
|
||||||
|
<g id="touch_update">
|
||||||
|
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
|
||||||
|
<use fill-opacity="0.236894248" fill="#E4DEDE" fill-rule="evenodd" xlink:href="#path-1"></use>
|
||||||
|
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
|
||||||
|
<use stroke-opacity="0.225798234" stroke="#CACACA" stroke-width="1" xlink:href="#path-1"></use>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/resources/css/images/ui-bg_flat_0_aaaaaa_40x100.png
Normal file
BIN
src/resources/css/images/ui-bg_flat_0_aaaaaa_40x100.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 180 B |
BIN
src/resources/css/images/ui-bg_glass_55_fbf9ee_1x400.png
Normal file
BIN
src/resources/css/images/ui-bg_glass_55_fbf9ee_1x400.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 B |
BIN
src/resources/css/images/ui-bg_glass_65_ffffff_1x400.png
Normal file
BIN
src/resources/css/images/ui-bg_glass_65_ffffff_1x400.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 B |
BIN
src/resources/css/images/ui-bg_glass_75_dadada_1x400.png
Normal file
BIN
src/resources/css/images/ui-bg_glass_75_dadada_1x400.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 111 B |
BIN
src/resources/css/images/ui-bg_glass_75_e6e6e6_1x400.png
Normal file
BIN
src/resources/css/images/ui-bg_glass_75_e6e6e6_1x400.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 B |
BIN
src/resources/css/images/ui-bg_glass_75_ffffff_1x400.png
Normal file
BIN
src/resources/css/images/ui-bg_glass_75_ffffff_1x400.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 B |
Binary file not shown.
|
After Width: | Height: | Size: 101 B |
BIN
src/resources/css/images/ui-bg_inset-soft_95_fef1ec_1x100.png
Normal file
BIN
src/resources/css/images/ui-bg_inset-soft_95_fef1ec_1x100.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 B |
BIN
src/resources/css/images/ui-icons_222222_256x240.png
Normal file
BIN
src/resources/css/images/ui-icons_222222_256x240.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
src/resources/css/images/ui-icons_2e83ff_256x240.png
Normal file
BIN
src/resources/css/images/ui-icons_2e83ff_256x240.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
src/resources/css/images/ui-icons_454545_256x240.png
Normal file
BIN
src/resources/css/images/ui-icons_454545_256x240.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
src/resources/css/images/ui-icons_888888_256x240.png
Normal file
BIN
src/resources/css/images/ui-icons_888888_256x240.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
src/resources/css/images/ui-icons_cd0a0a_256x240.png
Normal file
BIN
src/resources/css/images/ui-icons_cd0a0a_256x240.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
412
src/resources/css/jquery-ui-themes.css
Normal file
412
src/resources/css/jquery-ui-themes.css
Normal file
|
|
@ -0,0 +1,412 @@
|
||||||
|
/*
|
||||||
|
* jQuery UI CSS Framework
|
||||||
|
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
|
||||||
|
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Layout helpers
|
||||||
|
----------------------------------*/
|
||||||
|
.ui-helper-hidden { display: none; }
|
||||||
|
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
|
||||||
|
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
|
||||||
|
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
|
||||||
|
.ui-helper-clearfix { display: inline-block; }
|
||||||
|
/* required comment for clearfix to work in Opera \*/
|
||||||
|
* html .ui-helper-clearfix { height:1%; }
|
||||||
|
.ui-helper-clearfix { display:block; }
|
||||||
|
/* end clearfix */
|
||||||
|
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
|
||||||
|
|
||||||
|
|
||||||
|
/* Interaction Cues
|
||||||
|
----------------------------------*/
|
||||||
|
.ui-state-disabled { cursor: default !important; }
|
||||||
|
|
||||||
|
|
||||||
|
/* Icons
|
||||||
|
----------------------------------*/
|
||||||
|
|
||||||
|
/* states and images */
|
||||||
|
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
|
||||||
|
|
||||||
|
|
||||||
|
/* Misc visuals
|
||||||
|
----------------------------------*/
|
||||||
|
|
||||||
|
/* Overlays */
|
||||||
|
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }/* Accordion
|
||||||
|
----------------------------------*/
|
||||||
|
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
|
||||||
|
.ui-accordion .ui-accordion-li-fix { display: inline; }
|
||||||
|
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
|
||||||
|
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em 2.2em; }
|
||||||
|
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
|
||||||
|
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; }
|
||||||
|
.ui-accordion .ui-accordion-content-active { display: block; }
|
||||||
|
|
||||||
|
/* Datepicker
|
||||||
|
----------------------------------*/
|
||||||
|
.ui-datepicker { width: 17em; padding: .2em .2em 0; }
|
||||||
|
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
|
||||||
|
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
|
||||||
|
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
|
||||||
|
.ui-datepicker .ui-datepicker-prev { left:2px; }
|
||||||
|
.ui-datepicker .ui-datepicker-next { right:2px; }
|
||||||
|
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
|
||||||
|
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
|
||||||
|
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }
|
||||||
|
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
|
||||||
|
.ui-datepicker .ui-datepicker-title select { float:left; font-size:1em; margin:1px 0; }
|
||||||
|
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
|
||||||
|
.ui-datepicker select.ui-datepicker-month,
|
||||||
|
.ui-datepicker select.ui-datepicker-year { width: 49%;}
|
||||||
|
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; }
|
||||||
|
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
|
||||||
|
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; }
|
||||||
|
.ui-datepicker td { border: 0; padding: 1px; }
|
||||||
|
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
|
||||||
|
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
|
||||||
|
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
|
||||||
|
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
|
||||||
|
|
||||||
|
/* with multiple calendars */
|
||||||
|
.ui-datepicker.ui-datepicker-multi { width:auto; }
|
||||||
|
.ui-datepicker-multi .ui-datepicker-group { float:left; }
|
||||||
|
.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
|
||||||
|
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
|
||||||
|
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
|
||||||
|
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
|
||||||
|
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
|
||||||
|
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
|
||||||
|
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
|
||||||
|
.ui-datepicker-row-break { clear:both; width:100%; }
|
||||||
|
|
||||||
|
/* RTL support */
|
||||||
|
.ui-datepicker-rtl { direction: rtl; }
|
||||||
|
.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
|
||||||
|
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
|
||||||
|
.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
|
||||||
|
.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
|
||||||
|
.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
|
||||||
|
.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
|
||||||
|
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
|
||||||
|
.ui-datepicker-rtl .ui-datepicker-group { float:right; }
|
||||||
|
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
|
||||||
|
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
|
||||||
|
|
||||||
|
/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
|
||||||
|
.ui-datepicker-cover {
|
||||||
|
display: none; /*sorry for IE5*/
|
||||||
|
display/**/: block; /*sorry for IE5*/
|
||||||
|
position: absolute; /*must have*/
|
||||||
|
z-index: -1; /*must have*/
|
||||||
|
filter: mask(); /*must have*/
|
||||||
|
top: -4px; /*must have*/
|
||||||
|
left: -4px; /*must have*/
|
||||||
|
width: 200px; /*must have*/
|
||||||
|
height: 200px; /*must have*/
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dialog
|
||||||
|
----------------------------------*/
|
||||||
|
.ui-dialog { position: relative; padding: 0px; width: 300px;}
|
||||||
|
.ui-dialog .ui-dialog-titlebar { padding: .3em .3em .1em .8em; font-size:.7em; position: relative; background-image: none; }
|
||||||
|
.ui-dialog .ui-dialog-title { float: left; margin: .1em 0 .2em;
|
||||||
|
font-family: 'Trebuchet MS';
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #ffffff;}
|
||||||
|
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .1em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
|
||||||
|
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
|
||||||
|
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { /*padding: 0;*/ }
|
||||||
|
.ui-dialog .ui-dialog-content { border: 0; padding: .5em .2em; background: none; overflow: auto; zoom: 1; background-color: #ffffff;}
|
||||||
|
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
|
||||||
|
.ui-dialog .ui-dialog-buttonpane button { float: right; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; width:auto; overflow:visible; }
|
||||||
|
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
|
||||||
|
.ui-draggable .ui-dialog-titlebar { cursor: move; background-color: #8f949a; border-bottom: 1px solid #d9d9d9;}
|
||||||
|
|
||||||
|
/* Progressbar
|
||||||
|
----------------------------------*/
|
||||||
|
.ui-progressbar { height:2em; text-align: left; }
|
||||||
|
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }/* Resizable
|
||||||
|
----------------------------------*/
|
||||||
|
.ui-resizable { position: relative;}
|
||||||
|
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
|
||||||
|
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
|
||||||
|
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }
|
||||||
|
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; }
|
||||||
|
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; }
|
||||||
|
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }
|
||||||
|
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
|
||||||
|
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
|
||||||
|
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
|
||||||
|
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}/* Slider
|
||||||
|
----------------------------------*/
|
||||||
|
.ui-slider { position: relative; text-align: left; }
|
||||||
|
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
|
||||||
|
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; }
|
||||||
|
|
||||||
|
.ui-slider-horizontal { height: .8em; }
|
||||||
|
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
|
||||||
|
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
|
||||||
|
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
|
||||||
|
.ui-slider-horizontal .ui-slider-range-max { right: 0; }
|
||||||
|
|
||||||
|
.ui-slider-vertical { width: .8em; height: 100px; }
|
||||||
|
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
|
||||||
|
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
|
||||||
|
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
|
||||||
|
.ui-slider-vertical .ui-slider-range-max { top: 0; }/* Tabs
|
||||||
|
----------------------------------*/
|
||||||
|
.ui-tabs { padding: .2em; zoom: 1; }
|
||||||
|
.ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .2em .2em 0; }
|
||||||
|
.ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .2em -1px 0; padding: 0; }
|
||||||
|
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .5em 1em; }
|
||||||
|
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; }
|
||||||
|
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
|
||||||
|
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
|
||||||
|
.ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0; background: none; }
|
||||||
|
.ui-tabs .ui-tabs-hide { display: none !important; }
|
||||||
|
/*
|
||||||
|
* jQuery UI CSS Framework
|
||||||
|
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
|
||||||
|
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
|
||||||
|
* To view and modify this theme, visit http://jqueryui.com/themeroller/
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/* Component containers
|
||||||
|
----------------------------------*/
|
||||||
|
.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; }
|
||||||
|
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; }
|
||||||
|
.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_glass_75_ffffff_1x400.png)/*{bgImgUrlContent}*/ 0/*{bgContentXPos}*/ 0/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; }
|
||||||
|
.ui-widget-content a { /*color: #222222*//*{fcContent}*/; }
|
||||||
|
.ui-widget-header { border: none /*1px solid #aaaaaa*//*{borderColorHeader}*/; background: #D3D3D3/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 0/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; color: #000000/*{fcHeader}*/; font-weight: bold; }
|
||||||
|
.ui-widget-header a { color: #222222/*{fcHeader}*/; }
|
||||||
|
|
||||||
|
/* Interaction states
|
||||||
|
----------------------------------*/
|
||||||
|
.ui-state-default, .ui-widget-content .ui-state-default { border: none /*1px solid #d3d3d3*//*{borderColorDefault}*/; /*background: #e6e6e6*//*{bgColorDefault}*/ /*url(images/ui-bg_glass_75_e6e6e6_1x400.png)*//*{bgImgUrlDefault}*/ /*0*//*{bgDefaultXPos}*/ /*50%*//*{bgDefaultYPos}*/ /*repeat-x*//*{bgDefaultRepeat}*/ font-weight: normal/*{fwDefault}*/; color: #555555/*{fcDefault}*/; outline: none; }
|
||||||
|
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555/*{fcDefault}*/; text-decoration: none; outline: none; }
|
||||||
|
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: none /*1px solid #999999*//*{borderColorHover}*/; /*background: #dadada*//*{bgColorHover}*/ /*url(images/ui-bg_glass_75_dadada_1x400.png)*//*{bgImgUrlHover}*/ /*0*//*{bgHoverXPos}*/ /*50%*//*{bgHoverYPos}*/ /*repeat-x*//*{bgHoverRepeat}*/ font-weight: normal/*{fwDefault}*/; color: #212121/*{fcHover}*/; outline: none; }
|
||||||
|
.ui-state-hover a, .ui-state-hover a:hover { color: #212121/*{fcHover}*/; text-decoration: none; outline: none; }
|
||||||
|
.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #aaaaaa/*{borderColorActive}*/; background: #ffffff/*{bgColorActive}*/ url(images/ui-bg_glass_65_ffffff_1x400.png)/*{bgImgUrlActive}*/ 0/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcActive}*/; outline: none; }
|
||||||
|
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121/*{fcActive}*/; outline: none; text-decoration: none; }
|
||||||
|
|
||||||
|
/* Interaction Cues
|
||||||
|
----------------------------------*/
|
||||||
|
.ui-state-highlight, .ui-widget-content .ui-state-highlight {border: 1px solid #fcefa1/*{borderColorHighlight}*/; background: #fbf9ee/*{bgColorHighlight}*/ url(images/ui-bg_glass_55_fbf9ee_1x400.png)/*{bgImgUrlHighlight}*/ 0/*{bgHighlightXPos}*/ 50%/*{bgHighlightYPos}*/ repeat-x/*{bgHighlightRepeat}*/; color: #363636/*{fcHighlight}*/; }
|
||||||
|
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a { color: #363636/*{fcHighlight}*/; }
|
||||||
|
.ui-state-error, .ui-widget-content .ui-state-error {border: 1px solid #cd0a0a/*{borderColorError}*/; background: #fef1ec/*{bgColorError}*/ url(images/ui-bg_inset-soft_95_fef1ec_1x100.png)/*{bgImgUrlError}*/ 0/*{bgErrorXPos}*/ 50%/*{bgErrorYPos}*/ repeat-x/*{bgErrorRepeat}*/; color: #cd0a0a/*{fcError}*/; }
|
||||||
|
.ui-state-error a, .ui-widget-content .ui-state-error a { color: #363636/*{fcError}*/; }
|
||||||
|
.ui-state-error-text, .ui-widget-content .ui-state-error-text { color: #cd0a0a/*{fcError}*/; }
|
||||||
|
.ui-state-disabled, .ui-widget-content .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
|
||||||
|
.ui-priority-primary, .ui-widget-content .ui-priority-primary { font-weight: bold; }
|
||||||
|
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
|
||||||
|
|
||||||
|
/* Icons
|
||||||
|
----------------------------------*/
|
||||||
|
|
||||||
|
/* states and images */
|
||||||
|
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
|
||||||
|
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
|
||||||
|
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_454545_256x240.png)/*{iconsHeader}*/; }
|
||||||
|
.ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png)/*{iconsDefault}*/; }
|
||||||
|
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_222222_256x240.png)/*{iconsHover}*/; }
|
||||||
|
.ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png)/*{iconsActive}*/; }
|
||||||
|
.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_2e83ff_256x240.png)/*{iconsHighlight}*/; }
|
||||||
|
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_cd0a0a_256x240.png)/*{iconsError}*/; }
|
||||||
|
|
||||||
|
/* positioning */
|
||||||
|
.ui-icon-carat-1-n { background-position: 0 0; }
|
||||||
|
.ui-icon-carat-1-ne { background-position: -16px 0; }
|
||||||
|
.ui-icon-carat-1-e { background-position: -32px 0; }
|
||||||
|
.ui-icon-carat-1-se { background-position: -48px 0; }
|
||||||
|
.ui-icon-carat-1-s { background-position: -64px 0; }
|
||||||
|
.ui-icon-carat-1-sw { background-position: -80px 0; }
|
||||||
|
.ui-icon-carat-1-w { background-position: -96px 0; }
|
||||||
|
.ui-icon-carat-1-nw { background-position: -112px 0; }
|
||||||
|
.ui-icon-carat-2-n-s { background-position: -128px 0; }
|
||||||
|
.ui-icon-carat-2-e-w { background-position: -144px 0; }
|
||||||
|
.ui-icon-triangle-1-n { background-position: 0 -16px; }
|
||||||
|
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
|
||||||
|
.ui-icon-triangle-1-e { background-position: -32px -16px; }
|
||||||
|
.ui-icon-triangle-1-se { background-position: -48px -16px; }
|
||||||
|
.ui-icon-triangle-1-s { background-position: -64px -16px; }
|
||||||
|
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
|
||||||
|
.ui-icon-triangle-1-w { background-position: -96px -16px; }
|
||||||
|
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
|
||||||
|
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
|
||||||
|
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
|
||||||
|
.ui-icon-arrow-1-n { background-position: 0 -32px; }
|
||||||
|
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
|
||||||
|
.ui-icon-arrow-1-e { background-position: -32px -32px; }
|
||||||
|
.ui-icon-arrow-1-se { background-position: -48px -32px; }
|
||||||
|
.ui-icon-arrow-1-s { background-position: -64px -32px; }
|
||||||
|
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
|
||||||
|
.ui-icon-arrow-1-w { background-position: -96px -32px; }
|
||||||
|
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
|
||||||
|
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
|
||||||
|
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
|
||||||
|
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
|
||||||
|
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
|
||||||
|
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
|
||||||
|
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
|
||||||
|
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
|
||||||
|
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
|
||||||
|
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
|
||||||
|
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
|
||||||
|
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
|
||||||
|
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
|
||||||
|
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
|
||||||
|
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
|
||||||
|
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
|
||||||
|
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
|
||||||
|
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
|
||||||
|
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
|
||||||
|
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
|
||||||
|
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
|
||||||
|
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
|
||||||
|
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
|
||||||
|
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
|
||||||
|
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
|
||||||
|
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
|
||||||
|
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
|
||||||
|
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
|
||||||
|
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
|
||||||
|
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
|
||||||
|
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
|
||||||
|
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
|
||||||
|
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
|
||||||
|
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
|
||||||
|
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
|
||||||
|
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
|
||||||
|
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
|
||||||
|
.ui-icon-arrow-4 { background-position: 0 -80px; }
|
||||||
|
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
|
||||||
|
.ui-icon-extlink { background-position: -32px -80px; }
|
||||||
|
.ui-icon-newwin { background-position: -48px -80px; }
|
||||||
|
.ui-icon-refresh { background-position: -64px -80px; }
|
||||||
|
.ui-icon-shuffle { background-position: -80px -80px; }
|
||||||
|
.ui-icon-transfer-e-w { background-position: -96px -80px; }
|
||||||
|
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
|
||||||
|
.ui-icon-folder-collapsed { background-position: 0 -96px; }
|
||||||
|
.ui-icon-folder-open { background-position: -16px -96px; }
|
||||||
|
.ui-icon-document { background-position: -32px -96px; }
|
||||||
|
.ui-icon-document-b { background-position: -48px -96px; }
|
||||||
|
.ui-icon-note { background-position: -64px -96px; }
|
||||||
|
.ui-icon-mail-closed { background-position: -80px -96px; }
|
||||||
|
.ui-icon-mail-open { background-position: -96px -96px; }
|
||||||
|
.ui-icon-suitcase { background-position: -112px -96px; }
|
||||||
|
.ui-icon-comment { background-position: -128px -96px; }
|
||||||
|
.ui-icon-person { background-position: -144px -96px; }
|
||||||
|
.ui-icon-print { background-position: -160px -96px; }
|
||||||
|
.ui-icon-trash { background-position: -176px -96px; }
|
||||||
|
.ui-icon-locked { background-position: -192px -96px; }
|
||||||
|
.ui-icon-unlocked { background-position: -208px -96px; }
|
||||||
|
.ui-icon-bookmark { background-position: -224px -96px; }
|
||||||
|
.ui-icon-tag { background-position: -240px -96px; }
|
||||||
|
.ui-icon-home { background-position: 0 -112px; }
|
||||||
|
.ui-icon-flag { background-position: -16px -112px; }
|
||||||
|
.ui-icon-calendar { background-position: -32px -112px; }
|
||||||
|
.ui-icon-cart { background-position: -48px -112px; }
|
||||||
|
.ui-icon-pencil { background-position: -64px -112px; }
|
||||||
|
.ui-icon-clock { background-position: -80px -112px; }
|
||||||
|
.ui-icon-disk { background-position: -96px -112px; }
|
||||||
|
.ui-icon-calculator { background-position: -112px -112px; }
|
||||||
|
.ui-icon-zoomin { background-position: -128px -112px; }
|
||||||
|
.ui-icon-zoomout { background-position: -144px -112px; }
|
||||||
|
.ui-icon-search { background-position: -160px -112px; }
|
||||||
|
.ui-icon-wrench { background-position: -176px -112px; }
|
||||||
|
.ui-icon-gear { background-position: -192px -112px; }
|
||||||
|
.ui-icon-heart { background-position: -208px -112px; }
|
||||||
|
.ui-icon-star { background-position: -224px -112px; }
|
||||||
|
.ui-icon-link { background-position: -240px -112px; }
|
||||||
|
.ui-icon-cancel { background-position: 0 -128px; }
|
||||||
|
.ui-icon-plus { background-position: -16px -128px; }
|
||||||
|
.ui-icon-plusthick { background-position: -32px -128px; }
|
||||||
|
.ui-icon-minus { background-position: -48px -128px; }
|
||||||
|
.ui-icon-minusthick { background-position: -64px -128px; }
|
||||||
|
.ui-icon-close { background-position: -80px -128px; }
|
||||||
|
.ui-icon-closethick { background-position: -96px -128px; }
|
||||||
|
.ui-icon-key { background-position: -112px -128px; }
|
||||||
|
.ui-icon-lightbulb { background-position: -128px -128px; }
|
||||||
|
.ui-icon-scissors { background-position: -144px -128px; }
|
||||||
|
.ui-icon-clipboard { background-position: -160px -128px; }
|
||||||
|
.ui-icon-copy { background-position: -176px -128px; }
|
||||||
|
.ui-icon-contact { background-position: -192px -128px; }
|
||||||
|
.ui-icon-image { background-position: -208px -128px; }
|
||||||
|
.ui-icon-video { background-position: -224px -128px; }
|
||||||
|
.ui-icon-script { background-position: -240px -128px; }
|
||||||
|
.ui-icon-alert { background-position: 0 -144px; }
|
||||||
|
.ui-icon-info { background-position: -16px -144px; }
|
||||||
|
.ui-icon-notice { background-position: -32px -144px; }
|
||||||
|
.ui-icon-help { background-position: -48px -144px; }
|
||||||
|
.ui-icon-check { background-position: -64px -144px; }
|
||||||
|
.ui-icon-bullet { background-position: -80px -144px; }
|
||||||
|
.ui-icon-radio-off { background-position: -96px -144px; }
|
||||||
|
.ui-icon-radio-on { background-position: -112px -144px; }
|
||||||
|
.ui-icon-pin-w { background-position: -128px -144px; }
|
||||||
|
.ui-icon-pin-s { background-position: -144px -144px; }
|
||||||
|
.ui-icon-play { background-position: 0 -160px; }
|
||||||
|
.ui-icon-pause { background-position: -16px -160px; }
|
||||||
|
.ui-icon-seek-next { background-position: -32px -160px; }
|
||||||
|
.ui-icon-seek-prev { background-position: -48px -160px; }
|
||||||
|
.ui-icon-seek-end { background-position: -64px -160px; }
|
||||||
|
.ui-icon-seek-first { background-position: -80px -160px; }
|
||||||
|
.ui-icon-stop { background-position: -96px -160px; }
|
||||||
|
.ui-icon-eject { background-position: -112px -160px; }
|
||||||
|
.ui-icon-volume-off { background-position: -128px -160px; }
|
||||||
|
.ui-icon-volume-on { background-position: -144px -160px; }
|
||||||
|
.ui-icon-power { background-position: 0 -176px; }
|
||||||
|
.ui-icon-signal-diag { background-position: -16px -176px; }
|
||||||
|
.ui-icon-signal { background-position: -32px -176px; }
|
||||||
|
.ui-icon-battery-0 { background-position: -48px -176px; }
|
||||||
|
.ui-icon-battery-1 { background-position: -64px -176px; }
|
||||||
|
.ui-icon-battery-2 { background-position: -80px -176px; }
|
||||||
|
.ui-icon-battery-3 { background-position: -96px -176px; }
|
||||||
|
.ui-icon-circle-plus { background-position: 0 -192px; }
|
||||||
|
.ui-icon-circle-minus { background-position: -16px -192px; }
|
||||||
|
.ui-icon-circle-close { background-position: -32px -192px; }
|
||||||
|
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
|
||||||
|
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
|
||||||
|
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
|
||||||
|
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
|
||||||
|
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
|
||||||
|
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
|
||||||
|
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
|
||||||
|
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
|
||||||
|
.ui-icon-circle-zoomin { background-position: -176px -192px; }
|
||||||
|
.ui-icon-circle-zoomout { background-position: -192px -192px; }
|
||||||
|
.ui-icon-circle-check { background-position: -208px -192px; }
|
||||||
|
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
|
||||||
|
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
|
||||||
|
.ui-icon-circlesmall-close { background-position: -32px -208px; }
|
||||||
|
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
|
||||||
|
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
|
||||||
|
.ui-icon-squaresmall-close { background-position: -80px -208px; }
|
||||||
|
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
|
||||||
|
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
|
||||||
|
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
|
||||||
|
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
|
||||||
|
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
|
||||||
|
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
|
||||||
|
|
||||||
|
|
||||||
|
/* Misc visuals
|
||||||
|
----------------------------------*/
|
||||||
|
|
||||||
|
/* Corner radius */
|
||||||
|
.ui-corner-tl { -moz-border-radius-topleft: 4px/*{cornerRadius}*/; -webkit-border-top-left-radius: 4px/*{cornerRadius}*/; }
|
||||||
|
.ui-corner-tr { -moz-border-radius-topright: 4px/*{cornerRadius}*/; -webkit-border-top-right-radius: 4px/*{cornerRadius}*/; }
|
||||||
|
.ui-corner-bl { -moz-border-radius-bottomleft: 4px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/; }
|
||||||
|
.ui-corner-br { -moz-border-radius-bottomright: 4px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/; }
|
||||||
|
.ui-corner-top { -moz-border-radius-topleft: 4px/*{cornerRadius}*/; -webkit-border-top-left-radius: 4px/*{cornerRadius}*/; -moz-border-radius-topright: 4px/*{cornerRadius}*/; -webkit-border-top-right-radius: 4px/*{cornerRadius}*/; }
|
||||||
|
.ui-corner-bottom { -moz-border-radius-bottomleft: 4px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/; -moz-border-radius-bottomright: 4px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/; }
|
||||||
|
.ui-corner-right { -moz-border-radius-topright: 4px/*{cornerRadius}*/; -webkit-border-top-right-radius: 4px/*{cornerRadius}*/; -moz-border-radius-bottomright: 4px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/; }
|
||||||
|
.ui-corner-left { -moz-border-radius-topleft: 4px/*{cornerRadius}*/; -webkit-border-top-left-radius: 4px/*{cornerRadius}*/; -moz-border-radius-bottomleft: 4px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/; }
|
||||||
|
.ui-corner-all { -moz-border-radius: 0px/*{cornerRadius}*/; -webkit-border-radius: 0px/*{cornerRadius}*/; }
|
||||||
|
|
||||||
|
/* Overlays */
|
||||||
|
.ui-widget-overlay { background: #aaaaaa/*{bgColorOverlay}*/ none/*{bgImgUrlOverlay}*/ 0/*{bgOverlayXPos}*/ 0/*{bgOverlayYPos}*/ repeat-x/*{bgOverlayRepeat}*/; opacity: .3;filter:Alpha(Opacity=30)/*{opacityOverlay}*/; }
|
||||||
|
.ui-widget-shadow { margin: -4px/*{offsetTopShadow}*/ 0 0 -4px/*{offsetLeftShadow}*/; padding: 4px/*{thicknessShadow}*/; background: #aaaaaa/*{bgColorShadow}*/ none/*{bgImgUrlShadow}*/ 0/*{bgShadowXPos}*/ 0/*{bgShadowYPos}*/ repeat-x/*{bgShadowRepeat}*/; opacity: .35;filter:Alpha(Opacity=35)/*{opacityShadow}*/; -moz-border-radius: 4px/*{cornerRadiusShadow}*/; -webkit-border-radius: 4px/*{cornerRadiusShadow}*/; }
|
||||||
12
src/resources/css/previewfonts.css
Normal file
12
src/resources/css/previewfonts.css
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url('previewfonts/SourceSansPro-Regular.woff2') format('woff2'), url('previewfonts/SourceSansPro-Regular.woff') format('woff');
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Source Sans Pro Semibold';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url('previewfonts/SourceSansPro-Semibold.woff2') format('woff2'), url('previewfonts/SourceSansPro-Semibold.woff') format('woff');
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
Copyright 2010, 2012, 2014 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name ‘Source’.
|
||||||
|
|
||||||
|
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||||
|
This license is copied below, and is also available with a FAQ at:
|
||||||
|
http://scripts.sil.org/OFL
|
||||||
|
|
||||||
|
|
||||||
|
-----------------------------------------------------------
|
||||||
|
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||||
|
-----------------------------------------------------------
|
||||||
|
|
||||||
|
PREAMBLE
|
||||||
|
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||||
|
development of collaborative font projects, to support the font creation
|
||||||
|
efforts of academic and linguistic communities, and to provide a free and
|
||||||
|
open framework in which fonts may be shared and improved in partnership
|
||||||
|
with others.
|
||||||
|
|
||||||
|
The OFL allows the licensed fonts to be used, studied, modified and
|
||||||
|
redistributed freely as long as they are not sold by themselves. The
|
||||||
|
fonts, including any derivative works, can be bundled, embedded,
|
||||||
|
redistributed and/or sold with any software provided that any reserved
|
||||||
|
names are not used by derivative works. The fonts and derivatives,
|
||||||
|
however, cannot be released under any other type of license. The
|
||||||
|
requirement for fonts to remain under this license does not apply
|
||||||
|
to any document created using the fonts or their derivatives.
|
||||||
|
|
||||||
|
DEFINITIONS
|
||||||
|
"Font Software" refers to the set of files released by the Copyright
|
||||||
|
Holder(s) under this license and clearly marked as such. This may
|
||||||
|
include source files, build scripts and documentation.
|
||||||
|
|
||||||
|
"Reserved Font Name" refers to any names specified as such after the
|
||||||
|
copyright statement(s).
|
||||||
|
|
||||||
|
"Original Version" refers to the collection of Font Software components as
|
||||||
|
distributed by the Copyright Holder(s).
|
||||||
|
|
||||||
|
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||||
|
or substituting -- in part or in whole -- any of the components of the
|
||||||
|
Original Version, by changing formats or by porting the Font Software to a
|
||||||
|
new environment.
|
||||||
|
|
||||||
|
"Author" refers to any designer, engineer, programmer, technical
|
||||||
|
writer or other person who contributed to the Font Software.
|
||||||
|
|
||||||
|
PERMISSION & CONDITIONS
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining
|
||||||
|
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||||
|
redistribute, and sell modified and unmodified copies of the Font
|
||||||
|
Software, subject to the following conditions:
|
||||||
|
|
||||||
|
1) Neither the Font Software nor any of its individual components,
|
||||||
|
in Original or Modified Versions, may be sold by itself.
|
||||||
|
|
||||||
|
2) Original or Modified Versions of the Font Software may be bundled,
|
||||||
|
redistributed and/or sold with any software, provided that each copy
|
||||||
|
contains the above copyright notice and this license. These can be
|
||||||
|
included either as stand-alone text files, human-readable headers or
|
||||||
|
in the appropriate machine-readable metadata fields within text or
|
||||||
|
binary files as long as those fields can be easily viewed by the user.
|
||||||
|
|
||||||
|
3) No Modified Version of the Font Software may use the Reserved Font
|
||||||
|
Name(s) unless explicit written permission is granted by the corresponding
|
||||||
|
Copyright Holder. This restriction only applies to the primary font name as
|
||||||
|
presented to the users.
|
||||||
|
|
||||||
|
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||||
|
Software shall not be used to promote, endorse or advertise any
|
||||||
|
Modified Version, except to acknowledge the contribution(s) of the
|
||||||
|
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||||
|
permission.
|
||||||
|
|
||||||
|
5) The Font Software, modified or unmodified, in part or in whole,
|
||||||
|
must be distributed entirely under this license, and must not be
|
||||||
|
distributed under any other license. The requirement for fonts to
|
||||||
|
remain under this license does not apply to any document created
|
||||||
|
using the Font Software.
|
||||||
|
|
||||||
|
TERMINATION
|
||||||
|
This license becomes null and void if any of the above conditions are
|
||||||
|
not met.
|
||||||
|
|
||||||
|
DISCLAIMER
|
||||||
|
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||||
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||||
|
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||||
|
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||||
|
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||||
|
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||||
|
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||||
BIN
src/resources/css/previewfonts/SourceSansPro-Regular.woff2
Normal file
BIN
src/resources/css/previewfonts/SourceSansPro-Regular.woff2
Normal file
Binary file not shown.
BIN
src/resources/css/previewfonts/SourceSansPro-Semibold.woff2
Normal file
BIN
src/resources/css/previewfonts/SourceSansPro-Semibold.woff2
Normal file
Binary file not shown.
24
src/resources/css/reset.css
Normal file
24
src/resources/css/reset.css
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
html,body,div,span,
|
||||||
|
applet,object,iframe,
|
||||||
|
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
|
||||||
|
a,abbr,acronym,address,big,cite,code,
|
||||||
|
del,dfn,em,font,img,ins,kbd,q,s,samp,
|
||||||
|
small,strike,strong,sub,sup,tt,var,
|
||||||
|
dd,dl,dt,li,ol,ul,
|
||||||
|
fieldset,form,label,legend,
|
||||||
|
table,caption,tbody,tfoot,thead,tr,th,td {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
ol,ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
q:before,q:after,
|
||||||
|
blockquote:before,blockquote:after {
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
60
src/resources/expand.html
Normal file
60
src/resources/expand.html
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title></title>
|
||||||
|
<link type="text/css" href="css/default.css" rel="Stylesheet" />
|
||||||
|
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
|
||||||
|
<script type="text/javascript" src="scripts/messagecenter.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
<!--
|
||||||
|
$(document).ready(function () {
|
||||||
|
$axure.messageCenter.addMessageListener(messageCenter_message);
|
||||||
|
function messageCenter_message(message, data) {
|
||||||
|
if(message == 'collapseFrameOnLoad') {
|
||||||
|
setTimeout(function() {
|
||||||
|
$('#maximizePanel').animate({
|
||||||
|
left:'-' + maxPanelWidth + 'px'
|
||||||
|
}, 300);
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$axure.messageCenter.postMessage('getCollapseFrameOnLoad');
|
||||||
|
|
||||||
|
if(MOBILE_DEVICE) {
|
||||||
|
$('#maximizePanel').height('45px');
|
||||||
|
}
|
||||||
|
var maxPanelWidth = $('#maximizePanel').width();
|
||||||
|
|
||||||
|
$('#maximizePanel').click(function () {
|
||||||
|
$(this).removeClass('maximizePanelOver');
|
||||||
|
$axure.messageCenter.postMessage('expandFrame');
|
||||||
|
});
|
||||||
|
|
||||||
|
if(!MOBILE_DEVICE) {
|
||||||
|
$('#maximizePanel').mouseenter(function() {
|
||||||
|
$(this).addClass('maximizePanelOver');
|
||||||
|
});
|
||||||
|
$('#maximizePanel').mouseleave(function() {
|
||||||
|
if($(this).hasClass('maximizePanelOver')) {
|
||||||
|
$(this).animate({
|
||||||
|
left:'-' + maxPanelWidth + 'px'
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
$(this).removeClass('maximizePanelOver');
|
||||||
|
});
|
||||||
|
$('#maximizePanelOver').mouseenter(function() {
|
||||||
|
$('#maximizePanel').animate({
|
||||||
|
left:'0px'
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
--></script>
|
||||||
|
</head>
|
||||||
|
<body style="background-color: transparent;">
|
||||||
|
<div id="maximizePanelOver">
|
||||||
|
<div id="maximizePanel" class="maximizePanel" title="Expand">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1
src/resources/images/axure9_logo.svg
Normal file
1
src/resources/images/axure9_logo.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg height="14" viewBox="0 0 50 14" width="50" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="#3f4040"><path d="m6.7827 7.0792v2.741c-.866.119-2.101.146-2.521.146-1.998 0-2.09-.542-2.09-1.581 0-1.013.345-1.306 1.541-1.306zm-2.619-6.916c-.624 0-1.476.017-2.547.147l-.056.012c-.367.105-.561.358-.561.731v.432c0 .445.287.732.733.732h2.431c1.885 0 2.619.476 2.619 1.698v1.13h-3.07c-2.568 0-3.713 1.03-3.713 3.34 0 2.568 1.184 3.615 4.085 3.615 1.159 0 3.295-.091 4.09-.334.504-.14.76-.472.76-.987v-6.881c0-2.446-1.561-3.635-4.771-3.635z" transform="translate(0 .8362)"/><path d="m8.6973.3014h-.686c-.425 0-.733.308-.733.732v8.913h-2.717c-1.659 0-2.345 0-2.345-2.796v-6.117c0-.424-.309-.732-.733-.732h-.667c-.429 0-.752.315-.752.732v6.117c0 4.1 1.56 4.85 4.633 4.85 1.101 0 2.608 0 4.057-.205l.039-.008c.526-.132.636-.473.636-.736v-10.018c0-.424-.308-.732-.732-.732" transform="translate(22 .8362)"/><path d="m5.2529.3297-.062-.017c-.411-.086-1.525-.149-2.076-.149-2.549 0-3.085 1.348-3.085 2.478v8.527c0 .425.308.733.733.733h.686c.425 0 .733-.308.733-.733v-8.371c0-.272 0-.58 1.11-.58l1.688-.003c.206.026.402-.032.553-.161.165-.14.256-.342.256-.569v-.431c0-.341-.201-.611-.536-.724" transform="translate(34 .8362)"/><path d="m5.4444.1637c-2.024 0-3.174.399-3.843 1.335-.691.966-.83 2.466-.83 4.574 0 4.099.675 5.927 4.673 5.927.472 0 2.083-.009 3.032-.125.443-.073.641-.417.641-.725v-.451c0-.429-.323-.752-.752-.752h-2.921c-2.113 0-2.466-.47-2.521-3.345v-.958c.018-2.946.372-3.426 2.521-3.426 1.957 0 2.317.406 2.393 2.867h-3.282v2.073h4.457c.451 0 .988-.161.988-.929v-.576c-.063-4.207-1.127-5.489-4.556-5.489" transform="translate(40 .8362)"/></g><path d="m19.9341 1.496c-.111-.237-.346-.378-.629-.378h-.882c-.305 0-.543.128-.661.349l-1.362 1.994 1.314 1.802 2.101-3.022c.269-.328.173-.63.119-.745" fill="#74bb11"/><path d="m13.0293 1.4428-.003-.004c-.159-.213-.382-.321-.661-.321h-.862c-.274 0-.498.128-.618.351-.121.227-.098.498.068.746l3.139 4.361-3.621 5.062c-.157.237-.178.503-.056.73.119.223.344.351.617.351h.882c.274 0 .522-.144.636-.36l4.172-5.762z" fill="#009cd9"/><path d="m20.3711 11.6977-2.687-3.699-1.296 1.793 2.109 2.822.086.038c.105.045.206.067.31.067h.863c.257 0 .476-.117.601-.32.128-.207.134-.462.014-.701" fill="#eb2084"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/resources/images/axure_logo.png
Normal file
BIN
src/resources/images/axure_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
18
src/resources/images/axure_logo.svg
Normal file
18
src/resources/images/axure_logo.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="52px" height="12px" viewBox="0 0 52 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>axure_logo</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="updated_header-copy" transform="translate(-1371.000000, -12.000000)" fill="#3D4557">
|
||||||
|
<g id="axure_logo" transform="translate(1371.000000, 12.000000)">
|
||||||
|
<path d="M23.6337569,0.211361346 L19.4142734,6.12413879 C20.5929844,7.76544547 22.4073623,10.3236224 23.4927644,11.7946181 L20.5223167,11.7946181 L17.9762186,8.20017753 C17.1271762,9.43098196 16.2788199,10.5887458 15.4297775,11.7946181 L12.5066702,11.7946181 L16.5141504,6.12413879 C15.1944469,4.24193858 13.6623971,2.1427235 12.3420075,0.211361346 L15.2884419,0.211361346 L17.9762186,4.04915352 L20.6633092,0.211361346 L23.6337569,0.211361346 Z" id="Fill-5-Copy-124"></path>
|
||||||
|
<path d="M11.6136895,6.03116989 L11.6136895,11.8575336 L9.24336066,11.8575336 L9.24336066,10.4558287 C8.49296706,11.4226674 7.06182513,12.0035446 5.7952372,12.0035446 C2.6052109,12.0035446 0,9.31940634 0,6.03116989 C0,2.74293344 2.6052109,0.0591470426 5.7952372,0.0591470426 C7.06182513,0.0591470426 8.49296706,0.638265082 9.24336066,1.60580737 L9.24336066,0.228027151 L11.6136895,0.228027151 L11.6136895,6.03116989 L11.6136895,6.03116989 Z M5.7952372,9.56146783 C7.69648468,9.56146783 9.24336066,7.98841998 9.24336066,6.03116989 C9.24336066,4.07216063 7.69648468,2.50052012 5.7952372,2.50052012 C3.89467252,2.50052012 2.34745514,4.07216063 2.34745514,6.03116989 C2.34745514,7.98841998 3.89467252,9.56146783 5.7952372,9.56146783 L5.7952372,9.56146783 Z" id="Fill-1-Copy-126"></path>
|
||||||
|
<path d="M33.9017123,11.8397627 L31.548487,11.8397627 L31.548487,10.8706411 C31.0307226,11.6705454 29.8537675,12.0086274 29.006579,12.0086274 C25.8999928,12.0086274 24.0885024,9.73230222 24.0885024,6.9218849 L24.0885024,0.211361346 L26.4413853,0.211361346 L26.4413853,6.9218849 C26.4413853,8.39971598 27.5477984,9.56237985 29.006579,9.56237985 C30.39516,9.56237985 31.4776026,8.4233359 31.548487,6.99485986 L31.548487,0.211361346 L33.9017123,0.211361346 L33.9017123,11.8397627" id="Fill-2-Copy-128"></path>
|
||||||
|
<path d="M37.4691032,5.23094818 L37.4691032,11.7946181 L35.1006626,11.7946181 L35.1006626,0.211361346 L37.4691032,0.211361346 L37.4691032,1.27329157 C37.8195915,0.596591985 39.2986725,0.211361346 40.307478,0.211361346 L40.7524991,0.211361346 L40.7524991,2.67269366 L40.307478,2.67269366 C39.2747833,2.67269366 37.4691032,3.1548465 37.4691032,5.23094818" id="Fill-3-Copy-125"></path>
|
||||||
|
<path d="M50.9313232,9.28841829 C49.5903307,11.130254 47.7551081,11.8564131 46.1557058,11.8564131 C43.004476,11.8564131 40.4405722,9.21685989 40.4405722,5.9706465 C40.4405722,2.6997578 43.004476,0.0591470426 46.1557058,0.0591470426 C49.8254664,0.0591470426 52.6002052,3.64482221 51.7777435,7.32743609 L42.9805175,7.32743609 C43.404241,8.63452255 44.8150555,9.60390976 46.1557058,9.60390976 C47.1670976,9.60390976 47.7082178,9.26480049 48.3208714,8.73181378 L50.9313232,9.28841829 L50.9313232,9.28841829 Z M42.910011,4.97693648 L49.3794957,4.97693648 C48.9554299,3.57220629 47.6616699,2.48155755 46.1557058,2.48155755 C44.6976588,2.48155755 43.3806247,3.6201469 42.910011,4.97693648 L42.910011,4.97693648 Z" id="Fill-4-Copy-124"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.5 KiB |
3
src/resources/images/caret_down.svg
Normal file
3
src/resources/images/caret_down.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 10 5">
|
||||||
|
<path fill="#666" fill-rule="evenodd" d="M10 0L5 5 0 0h2l3 3 3-3z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 162 B |
3
src/resources/images/caret_down_off.svg
Normal file
3
src/resources/images/caret_down_off.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 10 5">
|
||||||
|
<path fill="#008DCB" fill-rule="evenodd" d="M10 0L5 5 0 0h2l3 3 3-3z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 164 B |
6
src/resources/images/close_x.svg
Normal file
6
src/resources/images/close_x.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="8" viewBox="0 0 9 8">
|
||||||
|
<g fill="#666" fill-rule="evenodd">
|
||||||
|
<path d="M7.682.11l.707.708-7.071 7.071-.707-.707z"/>
|
||||||
|
<path d="M8.39 7.182l-.708.707L.611.818l.707-.707z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 260 B |
6
src/resources/images/close_x_minimize.svg
Normal file
6
src/resources/images/close_x_minimize.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9">
|
||||||
|
<g fill="#6D6D6D" fill-rule="evenodd">
|
||||||
|
<path d="M7.018-.053l1.178 1.178-7.07 7.071-1.18-1.178z"/>
|
||||||
|
<path d="M1.125-.053l7.07 7.07-1.178 1.18-7.071-7.072z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 272 B |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user