feat(preview): add preview modal

ly525
1 parent a34f5f11
Showing 10 changed files with 371 additions and 13 deletions
back-end/h5-api/views/engine.ejs
front-end/h5/package.json
front-end/h5/public/index.html
front-end/h5/src/components/core/editor/index.js
front-end/h5/src/components/core/editor/modals/preview.vue
front-end/h5/src/components/core/models/element.js
front-end/h5/src/store/modules/work.js
front-end/h5/src/utils/element.js
front-end/h5/vue.config.js
front-end/h5/yarn.lock
@@ -17,6 +17,9 @@
   <script>window.__work = <%- JSON.stringify(work) %></script>
   <script src="/engine-assets/engine.js"></script>
   <style>
+    * {
+      outline: none;
+    }
     .swiper-container {
       width: 100%;
       height: 100vh;
@@ -26,7 +29,9 @@
 <body>
   <div id="app">
-      <engine />
+    <button class="swiper-button-next" style="position: fixed;left: 1000px">Next</button>
+    <button class="swiper-button-prev" style="position: fixed;left: 1000px">Prev</button>
+    <engine />
   </div>
   <script>
     // Vue.component('engine', window.Engine)
@@ -59,6 +64,18 @@
         el: '.swiper-scrollbar',
       },
     });
+
+    function displayMessage ({ origin, data }) {
+      if (data && origin === "http://localhost:8080") {
+        document.querySelector(`.swiper-button-${data}`).click()
+      }
+    }
+
+    if (window.addEventListener) {
+      window.addEventListener("message", displayMessage, false);
+    } else {
+      window.attachEvent("onmessage", displayMessage);
+    }
   </script>
   <!-- build:js scripts/vendor.js -->
   <!-- endbuild -->
@@ -15,6 +15,7 @@
     "core-js": "^2.6.5",
     "element-ui": "^2.9.1",
     "font-awesome": "4.7.0",
+    "qrcode": "^1.4.1",
     "register-service-worker": "^1.6.2",
     "strapi-sdk-javascript": "^0.3.1",
     "vue": "^2.6.10",
@@ -6,6 +6,11 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>鲁班-H5</title>
+    <style>
+      * {
+        outline: none;
+      }
+    </style>
   </head>
   <body>
     <noscript>
@@ -10,6 +10,7 @@ import RenderPropsEditor from &#39;./edit-panel/props&#39;
 import RenderScriptEditor from './edit-panel/script'
 import RenderActoionEditor from './edit-panel/action'
 import RenderShortcutsPanel from './shortcuts-panel/index'
+import PreviewDialog from './modals/preview.vue'
 const sidebarMenus = [
   {
@@ -34,7 +35,8 @@ export default {
   data: () => ({
     activeMenuKey: 'pluginList',
     isPreviewMode: false,
-    activeTabKey: '属性'
+    activeTabKey: '属性',
+    previewVisible: false
   }),
   computed: {
     ...mapState('editor', {
@@ -109,7 +111,7 @@ export default {
                 <a-button class="transparent-bg" style={{ color: 'white' }} type="dashed" size="small" onClick={() => undoRedoHistory.redo()}><i class={['shortcut-icon', 'fa', `fa-mail-forward`]} aria-hidden='true'/> 重做</a-button>
               </a-button-group>
             </a-menu-item>
-            <a-menu-item key="1" class="transparent-bg"><a-button type="primary" size="small">预览</a-button></a-menu-item>
+            <a-menu-item key="1" class="transparent-bg"><a-button type="primary" size="small" onClick={() => { this.previewVisible = true }}>预览</a-button></a-menu-item>
             <a-menu-item key="2" class="transparent-bg"><a-button size="small" onClick={() => this.saveWork()}>保存</a-button></a-menu-item>
             <a-menu-item key="3" class="transparent-bg"><a-button size="small">发布</a-button></a-menu-item>
           </a-menu>
@@ -185,6 +187,7 @@ export default {
             </a-tabs>
           </a-layout-sider>
         </a-layout>
+        <PreviewDialog visible={this.previewVisible} handleClose={() => { this.previewVisible = false }} />
       </a-layout>
     )
   },
+<script>
+import { mapActions, mapState } from 'vuex'
+import QRCode from 'qrcode'
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    handleClose: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  computed: {
+    ...mapState('editor', {
+      work: state => state.work,
+    }),
+    releaseUrl () {
+      return `//localhost:1337/works/preview/${this.work.id}`
+    }
+  },
+  data() {
+    return {
+      confirmLoading: false,
+      qrcodeSize: 500,
+    }
+  },
+  watch: {
+    visible (val) {
+      if (!val) return;
+      this.$nextTick(() => this.drawQRcode());
+    },
+  },
+  methods: {
+    ...mapActions('editor', [
+      'saveWork',
+      'updateWork'
+    ]),
+    handleOk(e) {
+      this.confirmLoading = true;
+      this.saveWork().then(res => {
+        this.handleClose()
+        this.confirmLoading = false;
+      })
+      // setTimeout(() => {
+      // }, 2000);
+    },
+    handleCancel(e) {
+      console.log('Clicked cancel button');
+      this.handleClose()
+    },
+    drawQRcode () {
+      var canvas = document.getElementById('qrcode-container');
+      QRCode.toCanvas(canvas, this.releaseUrl, { scale: 4 }, err => {
+        console.log(err);
+      });
+    },
+    postMessage2Iframe (message) {
+      let iframeWin = document.getElementById('iframe-for-preview').contentWindow
+      // iframeWin.postMessage('next', window.location.origin);
+      iframeWin.postMessage(message, 'http://localhost:1337');
+    }
+  },
+  render (h) {
+    return (
+      <div>
+        <a-modal
+          title="作品设置"
+          visible={this.visible}
+          confirmLoading={this.confirmLoading}
+          onOk={this.handleOk}
+          onCancel={this.handleCancel}
+          width="70%"
+          okText="保存"
+        >
+        <div class="preview-wrapper">
+          <a-row gutter={20}>
+            <a-col span={8}>
+              <div class="phone-wrapper">
+                <div class="phone">
+                  <div class="float-ctrl-panel">
+                    <a class="page-controller" onClick={(e) => { this.postMessage2Iframe('prev') }}>上一页</a>
+                    <a class="page-controller" onClick={(e) => { this.postMessage2Iframe('next') }}>下一页</a>
+                    {/**
+                    <a-button icon="up" shape="circle" onClick={() => { this.postMessage2Iframe('prev') }}></a-button>
+                    <a-button icon="down" shape="circle" onClick={() => { this.postMessage2Iframe('next') }}></a-button>
+                    <a-icon type="up" class="page-controller" onClick={() => { this.postMessage2Iframe('prev') }}/>
+                    <a-icon type="down" class="page-controller"  onClick={() => { this.postMessage2Iframe('next') }}/>
+                    */}
+                  </div>
+                  <iframe
+                    id="iframe-for-preview"
+                    src="http://localhost:1337/works/preview/12"
+                    frameborder="0"
+                    style="height: 100%;width: 100%;"
+                  ></iframe>
+                  {/** <engine :work="editingWork" :map-config="{}" /> */}
+                </div>
+              </div>
+            </a-col>
+            <a-col span={12} offset={4}>
+              <div class="setting">
+                <div class="info">
+                  <div class="label">设置作品信息</div>
+                  <a-input
+                    class="input"
+                    value={this.work.title}
+                    onChange={e => this.updateWork({ title: e.target.value})}
+                    // onBlur={this.saveTitle}
+                    placeholder="请输入标题"
+                  ></a-input>
+                  <a-input
+                    class="input"
+                    value={this.work.description}
+                    onChange={e => this.updateWork({ description: e.target.value})}
+                    // v-model="description"
+                    // onBlur={this.saveDescription}
+                    placeholder="请输入描述"
+                    type="textarea"
+                  ></a-input>
+                </div>
+                <div class="qrcode my-4">
+                  <div class="label">手机扫码分享给好友</div>
+                  <div class="code">
+                    <canvas style="float: left" id="qrcode-container"></canvas>
+                    <a-radio-group class="radios" value={this.qrcodeSize} onChange={e => {this.qrcodeSize = e.target.value}}>
+                      <a-radio label={500} value={500}>500x500</a-radio>
+                      <a-radio label={1000} value={1000}>1000x1000</a-radio>
+                      <a-radio label={2000} value={2000}>2000x2000</a-radio>
+                    </a-radio-group>
+                  </div>
+                </div>
+              </div>
+            </a-col>
+          </a-row>
+        </div>
+        </a-modal>
+      </div>
+    )
+  },
+  mounted () {
+  }
+}
+</script>
+
+
+<style lang="scss">
+.preview-wrapper {
+  position: relative;
+  min-height: 600px;
+  min-width: 800px;
+
+  .phone-wrapper {
+    position: absolute;
+    // margin-top: -300px;
+    left: 10px;
+    top: 50%;
+    width: 320px;
+    height: 600px;
+    box-sizing: content-box;
+    .phone {
+      position: absolute;
+      // left: 40px;
+      width: 100%;
+      height: calc(638px - 70px);
+      display: inline-block;
+      background: #fff;
+      box-sizing: content-box;
+      border-top: 10px solid #f6f6f6;
+      border-left: 10px solid #f6f6f6;
+      border-right: 10px solid #f6f6f6;
+      border-bottom: 20px solid #f6f6f6;
+      border-radius: 20px;
+      -webkit-transform-origin: 100% 0;
+      transform-origin: 100% 0;
+      -webkit-transform: scale(1);
+      transform: scale(1);
+
+      .float-ctrl-panel {
+        position: absolute;
+        top: 100px;
+        right: -40px;
+
+        .page-controller {
+          display: block;
+          cursor: pointer;
+          width: 30px;
+          height: 80px;
+          border-top-right-radius: 5px;
+          border-bottom-right-radius: 5px;
+          background: #2096f9;
+          font-size: 12px;
+          text-align: center;
+          border: 1px solid #2096f9;
+          color: #fff;
+          // position: absolute;
+          padding: 14px 8px;
+          margin-top: 12px;
+          // margin-top: -50px;
+        }
+
+      }
+    }
+  }
+  .setting {
+    color: #4a4a4a;
+    font-size: 14px;
+    float: right;
+    width: 380px;
+    .info {
+      .input {
+        margin-top: 10px;
+      }
+    }
+    .qrcode {
+      margin-top: 20px;
+    }
+    .code {
+      // !#zh 防止浮动塌陷
+      overflow: hidden;
+      .radios {
+        width: 80px;
+        margin-top: 5px;
+        margin-left: 30px;
+        label {
+          margin-left: 0px;
+          margin-top: 10px;
+        }
+        button {
+          margin-top: 15px;
+        }
+      }
+    }
+    .link {
+      width: 100%;
+      display: block;
+    }
+    .edit {
+      text-align: center;
+      margin-top: 20px;
+    }
+  }
+}
+
+</style>
 \ No newline at end of file
+import { parsePx } from '../../../utils/element.js'
+
 const clone = (value) => JSON.parse(JSON.stringify(value))
 const defaultProps = {
@@ -56,14 +58,14 @@ class Element {
     return pluginProps
   }
-  getStyle ({ position = 'static' }) {
+  getStyle ({ position = 'static', isRem = false }) {
     const pluginProps = this.pluginProps
     const commonStyle = this.commonStyle
     let style = {
-      top: `${pluginProps.top || commonStyle.top}px`,
-      left: `${pluginProps.left || commonStyle.left}px`,
-      width: `${pluginProps.width || commonStyle.width}px`,
-      height: `${pluginProps.height || commonStyle.height}px`,
+      top: parsePx(pluginProps.top || commonStyle.top),
+      left: parsePx(pluginProps.left || commonStyle.left),
+      width: parsePx(pluginProps.width || commonStyle.width),
+      height: parsePx(pluginProps.height || commonStyle.height),
       fontSize: `${pluginProps.fontSize || commonStyle.fontSize}px`,
       color: pluginProps.color || commonStyle.color,
       // backgroundColor: pluginProps.backgroundColor || commonStyle.backgroundColor,
@@ -18,9 +18,21 @@ export const actions = {
     // commit('pageManager', { type: 'add' })
     // commit('setEditingPage')
   },
+  updateWork ({ commit, state }, payload = {}) {
+    // update work with strapi
+    const work = {
+      ...state.work,
+      ...payload
+    }
+    commit('setWork', work)
+  },
   saveWork ({ commit, state }, payload = {}) {
     // update work with strapi
-    strapi.updateEntry('works', state.work.id, state.work)
+    const work = {
+      ...state.work,
+      ...payload
+    }
+    strapi.updateEntry('works', state.work.id, work)
   },
   fetchWork ({ commit, state }, workId) {
     strapi.getEntry('works', workId).then(entry => {
 import Vue from 'vue'
+const DESIGN_DRAFT_WIDTH = 320
+const styleKey = 'commonStyle'
+
 export function getEditorConfigForEditingElement (elementName) {
   const Ctor = Vue.component(elementName)
   // TODO 为何直接 return new Ctor() 并将其赋值给 vuex 的 state 会报错：Cannot convert a Symbol value to a string
   return new Ctor().$options.editorConfig
 }
-const styleKey = 'commonStyle'
 export function swapZindex (x, y) {
   const tmp = y[styleKey].zindex
   y[styleKey].zindex = x[styleKey].zindex
   x[styleKey].zindex = tmp
 }
+
+/**
+ * !#zh 将 px 转换为 rem
+ * @param {Number} px
+ */
+function px2Rem (px) {
+  const number = Math.pow(10, 6)
+  const val = (px / (DESIGN_DRAFT_WIDTH / 10)) * number
+  const rem = Math.round(val) / number + 'rem'
+  return rem
+}
+
+/**
+ *
+ * @param {Number} px 元素的某个属性的像素值，比如 height
+ * @param {Boolean} isToRem 是否将 px 转换为 rem
+ */
+export function parsePx (px, isRem = false) {
+  if (isRem) return px2Rem(px)
+  return `${px}px`
+}
@@ -12,9 +12,9 @@ module.exports = {
       template: 'public/index.html',
       filename: 'index.html',
       title: 'Index Page'
-    },
-    engine: {
-      entry: 'src/components/core/editor/engine/index.js'
     }
+    // engine: {
+    //   entry: 'src/engine-entry.js'
+    // }
   }
 }
@@ -3399,6 +3399,11 @@ diffie-hellman@^5.0.0:
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
+dijkstrajs@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npm.taobao.org/dijkstrajs/download/dijkstrajs-1.0.1.tgz#d3cd81221e3ea40742cfcde556d4e99e98ddc71b"
+  integrity sha1-082BIh4+pAdCz83lVtTpnpjdxxs=
+
 dir-glob@^2.0.0, dir-glob@^2.2.2:
   version "2.2.2"
   resolved "https://registry.npm.taobao.org/dir-glob/download/dir-glob-2.2.2.tgz#fa09f0694153c8918b18ba0deafae94769fc50c4"
@@ -5760,6 +5765,11 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   resolved "https://registry.npm.taobao.org/isarray/download/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
+isarray@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.npm.taobao.org/isarray/download/isarray-2.0.5.tgz?cache=0&sync_timestamp=1562592096220&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fisarray%2Fdownload%2Fisarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha1-ivHkwSISRMxiRZ+vOJQNTmRKVyM=
+
 isemail@3.x.x:
   version "3.2.0"
   resolved "https://registry.npm.taobao.org/isemail/download/isemail-3.2.0.tgz#59310a021931a9fb06bbb51e155ce0b3f236832c"
@@ -7920,6 +7930,11 @@ pn@^1.1.0:
   resolved "https://registry.npm.taobao.org/pn/download/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
   integrity sha1-4vTO8OIZ9GPBeas3Rj5OHs3Muvs=
+pngjs@^3.3.0:
+  version "3.4.0"
+  resolved "https://registry.npm.taobao.org/pngjs/download/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
+  integrity sha1-mcp9clll+2VYFOr2XzjxK72/VV8=
+
 portfinder@^1.0.20:
   version "1.0.20"
   resolved "https://registry.npm.taobao.org/portfinder/download/portfinder-1.0.20.tgz#bea68632e54b2e13ab7b0c4775e9b41bf270e44a"
@@ -8440,6 +8455,16 @@ q@^1.1.2:
   resolved "https://registry.npm.taobao.org/q/download/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
+qrcode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.npm.taobao.org/qrcode/download/qrcode-1.4.1.tgz#2126814985d0dbbd9aee050fc523d319c6a7dc3b"
+  integrity sha1-ISaBSYXQ272a7gUPxSPTGcan3Ds=
+  dependencies:
+    dijkstrajs "^1.0.1"
+    isarray "^2.0.1"
+    pngjs "^3.3.0"
+    yargs "^13.2.4"
+
 qs@6.7.0, qs@^6.5.2:
   version "6.7.0"
   resolved "https://registry.npm.taobao.org/qs/download/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
@@ -10895,6 +10920,14 @@ yargs-parser@^13.1.0:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
+yargs-parser@^13.1.1:
+  version "13.1.1"
+  resolved "https://registry.npm.taobao.org/yargs-parser/download/yargs-parser-13.1.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyargs-parser%2Fdownload%2Fyargs-parser-13.1.1.tgz#d26058532aa06d365fe091f6a1fc06b2f7e5eca0"
+  integrity sha1-0mBYUyqgbTZf4JH2ofwGsvfl7KA=
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
 yargs-parser@^9.0.2:
   version "9.0.2"
   resolved "https://registry.npm.taobao.org/yargs-parser/download/yargs-parser-9.0.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyargs-parser%2Fdownload%2Fyargs-parser-9.0.2.tgz#9ccf6a43460fe4ed40a9bb68f48d43b8a68cc077"
@@ -10955,6 +10988,22 @@ yargs@^13.0.0:
     y18n "^4.0.0"
     yargs-parser "^13.1.0"
+yargs@^13.2.4:
+  version "13.3.0"
+  resolved "https://registry.npm.taobao.org/yargs/download/yargs-13.3.0.tgz#4c657a55e07e5f2cf947f8a366567c04a0dedc83"
+  integrity sha1-TGV6VeB+Xyz5R/ijZlZ8BKDe3IM=
+  dependencies:
+    cliui "^5.0.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^13.1.1"
+
 yauzl@2.10.0:
   version "2.10.0"
   resolved "https://registry.npm.taobao.org/yauzl/download/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"