@micromag/viewer 0.3.178 → 0.3.179

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 +3 -3
  2. package/es/index.js +214 -186
  3. package/lib/index.js +214 -186
  4. package/package.json +2 -2
package/assets/css/styles.css CHANGED
@@ -1,8 +1,8 @@
1
- .micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton,.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-menuButton{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-menuButton{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton:focus-visible,.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-menuButton:focus-visible{outline:3px solid #a13dff}.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-menu{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;width:16px;height:16px;padding-left:10px}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-menuIcon{display:block;height: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%}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical .micromag-viewer-menus-menu-dots-menu{position:absolute;top:10px;right:10px;padding-left:0}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-withShadow{background:-webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,.4)),to(rgba(0,0,0,0)));background:-o-linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,0));background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,0))}
2
- .micromag-viewer-menus-menu-dot-container .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-container{-webkit-flex:1 1;-ms-flex:1 1;flex:1 1}.micromag-viewer-menus-menu-dot-container .micromag-viewer-menus-menu-dot-button{display:block;width:100%;padding:10px 2px}.micromag-viewer-menus-menu-dot-container .micromag-viewer-menus-menu-dot-dot{display:block;width:100%;height:2px;border-radius:2px}.micromag-viewer-menus-menu-dot-container .micromag-viewer-menus-menu-dot-subDot{display:block;position:relative;border-radius:0}.micromag-viewer-menus-menu-dot-container .micromag-viewer-menus-menu-dot-subDot:after{content:"";position:absolute;left:100%;width:1px;height:100%;background-color:inherit}.micromag-viewer-menus-menu-dot-container .micromag-viewer-menus-menu-dot-subDot:first-child{border-top-left-radius:2px;border-bottom-left-radius:2px}.micromag-viewer-menus-menu-dot-container .micromag-viewer-menus-menu-dot-subDot:last-child{border-top-right-radius:2px;border-bottom-right-radius:2px}.micromag-viewer-menus-menu-dot-container .micromag-viewer-menus-menu-dot-subDot:last-child:after{left:0;width:0;background-color:rgba(0,0,0,0)}.micromag-viewer-menus-menu-dot-container .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%}.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%}
3
-
4
1
  .micromag-viewer-partials-share-modal-close{display:inline-block;position:relative;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-partials-share-modal-container{position:fixed;z-index:1020;top:0;right:0;bottom:0;left:0;height:100vh;-webkit-transition:background-color .2s ease-out;-o-transition:background-color .2s ease-out;transition:background-color .2s ease-out;background-color:rgba(0,0,0,0);pointer-events:none}.micromag-viewer-partials-share-modal-container.micromag-viewer-partials-share-modal-opened{background-color:rgba(28,28,28,.85);pointer-events:auto}.micromag-viewer-partials-share-modal-modal{position:absolute;z-index:2;top:50%;left:50%;width:calc(100% - 1rem);max-width:500px;-webkit-transform:translate(-50%,-50%) translateY(1rem);-ms-transform:translate(-50%,-50%) translateY(1rem);transform:translate(-50%,-50%) translateY(1rem);-webkit-transition:opacity .2s ease-out,-webkit-transform .2s ease-out;transition:opacity .2s ease-out,-webkit-transform .2s ease-out;-o-transition:opacity .2s ease-out,transform .2s ease-out;transition:opacity .2s ease-out,transform .2s ease-out;transition:opacity .2s ease-out,transform .2s ease-out,-webkit-transform .2s ease-out;border-radius:1.5rem;opacity:0;background-color:#e9e9e9;color:#1c1c1c}.micromag-viewer-partials-share-modal-opened .micromag-viewer-partials-share-modal-modal{-webkit-transform:translate(-50%,-50%) translateY(0);-ms-transform:translate(-50%,-50%) translateY(0);transform:translate(-50%,-50%) translateY(0);-webkit-transition:opacity .2s ease-out .1s,-webkit-transform .2s ease-out .1s;transition:opacity .2s ease-out .1s,-webkit-transform .2s ease-out .1s;-o-transition:opacity .2s ease-out .1s,transform .2s ease-out .1s;transition:opacity .2s ease-out .1s,transform .2s ease-out .1s;transition:opacity .2s ease-out .1s,transform .2s ease-out .1s,-webkit-transform .2s ease-out .1s;opacity:1}.micromag-viewer-partials-share-modal-header{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding:1rem}.micromag-viewer-partials-share-modal-heading{font-size:1.25rem!important;font-weight:700!important}.micromag-viewer-partials-share-modal-close{margin:-2px -2px 0 auto;padding:0}.micromag-viewer-partials-share-modal-closeIcon{color:#1c1c1c}.micromag-viewer-partials-share-modal-shareOptions{padding:0 1rem}
5
2
  .micromag-viewer-partials-share-button-container{position:relative;white-space:nowrap;width:100%;height:100%}
3
+ .micromag-viewer-menus-menu-dot-container .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-container{-webkit-flex:1 1;-ms-flex:1 1;flex:1 1}.micromag-viewer-menus-menu-dot-container .micromag-viewer-menus-menu-dot-button{display:block;width:100%;padding:10px 2px}.micromag-viewer-menus-menu-dot-container .micromag-viewer-menus-menu-dot-dot{display:block;width:100%;height:2px;border-radius:2px}.micromag-viewer-menus-menu-dot-container .micromag-viewer-menus-menu-dot-subDot{display:block;position:relative;border-radius:0}.micromag-viewer-menus-menu-dot-container .micromag-viewer-menus-menu-dot-subDot:after{content:"";position:absolute;left:100%;width:1px;height:100%;background-color:inherit}.micromag-viewer-menus-menu-dot-container .micromag-viewer-menus-menu-dot-subDot:first-child{border-top-left-radius:2px;border-bottom-left-radius:2px}.micromag-viewer-menus-menu-dot-container .micromag-viewer-menus-menu-dot-subDot:last-child{border-top-right-radius:2px;border-bottom-right-radius:2px}.micromag-viewer-menus-menu-dot-container .micromag-viewer-menus-menu-dot-subDot:last-child:after{left:0;width:0;background-color:rgba(0,0,0,0)}.micromag-viewer-menus-menu-dot-container .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%}.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%}
4
+
5
+ .micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton,.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-menuButton{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-menuButton{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton:focus-visible,.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-menuButton:focus-visible{outline:3px solid #a13dff}.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-menu{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;width:16px;height:16px;padding-left:10px}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-menuIcon{display:block;height: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%}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical .micromag-viewer-menus-menu-dots-menu{position:absolute;top:10px;right:10px;padding-left:0}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-withShadow{background:-webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,.4)),to(rgba(0,0,0,0)));background:-o-linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,0));background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,0))}
6
6
  .micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenButton{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-preview-container .micromag-viewer-menus-menu-preview-activeScreenBorder,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenButton,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-scroll{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-button:focus-visible,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-shareButton:focus-visible{outline:3px solid #a13dff}.micromag-viewer-menus-menu-preview-container{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;padding:10px;background-color:#000;background-repeat:no-repeat;background-position:50%;background-size:cover;color:#fff;-ms-touch-action:none;touch-action:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenButton{display:block}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenButton:focus-visible{border:4px solid #a13dff;outline: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-container .micromag-viewer-menus-menu-preview-header{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin-bottom:20px}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-button,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-shareButton{display:inline-block;border:0;border-radius:0;background-color:rgba(0,0,0,0);color:inherit;font-size:.9rem;font-weight:600;line-height:1.4;text-align:center;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-button{width:20px;margin-left:10px;padding:0}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-button:first-child{margin-left:0}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-shareButton{z-index:1}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-icon{display:block;width:100%;height:100%}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-buttons{display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;z-index:3;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.micromag-viewer-menus-menu-preview-container .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-container .micromag-viewer-menus-menu-preview-title{margin-right:auto;color:#fff;font-family:Helvetica,Arial,sans-serif}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-content,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-nav{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-nav{overflow:hidden}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-item,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-items{margin:0;padding:0;list-style:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-items{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-item{position:relative}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-item.micromag-viewer-menus-menu-preview-active .micromag-viewer-menus-menu-preview-screenButton{pointer-events:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-itemContent{padding:2px}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenContainer{position:relative;width:100%}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-subScreenBadge{display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;z-index:2;top:.3rem;right:.15rem;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:1.25rem;height:1.25rem;pointer-events:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-subScreenCount{position:relative;z-index:2;width:100%;padding:5px 0 0 3px;color:#343434;font-size:.7rem;letter-spacing:-.05rem;text-align:center}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-subScreenIcon{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;fill:#fff}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-activeScreenBorder{border:2px solid #fff}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenContent{-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;background-color:#2b2b2b}
7
7
  .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-container .micromag-viewer-menuPreview,.micromag-viewer-container .micromag-viewer-menuPreviewContainer,.micromag-viewer-container .micromag-viewer-screenContainer,.micromag-viewer-container .micromag-viewer-screenContainer .micromag-viewer-screen{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-container .micromag-viewer-screenContainer:focus-visible{outline:3px solid #a13dff}.micromag-viewer-container{position:relative;background-color:#1c1c1c;color:#fff}.micromag-viewer-container,.micromag-viewer-container .micromag-viewer-content{width:100%;height:100%;overflow:hidden}.micromag-viewer-container .micromag-viewer-content{position:absolute;z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-viewer-container .micromag-viewer-menuDotsContainer{visibility:hidden;position:absolute;z-index:2;top:0;right:50%;width:100%;-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);-ms-touch-action:none;touch-action:none}.micromag-viewer-container .micromag-viewer-menuDots{position:relative;padding:8px 10px;-webkit-transition:opacity .25s ease;-o-transition:opacity .25s ease;transition:opacity .25s ease}.micromag-viewer-container .micromag-viewer-menuPreviewContainer{visibility:hidden;z-index:3;top:-100%}.micromag-viewer-container .micromag-viewer-menuPreview{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.micromag-viewer-container .micromag-viewer-navButton{display:none;visibility:hidden;position:absolute;top:50%;width:50px;height:50px;border:0}.micromag-viewer-container .micromag-viewer-navButton.micromag-viewer-previous{left:0;-webkit-transform:translate(-100%,-50%);-ms-transform:translate(-100%,-50%);transform:translate(-100%,-50%)}.micromag-viewer-container .micromag-viewer-navButton.micromag-viewer-next{right:0;-webkit-transform:translate(100%,-50%);-ms-transform:translate(100%,-50%);transform:translate(100%,-50%)}@media screen and (min-width:1024px){.micromag-viewer-container .micromag-viewer-navButton{display:block;visibility:visible}}.micromag-viewer-container .micromag-viewer-screenContainer{display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;opacity:0}.micromag-viewer-container .micromag-viewer-screenContainer .micromag-viewer-screen{pointer-events:none}.micromag-viewer-container .micromag-viewer-screenContainer.micromag-viewer-current{opacity:1}.micromag-viewer-container .micromag-viewer-screenContainer.micromag-viewer-current .micromag-viewer-screen{pointer-events:auto}.micromag-viewer-container.micromag-viewer-landscape .micromag-viewer-screenContainer{top:0;right:auto;bottom:0;left:50%;margin:auto;-webkit-transform:translate(50vw);-ms-transform:translate(50vw);transform:translate(50vw);opacity:.2;cursor:pointer}.micromag-viewer-container.micromag-viewer-landscape .micromag-viewer-screenContainer:focus-visible,.micromag-viewer-container.micromag-viewer-landscape .micromag-viewer-screenContainer:hover{opacity:.3}.micromag-viewer-container.micromag-viewer-landscape .micromag-viewer-screenContainer.micromag-viewer-visible{-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0)}.micromag-viewer-container.micromag-viewer-landscape .micromag-viewer-screenContainer.micromag-viewer-current{-webkit-transform:translate(-50%);-ms-transform:translate(-50%);transform:translate(-50%);opacity:1;cursor:auto}.micromag-viewer-container.micromag-viewer-landscape.micromag-viewer-withSiblings .micromag-viewer-screenContainer{-webkit-transition:opacity .3s ease,-webkit-transform .3s ease;transition:opacity .3s ease,-webkit-transform .3s ease;-o-transition:transform .3s ease,opacity .3s ease;transition:transform .3s ease,opacity .3s ease;transition:transform .3s ease,opacity .3s ease,-webkit-transform .3s ease}.micromag-viewer-container .micromag-viewer-playbackControlsContainer{margin:0 auto}.micromag-viewer-container .micromag-viewer-playbackControls{position:absolute;z-index:5;bottom:0;left:0;width:100%;pointer-events:none}.micromag-viewer-container .micromag-viewer-webView{z-index:10}.micromag-viewer-container.micromag-viewer-hideMenu .micromag-viewer-menuDotsContainer{pointer-events:none}.micromag-viewer-container.micromag-viewer-hideMenu .micromag-viewer-menuDots{opacity:0}.micromag-viewer-container.micromag-viewer-ready .micromag-viewer-menuDotsContainer,.micromag-viewer-container.micromag-viewer-ready .micromag-viewer-menuPreviewContainer{visibility:visible}
8
8
  .micromag-viewer-partials-hand-tap-container{position:relative}.micromag-viewer-partials-hand-tap-container .micromag-viewer-partials-hand-tap-circle{position:absolute;z-index:2;top:-10px;left:0;width:21px;height:21px;-webkit-animation-name:micromag-viewer-partials-hand-tap-pulse;animation-name:micromag-viewer-partials-hand-tap-pulse;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;border:1px solid #fff;border-radius:50%;-webkit-animation-fill-mode:both;animation-fill-mode:both}.micromag-viewer-partials-hand-tap-container .micromag-viewer-partials-hand-tap-hand{position:relative;z-index:2;width:30px;height:auto;-webkit-animation-name:micromag-viewer-partials-hand-tap-panY;animation-name:micromag-viewer-partials-hand-tap-panY;-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-fill-mode:both;animation-fill-mode:both}@media screen and (min-width:1024px){.micromag-viewer-partials-hand-tap-container{display:none}}.micromag-viewer-partials-hand-tap-inner:after{content:"";position:absolute;z-index:1;top:50%;left:50%;width:600%;height:500%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-animation-name:micromag-viewer-partials-hand-tap-shadowFade;animation-name:micromag-viewer-partials-hand-tap-shadowFade;-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-delay:.05s;animation-delay:.05s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate;background-image:-o-radial-gradient(hsla(0,0%,42.4%,.4),hsla(0,0%,42.4%,0) 60%);background-image:radial-gradient(hsla(0,0%,42.4%,.4),hsla(0,0%,42.4%,0) 60%);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes micromag-viewer-partials-hand-tap-pulse{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}50%{-webkit-transform:scale(1.5);transform:scale(1.5);opacity:.5}to{-webkit-transform:scale(2);transform:scale(2);opacity:0}}@keyframes micromag-viewer-partials-hand-tap-pulse{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}50%{-webkit-transform:scale(1.5);transform:scale(1.5);opacity:.5}to{-webkit-transform:scale(2);transform:scale(2);opacity:0}}@-webkit-keyframes micromag-viewer-partials-hand-tap-panY{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes micromag-viewer-partials-hand-tap-panY{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes micromag-viewer-partials-hand-tap-shadowFade{0%{-webkit-transform:translate(-50%,-50%) translateY(0) scale(.85);transform:translate(-50%,-50%) translateY(0) scale(.85)}to{-webkit-transform:translate(-50%,-50%) translateY(10px) scale(1.1);transform:translate(-50%,-50%) translateY(10px) scale(1.1)}}@keyframes micromag-viewer-partials-hand-tap-shadowFade{0%{-webkit-transform:translate(-50%,-50%) translateY(0) scale(.85);transform:translate(-50%,-50%) translateY(0) scale(.85)}to{-webkit-transform:translate(-50%,-50%) translateY(10px) scale(1.1);transform:translate(-50%,-50%) translateY(10px) scale(1.1)}}
package/es/index.js CHANGED
@@ -22,8 +22,8 @@ import { useDocumentEvent, useDimensionObserver, useTrackEvent, useMediaProgress
22
22
  import { getStyleFromColor, getStyleFromText, getColorAsString, getDeviceScreens } from '@micromag/core/utils';
23
23
  import { useSpring, config } from '@react-spring/core';
24
24
  import { animated } from '@react-spring/web';
25
- import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
26
25
  import { faShare } from '@fortawesome/free-solid-svg-icons/faShare';
26
+ import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
27
27
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
28
28
  import ShareOptions from '@micromag/element-share-options';
29
29
  import { faCompress } from '@fortawesome/free-solid-svg-icons/faCompress';
@@ -222,161 +222,9 @@ function useScreenInteraction() {
222
222
  };
223
223
  }
224
224
 
225
- var styles$c = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","menuButton":"micromag-viewer-menus-menu-dots-menuButton","item":"micromag-viewer-menus-menu-dots-item","items":"micromag-viewer-menus-menu-dots-items","menu":"micromag-viewer-menus-menu-dots-menu","menuIcon":"micromag-viewer-menus-menu-dots-menuIcon","vertical":"micromag-viewer-menus-menu-dots-vertical","withShadow":"micromag-viewer-menus-menu-dots-withShadow"};
226
-
227
- var styles$b = {"container":"micromag-viewer-menus-menu-dot-container","button":"micromag-viewer-menus-menu-dot-button","dot":"micromag-viewer-menus-menu-dot-dot","subDot":"micromag-viewer-menus-menu-dot-subDot","dots":"micromag-viewer-menus-menu-dot-dots","vertical":"micromag-viewer-menus-menu-dot-vertical"};
225
+ var styles$c = {"close":"micromag-viewer-partials-share-modal-close","container":"micromag-viewer-partials-share-modal-container","opened":"micromag-viewer-partials-share-modal-opened","modal":"micromag-viewer-partials-share-modal-modal","header":"micromag-viewer-partials-share-modal-header","heading":"micromag-viewer-partials-share-modal-heading","closeIcon":"micromag-viewer-partials-share-modal-closeIcon","shareOptions":"micromag-viewer-partials-share-modal-shareOptions"};
228
226
 
229
227
  var propTypes$h = {
230
- current: PropTypes.bool,
231
- active: PropTypes.bool,
232
- colors: PropTypes.shape({
233
- primary: PropTypes.string,
234
- secondary: PropTypes.string
235
- }),
236
- count: PropTypes.number,
237
- subIndex: PropTypes.number,
238
- vertical: PropTypes.bool,
239
- onClick: PropTypes.func,
240
- className: PropTypes.string
241
- };
242
- var defaultProps$h = {
243
- current: false,
244
- active: false,
245
- colors: null,
246
- count: 1,
247
- subIndex: 0,
248
- vertical: false,
249
- onClick: null,
250
- className: null
251
- };
252
-
253
- var ViewerMenuDot = function ViewerMenuDot(_ref) {
254
- var _ref3;
255
-
256
- var current = _ref.current,
257
- active = _ref.active,
258
- colors = _ref.colors,
259
- count = _ref.count,
260
- subIndex = _ref.subIndex,
261
- vertical = _ref.vertical,
262
- onClick = _ref.onClick,
263
- className = _ref.className;
264
- var currentTime = 0;
265
- var duration = 1;
266
- var playing = true;
267
-
268
- var _ref2 = colors || {},
269
- _ref2$primary = _ref2.primary,
270
- primary = _ref2$primary === void 0 ? 'rgba(255, 255, 255, 1)' : _ref2$primary,
271
- _ref2$secondary = _ref2.secondary,
272
- secondary = _ref2$secondary === void 0 ? 'rgba(200, 200, 200, 0.5)' : _ref2$secondary; // TODO: if approved animate progress
273
-
274
-
275
- var _useSpring = useSpring(function () {
276
- return {
277
- x: 0,
278
- config: {
279
- duration: 0
280
- }
281
- };
282
- }),
283
- _useSpring2 = _slicedToArray(_useSpring, 2);
284
- _useSpring2[0];
285
- var setSpringProps = _useSpring2[1];
286
-
287
- useEffect(function () {
288
-
289
- var progress = currentTime / duration;
290
- setSpringProps.start({
291
- reset: true,
292
- immediate: !playing,
293
- from: {
294
- x: progress
295
- },
296
- to: {
297
- x: 1
298
- },
299
- config: {
300
- duration: (duration - currentTime) * 1000
301
- }
302
- });
303
- }, [playing, duration, currentTime, setSpringProps]);
304
- var inner = current && count > 1 ? /*#__PURE__*/React.createElement("span", {
305
- className: styles$b.dots
306
- }, _toConsumableArray(Array(count).keys()).map(function (i) {
307
- return /*#__PURE__*/React.createElement("span", {
308
- className: classNames([styles$b.dot, styles$b.subDot]),
309
- style: {
310
- width: "".concat(parseFloat(1 / count * 100).toFixed(2), "%"),
311
- backgroundColor: active && i <= subIndex ? primary : secondary
312
- }
313
- });
314
- })) : /*#__PURE__*/React.createElement("span", {
315
- className: styles$b.dot,
316
- style: {
317
- backgroundColor: active ? primary : secondary
318
- }
319
- });
320
- return /*#__PURE__*/React.createElement("li", {
321
- className: classNames([styles$b.container, (_ref3 = {}, _defineProperty(_ref3, styles$b.active, current), _defineProperty(_ref3, styles$b.vertical, vertical), _defineProperty(_ref3, className, className !== null), _ref3)]),
322
- "aria-hidden": "true"
323
- }, /*#__PURE__*/React.createElement("button", {
324
- type: "button",
325
- className: styles$b.button,
326
- onClick: onClick,
327
- tabIndex: "-1"
328
- }, inner));
329
- };
330
-
331
- ViewerMenuDot.propTypes = propTypes$h;
332
- ViewerMenuDot.defaultProps = defaultProps$h;
333
-
334
- var styles$a = {};
335
-
336
- var propTypes$g = {
337
- size: PropTypes.number,
338
- spacing: PropTypes.number,
339
- color: PropTypes.string,
340
- className: PropTypes.string
341
- };
342
- var defaultProps$g = {
343
- size: 100,
344
- spacing: 8,
345
- color: 'white',
346
- className: null
347
- };
348
-
349
- var MenuIcon = function MenuIcon(_ref) {
350
- var size = _ref.size,
351
- spacing = _ref.spacing,
352
- color = _ref.color,
353
- className = _ref.className;
354
- var squareSize = (size - 2 * spacing) / 3;
355
- return /*#__PURE__*/React.createElement("svg", {
356
- className: classNames([styles$a.container, _defineProperty({}, className, className !== null)]),
357
- xmlns: "http://www.w3.org/2000/svg",
358
- viewBox: "0 0 ".concat(size, " ").concat(size),
359
- "aria-hidden": "true"
360
- }, _toConsumableArray(new Array(9)).map(function (square, squareI) {
361
- var x = squareI % 3 * (squareSize + spacing);
362
- var y = Math.floor(squareI / 3) * (squareSize + spacing);
363
- return /*#__PURE__*/React.createElement("rect", {
364
- key: "square-".concat(squareI),
365
- fill: color,
366
- x: x,
367
- y: y,
368
- width: squareSize,
369
- height: squareSize
370
- });
371
- }));
372
- };
373
-
374
- MenuIcon.propTypes = propTypes$g;
375
- MenuIcon.defaultProps = defaultProps$g;
376
-
377
- var styles$9 = {"close":"micromag-viewer-partials-share-modal-close","container":"micromag-viewer-partials-share-modal-container","opened":"micromag-viewer-partials-share-modal-opened","modal":"micromag-viewer-partials-share-modal-modal","header":"micromag-viewer-partials-share-modal-header","heading":"micromag-viewer-partials-share-modal-heading","closeIcon":"micromag-viewer-partials-share-modal-closeIcon","shareOptions":"micromag-viewer-partials-share-modal-shareOptions"};
378
-
379
- var propTypes$f = {
380
228
  url: PropTypes.string,
381
229
  title: PropTypes.string,
382
230
  opened: PropTypes.bool,
@@ -384,7 +232,7 @@ var propTypes$f = {
384
232
  onShare: PropTypes.func,
385
233
  onCancel: PropTypes.func
386
234
  };
387
- var defaultProps$f = {
235
+ var defaultProps$h = {
388
236
  url: null,
389
237
  title: null,
390
238
  opened: false,
@@ -415,15 +263,15 @@ var ShareModal = function ShareModal(_ref) {
415
263
  }, [opened, onCancel]);
416
264
  useDocumentEvent('click', onDocumentClick, opened);
417
265
  return /*#__PURE__*/React.createElement("div", {
418
- className: classNames([styles$9.container, (_ref3 = {}, _defineProperty(_ref3, className, className), _defineProperty(_ref3, styles$9.opened, opened), _ref3)]),
266
+ className: classNames([styles$c.container, (_ref3 = {}, _defineProperty(_ref3, className, className), _defineProperty(_ref3, styles$c.opened, opened), _ref3)]),
419
267
  "aria-hidden": opened ? null : '-1'
420
268
  }, /*#__PURE__*/React.createElement("div", {
421
- className: styles$9.modal,
269
+ className: styles$c.modal,
422
270
  ref: modalRef
423
271
  }, /*#__PURE__*/React.createElement("div", {
424
- className: styles$9.header
272
+ className: styles$c.header
425
273
  }, /*#__PURE__*/React.createElement("h2", {
426
- className: styles$9.heading
274
+ className: styles$c.heading
427
275
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
428
276
  id: "oL4ueH",
429
277
  defaultMessage: [{
@@ -431,16 +279,16 @@ var ShareModal = function ShareModal(_ref) {
431
279
  "value": "Share"
432
280
  }]
433
281
  })), /*#__PURE__*/React.createElement(Button, {
434
- className: styles$9.close,
282
+ className: styles$c.close,
435
283
  onClick: onCancel,
436
284
  focusable: opened
437
285
  }, /*#__PURE__*/React.createElement(Close, {
438
- className: styles$9.closeIcon,
286
+ className: styles$c.closeIcon,
439
287
  border: "none"
440
288
  }))), /*#__PURE__*/React.createElement("div", {
441
- className: styles$9.content
289
+ className: styles$c.content
442
290
  }, /*#__PURE__*/React.createElement(ShareOptions, {
443
- className: styles$9.shareOptions,
291
+ className: styles$c.shareOptions,
444
292
  title: title,
445
293
  url: url,
446
294
  focusable: opened,
@@ -449,12 +297,12 @@ var ShareModal = function ShareModal(_ref) {
449
297
  }))));
450
298
  };
451
299
 
452
- ShareModal.propTypes = propTypes$f;
453
- ShareModal.defaultProps = defaultProps$f;
300
+ ShareModal.propTypes = propTypes$h;
301
+ ShareModal.defaultProps = defaultProps$h;
454
302
 
455
- var styles$8 = {"container":"micromag-viewer-partials-share-button-container"};
303
+ var styles$b = {"container":"micromag-viewer-partials-share-button-container"};
456
304
 
457
- var propTypes$e = {
305
+ var propTypes$g = {
458
306
  title: PropTypes.string,
459
307
  url: PropTypes.string,
460
308
  className: PropTypes.string,
@@ -463,7 +311,7 @@ var propTypes$e = {
463
311
  children: PropTypes.node,
464
312
  focusable: PropTypes.bool
465
313
  };
466
- var defaultProps$e = {
314
+ var defaultProps$g = {
467
315
  title: null,
468
316
  url: null,
469
317
  className: null,
@@ -504,7 +352,7 @@ var ShareButton = function ShareButton(_ref) {
504
352
  setStoryShareModalOpened(false);
505
353
  }, [setStoryShareModalOpened]);
506
354
  return /*#__PURE__*/React.createElement("div", {
507
- className: classNames([styles$8.container, _defineProperty({}, className, className !== null)])
355
+ className: classNames([styles$b.container, _defineProperty({}, className, className !== null)])
508
356
  }, /*#__PURE__*/React.createElement(Button, {
509
357
  className: classNames([_defineProperty({}, buttonClassName, buttonClassName !== null)]),
510
358
  onClick: onShareIconClick,
@@ -524,7 +372,7 @@ var ShareButton = function ShareButton(_ref) {
524
372
  }),
525
373
  focusable: focusable
526
374
  }, children), /*#__PURE__*/React.createElement(ShareModal, {
527
- className: styles$8.shareModal,
375
+ className: styles$b.shareModal,
528
376
  opened: storyShareModalOpened,
529
377
  title: title,
530
378
  url: url,
@@ -533,8 +381,160 @@ var ShareButton = function ShareButton(_ref) {
533
381
  }));
534
382
  };
535
383
 
536
- ShareButton.propTypes = propTypes$e;
537
- ShareButton.defaultProps = defaultProps$e;
384
+ ShareButton.propTypes = propTypes$g;
385
+ ShareButton.defaultProps = defaultProps$g;
386
+
387
+ var styles$a = {"container":"micromag-viewer-menus-menu-dot-container","button":"micromag-viewer-menus-menu-dot-button","dot":"micromag-viewer-menus-menu-dot-dot","subDot":"micromag-viewer-menus-menu-dot-subDot","dots":"micromag-viewer-menus-menu-dot-dots","vertical":"micromag-viewer-menus-menu-dot-vertical"};
388
+
389
+ var propTypes$f = {
390
+ current: PropTypes.bool,
391
+ active: PropTypes.bool,
392
+ colors: PropTypes.shape({
393
+ primary: PropTypes.string,
394
+ secondary: PropTypes.string
395
+ }),
396
+ count: PropTypes.number,
397
+ subIndex: PropTypes.number,
398
+ vertical: PropTypes.bool,
399
+ onClick: PropTypes.func,
400
+ className: PropTypes.string
401
+ };
402
+ var defaultProps$f = {
403
+ current: false,
404
+ active: false,
405
+ colors: null,
406
+ count: 1,
407
+ subIndex: 0,
408
+ vertical: false,
409
+ onClick: null,
410
+ className: null
411
+ };
412
+
413
+ var ViewerMenuDot = function ViewerMenuDot(_ref) {
414
+ var _ref3;
415
+
416
+ var current = _ref.current,
417
+ active = _ref.active,
418
+ colors = _ref.colors,
419
+ count = _ref.count,
420
+ subIndex = _ref.subIndex,
421
+ vertical = _ref.vertical,
422
+ onClick = _ref.onClick,
423
+ className = _ref.className;
424
+ var currentTime = 0;
425
+ var duration = 1;
426
+ var playing = true;
427
+
428
+ var _ref2 = colors || {},
429
+ _ref2$primary = _ref2.primary,
430
+ primary = _ref2$primary === void 0 ? 'rgba(255, 255, 255, 1)' : _ref2$primary,
431
+ _ref2$secondary = _ref2.secondary,
432
+ secondary = _ref2$secondary === void 0 ? 'rgba(200, 200, 200, 0.5)' : _ref2$secondary; // TODO: if approved animate progress
433
+
434
+
435
+ var _useSpring = useSpring(function () {
436
+ return {
437
+ x: 0,
438
+ config: {
439
+ duration: 0
440
+ }
441
+ };
442
+ }),
443
+ _useSpring2 = _slicedToArray(_useSpring, 2);
444
+ _useSpring2[0];
445
+ var setSpringProps = _useSpring2[1];
446
+
447
+ useEffect(function () {
448
+
449
+ var progress = currentTime / duration;
450
+ setSpringProps.start({
451
+ reset: true,
452
+ immediate: !playing,
453
+ from: {
454
+ x: progress
455
+ },
456
+ to: {
457
+ x: 1
458
+ },
459
+ config: {
460
+ duration: (duration - currentTime) * 1000
461
+ }
462
+ });
463
+ }, [playing, duration, currentTime, setSpringProps]);
464
+ var inner = current && count > 1 ? /*#__PURE__*/React.createElement("span", {
465
+ className: styles$a.dots
466
+ }, _toConsumableArray(Array(count).keys()).map(function (i) {
467
+ return /*#__PURE__*/React.createElement("span", {
468
+ className: classNames([styles$a.dot, styles$a.subDot]),
469
+ style: {
470
+ width: "".concat(parseFloat(1 / count * 100).toFixed(2), "%"),
471
+ backgroundColor: active && i <= subIndex ? primary : secondary
472
+ }
473
+ });
474
+ })) : /*#__PURE__*/React.createElement("span", {
475
+ className: styles$a.dot,
476
+ style: {
477
+ backgroundColor: active ? primary : secondary
478
+ }
479
+ });
480
+ return /*#__PURE__*/React.createElement("li", {
481
+ className: classNames([styles$a.container, (_ref3 = {}, _defineProperty(_ref3, styles$a.active, current), _defineProperty(_ref3, styles$a.vertical, vertical), _defineProperty(_ref3, className, className !== null), _ref3)]),
482
+ "aria-hidden": "true"
483
+ }, /*#__PURE__*/React.createElement("button", {
484
+ type: "button",
485
+ className: styles$a.button,
486
+ onClick: onClick,
487
+ tabIndex: "-1"
488
+ }, inner));
489
+ };
490
+
491
+ ViewerMenuDot.propTypes = propTypes$f;
492
+ ViewerMenuDot.defaultProps = defaultProps$f;
493
+
494
+ var styles$9 = {};
495
+
496
+ var propTypes$e = {
497
+ size: PropTypes.number,
498
+ spacing: PropTypes.number,
499
+ color: PropTypes.string,
500
+ className: PropTypes.string
501
+ };
502
+ var defaultProps$e = {
503
+ size: 100,
504
+ spacing: 8,
505
+ color: 'white',
506
+ className: null
507
+ };
508
+
509
+ var MenuIcon = function MenuIcon(_ref) {
510
+ var size = _ref.size,
511
+ spacing = _ref.spacing,
512
+ color = _ref.color,
513
+ className = _ref.className;
514
+ var squareSize = (size - 2 * spacing) / 3;
515
+ return /*#__PURE__*/React.createElement("svg", {
516
+ className: classNames([styles$9.container, _defineProperty({}, className, className !== null)]),
517
+ xmlns: "http://www.w3.org/2000/svg",
518
+ viewBox: "0 0 ".concat(size, " ").concat(size),
519
+ "aria-hidden": "true"
520
+ }, _toConsumableArray(new Array(9)).map(function (square, squareI) {
521
+ var x = squareI % 3 * (squareSize + spacing);
522
+ var y = Math.floor(squareI / 3) * (squareSize + spacing);
523
+ return /*#__PURE__*/React.createElement("rect", {
524
+ key: "square-".concat(squareI),
525
+ fill: color,
526
+ x: x,
527
+ y: y,
528
+ width: squareSize,
529
+ height: squareSize
530
+ });
531
+ }));
532
+ };
533
+
534
+ MenuIcon.propTypes = propTypes$e;
535
+ MenuIcon.defaultProps = defaultProps$e;
536
+
537
+ var styles$8 = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","menuButton":"micromag-viewer-menus-menu-dots-menuButton","item":"micromag-viewer-menus-menu-dots-item","items":"micromag-viewer-menus-menu-dots-items","menu":"micromag-viewer-menus-menu-dots-menu","menuIcon":"micromag-viewer-menus-menu-dots-menuIcon","vertical":"micromag-viewer-menus-menu-dots-vertical","withShadow":"micromag-viewer-menus-menu-dots-withShadow"};
538
538
 
539
539
  var propTypes$d = {
540
540
  direction: PropTypes.oneOf(['horizontal', 'vertical']),
@@ -552,6 +552,7 @@ var propTypes$d = {
552
552
  closeable: PropTypes.bool,
553
553
  withItemClick: PropTypes.bool,
554
554
  withoutScreensMenu: PropTypes.bool,
555
+ withoutShareMenu: PropTypes.bool,
555
556
  onClose: PropTypes.func,
556
557
  className: PropTypes.string
557
558
  };
@@ -568,6 +569,7 @@ var defaultProps$d = {
568
569
  closeable: false,
569
570
  withItemClick: false,
570
571
  withoutScreensMenu: false,
572
+ withoutShareMenu: false,
571
573
  onClose: null,
572
574
  className: null
573
575
  };
@@ -587,6 +589,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
587
589
  closeable = _ref.closeable,
588
590
  withItemClick = _ref.withItemClick,
589
591
  withoutScreensMenu = _ref.withoutScreensMenu,
592
+ withoutShareMenu = _ref.withoutShareMenu,
590
593
  onClose = _ref.onClose,
591
594
  className = _ref.className;
592
595
 
@@ -601,7 +604,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
601
604
  return current;
602
605
  });
603
606
  return /*#__PURE__*/React.createElement("nav", {
604
- className: classNames([styles$c.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles$c.vertical, direction === 'vertical'), _defineProperty(_ref4, styles$c.withShadow, withShadow), _ref4)]),
607
+ className: classNames([styles$8.container, (_ref4 = {}, _defineProperty(_ref4, className, className !== null), _defineProperty(_ref4, styles$8.vertical, direction === 'vertical'), _defineProperty(_ref4, styles$8.withShadow, withShadow), _ref4)]),
605
608
  "aria-label": intl.formatMessage({
606
609
  id: "bLYuuN",
607
610
  defaultMessage: [{
@@ -625,7 +628,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
625
628
  total: items.length
626
629
  })
627
630
  }, /*#__PURE__*/React.createElement("ul", {
628
- className: styles$c.items
631
+ className: styles$8.items
629
632
  }, items.map(function (item, index) {
630
633
  var _ref5 = item || {},
631
634
  _ref5$current = _ref5.current,
@@ -651,21 +654,21 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
651
654
  },
652
655
  vertical: direction === 'vertical'
653
656
  });
654
- }), /*#__PURE__*/React.createElement("li", {
655
- className: styles$c.menu
657
+ }), !withoutShareMenu ? /*#__PURE__*/React.createElement("li", {
658
+ className: styles$8.menu
656
659
  }, /*#__PURE__*/React.createElement(ShareButton, {
657
- className: styles$c.shareButton,
658
- buttonClassName: styles$c.menuButton,
660
+ className: styles$8.shareButton,
661
+ buttonClassName: styles$8.menuButton,
659
662
  onShare: onShare,
660
663
  url: shareUrl,
661
664
  title: title
662
665
  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
663
- className: styles$c.icon,
666
+ className: styles$8.icon,
664
667
  icon: faShare
665
- }))), !withoutScreensMenu ? /*#__PURE__*/React.createElement("li", {
666
- className: styles$c.menu
668
+ }))) : null, !withoutScreensMenu ? /*#__PURE__*/React.createElement("li", {
669
+ className: styles$8.menu
667
670
  }, /*#__PURE__*/React.createElement(MenuIcon, {
668
- className: styles$c.menuIcon,
671
+ className: styles$8.menuIcon,
669
672
  color: primary
670
673
  }), /*#__PURE__*/React.createElement("button", {
671
674
  type: "button",
@@ -683,16 +686,16 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
683
686
  "value": "Menu"
684
687
  }]
685
688
  }),
686
- className: styles$c.menuButton,
689
+ className: styles$8.menuButton,
687
690
  onClick: onClickMenu
688
691
  })) : null, closeable ? /*#__PURE__*/React.createElement("li", {
689
- className: styles$c.closeButton,
692
+ className: styles$8.closeButton,
690
693
  style: {
691
694
  color: primary
692
695
  }
693
696
  }, /*#__PURE__*/React.createElement("button", {
694
697
  type: "button",
695
- className: styles$c.closeButton,
698
+ className: styles$8.closeButton,
696
699
  onClick: onClose,
697
700
  title: intl.formatMessage({
698
701
  id: "dj/p/q",
@@ -1043,6 +1046,7 @@ var propTypes$a = {
1043
1046
  menuWidth: PropTypes.number,
1044
1047
  withDotItemClick: PropTypes.bool,
1045
1048
  withoutScreensMenu: PropTypes.bool,
1049
+ withoutShareMenu: PropTypes.bool,
1046
1050
  onRequestOpen: PropTypes.func,
1047
1051
  onRequestClose: PropTypes.func,
1048
1052
  onClickItem: PropTypes.func,
@@ -1068,6 +1072,7 @@ var defaultProps$a = {
1068
1072
  menuWidth: null,
1069
1073
  withDotItemClick: false,
1070
1074
  withoutScreensMenu: false,
1075
+ withoutShareMenu: false,
1071
1076
  onRequestOpen: null,
1072
1077
  onRequestClose: null,
1073
1078
  onClickItem: null,
@@ -1092,6 +1097,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
1092
1097
  menuWidth = _ref.menuWidth,
1093
1098
  withDotItemClick = _ref.withDotItemClick,
1094
1099
  withoutScreensMenu = _ref.withoutScreensMenu,
1100
+ withoutShareMenu = _ref.withoutShareMenu,
1095
1101
  onRequestOpen = _ref.onRequestOpen,
1096
1102
  onRequestClose = _ref.onRequestClose,
1097
1103
  customOnClickItem = _ref.onClickItem,
@@ -1285,6 +1291,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
1285
1291
  closeable: closeable,
1286
1292
  withItemClick: withDotItemClick,
1287
1293
  withoutScreensMenu: withoutScreensMenu,
1294
+ withoutShareMenu: withoutShareMenu,
1288
1295
  onClose: onClickCloseViewer,
1289
1296
  className: styles$6.menuDots
1290
1297
  }))), /*#__PURE__*/React.createElement(animated.div, {
@@ -1888,9 +1895,11 @@ var propTypes$2 = {
1888
1895
  neighborScreensMounted: PropTypes.number,
1889
1896
  storyIsParsed: PropTypes.bool,
1890
1897
  landscapeScreenMargin: PropTypes.number,
1898
+ landscapeSmallScreenScale: PropTypes.number,
1891
1899
  withMetadata: PropTypes.bool,
1892
1900
  withoutMenu: PropTypes.bool,
1893
1901
  withoutScreensMenu: PropTypes.bool,
1902
+ withoutShareMenu: PropTypes.bool,
1894
1903
  withoutMenuShadow: PropTypes.bool,
1895
1904
  withoutFullscreen: PropTypes.bool,
1896
1905
  withLandscapeSiblingsScreens: PropTypes.bool,
@@ -1928,9 +1937,11 @@ var defaultProps$2 = {
1928
1937
  neighborScreensMounted: 1,
1929
1938
  storyIsParsed: false,
1930
1939
  landscapeScreenMargin: 20,
1940
+ landscapeSmallScreenScale: 0.9,
1931
1941
  withMetadata: false,
1932
1942
  withoutMenu: false,
1933
1943
  withoutScreensMenu: false,
1944
+ withoutShareMenu: false,
1934
1945
  withoutMenuShadow: false,
1935
1946
  withoutFullscreen: false,
1936
1947
  withLandscapeSiblingsScreens: false,
@@ -1966,9 +1977,11 @@ var Viewer = function Viewer(_ref) {
1966
1977
  neighborScreensMounted = _ref.neighborScreensMounted,
1967
1978
  storyIsParsed = _ref.storyIsParsed,
1968
1979
  landscapeScreenMargin = _ref.landscapeScreenMargin,
1980
+ landscapeSmallScreenScale = _ref.landscapeSmallScreenScale,
1969
1981
  withMetadata = _ref.withMetadata,
1970
1982
  withoutMenu = _ref.withoutMenu,
1971
1983
  withoutScreensMenu = _ref.withoutScreensMenu,
1984
+ withoutShareMenu = _ref.withoutShareMenu,
1972
1985
  withoutMenuShadow = _ref.withoutMenuShadow;
1973
1986
  _ref.withoutFullscreen;
1974
1987
  var withLandscapeSiblingsScreens = _ref.withLandscapeSiblingsScreens,
@@ -2401,6 +2414,7 @@ var Viewer = function Viewer(_ref) {
2401
2414
  onRequestClose: onMenuRequestClose,
2402
2415
  withDotItemClick: screenContainerWidth > 400,
2403
2416
  withoutScreensMenu: withoutScreensMenu,
2417
+ withoutShareMenu: withoutShareMenu,
2404
2418
  refDots: menuDotsContainerRef
2405
2419
  }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React.createElement("div", Object.assign({
2406
2420
  ref: contentRef,
@@ -2414,7 +2428,21 @@ var Viewer = function Viewer(_ref) {
2414
2428
  var screenTransform = null;
2415
2429
 
2416
2430
  if (landscape) {
2417
- screenTransform = withLandscapeSiblingsScreens ? "translateX(calc(".concat((screenContainerWidth + landscapeScreenMargin) * (i - screenIndex), "px - 50%)) scale(").concat(current ? 1 : 0.9, ")") : null;
2431
+ var max = i - screenIndex;
2432
+ var distance = (screenContainerWidth + landscapeScreenMargin) * max; // Compensates for scaling
2433
+
2434
+ if (max !== 0) {
2435
+ var halfMargin = screenContainerWidth * (1 - landscapeSmallScreenScale) / 2;
2436
+ distance -= halfMargin * max;
2437
+
2438
+ if (max < -1) {
2439
+ distance -= halfMargin * (max + 1);
2440
+ } else if (max > 1) {
2441
+ distance -= halfMargin * (max - 1);
2442
+ }
2443
+ }
2444
+
2445
+ screenTransform = withLandscapeSiblingsScreens ? "translateX(calc(".concat(distance, "px - 50%)) scale(").concat(current ? 1 : landscapeSmallScreenScale, ")") : null;
2418
2446
  } else {
2419
2447
  screenTransform = "translateX(".concat(current ? 0 : '100%', ")");
2420
2448
  }
package/lib/index.js CHANGED
@@ -26,8 +26,8 @@ var hooks = require('@micromag/core/hooks');
26
26
  var utils = require('@micromag/core/utils');
27
27
  var core = require('@react-spring/core');
28
28
  var web = require('@react-spring/web');
29
- var faTimes = require('@fortawesome/free-solid-svg-icons/faTimes');
30
29
  var faShare = require('@fortawesome/free-solid-svg-icons/faShare');
30
+ var faTimes = require('@fortawesome/free-solid-svg-icons/faTimes');
31
31
  var reactFontawesome = require('@fortawesome/react-fontawesome');
32
32
  var ShareOptions = require('@micromag/element-share-options');
33
33
  var faCompress = require('@fortawesome/free-solid-svg-icons/faCompress');
@@ -242,161 +242,9 @@ function useScreenInteraction() {
242
242
  };
243
243
  }
244
244
 
245
- var styles$c = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","menuButton":"micromag-viewer-menus-menu-dots-menuButton","item":"micromag-viewer-menus-menu-dots-item","items":"micromag-viewer-menus-menu-dots-items","menu":"micromag-viewer-menus-menu-dots-menu","menuIcon":"micromag-viewer-menus-menu-dots-menuIcon","vertical":"micromag-viewer-menus-menu-dots-vertical","withShadow":"micromag-viewer-menus-menu-dots-withShadow"};
246
-
247
- var styles$b = {"container":"micromag-viewer-menus-menu-dot-container","button":"micromag-viewer-menus-menu-dot-button","dot":"micromag-viewer-menus-menu-dot-dot","subDot":"micromag-viewer-menus-menu-dot-subDot","dots":"micromag-viewer-menus-menu-dot-dots","vertical":"micromag-viewer-menus-menu-dot-vertical"};
245
+ var styles$c = {"close":"micromag-viewer-partials-share-modal-close","container":"micromag-viewer-partials-share-modal-container","opened":"micromag-viewer-partials-share-modal-opened","modal":"micromag-viewer-partials-share-modal-modal","header":"micromag-viewer-partials-share-modal-header","heading":"micromag-viewer-partials-share-modal-heading","closeIcon":"micromag-viewer-partials-share-modal-closeIcon","shareOptions":"micromag-viewer-partials-share-modal-shareOptions"};
248
246
 
249
247
  var propTypes$h = {
250
- current: PropTypes__default["default"].bool,
251
- active: PropTypes__default["default"].bool,
252
- colors: PropTypes__default["default"].shape({
253
- primary: PropTypes__default["default"].string,
254
- secondary: PropTypes__default["default"].string
255
- }),
256
- count: PropTypes__default["default"].number,
257
- subIndex: PropTypes__default["default"].number,
258
- vertical: PropTypes__default["default"].bool,
259
- onClick: PropTypes__default["default"].func,
260
- className: PropTypes__default["default"].string
261
- };
262
- var defaultProps$h = {
263
- current: false,
264
- active: false,
265
- colors: null,
266
- count: 1,
267
- subIndex: 0,
268
- vertical: false,
269
- onClick: null,
270
- className: null
271
- };
272
-
273
- var ViewerMenuDot = function ViewerMenuDot(_ref) {
274
- var _ref3;
275
-
276
- var current = _ref.current,
277
- active = _ref.active,
278
- colors = _ref.colors,
279
- count = _ref.count,
280
- subIndex = _ref.subIndex,
281
- vertical = _ref.vertical,
282
- onClick = _ref.onClick,
283
- className = _ref.className;
284
- var currentTime = 0;
285
- var duration = 1;
286
- var playing = true;
287
-
288
- var _ref2 = colors || {},
289
- _ref2$primary = _ref2.primary,
290
- primary = _ref2$primary === void 0 ? 'rgba(255, 255, 255, 1)' : _ref2$primary,
291
- _ref2$secondary = _ref2.secondary,
292
- secondary = _ref2$secondary === void 0 ? 'rgba(200, 200, 200, 0.5)' : _ref2$secondary; // TODO: if approved animate progress
293
-
294
-
295
- var _useSpring = core.useSpring(function () {
296
- return {
297
- x: 0,
298
- config: {
299
- duration: 0
300
- }
301
- };
302
- }),
303
- _useSpring2 = _slicedToArray__default["default"](_useSpring, 2);
304
- _useSpring2[0];
305
- var setSpringProps = _useSpring2[1];
306
-
307
- React.useEffect(function () {
308
-
309
- var progress = currentTime / duration;
310
- setSpringProps.start({
311
- reset: true,
312
- immediate: !playing,
313
- from: {
314
- x: progress
315
- },
316
- to: {
317
- x: 1
318
- },
319
- config: {
320
- duration: (duration - currentTime) * 1000
321
- }
322
- });
323
- }, [playing, duration, currentTime, setSpringProps]);
324
- var inner = current && count > 1 ? /*#__PURE__*/React__default["default"].createElement("span", {
325
- className: styles$b.dots
326
- }, _toConsumableArray__default["default"](Array(count).keys()).map(function (i) {
327
- return /*#__PURE__*/React__default["default"].createElement("span", {
328
- className: classNames__default["default"]([styles$b.dot, styles$b.subDot]),
329
- style: {
330
- width: "".concat(parseFloat(1 / count * 100).toFixed(2), "%"),
331
- backgroundColor: active && i <= subIndex ? primary : secondary
332
- }
333
- });
334
- })) : /*#__PURE__*/React__default["default"].createElement("span", {
335
- className: styles$b.dot,
336
- style: {
337
- backgroundColor: active ? primary : secondary
338
- }
339
- });
340
- return /*#__PURE__*/React__default["default"].createElement("li", {
341
- className: classNames__default["default"]([styles$b.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$b.active, current), _defineProperty__default["default"](_ref3, styles$b.vertical, vertical), _defineProperty__default["default"](_ref3, className, className !== null), _ref3)]),
342
- "aria-hidden": "true"
343
- }, /*#__PURE__*/React__default["default"].createElement("button", {
344
- type: "button",
345
- className: styles$b.button,
346
- onClick: onClick,
347
- tabIndex: "-1"
348
- }, inner));
349
- };
350
-
351
- ViewerMenuDot.propTypes = propTypes$h;
352
- ViewerMenuDot.defaultProps = defaultProps$h;
353
-
354
- var styles$a = {};
355
-
356
- var propTypes$g = {
357
- size: PropTypes__default["default"].number,
358
- spacing: PropTypes__default["default"].number,
359
- color: PropTypes__default["default"].string,
360
- className: PropTypes__default["default"].string
361
- };
362
- var defaultProps$g = {
363
- size: 100,
364
- spacing: 8,
365
- color: 'white',
366
- className: null
367
- };
368
-
369
- var MenuIcon = function MenuIcon(_ref) {
370
- var size = _ref.size,
371
- spacing = _ref.spacing,
372
- color = _ref.color,
373
- className = _ref.className;
374
- var squareSize = (size - 2 * spacing) / 3;
375
- return /*#__PURE__*/React__default["default"].createElement("svg", {
376
- className: classNames__default["default"]([styles$a.container, _defineProperty__default["default"]({}, className, className !== null)]),
377
- xmlns: "http://www.w3.org/2000/svg",
378
- viewBox: "0 0 ".concat(size, " ").concat(size),
379
- "aria-hidden": "true"
380
- }, _toConsumableArray__default["default"](new Array(9)).map(function (square, squareI) {
381
- var x = squareI % 3 * (squareSize + spacing);
382
- var y = Math.floor(squareI / 3) * (squareSize + spacing);
383
- return /*#__PURE__*/React__default["default"].createElement("rect", {
384
- key: "square-".concat(squareI),
385
- fill: color,
386
- x: x,
387
- y: y,
388
- width: squareSize,
389
- height: squareSize
390
- });
391
- }));
392
- };
393
-
394
- MenuIcon.propTypes = propTypes$g;
395
- MenuIcon.defaultProps = defaultProps$g;
396
-
397
- var styles$9 = {"close":"micromag-viewer-partials-share-modal-close","container":"micromag-viewer-partials-share-modal-container","opened":"micromag-viewer-partials-share-modal-opened","modal":"micromag-viewer-partials-share-modal-modal","header":"micromag-viewer-partials-share-modal-header","heading":"micromag-viewer-partials-share-modal-heading","closeIcon":"micromag-viewer-partials-share-modal-closeIcon","shareOptions":"micromag-viewer-partials-share-modal-shareOptions"};
398
-
399
- var propTypes$f = {
400
248
  url: PropTypes__default["default"].string,
401
249
  title: PropTypes__default["default"].string,
402
250
  opened: PropTypes__default["default"].bool,
@@ -404,7 +252,7 @@ var propTypes$f = {
404
252
  onShare: PropTypes__default["default"].func,
405
253
  onCancel: PropTypes__default["default"].func
406
254
  };
407
- var defaultProps$f = {
255
+ var defaultProps$h = {
408
256
  url: null,
409
257
  title: null,
410
258
  opened: false,
@@ -435,15 +283,15 @@ var ShareModal = function ShareModal(_ref) {
435
283
  }, [opened, onCancel]);
436
284
  hooks.useDocumentEvent('click', onDocumentClick, opened);
437
285
  return /*#__PURE__*/React__default["default"].createElement("div", {
438
- className: classNames__default["default"]([styles$9.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className), _defineProperty__default["default"](_ref3, styles$9.opened, opened), _ref3)]),
286
+ className: classNames__default["default"]([styles$c.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className), _defineProperty__default["default"](_ref3, styles$c.opened, opened), _ref3)]),
439
287
  "aria-hidden": opened ? null : '-1'
440
288
  }, /*#__PURE__*/React__default["default"].createElement("div", {
441
- className: styles$9.modal,
289
+ className: styles$c.modal,
442
290
  ref: modalRef
443
291
  }, /*#__PURE__*/React__default["default"].createElement("div", {
444
- className: styles$9.header
292
+ className: styles$c.header
445
293
  }, /*#__PURE__*/React__default["default"].createElement("h2", {
446
- className: styles$9.heading
294
+ className: styles$c.heading
447
295
  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
448
296
  id: "oL4ueH",
449
297
  defaultMessage: [{
@@ -451,16 +299,16 @@ var ShareModal = function ShareModal(_ref) {
451
299
  "value": "Share"
452
300
  }]
453
301
  })), /*#__PURE__*/React__default["default"].createElement(components.Button, {
454
- className: styles$9.close,
302
+ className: styles$c.close,
455
303
  onClick: onCancel,
456
304
  focusable: opened
457
305
  }, /*#__PURE__*/React__default["default"].createElement(components.Close, {
458
- className: styles$9.closeIcon,
306
+ className: styles$c.closeIcon,
459
307
  border: "none"
460
308
  }))), /*#__PURE__*/React__default["default"].createElement("div", {
461
- className: styles$9.content
309
+ className: styles$c.content
462
310
  }, /*#__PURE__*/React__default["default"].createElement(ShareOptions__default["default"], {
463
- className: styles$9.shareOptions,
311
+ className: styles$c.shareOptions,
464
312
  title: title,
465
313
  url: url,
466
314
  focusable: opened,
@@ -469,12 +317,12 @@ var ShareModal = function ShareModal(_ref) {
469
317
  }))));
470
318
  };
471
319
 
472
- ShareModal.propTypes = propTypes$f;
473
- ShareModal.defaultProps = defaultProps$f;
320
+ ShareModal.propTypes = propTypes$h;
321
+ ShareModal.defaultProps = defaultProps$h;
474
322
 
475
- var styles$8 = {"container":"micromag-viewer-partials-share-button-container"};
323
+ var styles$b = {"container":"micromag-viewer-partials-share-button-container"};
476
324
 
477
- var propTypes$e = {
325
+ var propTypes$g = {
478
326
  title: PropTypes__default["default"].string,
479
327
  url: PropTypes__default["default"].string,
480
328
  className: PropTypes__default["default"].string,
@@ -483,7 +331,7 @@ var propTypes$e = {
483
331
  children: PropTypes__default["default"].node,
484
332
  focusable: PropTypes__default["default"].bool
485
333
  };
486
- var defaultProps$e = {
334
+ var defaultProps$g = {
487
335
  title: null,
488
336
  url: null,
489
337
  className: null,
@@ -524,7 +372,7 @@ var ShareButton = function ShareButton(_ref) {
524
372
  setStoryShareModalOpened(false);
525
373
  }, [setStoryShareModalOpened]);
526
374
  return /*#__PURE__*/React__default["default"].createElement("div", {
527
- className: classNames__default["default"]([styles$8.container, _defineProperty__default["default"]({}, className, className !== null)])
375
+ className: classNames__default["default"]([styles$b.container, _defineProperty__default["default"]({}, className, className !== null)])
528
376
  }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
529
377
  className: classNames__default["default"]([_defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
530
378
  onClick: onShareIconClick,
@@ -544,7 +392,7 @@ var ShareButton = function ShareButton(_ref) {
544
392
  }),
545
393
  focusable: focusable
546
394
  }, children), /*#__PURE__*/React__default["default"].createElement(ShareModal, {
547
- className: styles$8.shareModal,
395
+ className: styles$b.shareModal,
548
396
  opened: storyShareModalOpened,
549
397
  title: title,
550
398
  url: url,
@@ -553,8 +401,160 @@ var ShareButton = function ShareButton(_ref) {
553
401
  }));
554
402
  };
555
403
 
556
- ShareButton.propTypes = propTypes$e;
557
- ShareButton.defaultProps = defaultProps$e;
404
+ ShareButton.propTypes = propTypes$g;
405
+ ShareButton.defaultProps = defaultProps$g;
406
+
407
+ var styles$a = {"container":"micromag-viewer-menus-menu-dot-container","button":"micromag-viewer-menus-menu-dot-button","dot":"micromag-viewer-menus-menu-dot-dot","subDot":"micromag-viewer-menus-menu-dot-subDot","dots":"micromag-viewer-menus-menu-dot-dots","vertical":"micromag-viewer-menus-menu-dot-vertical"};
408
+
409
+ var propTypes$f = {
410
+ current: PropTypes__default["default"].bool,
411
+ active: PropTypes__default["default"].bool,
412
+ colors: PropTypes__default["default"].shape({
413
+ primary: PropTypes__default["default"].string,
414
+ secondary: PropTypes__default["default"].string
415
+ }),
416
+ count: PropTypes__default["default"].number,
417
+ subIndex: PropTypes__default["default"].number,
418
+ vertical: PropTypes__default["default"].bool,
419
+ onClick: PropTypes__default["default"].func,
420
+ className: PropTypes__default["default"].string
421
+ };
422
+ var defaultProps$f = {
423
+ current: false,
424
+ active: false,
425
+ colors: null,
426
+ count: 1,
427
+ subIndex: 0,
428
+ vertical: false,
429
+ onClick: null,
430
+ className: null
431
+ };
432
+
433
+ var ViewerMenuDot = function ViewerMenuDot(_ref) {
434
+ var _ref3;
435
+
436
+ var current = _ref.current,
437
+ active = _ref.active,
438
+ colors = _ref.colors,
439
+ count = _ref.count,
440
+ subIndex = _ref.subIndex,
441
+ vertical = _ref.vertical,
442
+ onClick = _ref.onClick,
443
+ className = _ref.className;
444
+ var currentTime = 0;
445
+ var duration = 1;
446
+ var playing = true;
447
+
448
+ var _ref2 = colors || {},
449
+ _ref2$primary = _ref2.primary,
450
+ primary = _ref2$primary === void 0 ? 'rgba(255, 255, 255, 1)' : _ref2$primary,
451
+ _ref2$secondary = _ref2.secondary,
452
+ secondary = _ref2$secondary === void 0 ? 'rgba(200, 200, 200, 0.5)' : _ref2$secondary; // TODO: if approved animate progress
453
+
454
+
455
+ var _useSpring = core.useSpring(function () {
456
+ return {
457
+ x: 0,
458
+ config: {
459
+ duration: 0
460
+ }
461
+ };
462
+ }),
463
+ _useSpring2 = _slicedToArray__default["default"](_useSpring, 2);
464
+ _useSpring2[0];
465
+ var setSpringProps = _useSpring2[1];
466
+
467
+ React.useEffect(function () {
468
+
469
+ var progress = currentTime / duration;
470
+ setSpringProps.start({
471
+ reset: true,
472
+ immediate: !playing,
473
+ from: {
474
+ x: progress
475
+ },
476
+ to: {
477
+ x: 1
478
+ },
479
+ config: {
480
+ duration: (duration - currentTime) * 1000
481
+ }
482
+ });
483
+ }, [playing, duration, currentTime, setSpringProps]);
484
+ var inner = current && count > 1 ? /*#__PURE__*/React__default["default"].createElement("span", {
485
+ className: styles$a.dots
486
+ }, _toConsumableArray__default["default"](Array(count).keys()).map(function (i) {
487
+ return /*#__PURE__*/React__default["default"].createElement("span", {
488
+ className: classNames__default["default"]([styles$a.dot, styles$a.subDot]),
489
+ style: {
490
+ width: "".concat(parseFloat(1 / count * 100).toFixed(2), "%"),
491
+ backgroundColor: active && i <= subIndex ? primary : secondary
492
+ }
493
+ });
494
+ })) : /*#__PURE__*/React__default["default"].createElement("span", {
495
+ className: styles$a.dot,
496
+ style: {
497
+ backgroundColor: active ? primary : secondary
498
+ }
499
+ });
500
+ return /*#__PURE__*/React__default["default"].createElement("li", {
501
+ className: classNames__default["default"]([styles$a.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$a.active, current), _defineProperty__default["default"](_ref3, styles$a.vertical, vertical), _defineProperty__default["default"](_ref3, className, className !== null), _ref3)]),
502
+ "aria-hidden": "true"
503
+ }, /*#__PURE__*/React__default["default"].createElement("button", {
504
+ type: "button",
505
+ className: styles$a.button,
506
+ onClick: onClick,
507
+ tabIndex: "-1"
508
+ }, inner));
509
+ };
510
+
511
+ ViewerMenuDot.propTypes = propTypes$f;
512
+ ViewerMenuDot.defaultProps = defaultProps$f;
513
+
514
+ var styles$9 = {};
515
+
516
+ var propTypes$e = {
517
+ size: PropTypes__default["default"].number,
518
+ spacing: PropTypes__default["default"].number,
519
+ color: PropTypes__default["default"].string,
520
+ className: PropTypes__default["default"].string
521
+ };
522
+ var defaultProps$e = {
523
+ size: 100,
524
+ spacing: 8,
525
+ color: 'white',
526
+ className: null
527
+ };
528
+
529
+ var MenuIcon = function MenuIcon(_ref) {
530
+ var size = _ref.size,
531
+ spacing = _ref.spacing,
532
+ color = _ref.color,
533
+ className = _ref.className;
534
+ var squareSize = (size - 2 * spacing) / 3;
535
+ return /*#__PURE__*/React__default["default"].createElement("svg", {
536
+ className: classNames__default["default"]([styles$9.container, _defineProperty__default["default"]({}, className, className !== null)]),
537
+ xmlns: "http://www.w3.org/2000/svg",
538
+ viewBox: "0 0 ".concat(size, " ").concat(size),
539
+ "aria-hidden": "true"
540
+ }, _toConsumableArray__default["default"](new Array(9)).map(function (square, squareI) {
541
+ var x = squareI % 3 * (squareSize + spacing);
542
+ var y = Math.floor(squareI / 3) * (squareSize + spacing);
543
+ return /*#__PURE__*/React__default["default"].createElement("rect", {
544
+ key: "square-".concat(squareI),
545
+ fill: color,
546
+ x: x,
547
+ y: y,
548
+ width: squareSize,
549
+ height: squareSize
550
+ });
551
+ }));
552
+ };
553
+
554
+ MenuIcon.propTypes = propTypes$e;
555
+ MenuIcon.defaultProps = defaultProps$e;
556
+
557
+ var styles$8 = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","menuButton":"micromag-viewer-menus-menu-dots-menuButton","item":"micromag-viewer-menus-menu-dots-item","items":"micromag-viewer-menus-menu-dots-items","menu":"micromag-viewer-menus-menu-dots-menu","menuIcon":"micromag-viewer-menus-menu-dots-menuIcon","vertical":"micromag-viewer-menus-menu-dots-vertical","withShadow":"micromag-viewer-menus-menu-dots-withShadow"};
558
558
 
559
559
  var propTypes$d = {
560
560
  direction: PropTypes__default["default"].oneOf(['horizontal', 'vertical']),
@@ -572,6 +572,7 @@ var propTypes$d = {
572
572
  closeable: PropTypes__default["default"].bool,
573
573
  withItemClick: PropTypes__default["default"].bool,
574
574
  withoutScreensMenu: PropTypes__default["default"].bool,
575
+ withoutShareMenu: PropTypes__default["default"].bool,
575
576
  onClose: PropTypes__default["default"].func,
576
577
  className: PropTypes__default["default"].string
577
578
  };
@@ -588,6 +589,7 @@ var defaultProps$d = {
588
589
  closeable: false,
589
590
  withItemClick: false,
590
591
  withoutScreensMenu: false,
592
+ withoutShareMenu: false,
591
593
  onClose: null,
592
594
  className: null
593
595
  };
@@ -607,6 +609,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
607
609
  closeable = _ref.closeable,
608
610
  withItemClick = _ref.withItemClick,
609
611
  withoutScreensMenu = _ref.withoutScreensMenu,
612
+ withoutShareMenu = _ref.withoutShareMenu,
610
613
  onClose = _ref.onClose,
611
614
  className = _ref.className;
612
615
 
@@ -621,7 +624,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
621
624
  return current;
622
625
  });
623
626
  return /*#__PURE__*/React__default["default"].createElement("nav", {
624
- className: classNames__default["default"]([styles$c.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles$c.vertical, direction === 'vertical'), _defineProperty__default["default"](_ref4, styles$c.withShadow, withShadow), _ref4)]),
627
+ className: classNames__default["default"]([styles$8.container, (_ref4 = {}, _defineProperty__default["default"](_ref4, className, className !== null), _defineProperty__default["default"](_ref4, styles$8.vertical, direction === 'vertical'), _defineProperty__default["default"](_ref4, styles$8.withShadow, withShadow), _ref4)]),
625
628
  "aria-label": intl.formatMessage({
626
629
  id: "bLYuuN",
627
630
  defaultMessage: [{
@@ -645,7 +648,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
645
648
  total: items.length
646
649
  })
647
650
  }, /*#__PURE__*/React__default["default"].createElement("ul", {
648
- className: styles$c.items
651
+ className: styles$8.items
649
652
  }, items.map(function (item, index) {
650
653
  var _ref5 = item || {},
651
654
  _ref5$current = _ref5.current,
@@ -671,21 +674,21 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
671
674
  },
672
675
  vertical: direction === 'vertical'
673
676
  });
674
- }), /*#__PURE__*/React__default["default"].createElement("li", {
675
- className: styles$c.menu
677
+ }), !withoutShareMenu ? /*#__PURE__*/React__default["default"].createElement("li", {
678
+ className: styles$8.menu
676
679
  }, /*#__PURE__*/React__default["default"].createElement(ShareButton, {
677
- className: styles$c.shareButton,
678
- buttonClassName: styles$c.menuButton,
680
+ className: styles$8.shareButton,
681
+ buttonClassName: styles$8.menuButton,
679
682
  onShare: onShare,
680
683
  url: shareUrl,
681
684
  title: title
682
685
  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
683
- className: styles$c.icon,
686
+ className: styles$8.icon,
684
687
  icon: faShare.faShare
685
- }))), !withoutScreensMenu ? /*#__PURE__*/React__default["default"].createElement("li", {
686
- className: styles$c.menu
688
+ }))) : null, !withoutScreensMenu ? /*#__PURE__*/React__default["default"].createElement("li", {
689
+ className: styles$8.menu
687
690
  }, /*#__PURE__*/React__default["default"].createElement(MenuIcon, {
688
- className: styles$c.menuIcon,
691
+ className: styles$8.menuIcon,
689
692
  color: primary
690
693
  }), /*#__PURE__*/React__default["default"].createElement("button", {
691
694
  type: "button",
@@ -703,16 +706,16 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
703
706
  "value": "Menu"
704
707
  }]
705
708
  }),
706
- className: styles$c.menuButton,
709
+ className: styles$8.menuButton,
707
710
  onClick: onClickMenu
708
711
  })) : null, closeable ? /*#__PURE__*/React__default["default"].createElement("li", {
709
- className: styles$c.closeButton,
712
+ className: styles$8.closeButton,
710
713
  style: {
711
714
  color: primary
712
715
  }
713
716
  }, /*#__PURE__*/React__default["default"].createElement("button", {
714
717
  type: "button",
715
- className: styles$c.closeButton,
718
+ className: styles$8.closeButton,
716
719
  onClick: onClose,
717
720
  title: intl.formatMessage({
718
721
  id: "dj/p/q",
@@ -1063,6 +1066,7 @@ var propTypes$a = {
1063
1066
  menuWidth: PropTypes__default["default"].number,
1064
1067
  withDotItemClick: PropTypes__default["default"].bool,
1065
1068
  withoutScreensMenu: PropTypes__default["default"].bool,
1069
+ withoutShareMenu: PropTypes__default["default"].bool,
1066
1070
  onRequestOpen: PropTypes__default["default"].func,
1067
1071
  onRequestClose: PropTypes__default["default"].func,
1068
1072
  onClickItem: PropTypes__default["default"].func,
@@ -1088,6 +1092,7 @@ var defaultProps$a = {
1088
1092
  menuWidth: null,
1089
1093
  withDotItemClick: false,
1090
1094
  withoutScreensMenu: false,
1095
+ withoutShareMenu: false,
1091
1096
  onRequestOpen: null,
1092
1097
  onRequestClose: null,
1093
1098
  onClickItem: null,
@@ -1112,6 +1117,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
1112
1117
  menuWidth = _ref.menuWidth,
1113
1118
  withDotItemClick = _ref.withDotItemClick,
1114
1119
  withoutScreensMenu = _ref.withoutScreensMenu,
1120
+ withoutShareMenu = _ref.withoutShareMenu,
1115
1121
  onRequestOpen = _ref.onRequestOpen,
1116
1122
  onRequestClose = _ref.onRequestClose,
1117
1123
  customOnClickItem = _ref.onClickItem,
@@ -1305,6 +1311,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
1305
1311
  closeable: closeable,
1306
1312
  withItemClick: withDotItemClick,
1307
1313
  withoutScreensMenu: withoutScreensMenu,
1314
+ withoutShareMenu: withoutShareMenu,
1308
1315
  onClose: onClickCloseViewer,
1309
1316
  className: styles$6.menuDots
1310
1317
  }))), /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
@@ -1908,9 +1915,11 @@ var propTypes$2 = {
1908
1915
  neighborScreensMounted: PropTypes__default["default"].number,
1909
1916
  storyIsParsed: PropTypes__default["default"].bool,
1910
1917
  landscapeScreenMargin: PropTypes__default["default"].number,
1918
+ landscapeSmallScreenScale: PropTypes__default["default"].number,
1911
1919
  withMetadata: PropTypes__default["default"].bool,
1912
1920
  withoutMenu: PropTypes__default["default"].bool,
1913
1921
  withoutScreensMenu: PropTypes__default["default"].bool,
1922
+ withoutShareMenu: PropTypes__default["default"].bool,
1914
1923
  withoutMenuShadow: PropTypes__default["default"].bool,
1915
1924
  withoutFullscreen: PropTypes__default["default"].bool,
1916
1925
  withLandscapeSiblingsScreens: PropTypes__default["default"].bool,
@@ -1948,9 +1957,11 @@ var defaultProps$2 = {
1948
1957
  neighborScreensMounted: 1,
1949
1958
  storyIsParsed: false,
1950
1959
  landscapeScreenMargin: 20,
1960
+ landscapeSmallScreenScale: 0.9,
1951
1961
  withMetadata: false,
1952
1962
  withoutMenu: false,
1953
1963
  withoutScreensMenu: false,
1964
+ withoutShareMenu: false,
1954
1965
  withoutMenuShadow: false,
1955
1966
  withoutFullscreen: false,
1956
1967
  withLandscapeSiblingsScreens: false,
@@ -1986,9 +1997,11 @@ var Viewer = function Viewer(_ref) {
1986
1997
  neighborScreensMounted = _ref.neighborScreensMounted,
1987
1998
  storyIsParsed = _ref.storyIsParsed,
1988
1999
  landscapeScreenMargin = _ref.landscapeScreenMargin,
2000
+ landscapeSmallScreenScale = _ref.landscapeSmallScreenScale,
1989
2001
  withMetadata = _ref.withMetadata,
1990
2002
  withoutMenu = _ref.withoutMenu,
1991
2003
  withoutScreensMenu = _ref.withoutScreensMenu,
2004
+ withoutShareMenu = _ref.withoutShareMenu,
1992
2005
  withoutMenuShadow = _ref.withoutMenuShadow;
1993
2006
  _ref.withoutFullscreen;
1994
2007
  var withLandscapeSiblingsScreens = _ref.withLandscapeSiblingsScreens,
@@ -2421,6 +2434,7 @@ var Viewer = function Viewer(_ref) {
2421
2434
  onRequestClose: onMenuRequestClose,
2422
2435
  withDotItemClick: screenContainerWidth > 400,
2423
2436
  withoutScreensMenu: withoutScreensMenu,
2437
+ withoutShareMenu: withoutShareMenu,
2424
2438
  refDots: menuDotsContainerRef
2425
2439
  }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
2426
2440
  ref: contentRef,
@@ -2434,7 +2448,21 @@ var Viewer = function Viewer(_ref) {
2434
2448
  var screenTransform = null;
2435
2449
 
2436
2450
  if (landscape) {
2437
- screenTransform = withLandscapeSiblingsScreens ? "translateX(calc(".concat((screenContainerWidth + landscapeScreenMargin) * (i - screenIndex), "px - 50%)) scale(").concat(current ? 1 : 0.9, ")") : null;
2451
+ var max = i - screenIndex;
2452
+ var distance = (screenContainerWidth + landscapeScreenMargin) * max; // Compensates for scaling
2453
+
2454
+ if (max !== 0) {
2455
+ var halfMargin = screenContainerWidth * (1 - landscapeSmallScreenScale) / 2;
2456
+ distance -= halfMargin * max;
2457
+
2458
+ if (max < -1) {
2459
+ distance -= halfMargin * (max + 1);
2460
+ } else if (max > 1) {
2461
+ distance -= halfMargin * (max - 1);
2462
+ }
2463
+ }
2464
+
2465
+ screenTransform = withLandscapeSiblingsScreens ? "translateX(calc(".concat(distance, "px - 50%)) scale(").concat(current ? 1 : landscapeSmallScreenScale, ")") : null;
2438
2466
  } else {
2439
2467
  screenTransform = "translateX(".concat(current ? 0 : '100%', ")");
2440
2468
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/viewer",
3
- "version": "0.3.178",
3
+ "version": "0.3.179",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -84,5 +84,5 @@
84
84
  "publishConfig": {
85
85
  "access": "public"
86
86
  },
87
- "gitHead": "135b87c1d061bd5f0ec90b71b80815d17113e21f"
87
+ "gitHead": "cd31719a8cbe79a1241f8374f1b746a39c5051bf"
88
88
  }