0

在此处输入图像描述我正在用 Polymer 开发一个应用程序。

我的旧版本是 v1.2.3。我从今天早上开始尝试优化我的应用程序，使用 importHref 函数动态加载一些文件。

我发现有一个错误（https://github.com/Polymer/polymer/issues/3638）所以我尝试更新到最新版本以修复错误（v1.7.0）。升级后，我似乎在样式方面出现了一些问题。

经过一番搜索，我发现当我从 v1.2.3 更新到 v1.4.0 并使用

window.Polymer.lazyRegister = true;

它添加了一些滚动条（不知道为什么、在哪里或如何），改变了一些样式，......而且绝对不知道为什么。

有人有什么主意吗？

多谢

编辑：在截图之前/之后添加

编辑：添加代码

index.html 

        <title>my app</title>

        <script src="bower_components/lodash/lodash.js"></script>
        <script src="lib/md5/md5.js"></script>
        <script src="bower_components/page/page.js"></script>

        <link rel="import" href="utils/behaviors/i18n/i18n.html">

        <script>
          // Setup Polymer options
          window.Polymer = {
            dom: 'shady',
            lazyRegister: true
          };

          (function() {
            'use strict';

            var onload = function() {
              if (!window.HTMLImports) {
                document.dispatchEvent(
                  new CustomEvent('WebComponentsReady', {bubbles: true})
                );
              }
            };

            var webComponentsSupported = (
              'registerElement' in document
              && 'import' in document.createElement('link')
              && 'content' in document.createElement('template')
            );

            if (!webComponentsSupported) {
              var script = document.createElement('script');
              script.async = true;
              script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
              script.onload = onload;
              document.head.appendChild(script);
            } else {
              onload();
            }
          })();
        </script>

        <link rel="import" href="bower_components/polymer/polymer.html">


        <!-- not paste, but here are the polymer elements papaer-*, iron-*, ... -->

        <!-- elements.html is just an external file with all my own elements -->
        <link rel="import" href="elements/elements.html">

        <link href="res/css/app.css" rel="stylesheet"/>
        <style>
        body {
                        margin: 0;
                        height: 100vh;
        }
        </style>
      </head>
      <body class="layout vertical">
        <template is="dom-bind" id="myApp">
          <my-application id="application"></my-application>
        </template>
      </body>
    </html>

my-application.html

<dom-module id="my-application">
  <style>

    :host {
      height : 100%;
    }

    iron-pages {
      height : 100%;
    }    

    #popin {
      position: absolute;
      display: none;
      z-index: 100;
    }
    #mainCtn {
      height: 100%;
      width: 100%;
    }

    my-loader-synchronizer {
      z-index: 100;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
    }

  </style>

  <template>
    <div id="mainCtn" on-click="_onMainCtnClick">
      <iron-pages attr-for-selected="data-route" selected="{{route}}">
        <my-login id="log" data-route="login"></my-login>

        <paper-header-panel data-route="dashboard">
          <my-header class="paper-header"></my-header>
          <my-dashboard id="dashboard" class="fit"></my-dashboard>
        </paper-header-panel>

      </iron-pages>

      <my-dialog id="dialog"></my-dialog>

      <my-loader-synchronizer id="loaderSynchronizer" hidden$="{{!synchro}}"></my-loader-synchronizer>

      <div id="popin"></div>

      <my-dialog-selector id="dialogSelector"></my-dialog-selector>
    </div>

    <my-toast id="toast"></my-toast>

  </template>

  <link rel="import" href="../../utils/behaviors/storage/ramCache.html">
  <link rel="import" href="../../utils/behaviors/session/session.html">
  <link rel="import" href="../../utils/behaviors/communication/applicationCommunication.html">

  <script>
    Polymer({
      is: 'my-application',

      properties: {
        "synchro" : {
          "type" : Boolean,
          "value" : false
        },

        "amIConnected" : {
          "type" : Boolean,
          "value" : false
        },

        animationConfig : {
          type : Object,
          value : function () {
            return {
              "fadeOut" : [{
                name : 'fade-out-animation',
                node : this.$$("#loaderSynchronizer")
              }],
            }
          }
        }
      },

      behaviors : [applicationCommunication, Polymer.NeonAnimationRunnerBehavior],

      listeners : {
        "neon-animation-finish": "fadeComplete"
      },

      ready: function ready() {
        // all listeners are registered here

        this.addEventListener("mousemove", this._onGlobalMouseMove.bind(this));
        this._disconnectTimeout = setTimeout(this._disconnect.bind(this), 3600000);
      },

      _onGlobalMouseMove : function _onGlobalMouseMove (e) {
        if (this.amIConnected == true) {
          if (e.movementX != 0 || e.movementY != 0) {
            clearTimeout(this._disconnectTimeout);
            this._disconnectTimeout = setTimeout(this._disconnect.bind(this), 3600000);
          }
        }
      },

      _disconnect : function _disconnect () {
        clearTimeout(this._disconnectTimeout);
        session.getInstance().disconnect();
      },

      attached : function () {
        page("/", function () {
          this.route = "login";
        }.bind(this));

        page("/dashboard", function () {
          this.amIConnected = true;
          this.synchro = true;
          this.$$("#loaderSynchronizer").synchronizeData();

          this.$.dashboard.onShow();

          this.route = "dashboard";
        }.bind(this));

        page({
          hashbang: true
        });

      },

      fadeComplete : function fadeComplete () {
        this.synchro = false;
      },

      _closeLoaderSynchronizer : function _closeLoaderSynchronizer () {
        this.cancelAnimation();
        this.playAnimation("fadeOut");
      },

    });
  </script>
</dom-module>

my-login.html

<dom-module id="my-login">
  <style>

    :host {
      font-family : "Roboto-Bold";
      font-size: 16pt;
      --paper-input-container-underline: {
        background-color: var(--paper-grey-400);
      }
      --paper-input-container-label: {
        color: var(--paper-grey-400);
      }
      --paper-input-container-input: {
        color: var(--paper-black);
      }
      --paper-input-container-focus-color: var(--paper-blue-600);
    }

    #container {
      height: 100%;
      width: 100%;
      background-image: url("../../res/img/loginBack.jpg");
      background-size: cover;
      background-color: white;
    }

    #logomyCtn {
      z-index: 100;
      position: absolute;
      margin-left: 80px;
      margin-top: 150px;
    }

    #logomyCtn iron-image {
      --iron-image-width: 16vw;
      --iron-image-height: 10vw;
    }

    paper-card {
      --paper-card-header: {
          @apply(--layout-horizontal);
          @apply(--layout-end);
        background-color: var(--paper-blue-600);
        height: 100px;
      }
      --paper-card-content: {
          margin-right: 50px;
          margin-left: 50px;
      }
      --paper-card-actions: {
          @apply(--layout-vertical);
          @apply(--layout-center);
      }
      --paper-card-header-text: {
        color: #fff;
        position: absolute;
        font-family: "Roboto-Light";
        bottom: 0px;
        left: 0px;
      }
      --paper-card-header-image: {
        width: 146px;
        height: 32px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 16px;
      }
    }

    paper-button.blue {
      font-size: 12pt;
      background: var(--paper-blue-600);
      color: #fff;
      font-family: "Roboto-Medium";
      margin-top: 10px;
      width: 14vw;
    }

    paper-button.small {
      font-size: 13px;
      text-transform: lowercase;
      --paper-button-ink-color: transparent;
      font-family: "Roboto-Light";
      color: var(--paper-grey-700);
    }

    paper-button.pwd {
      font-size: 13px;
      text-transform: lowercase;
      --paper-button-ink-color: transparent;
      font-family: "Roboto-Light";
      color: var(--paper-grey-700);
    }

    #logoContainer {
      width: 100%;
      height: 20%;


      @apply(--layout-horizontal);
      @apply(--layout-center);
    }

    iron-image {
      margin-left: auto;
      margin-right: auto;
    }

    #loginContainer {
      width: 400px;
      height: 60%;
      margin-left: auto;
      margin-right: auto;

      @apply(--layout-vertical);
      @apply(--layout-center-justified);
    }

    #versionContainer {
      width: 100%;
      height: 20%;
      @apply(--layout-horizontal);
      @apply(--layout-end);
    }

    #version {
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 25px;
      font-family: "Roboto-Light";
      font-size: 13px;
      color: var(--paper-grey-700);
    }

  </style>

  <template>
    <div id="container">
      <div id="logomyCtn">
        <iron-image src="../../res/img/logo.png"></iron-image>
      </div>

      <div id="logoContainer"></div>

      <div id="loginContainer">
        <paper-card elevation="1" image="../../res/img/logologin.png">
          <div class="card-content" on-keypress="_keyHandler">
            <paper-input id="login" label="[[i18n('uid')]]"></paper-input>
            <paper-input id="pwd" label="[[i18n('pwd')]]" type="password"></paper-input>
            <paper-input id="server" label="[[i18n('server')]]"></paper-input>
          </div>
          <div class="card-actions">
            <paper-button class="blue" on-click="_login">[[i18n("connect")]]</paper-button>
            <paper-button class="pwd" on-click="_openPwd">[[i18n("forgotPwd")]]</paper-button>
          </div>
        </paper-card>
      </div>

      <div id="versionContainer">
        <div id="version">
          [[i18n("version")]]
          <paper-button class="small" on-click="_openContact">[[i18n("contact")]]</paper-button>
        </div>
      </div>

      <my-dialog id="dialog"></my-dialog>
    </div>
  </template>

  <link rel="import" href="../../utils/behaviors/communication/loginCommunication.html">
  <link rel="import" href="../../utils/behaviors/storage/localCache.html">
  <link rel="import" href="../../utils/behaviors/storage/sessionCache.html">

  <script>
    Polymer({
      is: 'my-login',
      // don't paste code, only classical login code
    });
  </script>

</dom-module>

my-loader-synchronizer.html

<dom-module id="my-loader-synchronizer">
  <style>

    :host {
      display: block;
      background-image: url("../../res/img/loginBack.jpg");
      background-size: cover;
    }

    #mainCtn {
      height: 100%;
      width: 100%;
      position: absolute;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    #loading {
      margin-top: 16px;
      font-size: 20px;
      font-family: "Roboto";
      color: var(--paper-grey-700);
    }

    paper-progress {
      width: 50%;
      --paper-progress-active-color: var(--paper-blue-500);
    }

    #logoCtn {
      z-index: 100;
      position: absolute;
      margin-left: 80px;
      margin-top: 150px;
    }

    #logoCtn iron-image {
      --iron-image-width: 16vw;
      --iron-image-height: 10vw;
    }

  </style>

  <template>
    <div id="mainCtn">
      <paper-progress class="transiting" value="{{currentResponse}}" max="{{totalData}}"></paper-progress>
      <div id="loading">[[i18n("loading")]]</div>
    </div>
      <div id="logoCtn">
        <iron-image src="../../res/img/logo.png"></iron-image>
      </div>
  </template>

  <link rel="import" href="../../utils/behaviors/storage/ramCache.html">
  <link rel="import" href="../../utils/behaviors/storage/sessionCache.html">
  <link rel="import" href="../../utils/behaviors/entities/entitiesParser.html">
  <link rel="import" href="../../utils/behaviors/communication/loaderSynchronizerCommunication.html">

  <script>
    Polymer({
      is: 'my-loader-synchronizer',

      created : function () {
        this.i18n = i18n.getInstance();
      },

      properties: {
        "data" : {
          "type" : Array,
          "value" : function () {
            return [{
              "entity" : "UserEntity",
              "okCb" : this.usersCallback.bind(this),
              "koCb" : this.usersCallbackError.bind(this)
            },{
              "entity" : "VehicleGroup",
              "okCb" : this.vehicleGroupCallback.bind(this),
              "koCb" : this.vehicleGroupCallbackError.bind(this)
            },{ 
              // multiple definitions
            }]
          }
        }
      },

      behaviors : [loaderSynchronizerCommunication, entitiesParser],

      ready: function ready() {
        this.ramCache = ramCache.getInstance();
        this.sessionCache = sessionCache.getInstance();
      },

      synchronizeData : function synchronizeData () {
        this.totalData = this.data.length;
        this.currentResponse = 0;

        var i = this.data.length,
            params = {
              "token" : this.sessionCache.get("token")
            };

        while (i--) {
          if (this.data[i].entity) {
            var entity = this.data[i];
            if (!entity.type || entity.type == "entity") {
              this.prepareEntityRequest(entity.entity, params, entity.okCb, entity.koCb);
            } else if (entity.type == "light") {
              this.prepareLightRequest(entity.entity, params, entity.okCb, entity.koCb);
            }
          }
        }
      },

      _updateRoutine : function _updateRoutine () {
        var i = this.routine.length,
            params = {
              "token" : this.sessionCache.get("token")
            };

        while (i--) {
          if (this.routine[i].entity) {
            var entity = this.routine[i];
            this.prepareEntityRequest(entity.entity, params, entity.okCb, entity.koCb);
          }
        }
      },

      _changeProgress : function _changeProgress (entity) {
        this.currentResponse++;
        if (this.currentResponse == this.totalData) {
          this.timeoutCtrl = setTimeout(this._fireClose.bind(this), 1000);
        }
      },

      _fireClose : function _fireClose () {
        clearTimeout(this.timeoutCtrl);
        // will be catch by my-application
        this.fire("close-loader-synchronizer");
      },
      /* CALLBACK */

      /*********/
      /* USERS */
      /*********/
      usersCallback : function usersCallback (response) {
        this.parseUsers(response);
        this._changeProgress("UserEntity");
      },

      usersCallbackError : function usersCallbackError (error) {
        this.fire("show-toast", {"type" : "error", "text" : "userEntityError"});
      },
      /*****************/
      /* VEHICLES GROUP*/
      /*****************/
      vehicleGroupCallback : function vehicleGroupCallback (response) {
        this.parseVehicleGroup(response);
        this._changeProgress("VehicleGroup");

      },

      vehicleGroupCallbackError : function vehicleGroupCallbackError (error) {
        this.fire("show-toast", {"type" : "error", "text" : "vehicleGroupEntityError"});

      },  
    });
  </script>
</dom-module>

my-header.html

<dom-module id="my-header">
  <style>
    :host {}

    paper-toolbar {
      --paper-toolbar-background: var(--paper-blue-500); 
    }

    .first {
      font-family : "Roboto-Bold";
    }

    .last {
      font-family: "Roboto-Light";
    }

  </style>

  <template>
    <paper-toolbar>
      <my-menu-button on-tap="_tapToggleButton"></my-menu-button>

      <div class="title">[[i18n("product")]]&nbsp;[[i18n("version")]]</div>
    </paper-toolbar>
  </template>

  <script>
    Polymer({
      is: 'my-header',

      created : function () {
        this.i18n = i18n.getInstance();
      },

      properties: {},

      ready: function ready() {},

      _tapToggleButton : function _tapToggleButton () {
        this.fire("toggle-drawer");
      },
    });
  </script>
</dom-module>

my-dashboard.html

<dom-module id="my-dashboard">
  <style>

    :host {
      font-family : "Roboto";
    }

  </style>

  <template>
    <paper-drawer-panel id="drawerPanel" responsive-width="1300px">
        <my-dashboard-left-panel drawer id="leftpanel"></my-dashboard-left-panel>
        <my-dashboard-content main id="content"></my-dashboard-content>
    </paper-drawer-panel>
  </template>

  <link rel="import" href="../../utils/behaviors/communication/childNotifications.html">

  <script>
      Polymer({
        is: 'my-dashboard',

        properties: {},

        behaviors : [childNotifications, Polymer.IronResizableBehavior],

        ready: function ready() {},

        /************************/
        /*** PUBLIC FUNCTIONS ***/
        /************************/

        onShow : function onShow () {
          this.notifyChild("showDashboard");
        },
        /**
         * toggle left panel
         **/
        toggleDrawer : function toggleDrawer () {

          var responsiveWidth = parseInt(this.$.drawerPanel.responsiveWidth.replace("px", ""));

          if (responsiveWidth < this.$.drawerPanel.offsetWidth) {
            this.$.drawerPanel.forceNarrow = !this.$.drawerPanel.forceNarrow;

            setTimeout(function () {
              clearInterval(this.toto)
            }.bind(this), 1000);

            setInterval(function () {
              this.$.content.resize();
              // notify children that they need to resize
              this.notifyResize();
            }.bind(this), 100)

          } else {
            this.$.drawerPanel.togglePanel();
          }

        }
      });
  </script>
</dom-module>

我只过去了似乎很重要的文件。那么，它是如何工作的呢？

起初，当显示 my-login 时，将显示允许用户登录（使用 page.js 进行路由）登录屏幕上没有问题。

当用户登录时，路由到 /dashboard，并显示 paper-header-panel 和 my-loader-synchronizer 以同步所有数据并显示进度条。全部完成后，同步器将被隐藏以使纸张标题面板可见（此时截屏）

当同步显示时，样式问题就开始了。

如果您需要更多文件，请不要犹豫。多谢 ！

4

0 回答 0