@micromag/viewer 0.3.209 → 0.3.214

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/css/styles.css +2 -2
  2. package/es/index.js +59 -24
  3. package/lib/index.js +59 -24
  4. package/package.json +10 -10
package/assets/css/styles.css CHANGED
@@ -4,8 +4,8 @@
4
4
  .micromag-viewer-menus-menu-container-backdrop,.micromag-viewer-menus-menu-container-heightContainer{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-container-container{color:#fff}.micromag-viewer-menus-menu-container-heightContainer{overflow:hidden;z-index:2}.micromag-viewer-menus-menu-container-backdrop{z-index:1;-webkit-backdrop-filter:blur(.75rem);backdrop-filter:blur(.75rem);background-color:rgba(28,28,28,.75)}
5
5
  .micromag-viewer-menus-menu-dot-button{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-viewer-menus-menu-dot-progress{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-dot-container{-webkit-flex:1 1;-ms-flex:1 1;flex:1 1}.micromag-viewer-menus-menu-dot-container:last-child{margin-right:0}.micromag-viewer-menus-menu-dot-container.micromag-viewer-menus-menu-dot-vertical .micromag-viewer-menus-menu-dot-button{width:auto;height:100%;padding:2px 10px}.micromag-viewer-menus-menu-dot-container.micromag-viewer-menus-menu-dot-vertical .micromag-viewer-menus-menu-dot-dot{width:2px;height:100%}.micromag-viewer-menus-menu-dot-button{display:block;width:100%;padding:.25rem 2px 1rem}@media (hover:hover){.micromag-viewer-menus-menu-dot-button:hover .micromag-viewer-menus-menu-dot-dot{-webkit-transform:scaleY(4);-ms-transform:scaleY(4);transform:scaleY(4);background-color:#fff!important}}.micromag-viewer-menus-menu-dot-button:active .micromag-viewer-menus-menu-dot-dot{-webkit-transform:scaleY(6);-ms-transform:scaleY(6);transform:scaleY(6)}.micromag-viewer-menus-menu-dot-dot{position:relative;display:block;width:100%;height:3px;-webkit-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0;-webkit-transition:-webkit-transform .3s cubic-bezier(.4,1.69,0,1);transition:-webkit-transform .3s cubic-bezier(.4,1.69,0,1);-o-transition:transform .3s cubic-bezier(.4,1.69,0,1);transition:transform .3s cubic-bezier(.4,1.69,0,1);transition:transform .3s cubic-bezier(.4,1.69,0,1), -webkit-transform .3s cubic-bezier(.4,1.69,0,1);background-color:hsla(0,0%,100%,.15)}.micromag-viewer-menus-menu-dot-progress{-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.micromag-viewer-menus-menu-dot-subDot{display:block;position:relative;border-radius:0}.micromag-viewer-menus-menu-dot-subDot:after{content:"";position:absolute;left:100%;width:1px;height:100%;background-color:inherit}.micromag-viewer-menus-menu-dot-dots{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:100%}@-webkit-keyframes micromag-viewer-menus-menu-dot-outlineBounce{to{-webkit-transform:scaleY(4);transform:scaleY(4)}}@keyframes micromag-viewer-menus-menu-dot-outlineBounce{to{-webkit-transform:scaleY(4);transform:scaleY(4)}}
6
6
  .micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-viewer-menus-menu-dots-container{position:relative}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-item,.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-items{margin:0;padding:0;list-style:none}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-items{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;width:100%}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding-left:10px;font-size:26px}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background:rgba(0,0,0,0)}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical .micromag-viewer-menus-menu-dots-items{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:auto;height:100%}
7
- .micromag-viewer-menus-menu-screen-button{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-screen-container{position:relative;overflow:hidden;width:100%}.micromag-viewer-menus-menu-screen-button{display:block;z-index:2;-webkit-transition:border-width .4s cubic-bezier(.4,1.69,0,1);-o-transition:border-width .4s cubic-bezier(.4,1.69,0,1);transition:border-width .4s cubic-bezier(.4,1.69,0,1);border:0 solid #fff}.micromag-viewer-menus-menu-screen-button:focus-visible{outline:.25rem solid #a13dff;outline-offset:.25rem}.micromag-viewer-menus-menu-screen-isCurrent .micromag-viewer-menus-menu-screen-button{animation:micromag-viewer-menus-menu-screen-pulse .75s cubic-bezier(.4,0,.6,1) infinite alternate-reverse}@media (hover:hover){.micromag-viewer-menus-menu-screen-button:hover{border:.25rem solid #fff}}.micromag-viewer-menus-menu-screen-inner{z-index:1;pointer-events:none}.micromag-viewer-menus-menu-screen-subScreenBadge{position:absolute;z-index:2;bottom:.15rem;right:.15rem;font-size:1rem;font-weight:700;pointer-events:none}.micromag-viewer-menus-menu-screen-subScreenCount{position:absolute;z-index:2;color:#343434;letter-spacing:-.05rem;top:50%;left:50%;text-align:center;-webkit-transform:translate(-50%,-50%) translate(-.1rem,-.1rem);-ms-transform:translate(-50%,-50%) translate(-.1rem,-.1rem);transform:translate(-50%,-50%) translate(-.1rem,-.1rem)}.micromag-viewer-menus-menu-screen-subScreenIcon{position:relative;z-index:1;width:1.15rem;height:auto;fill:#fff}@-webkit-keyframes micromag-viewer-menus-menu-screen-pulse{0%{border-width:.25rem}to{border-width:.5rem}}@keyframes micromag-viewer-menus-menu-screen-pulse{0%{border-width:.25rem}to{border-width:.5rem}}
8
- .micromag-viewer-menus-menu-preview-scroll{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-preview-container{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background-repeat:no-repeat;background-position:50%;background-size:cover;-ms-touch-action:none;touch-action:none}.micromag-viewer-menus-menu-preview-container.micromag-viewer-menus-menu-preview-disabled .micromag-viewer-menus-menu-preview-screenButton{pointer-events:none}.micromag-viewer-menus-menu-preview-buttons,.micromag-viewer-menus-menu-preview-content{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-viewer-menus-menu-preview-buttons{z-index:3;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.micromag-viewer-menus-menu-preview-organisation{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:30px;height:30px;margin-right:10px;border-radius:50%;background-color:#fff;background-repeat:no-repeat;background-position:50%;background-size:contain}.micromag-viewer-menus-menu-preview-icon{display:block;width:1rem;height:auto}.micromag-viewer-menus-menu-preview-title{margin-right:auto;color:#fff;font-family:Helvetica,Arial,sans-serif}.micromag-viewer-menus-menu-preview-nav{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;padding:10px}.micromag-viewer-menus-menu-preview-item,.micromag-viewer-menus-menu-preview-items{margin:0;padding:0;list-style:none}.micromag-viewer-menus-menu-preview-items{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.micromag-viewer-menus-menu-preview-item,.micromag-viewer-menus-menu-preview-items{position:relative}.micromag-viewer-menus-menu-preview-item{width:33.333%}.micromag-viewer-menus-menu-preview-screen{padding:2px}.micromag-viewer-menus-menu-preview-loading{width:100%;height:auto;animation:micromag-viewer-menus-menu-preview-fillPulse 1s cubic-bezier(.4,0,.6,1) infinite alternate-reverse}@-webkit-keyframes micromag-viewer-menus-menu-preview-fillPulse{0%{fill:hsla(0,0%,100%,.1)}to{fill:hsla(0,0%,100%,.15)}}@keyframes micromag-viewer-menus-menu-preview-fillPulse{0%{fill:hsla(0,0%,100%,.1)}to{fill:hsla(0,0%,100%,.15)}}
7
+ .micromag-viewer-menus-menu-screen-button{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-screen-container{position:relative;overflow:hidden;width:100%;height:0}.micromag-viewer-menus-menu-screen-button{display:block;z-index:2;-webkit-transition:border-width .4s cubic-bezier(.4,1.69,0,1);-o-transition:border-width .4s cubic-bezier(.4,1.69,0,1);transition:border-width .4s cubic-bezier(.4,1.69,0,1);border:0 solid #fff}.micromag-viewer-menus-menu-screen-button:focus-visible{outline:.25rem solid #a13dff;outline-offset:.25rem}.micromag-viewer-menus-menu-screen-isCurrent .micromag-viewer-menus-menu-screen-button{animation:micromag-viewer-menus-menu-screen-pulse .75s cubic-bezier(.4,0,.6,1) infinite alternate-reverse}@media (hover:hover){.micromag-viewer-menus-menu-screen-button:hover{border:.25rem solid #fff}}.micromag-viewer-menus-menu-screen-inner{z-index:1;pointer-events:none}.micromag-viewer-menus-menu-screen-subScreenBadge{position:absolute;z-index:2;bottom:.15rem;right:.15rem;font-size:1rem;font-weight:700;pointer-events:none}.micromag-viewer-menus-menu-screen-subScreenCount{position:absolute;z-index:2;color:#343434;letter-spacing:-.05rem;top:50%;left:50%;text-align:center;-webkit-transform:translate(-50%,-50%) translate(-.1rem,-.1rem);-ms-transform:translate(-50%,-50%) translate(-.1rem,-.1rem);transform:translate(-50%,-50%) translate(-.1rem,-.1rem)}.micromag-viewer-menus-menu-screen-subScreenIcon{position:relative;z-index:1;width:1.15rem;height:auto;fill:#fff}@-webkit-keyframes micromag-viewer-menus-menu-screen-pulse{0%{border-width:.25rem}to{border-width:.5rem}}@keyframes micromag-viewer-menus-menu-screen-pulse{0%{border-width:.25rem}to{border-width:.5rem}}
8
+ .micromag-viewer-menus-menu-preview-scroll{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-preview-container{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background-repeat:no-repeat;background-position:50%;background-size:cover;-ms-touch-action:none;touch-action:none}.micromag-viewer-menus-menu-preview-container.micromag-viewer-menus-menu-preview-disabled .micromag-viewer-menus-menu-preview-screenButton{pointer-events:none}.micromag-viewer-menus-menu-preview-content{height:100%;max-height:100%}.micromag-viewer-menus-menu-preview-buttons,.micromag-viewer-menus-menu-preview-content{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-viewer-menus-menu-preview-buttons{z-index:3;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.micromag-viewer-menus-menu-preview-organisation{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:30px;height:30px;margin-right:10px;border-radius:50%;background-color:#fff;background-repeat:no-repeat;background-position:50%;background-size:contain}.micromag-viewer-menus-menu-preview-icon{display:block;width:1rem;height:auto}.micromag-viewer-menus-menu-preview-title{margin-right:auto;color:#fff;font-family:Helvetica,Arial,sans-serif}.micromag-viewer-menus-menu-preview-nav{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;padding:10px}.micromag-viewer-menus-menu-preview-item,.micromag-viewer-menus-menu-preview-items{margin:0;padding:0;list-style:none}.micromag-viewer-menus-menu-preview-items{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.micromag-viewer-menus-menu-preview-item,.micromag-viewer-menus-menu-preview-items{position:relative}.micromag-viewer-menus-menu-preview-item{width:33.333%}.micromag-viewer-menus-menu-preview-inner{padding:2px}.micromag-viewer-menus-menu-preview-frame{width:100%;height:0;background-color:#fff;-webkit-animation:micromag-viewer-menus-menu-preview-fillPulse 1s cubic-bezier(.4,0,.6,1) infinite forwards;animation:micromag-viewer-menus-menu-preview-fillPulse 1s cubic-bezier(.4,0,.6,1) infinite forwards;-webkit-animation-play-state:paused;animation-play-state:paused}.micromag-viewer-menus-menu-preview-frame.micromag-viewer-menus-menu-preview-isLoading{-webkit-animation-play-state:running;animation-play-state:running}.micromag-viewer-menus-menu-preview-screen{opacity:0;-webkit-animation:micromag-viewer-menus-menu-preview-intro .4s cubic-bezier(.4,0,.6,1) 50ms 1 forwards;animation:micromag-viewer-menus-menu-preview-intro .4s cubic-bezier(.4,0,.6,1) 50ms 1 forwards}@-webkit-keyframes micromag-viewer-menus-menu-preview-intro{to{opacity:1}}@keyframes micromag-viewer-menus-menu-preview-intro{to{opacity:1}}@-webkit-keyframes micromag-viewer-menus-menu-preview-fillPulse{0%{background-color:hsla(0,0%,100%,.1)}50%{background-color:hsla(0,0%,100%,.15)}to{background-color:hsla(0,0%,100%,.1)}}@keyframes micromag-viewer-menus-menu-preview-fillPulse{0%{background-color:hsla(0,0%,100%,.1)}50%{background-color:hsla(0,0%,100%,.15)}to{background-color:hsla(0,0%,100%,.1)}}
9
9
  .micromag-viewer-partials-micromag-preview-container{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}.micromag-viewer-partials-micromag-preview-cover{margin-right:.5rem}.micromag-viewer-partials-micromag-preview-info{white-space:normal}.micromag-viewer-partials-micromag-preview-url{margin:.5rem 0;font-size:.75rem}.micromag-viewer-partials-micromag-preview-container .micromag-viewer-partials-micromag-preview-title{font-family:Helvetica,Arial,sans-serif!important;font-size:1.1rem!important;font-weight:700;margin-bottom:.25rem}
10
10
  .micromag-viewer-menus-menu-share-scroll{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-share-container{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;max-width:500px;margin:0 auto;height:100%;background-repeat:no-repeat;background-position:50%;background-size:cover;-ms-touch-action:none;touch-action:none}.micromag-viewer-menus-menu-share-container.micromag-viewer-menus-menu-share-disabled .micromag-viewer-menus-menu-share-button{pointer-events:none}.micromag-viewer-menus-menu-share-content{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-viewer-menus-menu-share-inner{padding:10px}.micromag-viewer-menus-menu-share-organisation{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:30px;height:30px;margin-right:10px;border-radius:50%;background-color:#fff;background-repeat:no-repeat;background-position:50%;background-size:contain}.micromag-viewer-menus-menu-share-icon{display:block;width:1rem;height:auto}.micromag-viewer-menus-menu-share-header{max-width:600px;margin:.5rem 0;padding:.5rem;border-radius:.5rem;background-color:rgba(0,0,0,.15)}.micromag-viewer-menus-menu-share-mode{margin-top:.5rem}.micromag-viewer-menus-menu-share-mode label{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;font-size:14px;line-height:1.4;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-viewer-menus-menu-share-mode input{margin-right:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1rem;height:1rem;border:2px solid #fff;-webkit-transition:-webkit-transform .3s cubic-bezier(0,.6,.5,1);transition:-webkit-transform .3s cubic-bezier(0,.6,.5,1);-o-transition:transform .3s cubic-bezier(0,.6,.5,1);transition:transform .3s cubic-bezier(0,.6,.5,1);transition:transform .3s cubic-bezier(0,.6,.5,1), -webkit-transform .3s cubic-bezier(0,.6,.5,1);animation:micromag-viewer-menus-menu-share-bump .5s cubic-bezier(.6,0,.4,1) 1 alternate-reverse forwards;border-radius:4px}.micromag-viewer-menus-menu-share-mode input:active{-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-o-transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67), -webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-webkit-transform:scale(1.3);-ms-transform:scale(1.3);transform:scale(1.3)}.micromag-viewer-menus-menu-share-mode input:checked{background-color:#fff}.micromag-viewer-menus-menu-share-options{margin-bottom:3rem}
11
11
  .micromag-viewer-container{font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.1}.micromag-viewer-container address,.micromag-viewer-container blockquote,.micromag-viewer-container caption,.micromag-viewer-container dl,.micromag-viewer-container figure,.micromag-viewer-container h1,.micromag-viewer-container h2,.micromag-viewer-container h3,.micromag-viewer-container h4,.micromag-viewer-container h5,.micromag-viewer-container h6,.micromag-viewer-container label,.micromag-viewer-container legend,.micromag-viewer-container li,.micromag-viewer-container ol,.micromag-viewer-container p,.micromag-viewer-container pre,.micromag-viewer-container ul{margin:0;padding:0}.micromag-viewer-container *,.micromag-viewer-container :after,.micromag-viewer-container :before{-webkit-box-sizing:border-box;box-sizing:border-box}.micromag-viewer-container h1,.micromag-viewer-container h2,.micromag-viewer-container h3,.micromag-viewer-container h4,.micromag-viewer-container h5,.micromag-viewer-container h6,.micromag-viewer-container li,.micromag-viewer-container p{font-weight:400}.micromag-viewer-menuContainer,.micromag-viewer-menuPreview,.micromag-viewer-screenContainer,.micromag-viewer-screensFrame{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-screenContainer:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-viewer-container{position:relative;width:100%;height:100%;overflow:hidden;background-color:#1c1c1c;color:#fff}.micromag-viewer-container.micromag-viewer-landscape .micromag-viewer-screensFrame{top:0;bottom:0;left:50%;margin:auto;-webkit-transform:translate(-50%);-ms-transform:translate(-50%);transform:translate(-50%)}.micromag-viewer-container.micromag-viewer-hideMenu .micromag-viewer-menuNavContainer{pointer-events:none;opacity:0}.micromag-viewer-container.micromag-viewer-hideMenu .micromag-viewer-dots,.micromag-viewer-container.micromag-viewer-hideMenu .micromag-viewer-menuTopContainer{opacity:0}.micromag-viewer-content{position:absolute;z-index:1;width:100%;height:100%;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;cursor:-webkit-grab;cursor:grab}.micromag-viewer-content:active{cursor:-webkit-grabbing;cursor:grabbing}.micromag-viewer-withoutGestures .micromag-viewer-content{cursor:inherit}.micromag-viewer-menuNavContainer{position:absolute;z-index:4;top:0;width:100%;-ms-touch-action:none;touch-action:none;-webkit-transition:opacity .5s cubic-bezier(.6,0,.4,1),background-image .5s cubic-bezier(.6,0,.4,1);-o-transition:opacity .5s cubic-bezier(.6,0,.4,1),background-image .5s cubic-bezier(.6,0,.4,1);transition:opacity .5s cubic-bezier(.6,0,.4,1),background-image .5s cubic-bezier(.6,0,.4,1)}.micromag-viewer-fadeMenu .micromag-viewer-menuNavContainer{opacity:.25}.micromag-viewer-menuNavContainer.micromag-viewer-withShadow{background-image:-webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,.75)),to(rgba(0,0,0,0)));background-image:-o-linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0));background-image:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0))}.micromag-viewer-fadeMenu .micromag-viewer-menuNavContainer.micromag-viewer-withShadow{background-image:-webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,0)));background-image:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0));background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0))}.micromag-viewer-menuNavContainer.micromag-viewer-isOpened{opacity:1}.micromag-viewer-menuNavContainer.micromag-viewer-isOpened .micromag-viewer-dots{opacity:0}.micromag-viewer-menuNavContainer.micromag-viewer-isOpened.micromag-viewer-withShadow{background-image:-webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,.75)),to(rgba(0,0,0,0)));background-image:-o-linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0));background-image:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0))}.micromag-viewer-menuTopContainer{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-transition:opacity .2s cubic-bezier(.6,0,.4,1);-o-transition:opacity .2s cubic-bezier(.6,0,.4,1);transition:opacity .2s cubic-bezier(.6,0,.4,1)}.micromag-viewer-menuItem{display:block;width:50%}.micromag-viewer-menuItemScreens{text-align:right}.micromag-viewer-menuButton{padding:.5rem .75rem;font-size:1rem}.micromag-viewer-slidingButton{display:inline-block}.micromag-viewer-screensMenuButtonToggled{left:auto;right:0}.micromag-viewer-dots{position:relative;z-index:3;top:-.25rem;padding:0 .5rem;-webkit-transition:opacity .3s cubic-bezier(0,.6,.5,1);-o-transition:opacity .3s cubic-bezier(0,.6,.5,1);transition:opacity .3s cubic-bezier(0,.6,.5,1)}.micromag-viewer-dots.micromag-viewer-isHidden{opacity:0;pointer-events:none}.micromag-viewer-menuContainer{z-index:3;top:0}.micromag-viewer-menuPreview{z-index:4}.micromag-viewer-navButton{display:none;visibility:hidden;position:absolute;z-index:3;top:50%;border:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.micromag-viewer-navButton.micromag-viewer-previous{left:1.5rem}.micromag-viewer-navButton.micromag-viewer-next{right:1.5rem}@media screen and (min-width:1024px){.micromag-viewer-navButton{display:block;visibility:visible}}.micromag-viewer-screensFrame{z-index:1;-ms-touch-action:none;touch-action:none}.micromag-viewer-screenContainer{display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;opacity:0}.micromag-viewer-screen{pointer-events:none}.micromag-viewer-current .micromag-viewer-screen{pointer-events:auto}.micromag-viewer-playbackControls{position:absolute;z-index:2;bottom:0;left:0;width:100%;pointer-events:none}.micromag-viewer-arrowHint{position:absolute;top:70%;right:5%}.micromag-viewer-webView{z-index:10}
package/es/index.js CHANGED
@@ -591,9 +591,9 @@ var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
591
591
  }, /*#__PURE__*/React.createElement(animated.div, {
592
592
  className: styles$d.heightContainer,
593
593
  style: _objectSpread({
594
- height: progressSpring.to(function (p) {
595
- return "".concat(p * 100, "%");
596
- }),
594
+ opacity: progressSpring,
595
+ // transform: progressSpring.to((p) => `translateY(${(1 - p) * -100}%)`),
596
+ // height: progressSpring.to((p) => `${p * 100}%`),
597
597
  pointerEvents: progressSpring.to(function (p) {
598
598
  return p < 0.25 ? 'none' : 'auto';
599
599
  }),
@@ -933,7 +933,10 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
933
933
  }]
934
934
  })) : '');
935
935
  return /*#__PURE__*/React.createElement("div", {
936
- className: classNames([styles$a.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles$a.isCurrent, current), _ref4)])
936
+ className: classNames([styles$a.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles$a.isCurrent, current), _ref4)]),
937
+ style: {
938
+ paddingBottom: "".concat(screenHeight / screenWidth * 100, "%")
939
+ }
937
940
  }, /*#__PURE__*/React.createElement("button", {
938
941
  type: "button",
939
942
  className: styles$a.button,
@@ -966,7 +969,7 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
966
969
  ViewerMenuScreen.propTypes = propTypes$d;
967
970
  ViewerMenuScreen.defaultProps = defaultProps$d;
968
971
 
969
- var styles$9 = {"scroll":"micromag-viewer-menus-menu-preview-scroll","container":"micromag-viewer-menus-menu-preview-container","disabled":"micromag-viewer-menus-menu-preview-disabled","screenButton":"micromag-viewer-menus-menu-preview-screenButton","buttons":"micromag-viewer-menus-menu-preview-buttons","content":"micromag-viewer-menus-menu-preview-content","organisation":"micromag-viewer-menus-menu-preview-organisation","icon":"micromag-viewer-menus-menu-preview-icon","title":"micromag-viewer-menus-menu-preview-title","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","screen":"micromag-viewer-menus-menu-preview-screen","loading":"micromag-viewer-menus-menu-preview-loading","fillPulse":"micromag-viewer-menus-menu-preview-fillPulse"};
972
+ var styles$9 = {"scroll":"micromag-viewer-menus-menu-preview-scroll","container":"micromag-viewer-menus-menu-preview-container","disabled":"micromag-viewer-menus-menu-preview-disabled","screenButton":"micromag-viewer-menus-menu-preview-screenButton","content":"micromag-viewer-menus-menu-preview-content","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","icon":"micromag-viewer-menus-menu-preview-icon","title":"micromag-viewer-menus-menu-preview-title","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","inner":"micromag-viewer-menus-menu-preview-inner","frame":"micromag-viewer-menus-menu-preview-frame","fillPulse":"micromag-viewer-menus-menu-preview-fillPulse","isLoading":"micromag-viewer-menus-menu-preview-isLoading","screen":"micromag-viewer-menus-menu-preview-screen","intro":"micromag-viewer-menus-menu-preview-intro"};
970
973
 
971
974
  var propTypes$c = {
972
975
  viewerTheme: PropTypes$1.viewerTheme,
@@ -977,6 +980,7 @@ var propTypes$c = {
977
980
  onClickScreen: PropTypes.func,
978
981
  maxThumbsWidth: PropTypes.number,
979
982
  paddingTop: PropTypes.number,
983
+ scrollDisabled: PropTypes.bool,
980
984
  // @todo to reimplement:
981
985
  // shouldLoad: PropTypes.bool,
982
986
  // toggleFullscreen: PropTypes.func,
@@ -994,6 +998,7 @@ var defaultProps$c = {
994
998
  onClickScreen: null,
995
999
  maxThumbsWidth: 140,
996
1000
  paddingTop: null,
1001
+ scrollDisabled: false,
997
1002
  // toggleFullscreen: null,
998
1003
  // fullscreenActive: false,
999
1004
  // fullscreenEnabled: false,
@@ -1009,6 +1014,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
1009
1014
  onClickScreen = _ref.onClickScreen,
1010
1015
  maxThumbsWidth = _ref.maxThumbsWidth,
1011
1016
  paddingTop = _ref.paddingTop,
1017
+ scrollDisabled = _ref.scrollDisabled,
1012
1018
  className = _ref.className;
1013
1019
 
1014
1020
  var _useDimensionObserver = useDimensionObserver(),
@@ -1035,12 +1041,29 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
1035
1041
  var brandImageStyle = brandImageUrl !== null ? {
1036
1042
  backgroundImage: "url(".concat(brandImageUrl, ")")
1037
1043
  } : null; // const { url: brandLogoUrl = null } = brandLogo || {};
1038
- // @todo optimize all of this the proper way
1044
+
1045
+ var _useState = useState([]),
1046
+ _useState2 = _slicedToArray(_useState, 2),
1047
+ screensMounted = _useState2[0],
1048
+ setScreensMounted = _useState2[1]; // @todo optimize all of this the proper way
1039
1049
  // const finalItems = useMemo(
1040
1050
  // () => (!focusable ? items.map((s, i) => (i > 6 ? { screenId: s.screenId } : s)) : items),
1041
1051
  // [items, focusable],
1042
1052
  // );
1043
1053
 
1054
+
1055
+ useEffect(function () {
1056
+ if (items.length === screensMounted.length) {
1057
+ return null;
1058
+ }
1059
+
1060
+ var timeout = setTimeout(function () {
1061
+ setScreensMounted([].concat(_toConsumableArray(screensMounted), [true]));
1062
+ }, 40);
1063
+ return function () {
1064
+ clearTimeout(timeout);
1065
+ };
1066
+ }, [items, screensMounted, setScreensMounted]);
1044
1067
  return /*#__PURE__*/React.createElement("div", {
1045
1068
  className: classNames([styles$9.container, _defineProperty({}, className, className !== null)]),
1046
1069
  style: _objectSpread(_objectSpread({}, brandImageStyle), {}, {
@@ -1051,7 +1074,8 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
1051
1074
  className: styles$9.content,
1052
1075
  ref: containerRef
1053
1076
  }, /*#__PURE__*/React.createElement(Scroll, {
1054
- className: styles$9.scroll
1077
+ className: styles$9.scroll,
1078
+ disabled: scrollDisabled
1055
1079
  }, /*#__PURE__*/React.createElement("nav", {
1056
1080
  className: styles$9.nav,
1057
1081
  style: {
@@ -1061,38 +1085,36 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
1061
1085
  className: styles$9.items
1062
1086
  }, items.map(function (item, index) {
1063
1087
  var _ref6 = item || {},
1064
- screenId = _ref6.screenId,
1065
- _ref6$screen = _ref6.screen,
1066
- screen = _ref6$screen === void 0 ? null : _ref6$screen;
1088
+ screenId = _ref6.screenId;
1067
1089
 
1068
1090
  var itemStyles = {
1069
1091
  width: "".concat(100 / thumbsPerLine, "%")
1070
1092
  };
1093
+
1094
+ var _ref7 = screenSize || {},
1095
+ screenWidth = _ref7.width,
1096
+ screenHeight = _ref7.height;
1097
+
1098
+ var screenMounted = screensMounted[index] || false;
1071
1099
  return /*#__PURE__*/React.createElement("li", {
1072
1100
  key: "item-".concat(screenId),
1073
1101
  className: styles$9.item,
1074
1102
  style: itemStyles
1075
1103
  }, /*#__PURE__*/React.createElement("div", {
1076
- className: styles$9.screen
1077
- }, screen === null ? /*#__PURE__*/React.createElement("svg", {
1078
- className: styles$9.loading,
1079
- xmlns: "http://www.w3.org/2000/svg",
1080
- width: "10",
1081
- height: "16",
1082
- viewBox: "0 0 10 16",
1104
+ className: styles$9.inner
1105
+ }, /*#__PURE__*/React.createElement("div", {
1106
+ className: classNames([styles$9.frame, _defineProperty({}, styles$9.isLoading, !screenMounted)]),
1083
1107
  style: {
1084
- animationDelay: "".concat(index * -50, "ms")
1108
+ paddingBottom: "".concat(screenHeight / screenWidth * 100, "%")
1085
1109
  }
1086
- }, /*#__PURE__*/React.createElement("rect", {
1087
- width: "10",
1088
- height: "16"
1089
- })) : /*#__PURE__*/React.createElement(ViewerMenuScreen, {
1110
+ }, screenMounted ? /*#__PURE__*/React.createElement(ViewerMenuScreen, {
1111
+ className: styles$9.screen,
1090
1112
  item: item,
1091
1113
  index: index,
1092
1114
  screenSize: screenSize,
1093
1115
  onClick: onClickScreen,
1094
1116
  focusable: focusable
1095
- })));
1117
+ }) : null)));
1096
1118
  }))))));
1097
1119
  };
1098
1120
 
@@ -1402,6 +1424,11 @@ var ViewerMenu = function ViewerMenu(_ref) {
1402
1424
  shareOpened = _useState4[0],
1403
1425
  setShareOpened = _useState4[1];
1404
1426
 
1427
+ var _useState5 = useState(false),
1428
+ _useState6 = _slicedToArray(_useState5, 2),
1429
+ menuMounted = _useState6[0],
1430
+ setMenuMounted = _useState6[1];
1431
+
1405
1432
  var _useDimensionObserver = useDimensionObserver(),
1406
1433
  navContainerRef = _useDimensionObserver.ref,
1407
1434
  _useDimensionObserver2 = _useDimensionObserver.height,
@@ -1606,6 +1633,13 @@ var ViewerMenu = function ViewerMenu(_ref) {
1606
1633
  useKeyboardShortcuts(keyboardShortcuts); // should be zero if either screens menu or share menu is opened
1607
1634
 
1608
1635
  var dotsOpacity = Math.min(1, Math.max(0, 1 - (menuOpenedProgress + shareOpenedProgress)));
1636
+ useEffect(function () {
1637
+ if ((menuOpened || draggingMenu) && !menuMounted) {
1638
+ setMenuMounted(true);
1639
+ } else if (!menuOpened && !draggingMenu && menuMounted) {
1640
+ setMenuMounted(false);
1641
+ }
1642
+ }, [menuOpened, draggingMenu, menuMounted, setMenuMounted]);
1609
1643
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
1610
1644
  className: classNames([styles$6.menuNavContainer, (_ref11 = {}, _defineProperty(_ref11, styles$6.withShadow, withShadow), _defineProperty(_ref11, styles$6.isOpened, menuOpened || shareOpened), _ref11)]),
1611
1645
  ref: refDots,
@@ -1686,7 +1720,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
1686
1720
  className: styles$6.menuContainer,
1687
1721
  progressSpring: menuOpenedProgress,
1688
1722
  theme: viewerTheme
1689
- }, draggingMenu || menuOpened ? /*#__PURE__*/React.createElement(ViewerMenuPreview, {
1723
+ }, menuMounted ? /*#__PURE__*/React.createElement(ViewerMenuPreview, {
1690
1724
  viewerTheme: viewerTheme,
1691
1725
  className: styles$6.menuPreview,
1692
1726
  screenSize: screenSize,
@@ -1698,6 +1732,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
1698
1732
  onShare: onShare,
1699
1733
  onClickScreen: onClickScreen,
1700
1734
  onClose: onCloseMenu,
1735
+ scrollDisabled: draggingMenu,
1701
1736
  toggleFullscreen: toggleFullscreen,
1702
1737
  fullscreenActive: fullscreenActive,
1703
1738
  fullscreenEnabled: fullscreenEnabled
package/lib/index.js CHANGED
@@ -611,9 +611,9 @@ var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
611
611
  }, /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
612
612
  className: styles$d.heightContainer,
613
613
  style: _objectSpread__default["default"]({
614
- height: progressSpring.to(function (p) {
615
- return "".concat(p * 100, "%");
616
- }),
614
+ opacity: progressSpring,
615
+ // transform: progressSpring.to((p) => `translateY(${(1 - p) * -100}%)`),
616
+ // height: progressSpring.to((p) => `${p * 100}%`),
617
617
  pointerEvents: progressSpring.to(function (p) {
618
618
  return p < 0.25 ? 'none' : 'auto';
619
619
  }),
@@ -953,7 +953,10 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
953
953
  }]
954
954
  })) : '');
955
955
  return /*#__PURE__*/React__default["default"].createElement("div", {
956
- className: classNames__default["default"]([styles$a.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles$a.isCurrent, current), _ref4)])
956
+ className: classNames__default["default"]([styles$a.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles$a.isCurrent, current), _ref4)]),
957
+ style: {
958
+ paddingBottom: "".concat(screenHeight / screenWidth * 100, "%")
959
+ }
957
960
  }, /*#__PURE__*/React__default["default"].createElement("button", {
958
961
  type: "button",
959
962
  className: styles$a.button,
@@ -986,7 +989,7 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
986
989
  ViewerMenuScreen.propTypes = propTypes$d;
987
990
  ViewerMenuScreen.defaultProps = defaultProps$d;
988
991
 
989
- var styles$9 = {"scroll":"micromag-viewer-menus-menu-preview-scroll","container":"micromag-viewer-menus-menu-preview-container","disabled":"micromag-viewer-menus-menu-preview-disabled","screenButton":"micromag-viewer-menus-menu-preview-screenButton","buttons":"micromag-viewer-menus-menu-preview-buttons","content":"micromag-viewer-menus-menu-preview-content","organisation":"micromag-viewer-menus-menu-preview-organisation","icon":"micromag-viewer-menus-menu-preview-icon","title":"micromag-viewer-menus-menu-preview-title","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","screen":"micromag-viewer-menus-menu-preview-screen","loading":"micromag-viewer-menus-menu-preview-loading","fillPulse":"micromag-viewer-menus-menu-preview-fillPulse"};
992
+ var styles$9 = {"scroll":"micromag-viewer-menus-menu-preview-scroll","container":"micromag-viewer-menus-menu-preview-container","disabled":"micromag-viewer-menus-menu-preview-disabled","screenButton":"micromag-viewer-menus-menu-preview-screenButton","content":"micromag-viewer-menus-menu-preview-content","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","icon":"micromag-viewer-menus-menu-preview-icon","title":"micromag-viewer-menus-menu-preview-title","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","inner":"micromag-viewer-menus-menu-preview-inner","frame":"micromag-viewer-menus-menu-preview-frame","fillPulse":"micromag-viewer-menus-menu-preview-fillPulse","isLoading":"micromag-viewer-menus-menu-preview-isLoading","screen":"micromag-viewer-menus-menu-preview-screen","intro":"micromag-viewer-menus-menu-preview-intro"};
990
993
 
991
994
  var propTypes$c = {
992
995
  viewerTheme: core.PropTypes.viewerTheme,
@@ -997,6 +1000,7 @@ var propTypes$c = {
997
1000
  onClickScreen: PropTypes__default["default"].func,
998
1001
  maxThumbsWidth: PropTypes__default["default"].number,
999
1002
  paddingTop: PropTypes__default["default"].number,
1003
+ scrollDisabled: PropTypes__default["default"].bool,
1000
1004
  // @todo to reimplement:
1001
1005
  // shouldLoad: PropTypes.bool,
1002
1006
  // toggleFullscreen: PropTypes.func,
@@ -1014,6 +1018,7 @@ var defaultProps$c = {
1014
1018
  onClickScreen: null,
1015
1019
  maxThumbsWidth: 140,
1016
1020
  paddingTop: null,
1021
+ scrollDisabled: false,
1017
1022
  // toggleFullscreen: null,
1018
1023
  // fullscreenActive: false,
1019
1024
  // fullscreenEnabled: false,
@@ -1029,6 +1034,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
1029
1034
  onClickScreen = _ref.onClickScreen,
1030
1035
  maxThumbsWidth = _ref.maxThumbsWidth,
1031
1036
  paddingTop = _ref.paddingTop,
1037
+ scrollDisabled = _ref.scrollDisabled,
1032
1038
  className = _ref.className;
1033
1039
 
1034
1040
  var _useDimensionObserver = hooks.useDimensionObserver(),
@@ -1055,12 +1061,29 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
1055
1061
  var brandImageStyle = brandImageUrl !== null ? {
1056
1062
  backgroundImage: "url(".concat(brandImageUrl, ")")
1057
1063
  } : null; // const { url: brandLogoUrl = null } = brandLogo || {};
1058
- // @todo optimize all of this the proper way
1064
+
1065
+ var _useState = React.useState([]),
1066
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
1067
+ screensMounted = _useState2[0],
1068
+ setScreensMounted = _useState2[1]; // @todo optimize all of this the proper way
1059
1069
  // const finalItems = useMemo(
1060
1070
  // () => (!focusable ? items.map((s, i) => (i > 6 ? { screenId: s.screenId } : s)) : items),
1061
1071
  // [items, focusable],
1062
1072
  // );
1063
1073
 
1074
+
1075
+ React.useEffect(function () {
1076
+ if (items.length === screensMounted.length) {
1077
+ return null;
1078
+ }
1079
+
1080
+ var timeout = setTimeout(function () {
1081
+ setScreensMounted([].concat(_toConsumableArray__default["default"](screensMounted), [true]));
1082
+ }, 40);
1083
+ return function () {
1084
+ clearTimeout(timeout);
1085
+ };
1086
+ }, [items, screensMounted, setScreensMounted]);
1064
1087
  return /*#__PURE__*/React__default["default"].createElement("div", {
1065
1088
  className: classNames__default["default"]([styles$9.container, _defineProperty__default["default"]({}, className, className !== null)]),
1066
1089
  style: _objectSpread__default["default"](_objectSpread__default["default"]({}, brandImageStyle), {}, {
@@ -1071,7 +1094,8 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
1071
1094
  className: styles$9.content,
1072
1095
  ref: containerRef
1073
1096
  }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
1074
- className: styles$9.scroll
1097
+ className: styles$9.scroll,
1098
+ disabled: scrollDisabled
1075
1099
  }, /*#__PURE__*/React__default["default"].createElement("nav", {
1076
1100
  className: styles$9.nav,
1077
1101
  style: {
@@ -1081,38 +1105,36 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
1081
1105
  className: styles$9.items
1082
1106
  }, items.map(function (item, index) {
1083
1107
  var _ref6 = item || {},
1084
- screenId = _ref6.screenId,
1085
- _ref6$screen = _ref6.screen,
1086
- screen = _ref6$screen === void 0 ? null : _ref6$screen;
1108
+ screenId = _ref6.screenId;
1087
1109
 
1088
1110
  var itemStyles = {
1089
1111
  width: "".concat(100 / thumbsPerLine, "%")
1090
1112
  };
1113
+
1114
+ var _ref7 = screenSize || {},
1115
+ screenWidth = _ref7.width,
1116
+ screenHeight = _ref7.height;
1117
+
1118
+ var screenMounted = screensMounted[index] || false;
1091
1119
  return /*#__PURE__*/React__default["default"].createElement("li", {
1092
1120
  key: "item-".concat(screenId),
1093
1121
  className: styles$9.item,
1094
1122
  style: itemStyles
1095
1123
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1096
- className: styles$9.screen
1097
- }, screen === null ? /*#__PURE__*/React__default["default"].createElement("svg", {
1098
- className: styles$9.loading,
1099
- xmlns: "http://www.w3.org/2000/svg",
1100
- width: "10",
1101
- height: "16",
1102
- viewBox: "0 0 10 16",
1124
+ className: styles$9.inner
1125
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
1126
+ className: classNames__default["default"]([styles$9.frame, _defineProperty__default["default"]({}, styles$9.isLoading, !screenMounted)]),
1103
1127
  style: {
1104
- animationDelay: "".concat(index * -50, "ms")
1128
+ paddingBottom: "".concat(screenHeight / screenWidth * 100, "%")
1105
1129
  }
1106
- }, /*#__PURE__*/React__default["default"].createElement("rect", {
1107
- width: "10",
1108
- height: "16"
1109
- })) : /*#__PURE__*/React__default["default"].createElement(ViewerMenuScreen, {
1130
+ }, screenMounted ? /*#__PURE__*/React__default["default"].createElement(ViewerMenuScreen, {
1131
+ className: styles$9.screen,
1110
1132
  item: item,
1111
1133
  index: index,
1112
1134
  screenSize: screenSize,
1113
1135
  onClick: onClickScreen,
1114
1136
  focusable: focusable
1115
- })));
1137
+ }) : null)));
1116
1138
  }))))));
1117
1139
  };
1118
1140
 
@@ -1422,6 +1444,11 @@ var ViewerMenu = function ViewerMenu(_ref) {
1422
1444
  shareOpened = _useState4[0],
1423
1445
  setShareOpened = _useState4[1];
1424
1446
 
1447
+ var _useState5 = React.useState(false),
1448
+ _useState6 = _slicedToArray__default["default"](_useState5, 2),
1449
+ menuMounted = _useState6[0],
1450
+ setMenuMounted = _useState6[1];
1451
+
1425
1452
  var _useDimensionObserver = hooks.useDimensionObserver(),
1426
1453
  navContainerRef = _useDimensionObserver.ref,
1427
1454
  _useDimensionObserver2 = _useDimensionObserver.height,
@@ -1626,6 +1653,13 @@ var ViewerMenu = function ViewerMenu(_ref) {
1626
1653
  useKeyboardShortcuts(keyboardShortcuts); // should be zero if either screens menu or share menu is opened
1627
1654
 
1628
1655
  var dotsOpacity = Math.min(1, Math.max(0, 1 - (menuOpenedProgress + shareOpenedProgress)));
1656
+ React.useEffect(function () {
1657
+ if ((menuOpened || draggingMenu) && !menuMounted) {
1658
+ setMenuMounted(true);
1659
+ } else if (!menuOpened && !draggingMenu && menuMounted) {
1660
+ setMenuMounted(false);
1661
+ }
1662
+ }, [menuOpened, draggingMenu, menuMounted, setMenuMounted]);
1629
1663
  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
1630
1664
  className: classNames__default["default"]([styles$6.menuNavContainer, (_ref11 = {}, _defineProperty__default["default"](_ref11, styles$6.withShadow, withShadow), _defineProperty__default["default"](_ref11, styles$6.isOpened, menuOpened || shareOpened), _ref11)]),
1631
1665
  ref: refDots,
@@ -1706,7 +1740,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
1706
1740
  className: styles$6.menuContainer,
1707
1741
  progressSpring: menuOpenedProgress,
1708
1742
  theme: viewerTheme
1709
- }, draggingMenu || menuOpened ? /*#__PURE__*/React__default["default"].createElement(ViewerMenuPreview, {
1743
+ }, menuMounted ? /*#__PURE__*/React__default["default"].createElement(ViewerMenuPreview, {
1710
1744
  viewerTheme: viewerTheme,
1711
1745
  className: styles$6.menuPreview,
1712
1746
  screenSize: screenSize,
@@ -1718,6 +1752,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
1718
1752
  onShare: onShare,
1719
1753
  onClickScreen: onClickScreen,
1720
1754
  onClose: onCloseMenu,
1755
+ scrollDisabled: draggingMenu,
1721
1756
  toggleFullscreen: toggleFullscreen,
1722
1757
  fullscreenActive: fullscreenActive,
1723
1758
  fullscreenEnabled: fullscreenEnabled
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/viewer",
3
- "version": "0.3.209",
3
+ "version": "0.3.214",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -59,14 +59,14 @@
59
59
  "@fortawesome/fontawesome-svg-core": "^1.2.32",
60
60
  "@fortawesome/free-solid-svg-icons": "^5.15.1",
61
61
  "@fortawesome/react-fontawesome": "^0.1.13",
62
- "@micromag/core": "^0.3.209",
63
- "@micromag/element-scroll": "^0.3.209",
64
- "@micromag/element-share-options": "^0.3.209",
65
- "@micromag/element-webview": "^0.3.209",
66
- "@micromag/elements": "^0.3.209",
67
- "@micromag/fields": "^0.3.209",
68
- "@micromag/intl": "^0.3.209",
69
- "@micromag/screens": "^0.3.209",
62
+ "@micromag/core": "^0.3.213",
63
+ "@micromag/element-scroll": "^0.3.213",
64
+ "@micromag/element-share-options": "^0.3.213",
65
+ "@micromag/element-webview": "^0.3.213",
66
+ "@micromag/elements": "^0.3.213",
67
+ "@micromag/fields": "^0.3.213",
68
+ "@micromag/intl": "^0.3.213",
69
+ "@micromag/screens": "^0.3.213",
70
70
  "@react-spring/core": "^9.1.1",
71
71
  "@react-spring/web": "^9.1.1",
72
72
  "@use-gesture/react": "^10.2.4",
@@ -85,5 +85,5 @@
85
85
  "publishConfig": {
86
86
  "access": "public"
87
87
  },
88
- "gitHead": "909d9ff44ec6bf543db9c75186cd223391a5f0cd"
88
+ "gitHead": "aebc6e9e567ebb3149dce8d1126187099516643c"
89
89
  }