@ajaxjs/ui 1.0.7 → 1.1.2

package/src/views/desktop/Desktop.vue

@@ -1,251 +0,0 @@
-<template>
-  <div>
-
-  </div>
-</template>
-
-<script>
-// new Vue({
-//   el: ".stage",
-// });
-
-// var box = aj(".window");
-// var dragBar = box.$("h1");
-// // 鼠标按下的函数
-// dragBar.onmousedown = function (oEvent) {
-//   // 求出鼠标和box的位置差值
-//   var x = oEvent.clientX - box.offsetLeft;
-//   var y = oEvent.clientY - box.offsetTop;
-
-//   // 鼠标移动的函数
-//   // 把事件加在document上，解决因为鼠标移动太快时，
-//   // 鼠标超过box后就没有了拖拽的效果的问题
-//   document.onmousemove = function (oEvent) {
-//     // 只能拖动窗口标题才能移动
-//     if (oEvent.target != dragBar) {
-//       // return;
-//     }
-
-//     // 保证拖拽框一直保持在浏览器窗口内部，不能被拖出的浏览器窗口的范围
-//     var l = oEvent.clientX - x,
-//       t = oEvent.clientY - y;
-//     var doc = document.documentElement;
-
-//     if (l < 0) {
-//       l = 0;
-//     } else if (l > doc.clientWidth - box.offsetWidth) {
-//       l = doc.clientWidth - box.offsetWidth;
-//     }
-
-//     if (t < 0) {
-//       t = 0;
-//     } else if (t > doc.clientHeight - box.offsetHeight) {
-//       t = doc.clientHeight - box.offsetHeight;
-//     }
-
-//     box.style.left = l + "px";
-//     box.style.top = t + "px";
-//   };
-
-//   // 鼠标抬起的函数
-//   document.onmouseup = function () {
-//     document.onmousemove = document.onmouseup = null;
-//   };
-
-//   // 火狐浏览器在拖拽空div时会出现bug
-//   // return false阻止默认事件，解决火狐的bug
-//   return false;
-// };
-
-// var el = document.body,
-//   mask = aj(".mask");
-
-// el.onmousedown = (e) => {
-//   var startX = e.clientX,
-//     startY = e.clientY;
-//   // setXY.call(mask, startX, startY);
-
-//   el.onmousemove = (e) => {
-//     var x = e.clientX,
-//       y = e.clientY;
-//     // setSize.call(mask, x - startX, y - startY);
-//   };
-
-//   // 鼠标抬起的函数
-//   el.onmouseup = () => {
-//     // setSize.call(mask, 0, 0);
-//     el.onmousemove = el.onmouseup = null;
-//   };
-
-//   return false;
-// };
-
-// // 判断浏览器是否缩放 getScreenScaleNum() == 100
-// function getScreenScaleNum() {
-//   var e = 0,
-//     i = window.screen;
-
-//   return (
-//     void 0 !== window.devicePixelRatio
-//       ? (e = window.devicePixelRatio)
-//       : ~this.ua.indexOf("msie")
-//       ? i.deviceXDPI && i.logicalXDPI && (e = i.deviceXDPI / i.logicalXDPI)
-//       : void 0 !== window.outerWidth &&
-//         void 0 !== window.innerWidth &&
-//         (e = window.outerWidth / window.innerWidth),
-//     e && (e = Math.round(100 * e)),
-//     (99 !== e && 101 !== e) || (e = 100),
-//     e
-//   );
-// }
-</script>
-
-<style lang="less" scoped>
-body {
-  overflow: hidden;
-  & > .stage {
-    height: 96vh;
-    background-color: #007cbf;
-    width: 100%;
-  }
-
-  & > menu {
-    width: 100%;
-    height: 4vh;
-    line-height: 4vh;
-    box-sizing: border-box;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    margin: 0;
-    border-top: 1px solid white;
-    background-image: linear-gradient(
-      93deg,
-      #d1ede9,
-      #c1e9e3 3%,
-      #b1e4dc 12%,
-      #6ea0ce 90%,
-      #2a5cbf
-    );
-    padding: 0;
-    & > .button {
-      margin-top: 5px;
-      margin-left: 10px;
-      cursor: pointer;
-      width: 80px;
-      height: 15px;
-      font-size: 14px;
-      line-height: 15px;
-      padding: 5px 10px 3px;
-      border-radius: 16px;
-      border: 2px solid #ccc;
-      position: relative;
-      color: #fff;
-      text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
-      text-align: center;
-      vertical-align: middle;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      background-color: rgba(60, 132, 198, 0.8);
-      border-top-color: #8ba2c1;
-      border-right-color: #5890bf;
-      border-bottom-color: #4f93ca;
-      border-left-color: #768fa5;
-      box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
-      background-image: -webkit-gradient(
-        linear,
-        0% 0%,
-        0% 90%,
-        from(rgba(28, 91, 155, 0.8)),
-        to(rgba(108, 191, 255, 0.9))
-      );
-      .glare {
-        position: absolute;
-        top: 0;
-        left: 5px;
-        -webkit-border-radius: 8px;
-        -moz-border-radius: 8px;
-        height: 1px;
-        width: 90%;
-        padding: 8px 0;
-        background-color: rgba(255, 255, 255, 0.25);
-        background-image: -webkit-gradient(
-          linear,
-          0% 0%,
-          0% 95%,
-          from(rgba(255, 255, 255, 0.7)),
-          to(rgba(255, 255, 255, 0))
-        );
-      }
-    }
-  }
-}
-
-.window {
-  width: 500px;
-  height: 400px;
-  background-color: #c3d8ed;
-  position: fixed;
-  padding: 1%;
-  top: 10%;
-  left: 10%;
-  border-radius: 1%;
-  border: 1px solid gray;
-  border-top-color: white;
-  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
-  box-sizing: border-box;
-  & > header {
-    background-image: line-gradient(to left, red, white);
-    h1 {
-      font-size: 1rem;
-    }
-
-    & > div {
-      float: right;
-      div {
-        width: 15px;
-        height: 10px;
-        border: 1px solid gray;
-        border-radius: 3px;
-        padding: 5px;
-        text-align: center;
-        cursor: pointer;
-        color: white;
-        margin-left: 10px;
-        font-size: 23px;
-        line-height: 10px;
-        float: left;
-        background-image: -webkit-gradient(
-          linear,
-          0% 0%,
-          0% 90%,
-          from(rgba(220, 228, 236, 0.8)),
-          to(rgba(185, 225, 255, 0.9))
-        );
-        text-shadow: 0 1px black, 1px 0 black, -1px 0 black, 0 -1px black;
-        &.max {
-          font-size: 14px;
-        }
-      }
-    }
-  }
-
-  & > div {
-    background-color: white;
-    height: 96%;
-    border: 1px solid #666;
-    iframe {
-      border: 0;
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-
-.mask {
-  position: fixed;
-  background-color: rgba(255, 255, 255, 0.5);
-  border: 1px solid blue;
-}
-</style>

package/src/views/desktop/Window.vue

@@ -1,62 +0,0 @@
-<template>
-  <div class="window">
-    <header>
-      <div>
-        <div class="min" @click="min">&#8259;</div>
-        <div class="max" @click="max">{{isMax ? '&#10696;' : '☐'}}</div>
-        <div class="close">×</div>
-      </div>
-      <h1>{{title}}</h1>
-    </header>
-    <div>
-      <iframe src="http://qq.com"></iframe>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-/**
- * 展开闭合器
- */
-export default {
-  data(): {} {
-    return {
-      title: "This is a windows",
-      isMax: false,
-      notMaxSize: { w: 0, h: 0 },
-      notMaxXY: { x: 0, y: 0 },
-    };
-  },
-  methods: {
-    max(): void {
-      if (!this.isMax) {
-        this.notMaxSize.w = this.$el.clientWidth;
-        this.notMaxSize.h = this.$el.clientHeight;
-
-        setXY.call(this.$el, 0, 0);
-
-        this.$el.style.height = "100%";
-        this.$el.style.width = "100%";
-      } else {
-        setSize.call(this.$el, this.notMaxSize.h, this.notMaxSize.w);
-      }
-
-      this.isMax = !this.isMax;
-    },
-    // min() {},
-  },
-};
-
-function setXY(x: number, y: number): void {
-  this.style.left = x + "px";
-  this.style.top = y + "px";
-}
-
-function setSize(h: number, w: number): void {
-  this.style.height = h + "px";
-  this.style.width = w + "px";
-}
-</script>
-
-<style lang="less" scoped>
-</style>

package/src/views/desktop/desktop.md

@@ -1,14 +0,0 @@
-## 智能修改窗口的位置
-调整浏览器尺寸后，窗体消失
-
-出现这问题的原因也很简单，因为窗口的top、left的值是写死的，当浏览器的宽高小于窗口top、left时，必然会被隐藏掉。解决办法就是在调整浏览器尺寸的同时，把窗口的top、left也一起修改，但是具体要修改成多少呢？
-
-　　经过自己的考虑和他人的指点，最终的解决办法就是按比例修改，也就是按当时窗口离左/右、上/下的距离与整个窗口大小的比例进行缩放，说的可能有点迷糊，不如看下修改公式吧：
-
-　　top = 浏览器缩放前窗口上边距 / ( 浏览器缩放前高度 - 浏览器缩放前窗口高度 ) * ( 浏览器缩放后高度 - 浏览器缩放后窗口高度 );
-　　left = 浏览器缩放前窗口左边距 / ( 浏览器缩放前宽度 - 浏览器缩放前窗口宽度 ) * ( 浏览器缩放后宽度 - 浏览器缩放后窗口宽度 );
-
-
-##窗口超级预览
-复制一份蓝色窗口到预览区，transform:scale()
-https://www.cnblogs.com/hooray/archive/2011/12/29/2305654.html

package/tsconfig.json

@@ -1,30 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "strict": false,
-    "jsx": "preserve",
-    "importHelpers": true,
-    "moduleResolution": "node",
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "sourceMap": true,
-    "baseUrl": ".",
-    "outDir": "./dist",
-    "types": ["webpack-env"],
-    "paths": {
-      "@/*": ["src/*"]
-    },
-    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
-  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue",
-    "tests/**/*.ts",
-    "tests/**/*.tsx"
-  ],
-
-  "exclude": ["node_modules", "dist"]
-}

package/vue.config.js

@@ -1,17 +0,0 @@
-var path = require("path");
-
-module.exports = {
-    pluginOptions: {
-        'style-resources-loader': {
-            preProcessor: 'less',
-            patterns: [path.resolve(__dirname, './src/style/common-functions.less')]
-        }
-    },
-    lintOnSave: true,
-    devServer: {
-        overlay: {
-            warnings: true,
-            error: true
-        }
-    }
-};