Cleaned demo

2025-10-29 18:00:20 +00:00 · 2017-04-09 13:37:14 +01:00
parent 45bba6dfcd
commit d165145124
6 changed files with 184 additions and 119 deletions
--- a/demo/index.html
+++ b/demo/index.html
@@ -13,15 +13,17 @@

      ga('create', 'UA-80822945-4', 'auto');
      ga('send', 'pageview');
-
    </script>
  </head>
  <body>
-    <a href="https://github.com/euvl/vue-js-modal">
-      <img style="position: absolute; top: 0; right: 0; border: 0;"
-           src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67"
-           alt="Fork me on GitHub"
-          data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
+    <div style="position: absolute; right: 0; top: 20px">
+      <iframe
+        src="https://ghbtns.com/github-btn.html?user=euvl&repo=vue-js-modal&type=star&count=true"
+        frameborder="0"
+        scrolling="0"
+        width="94px"
+        height="20px"></iframe>
+    </div>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -61,88 +61,23 @@
    <button @click="show(false, false, true)">Draggable (under development)</button>
  </div>

-  <table class="props">
-    <thead>
-      <tr>
-        <th>Name</th>
-        <th>Type</th>
-        <th>Default</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="(prop, name) in props">
-        <td>
-          {{name}}
-        </td>
-        <td>
-          <template v-if="Array.isArray(prop.type)">
-            <span v-for="type in prop.type">
-              {{type.name}} /
-            </span>
-          </template>
-          <template v-else>
-            <span>{{prop.type.name}}</span>
-          </template>
-        </td>
-        <td>
-          {{prop.default}}
-        </td>
-      </tr>
-    </tbody>
-  </table>
+  <props-table />
+
 </div>
 </template>

 <script>
+import PropsTable from './PropsTable.vue'
+//<props-table/>
+
 export default {
  name: 'app',
+  components: {PropsTable},
  data() {
    return {
      resizable: false,
      adaptive: false,
      draggable: false,
-
-      props: {
-        name: {
-          required: true,
-          type: String,
-        },
-        delay: {
-          type: Number,
-          default: 0,
-        },
-        resizable: {
-          type: Boolean,
-          default: false
-        },
-        adaptive: {
-          type: Boolean,
-          default: false
-        },
-        transition: {
-          type: String,
-        },
-        classes: {
-          type: [String, Array],
-          default: 'nice-modal',
-        },
-        width: {
-          type: Number,
-          default: 600
-        },
-        height: {
-          type: Number,
-          default: 300
-        },
-        minWidth: {
-          type: Number,
-          default: 0
-        },
-        minHeight: {
-          type: Number,
-          default: 0
-        }
-      }
    }
  },
  methods: {
@@ -206,15 +141,4 @@ button {
        border: 1px solid #20a0ff;
    }
 }
-
-table.props {
-  width: 100%;
-  text-align: left;
-  border-collapse: collapse;
-
-  td, th {
-    border: 1px solid #eee;
-    padding: 4px 8px;
-  }
-}
 </style>
--- a/demo/src/PropsTable.vue
+++ b/demo/src/PropsTable.vue
@@ -0,0 +1,91 @@
+<template>
+  <table class="props">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Default</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(prop, name) in props">
+        <td>
+          {{name}}
+        </td>
+        <td>
+          <template v-if="Array.isArray(prop.type)">
+            {{prop.type.map(v => v.name).join(' / ')}}
+          </template>
+          <template v-else>
+            <span>{{prop.type.name}}</span>
+          </template>
+        </td>
+        <td>
+          {{prop.default}}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+<script>
+export default {
+  name: 'PropsTable',
+  data () {
+    return {
+      props: {
+        name: {
+          required: true,
+          type: String,
+        },
+        delay: {
+          type: Number,
+          default: 0,
+        },
+        resizable: {
+          type: Boolean,
+          default: false
+        },
+        adaptive: {
+          type: Boolean,
+          default: false
+        },
+        transition: {
+          type: String,
+        },
+        classes: {
+          type: [String, Array],
+          default: 'nice-modal',
+        },
+        width: {
+          type: Number,
+          default: 600
+        },
+        height: {
+          type: Number,
+          default: 300
+        },
+        minWidth: {
+          type: Number,
+          default: 0
+        },
+        minHeight: {
+          type: Number,
+          default: 0
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+table.props {
+  width: 100%;
+  text-align: left;
+  border-collapse: collapse;
+
+  td, th {
+    border: 1px solid #eee;
+    padding: 4px 8px;
+  }
+}
+</style>
--- a/dist/index.js
+++ b/dist/index.js
@@ -587,6 +587,11 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
        overlay: false
      },

+      shift: {
+        left: 0,
+        top: 0
+      },
+
      modal: {
        width: this.width,
        height: this.height
@@ -605,7 +610,6 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
    visible: function visible(value) {
      var _this = this;

-      // if (this.delay > 0) {
      if (value) {
        this.visibility.overlay = true;

@@ -624,15 +628,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
            _this.removeDraggableListeners();
          });
        }, this.delay);
-
-        // this.removeDraggableHandlers()
      }
-      //  } else {
-      //    this.visibility.overlay = value
-      //    this.$nextTick(() => {
-      //      this.visibility.modal = value
-      //    })
-      //  }
    }
  },
  created: function created() {
@@ -656,8 +652,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  computed: {
    position: function position() {
      return {
-        left: Math.max(this.pivotX * (this.window.width - this.modal.width), 0),
-        top: Math.max(this.pivotY * (this.window.height - this.modal.height), 0)
+        left: Math.max(this.shift.left + this.pivotX * (this.window.width - this.modal.width), 0),
+        top: Math.max(this.shift.top + this.pivotY * (this.window.height - this.modal.height), 0)
      };
    },
    modalClass: function modalClass() {
@@ -680,9 +676,10 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
      if (this.adaptive) {
        var width = Math.min(this.window.width, this.modal.width);
        var height = Math.min(this.window.height, this.modal.height);
-
-        this.modal.width = width; // Math.max(width, this.minWidth);
-        this.modal.height = height; // Math.max(height, this.minHeight);
+        // Math.max(width, this.minWidth);
+        this.modal.width = width;
+        // Math.max(height, this.minHeight);
+        this.modal.height = height;
      }
    },
    genEventObject: function genEventObject(params) {
@@ -734,6 +731,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
      }
    },
    addDraggableListeners: function addDraggableListeners() {
+      var _this3 = this;
+
      if (!this.draggable) {
        return;
      }
@@ -741,7 +740,49 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
      var dragger = this.getDraggableElement();

      if (dragger) {
+        (function () {
+          var startX = 0;
+          var startY = 0;
+
+          var left = 0;
+          var top = 0;
+
+          var mousedown = function mousedown(event) {
+
+            left = _this3.position.left;
+            top = _this3.position.top;
+
+            document.addEventListener('mousemove', mousemove);
+            document.addEventListener('mouseup', mouseup);
+
+            startX = event.clientX;
+            startY = event.clientY;
+
+            event.preventDefault();
+          };
+
+          var mousemove = function mousemove(event) {
+            _this3.shift.left = event.clientX - startX;
+            _this3.shift.top = event.clientY - startY;
+
+            console.log(_this3.shift);
+
+            event.preventDefault();
+          };
+
+          var mouseup = function mouseup(event) {
+            //dragger.removeEventListener('mousedown', mousedown)
+            document.removeEventListener('mousemove', mousemove);
+            document.removeEventListener('mouseup', mouseup);
+            // this.shiftX = shiftX
+            // this.shiftY = shiftY
+            // console.log(shiftX, shiftY)
+            event.preventDefault();
+          };
+
+          dragger.addEventListener('mousedown', mousedown);
          console.log(dragger);
+        })();
      }
    },
    removeDraggableListeners: function removeDraggableListeners() {
@@ -855,7 +896,7 @@ exports = module.exports = __webpack_require__(0)();


 // module
-exports.push([module.i, ".nice-modal-overlay[data-v-40dd3b1e]{position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,.2);z-index:999;opacity:1}.nice-modal-overlay .modal[data-v-40dd3b1e]{position:relative;overflow:hidden;box-sizing:border-box;background-color:#fff}.overlay-fade-enter-active[data-v-40dd3b1e],.overlay-fade-leave-active[data-v-40dd3b1e]{transition:all .2s}.overlay-fade-enter[data-v-40dd3b1e],.overlay-fade-leave-active[data-v-40dd3b1e]{opacity:0}.nice-modal-fade-enter-active[data-v-40dd3b1e],.nice-modal-fade-leave-active[data-v-40dd3b1e]{transition:all .4s}.nice-modal-fade-enter[data-v-40dd3b1e],.nice-modal-fade-leave-active[data-v-40dd3b1e]{opacity:0;transform:translateY(-20px)}.nice-modal[data-v-40dd3b1e]{background:#fff;text-align:left;border-radius:3px;box-shadow:0 20px 60px -2px rgba(27,33,58,.4);padding:0;background:#ff0!important}.nice-modal.nice-modal-fullscreen[data-v-40dd3b1e]{width:100vw;height:100vh;margin:0;left:0;top:0}", ""]);
+exports.push([module.i, ".nice-modal-overlay[data-v-40dd3b1e]{position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,.2);z-index:999;opacity:1}.nice-modal-overlay .modal[data-v-40dd3b1e]{position:relative;overflow:hidden;box-sizing:border-box;background-color:#fff}.overlay-fade-enter-active[data-v-40dd3b1e],.overlay-fade-leave-active[data-v-40dd3b1e]{transition:all .2s}.overlay-fade-enter[data-v-40dd3b1e],.overlay-fade-leave-active[data-v-40dd3b1e]{opacity:0}.nice-modal-fade-enter-active[data-v-40dd3b1e],.nice-modal-fade-leave-active[data-v-40dd3b1e]{transition:all .4s}.nice-modal-fade-enter[data-v-40dd3b1e],.nice-modal-fade-leave-active[data-v-40dd3b1e]{opacity:0;transform:translateY(-20px)}.nice-modal[data-v-40dd3b1e]{background:#fff;text-align:left;border-radius:3px;box-shadow:0 20px 60px -2px rgba(27,33,58,.4);padding:0}.nice-modal.nice-modal-fullscreen[data-v-40dd3b1e]{width:100vw;height:100vh;margin:0;left:0;top:0}", ""]);

 // exports

--- a/src/Modal.vue
+++ b/src/Modal.vue
@@ -149,12 +149,18 @@
      this.onWindowResize()
    },
    computed: {
-      position () {
+      center () {
        return {
-          left: Math.max(this.shift.left + this.pivotX *
-            (this.window.width - this.modal.width), 0),
-          top: Math.max(this.shift.top + this.pivotY *
-            (this.window.height - this.modal.height), 0)
+          x: 0.5 * this.window.width
+          y: 0.5 * this.window.height
+        }
+      },
+      position () {
+        let left = 0.5 * this.window.width - this.modal.width
+        let top = 0.5 * this.window.height - this.modal.height
+        return {
+          left: Math.max(/*this.shift.left + */ this.pivotX * (this.window.width - this.modal.width), 0),
+          top: Math.max(/*this.shift.top + */ this.pivotY * (this.window.height - this.modal.height), 0)
        }
      },
      modalClass () {
@@ -175,12 +181,8 @@
        this.window.height = window.innerHeight

        if (this.adaptive) {
-          let width = Math.min(this.window.width, this.modal.width)
-          let height = Math.min(this.window.height, this.modal.height)
-          // Math.max(width, this.minWidth);
-          this.modal.width = width
-          // Math.max(height, this.minHeight);
-          this.modal.height = height
+          this.modal.width = Math.min(this.window.width, this.modal.width)
+          this.modal.height = Math.min(this.window.height, this.modal.height)
        }
      },
      genEventObject (params) {
@@ -242,10 +244,15 @@
        if (dragger) {
          let startX = 0
          let startY = 0
-          //let shiftX = 0
-          //let shiftY = 0
+
+          let left = 0
+          let top = 0

          let mousedown = (event) => {
+
+            // left = this.position.left
+            // top = this.position.top
+
            document.addEventListener('mousemove', mousemove)
            document.addEventListener('mouseup', mouseup)

@@ -265,7 +272,7 @@
          }

          let mouseup = (event) => {
-            dragger.removeEventListener('mousedown', mousedown)
+            //dragger.removeEventListener('mousedown', mousedown)
            document.removeEventListener('mousemove', mousemove)
            document.removeEventListener('mouseup', mouseup)
            // this.shiftX = shiftX