@micromag/viewer 0.3.171 → 0.3.176

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 +202 -195
  3. package/lib/index.js +202 -195
  4. package/package.json +10 -10
package/assets/css/styles.css CHANGED
@@ -1,8 +1,8 @@
1
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
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
3
 
4
- .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;-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
- .micromag-viewer-partials-share-button-container{position:relative;white-space:nowrap}
4
+ .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
+ .micromag-viewer-partials-share-button-container{position:relative;white-space:nowrap;width:100%;height:100%}
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
@@ -15,7 +15,7 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
15
15
  import { useDrag, useGesture } from '@use-gesture/react';
16
16
  import classNames from 'classnames';
17
17
  import { Helmet } from 'react-helmet';
18
- import { useIntl, FormattedMessage } from 'react-intl';
18
+ import { FormattedMessage, useIntl } from 'react-intl';
19
19
  import EventEmitter from 'wolfy87-eventemitter';
20
20
  import { Button, Close, ScreenPreview, Screen, Meta, FontFaces } from '@micromag/core/components';
21
21
  import { useDocumentEvent, useDimensionObserver, useTrackEvent, useMediaProgress, useParsedStory, useLoadedFonts, useTrackScreenView, useScreenSizeFromElement, useFullscreen } from '@micromag/core/hooks';
@@ -23,12 +23,12 @@ import { getStyleFromColor, getStyleFromText, getColorAsString, getDeviceScreens
23
23
  import { useSpring, config } from '@react-spring/core';
24
24
  import { animated } from '@react-spring/web';
25
25
  import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
26
+ import { faShare } from '@fortawesome/free-solid-svg-icons/faShare';
26
27
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
28
+ import ShareOptions from '@micromag/element-share-options';
27
29
  import { faCompress } from '@fortawesome/free-solid-svg-icons/faCompress';
28
30
  import { faExpand } from '@fortawesome/free-solid-svg-icons/faExpand';
29
- import { faShare } from '@fortawesome/free-solid-svg-icons/faShare';
30
31
  import Scroll from '@micromag/element-scroll';
31
- import ShareOptions from '@micromag/element-share-options';
32
32
  import { faArrowLeft } from '@fortawesome/free-solid-svg-icons/faArrowLeft';
33
33
  import { faArrowRight } from '@fortawesome/free-solid-svg-icons/faArrowRight';
34
34
  import { faPause } from '@fortawesome/free-solid-svg-icons/faPause';
@@ -374,10 +374,175 @@ var MenuIcon = function MenuIcon(_ref) {
374
374
  MenuIcon.propTypes = propTypes$g;
375
375
  MenuIcon.defaultProps = defaultProps$g;
376
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
+
377
379
  var propTypes$f = {
380
+ url: PropTypes.string,
381
+ title: PropTypes.string,
382
+ opened: PropTypes.bool,
383
+ className: PropTypes.string,
384
+ onShare: PropTypes.func,
385
+ onCancel: PropTypes.func
386
+ };
387
+ var defaultProps$f = {
388
+ url: null,
389
+ title: null,
390
+ opened: false,
391
+ className: null,
392
+ onShare: null,
393
+ onCancel: null
394
+ };
395
+
396
+ var ShareModal = function ShareModal(_ref) {
397
+ var _ref3;
398
+
399
+ var url = _ref.url,
400
+ title = _ref.title,
401
+ opened = _ref.opened,
402
+ className = _ref.className,
403
+ onShare = _ref.onShare,
404
+ onCancel = _ref.onCancel;
405
+ var modalRef = useRef();
406
+ var onDocumentClick = useCallback(function (e) {
407
+ var _ref2 = e || {},
408
+ target = _ref2.target;
409
+
410
+ if (!modalRef.current || modalRef.current.contains(target)) {
411
+ return;
412
+ }
413
+
414
+ onCancel();
415
+ }, [opened, onCancel]);
416
+ useDocumentEvent('click', onDocumentClick, opened);
417
+ return /*#__PURE__*/React.createElement("div", {
418
+ className: classNames([styles$9.container, (_ref3 = {}, _defineProperty(_ref3, className, className), _defineProperty(_ref3, styles$9.opened, opened), _ref3)]),
419
+ "aria-hidden": opened ? null : '-1'
420
+ }, /*#__PURE__*/React.createElement("div", {
421
+ className: styles$9.modal,
422
+ ref: modalRef
423
+ }, /*#__PURE__*/React.createElement("div", {
424
+ className: styles$9.header
425
+ }, /*#__PURE__*/React.createElement("h2", {
426
+ className: styles$9.heading
427
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
428
+ id: "oL4ueH",
429
+ defaultMessage: [{
430
+ "type": 0,
431
+ "value": "Share"
432
+ }]
433
+ })), /*#__PURE__*/React.createElement(Button, {
434
+ className: styles$9.close,
435
+ onClick: onCancel,
436
+ focusable: opened
437
+ }, /*#__PURE__*/React.createElement(Close, {
438
+ className: styles$9.closeIcon,
439
+ border: "none"
440
+ }))), /*#__PURE__*/React.createElement("div", {
441
+ className: styles$9.content
442
+ }, /*#__PURE__*/React.createElement(ShareOptions, {
443
+ className: styles$9.shareOptions,
444
+ title: title,
445
+ url: url,
446
+ focusable: opened,
447
+ onShare: onShare,
448
+ onClose: onCancel
449
+ }))));
450
+ };
451
+
452
+ ShareModal.propTypes = propTypes$f;
453
+ ShareModal.defaultProps = defaultProps$f;
454
+
455
+ var styles$8 = {"container":"micromag-viewer-partials-share-button-container"};
456
+
457
+ var propTypes$e = {
458
+ title: PropTypes.string,
459
+ url: PropTypes.string,
460
+ className: PropTypes.string,
461
+ buttonClassName: PropTypes.string,
462
+ onShare: PropTypes.func,
463
+ children: PropTypes.node,
464
+ focusable: PropTypes.bool
465
+ };
466
+ var defaultProps$e = {
467
+ title: null,
468
+ url: null,
469
+ className: null,
470
+ buttonClassName: null,
471
+ onShare: null,
472
+ children: null,
473
+ focusable: false
474
+ };
475
+
476
+ var ShareButton = function ShareButton(_ref) {
477
+ var title = _ref.title,
478
+ url = _ref.url,
479
+ className = _ref.className,
480
+ buttonClassName = _ref.buttonClassName,
481
+ onShare = _ref.onShare,
482
+ children = _ref.children,
483
+ focusable = _ref.focusable;
484
+ var intl = useIntl();
485
+
486
+ var _useState = useState(false),
487
+ _useState2 = _slicedToArray(_useState, 2),
488
+ storyShareModalOpened = _useState2[0],
489
+ setStoryShareModalOpened = _useState2[1];
490
+
491
+ var onShareIconClick = useCallback(function () {
492
+ setStoryShareModalOpened(function (opened) {
493
+ return !opened;
494
+ });
495
+ }, [setStoryShareModalOpened, storyShareModalOpened]);
496
+ var onStoryShared = useCallback(function (type) {
497
+ setStoryShareModalOpened(false);
498
+
499
+ if (onShare !== null) {
500
+ onShare(type);
501
+ }
502
+ }, [setStoryShareModalOpened, onShare]);
503
+ var onStoryShareCanceled = useCallback(function () {
504
+ setStoryShareModalOpened(false);
505
+ }, [setStoryShareModalOpened]);
506
+ return /*#__PURE__*/React.createElement("div", {
507
+ className: classNames([styles$8.container, _defineProperty({}, className, className !== null)])
508
+ }, /*#__PURE__*/React.createElement(Button, {
509
+ className: classNames([_defineProperty({}, buttonClassName, buttonClassName !== null)]),
510
+ onClick: onShareIconClick,
511
+ title: intl.formatMessage({
512
+ id: "7tw6U2",
513
+ defaultMessage: [{
514
+ "type": 0,
515
+ "value": "Share"
516
+ }]
517
+ }),
518
+ "aria-label": intl.formatMessage({
519
+ id: "7tw6U2",
520
+ defaultMessage: [{
521
+ "type": 0,
522
+ "value": "Share"
523
+ }]
524
+ }),
525
+ focusable: focusable
526
+ }, children), /*#__PURE__*/React.createElement(ShareModal, {
527
+ className: styles$8.shareModal,
528
+ opened: storyShareModalOpened,
529
+ title: title,
530
+ url: url,
531
+ onShare: onStoryShared,
532
+ onCancel: onStoryShareCanceled
533
+ }));
534
+ };
535
+
536
+ ShareButton.propTypes = propTypes$e;
537
+ ShareButton.defaultProps = defaultProps$e;
538
+
539
+ var propTypes$d = {
378
540
  direction: PropTypes.oneOf(['horizontal', 'vertical']),
379
541
  withShadow: PropTypes.bool,
542
+ title: PropTypes.string,
380
543
  items: PropTypes$1.menuItems,
544
+ shareUrl: PropTypes.string,
545
+ onShare: PropTypes.func,
381
546
  onClickItem: PropTypes.func,
382
547
  onClickMenu: PropTypes.func,
383
548
  colors: PropTypes.shape({
@@ -390,10 +555,13 @@ var propTypes$f = {
390
555
  onClose: PropTypes.func,
391
556
  className: PropTypes.string
392
557
  };
393
- var defaultProps$f = {
558
+ var defaultProps$d = {
394
559
  direction: 'horizontal',
395
560
  withShadow: false,
561
+ title: null,
396
562
  items: [],
563
+ shareUrl: null,
564
+ onShare: null,
397
565
  onClickItem: null,
398
566
  onClickMenu: null,
399
567
  colors: null,
@@ -409,7 +577,10 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
409
577
 
410
578
  var direction = _ref.direction,
411
579
  withShadow = _ref.withShadow,
580
+ title = _ref.title,
412
581
  items = _ref.items,
582
+ shareUrl = _ref.shareUrl,
583
+ onShare = _ref.onShare,
413
584
  onClickItem = _ref.onClickItem,
414
585
  onClickMenu = _ref.onClickMenu,
415
586
  colors = _ref.colors,
@@ -480,7 +651,18 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
480
651
  },
481
652
  vertical: direction === 'vertical'
482
653
  });
483
- }), !withoutScreensMenu ? /*#__PURE__*/React.createElement("li", {
654
+ }), /*#__PURE__*/React.createElement("li", {
655
+ className: styles$c.menu
656
+ }, /*#__PURE__*/React.createElement(ShareButton, {
657
+ className: styles$c.shareButton,
658
+ buttonClassName: styles$c.menuButton,
659
+ onShare: onShare,
660
+ url: shareUrl,
661
+ title: title
662
+ }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
663
+ className: styles$c.icon,
664
+ icon: faShare
665
+ }))), !withoutScreensMenu ? /*#__PURE__*/React.createElement("li", {
484
666
  className: styles$c.menu
485
667
  }, /*#__PURE__*/React.createElement(MenuIcon, {
486
668
  className: styles$c.menuIcon,
@@ -531,13 +713,13 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
531
713
  }))) : null));
532
714
  };
533
715
 
534
- ViewerMenuDots.propTypes = propTypes$f;
535
- ViewerMenuDots.defaultProps = defaultProps$f;
716
+ ViewerMenuDots.propTypes = propTypes$d;
717
+ ViewerMenuDots.defaultProps = defaultProps$d;
536
718
 
537
- var propTypes$e = {
719
+ var propTypes$c = {
538
720
  className: PropTypes.string
539
721
  };
540
- var defaultProps$e = {
722
+ var defaultProps$c = {
541
723
  className: null
542
724
  };
543
725
 
@@ -554,170 +736,8 @@ var StackIcon = function StackIcon(_ref) {
554
736
  }));
555
737
  };
556
738
 
557
- StackIcon.propTypes = propTypes$e;
558
- StackIcon.defaultProps = defaultProps$e;
559
-
560
- 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"};
561
-
562
- var propTypes$d = {
563
- url: PropTypes.string,
564
- title: PropTypes.string,
565
- opened: PropTypes.bool,
566
- className: PropTypes.string,
567
- onShare: PropTypes.func,
568
- onCancel: PropTypes.func
569
- };
570
- var defaultProps$d = {
571
- url: null,
572
- title: null,
573
- opened: false,
574
- className: null,
575
- onShare: null,
576
- onCancel: null
577
- };
578
-
579
- var ShareModal = function ShareModal(_ref) {
580
- var _ref3;
581
-
582
- var url = _ref.url,
583
- title = _ref.title,
584
- opened = _ref.opened,
585
- className = _ref.className,
586
- onShare = _ref.onShare,
587
- onCancel = _ref.onCancel;
588
- var modalRef = useRef();
589
- var onDocumentClick = useCallback(function (e) {
590
- var _ref2 = e || {},
591
- target = _ref2.target;
592
-
593
- if (!modalRef.current || modalRef.current.contains(target)) {
594
- return;
595
- }
596
-
597
- onCancel();
598
- }, [opened, onCancel]);
599
- useDocumentEvent('click', onDocumentClick, opened);
600
- return /*#__PURE__*/React.createElement("div", {
601
- className: classNames([styles$9.container, (_ref3 = {}, _defineProperty(_ref3, className, className), _defineProperty(_ref3, styles$9.opened, opened), _ref3)]),
602
- "aria-hidden": opened ? null : '-1'
603
- }, /*#__PURE__*/React.createElement("div", {
604
- className: styles$9.modal,
605
- ref: modalRef
606
- }, /*#__PURE__*/React.createElement("div", {
607
- className: styles$9.header
608
- }, /*#__PURE__*/React.createElement("h2", {
609
- className: styles$9.heading
610
- }, /*#__PURE__*/React.createElement(FormattedMessage, {
611
- id: "oL4ueH",
612
- defaultMessage: [{
613
- "type": 0,
614
- "value": "Share"
615
- }]
616
- })), /*#__PURE__*/React.createElement(Button, {
617
- className: styles$9.close,
618
- onClick: onCancel,
619
- focusable: opened
620
- }, /*#__PURE__*/React.createElement(Close, {
621
- className: styles$9.closeIcon,
622
- border: "none"
623
- }))), /*#__PURE__*/React.createElement("div", {
624
- className: styles$9.content
625
- }, /*#__PURE__*/React.createElement(ShareOptions, {
626
- className: styles$9.shareOptions,
627
- title: title,
628
- url: url,
629
- focusable: opened,
630
- onShare: onShare,
631
- onClose: onCancel
632
- }))));
633
- };
634
-
635
- ShareModal.propTypes = propTypes$d;
636
- ShareModal.defaultProps = defaultProps$d;
637
-
638
- var styles$8 = {"container":"micromag-viewer-partials-share-button-container"};
639
-
640
- var propTypes$c = {
641
- title: PropTypes.string,
642
- url: PropTypes.string,
643
- className: PropTypes.string,
644
- buttonClassName: PropTypes.string,
645
- onShare: PropTypes.func,
646
- children: PropTypes.node,
647
- focusable: PropTypes.bool
648
- };
649
- var defaultProps$c = {
650
- title: null,
651
- url: null,
652
- className: null,
653
- buttonClassName: null,
654
- onShare: null,
655
- children: null,
656
- focusable: false
657
- };
658
-
659
- var ShareButton = function ShareButton(_ref) {
660
- var title = _ref.title,
661
- url = _ref.url,
662
- className = _ref.className,
663
- buttonClassName = _ref.buttonClassName,
664
- onShare = _ref.onShare,
665
- children = _ref.children,
666
- focusable = _ref.focusable;
667
- var intl = useIntl();
668
-
669
- var _useState = useState(false),
670
- _useState2 = _slicedToArray(_useState, 2),
671
- storyShareModalOpened = _useState2[0],
672
- setStoryShareModalOpened = _useState2[1];
673
-
674
- var onShareIconClick = useCallback(function () {
675
- setStoryShareModalOpened(function (opened) {
676
- return !opened;
677
- });
678
- }, [setStoryShareModalOpened, storyShareModalOpened]);
679
- var onStoryShared = useCallback(function (type) {
680
- setStoryShareModalOpened(false);
681
-
682
- if (onShare !== null) {
683
- onShare(type);
684
- }
685
- }, [setStoryShareModalOpened, onShare]);
686
- var onStoryShareCanceled = useCallback(function () {
687
- setStoryShareModalOpened(false);
688
- }, [setStoryShareModalOpened]);
689
- return /*#__PURE__*/React.createElement("div", {
690
- className: classNames([styles$8.container, _defineProperty({}, className, className !== null)])
691
- }, /*#__PURE__*/React.createElement(Button, {
692
- className: classNames([_defineProperty({}, buttonClassName, buttonClassName !== null)]),
693
- onClick: onShareIconClick,
694
- title: intl.formatMessage({
695
- id: "7tw6U2",
696
- defaultMessage: [{
697
- "type": 0,
698
- "value": "Share"
699
- }]
700
- }),
701
- "aria-label": intl.formatMessage({
702
- id: "7tw6U2",
703
- defaultMessage: [{
704
- "type": 0,
705
- "value": "Share"
706
- }]
707
- }),
708
- focusable: focusable
709
- }, children), /*#__PURE__*/React.createElement(ShareModal, {
710
- className: styles$8.shareModal,
711
- opened: storyShareModalOpened,
712
- title: title,
713
- url: url,
714
- onShare: onStoryShared,
715
- onCancel: onStoryShareCanceled
716
- }));
717
- };
718
-
719
- ShareButton.propTypes = propTypes$c;
720
- ShareButton.defaultProps = defaultProps$c;
739
+ StackIcon.propTypes = propTypes$c;
740
+ StackIcon.defaultProps = defaultProps$c;
721
741
 
722
742
  var styles$7 = {"container":"micromag-viewer-menus-menu-preview-container","screenButton":"micromag-viewer-menus-menu-preview-screenButton","activeScreenBorder":"micromag-viewer-menus-menu-preview-activeScreenBorder","scroll":"micromag-viewer-menus-menu-preview-scroll","header":"micromag-viewer-menus-menu-preview-header","button":"micromag-viewer-menus-menu-preview-button","shareButton":"micromag-viewer-menus-menu-preview-shareButton","disabled":"micromag-viewer-menus-menu-preview-disabled","icon":"micromag-viewer-menus-menu-preview-icon","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","title":"micromag-viewer-menus-menu-preview-title","content":"micromag-viewer-menus-menu-preview-content","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","active":"micromag-viewer-menus-menu-preview-active","itemContent":"micromag-viewer-menus-menu-preview-itemContent","screenContainer":"micromag-viewer-menus-menu-preview-screenContainer","subScreenBadge":"micromag-viewer-menus-menu-preview-subScreenBadge","subScreenCount":"micromag-viewer-menus-menu-preview-subScreenCount","subScreenIcon":"micromag-viewer-menus-menu-preview-subScreenIcon","screenContent":"micromag-viewer-menus-menu-preview-screenContent"};
723
743
 
@@ -726,13 +746,11 @@ var propTypes$b = {
726
746
  screenSize: PropTypes$1.screenSize,
727
747
  menuWidth: PropTypes.number,
728
748
  title: PropTypes.string,
729
- shareUrl: PropTypes.string,
730
749
  items: PropTypes$1.menuItems,
731
750
  focusable: PropTypes.bool,
732
751
  shouldLoad: PropTypes.bool,
733
752
  onClickItem: PropTypes.func,
734
753
  onClose: PropTypes.func,
735
- onShare: PropTypes.func,
736
754
  maxThumbsWidth: PropTypes.number,
737
755
  toggleFullscreen: PropTypes.func,
738
756
  fullscreenActive: PropTypes.bool,
@@ -744,13 +762,11 @@ var defaultProps$b = {
744
762
  screenSize: null,
745
763
  menuWidth: null,
746
764
  title: null,
747
- shareUrl: null,
748
765
  items: [],
749
766
  focusable: true,
750
767
  shouldLoad: true,
751
768
  onClickItem: null,
752
769
  onClose: null,
753
- onShare: null,
754
770
  maxThumbsWidth: 140,
755
771
  toggleFullscreen: null,
756
772
  fullscreenActive: false,
@@ -763,12 +779,10 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
763
779
  screenSize = _ref.screenSize,
764
780
  menuWidth = _ref.menuWidth,
765
781
  title = _ref.title,
766
- shareUrl = _ref.shareUrl,
767
782
  items = _ref.items,
768
783
  focusable = _ref.focusable,
769
784
  onClickItem = _ref.onClickItem,
770
785
  onClose = _ref.onClose,
771
- onShare = _ref.onShare,
772
786
  maxThumbsWidth = _ref.maxThumbsWidth,
773
787
  toggleFullscreen = _ref.toggleFullscreen,
774
788
  fullscreenActive = _ref.fullscreenActive,
@@ -883,17 +897,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
883
897
  }, title), /*#__PURE__*/React.createElement("div", {
884
898
  className: styles$7.buttons,
885
899
  style: colorSecondaryColorStyle
886
- }, /*#__PURE__*/React.createElement(ShareButton, {
887
- className: styles$7.shareButton,
888
- buttonClassName: styles$7.button,
889
- onShare: onShare,
890
- url: shareUrl,
891
- title: title,
892
- focusable: focusable
893
- }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
894
- className: styles$7.icon,
895
- icon: faShare
896
- })), fullscreenEnabled ? /*#__PURE__*/React.createElement(Button, {
900
+ }, fullscreenEnabled ? /*#__PURE__*/React.createElement(Button, {
897
901
  className: styles$7.button,
898
902
  onClick: toggleFullscreen,
899
903
  title: intl.formatMessage({
@@ -1273,6 +1277,9 @@ var ViewerMenu = function ViewerMenu(_ref) {
1273
1277
  direction: "horizontal",
1274
1278
  withShadow: withShadow,
1275
1279
  items: items,
1280
+ title: title,
1281
+ shareUrl: shareUrl,
1282
+ onShare: onClickShare,
1276
1283
  onClickItem: onClickItem,
1277
1284
  onClickMenu: onClickMenu,
1278
1285
  closeable: closeable,
@@ -1286,8 +1293,6 @@ var ViewerMenu = function ViewerMenu(_ref) {
1286
1293
  ref: menuPreviewContainerRef
1287
1294
  }, /*#__PURE__*/React.createElement(ViewerMenuPreview, {
1288
1295
  viewerTheme: viewerTheme,
1289
- title: title,
1290
- shareUrl: shareUrl,
1291
1296
  className: styles$6.menuPreview,
1292
1297
  screenSize: screenSize,
1293
1298
  menuWidth: menuWidth,
@@ -1295,7 +1300,6 @@ var ViewerMenu = function ViewerMenu(_ref) {
1295
1300
  items: items,
1296
1301
  onClickItem: onClickItem,
1297
1302
  onClose: onClickClose,
1298
- onShare: onClickShare,
1299
1303
  toggleFullscreen: toggleFullscreen,
1300
1304
  fullscreenActive: fullscreenActive,
1301
1305
  fullscreenEnabled: fullscreenEnabled
@@ -1891,6 +1895,7 @@ var propTypes$2 = {
1891
1895
  withoutFullscreen: PropTypes.bool,
1892
1896
  withLandscapeSiblingsScreens: PropTypes.bool,
1893
1897
  withNavigationHint: PropTypes.bool,
1898
+ withoutPlaybackControls: PropTypes.bool,
1894
1899
  closeable: PropTypes.bool,
1895
1900
  onClose: PropTypes.func,
1896
1901
  onInteraction: PropTypes.func,
@@ -1930,6 +1935,7 @@ var defaultProps$2 = {
1930
1935
  withoutFullscreen: false,
1931
1936
  withLandscapeSiblingsScreens: false,
1932
1937
  withNavigationHint: false,
1938
+ withoutPlaybackControls: false,
1933
1939
  menuIsScreenWidth: false,
1934
1940
  closeable: false,
1935
1941
  onClose: null,
@@ -1967,6 +1973,7 @@ var Viewer = function Viewer(_ref) {
1967
1973
  _ref.withoutFullscreen;
1968
1974
  var withLandscapeSiblingsScreens = _ref.withLandscapeSiblingsScreens,
1969
1975
  withNavigationHint = _ref.withNavigationHint,
1976
+ withoutPlaybackControls = _ref.withoutPlaybackControls,
1970
1977
  menuIsScreenWidth = _ref.menuIsScreenWidth,
1971
1978
  closeable = _ref.closeable,
1972
1979
  onCloseViewer = _ref.onClose,
@@ -2463,7 +2470,7 @@ var Viewer = function Viewer(_ref) {
2463
2470
  className: classNames([styles$6.navButton, styles$6.next]),
2464
2471
  onClick: gotoNextScreen
2465
2472
  }) : null));
2466
- }), /*#__PURE__*/React.createElement("div", {
2473
+ }), !withoutPlaybackControls ? /*#__PURE__*/React.createElement("div", {
2467
2474
  className: styles$6.playbackControls,
2468
2475
  ref: playbackControlsContainerRef
2469
2476
  }, /*#__PURE__*/React.createElement("div", {
@@ -2473,7 +2480,7 @@ var Viewer = function Viewer(_ref) {
2473
2480
  }
2474
2481
  }, /*#__PURE__*/React.createElement(PlaybackControls, {
2475
2482
  className: styles$6.controls
2476
- })))) : null, /*#__PURE__*/React.createElement(WebViewContainer, {
2483
+ }))) : null) : null, /*#__PURE__*/React.createElement(WebViewContainer, {
2477
2484
  className: styles$6.webView,
2478
2485
  style: {
2479
2486
  maxWidth: Math.max(screenContainerWidth, 600)
package/lib/index.js CHANGED
@@ -27,12 +27,12 @@ var utils = require('@micromag/core/utils');
27
27
  var core = require('@react-spring/core');
28
28
  var web = require('@react-spring/web');
29
29
  var faTimes = require('@fortawesome/free-solid-svg-icons/faTimes');
30
+ var faShare = require('@fortawesome/free-solid-svg-icons/faShare');
30
31
  var reactFontawesome = require('@fortawesome/react-fontawesome');
32
+ var ShareOptions = require('@micromag/element-share-options');
31
33
  var faCompress = require('@fortawesome/free-solid-svg-icons/faCompress');
32
34
  var faExpand = require('@fortawesome/free-solid-svg-icons/faExpand');
33
- var faShare = require('@fortawesome/free-solid-svg-icons/faShare');
34
35
  var Scroll = require('@micromag/element-scroll');
35
- var ShareOptions = require('@micromag/element-share-options');
36
36
  var faArrowLeft = require('@fortawesome/free-solid-svg-icons/faArrowLeft');
37
37
  var faArrowRight = require('@fortawesome/free-solid-svg-icons/faArrowRight');
38
38
  var faPause = require('@fortawesome/free-solid-svg-icons/faPause');
@@ -52,8 +52,8 @@ var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray)
52
52
  var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
53
53
  var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
54
54
  var EventEmitter__default = /*#__PURE__*/_interopDefaultLegacy(EventEmitter);
55
- var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
56
55
  var ShareOptions__default = /*#__PURE__*/_interopDefaultLegacy(ShareOptions);
56
+ var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
57
57
  var WebView__default = /*#__PURE__*/_interopDefaultLegacy(WebView);
58
58
 
59
59
  var routes = PropTypes__default["default"].shape({
@@ -394,10 +394,175 @@ var MenuIcon = function MenuIcon(_ref) {
394
394
  MenuIcon.propTypes = propTypes$g;
395
395
  MenuIcon.defaultProps = defaultProps$g;
396
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
+
397
399
  var propTypes$f = {
400
+ url: PropTypes__default["default"].string,
401
+ title: PropTypes__default["default"].string,
402
+ opened: PropTypes__default["default"].bool,
403
+ className: PropTypes__default["default"].string,
404
+ onShare: PropTypes__default["default"].func,
405
+ onCancel: PropTypes__default["default"].func
406
+ };
407
+ var defaultProps$f = {
408
+ url: null,
409
+ title: null,
410
+ opened: false,
411
+ className: null,
412
+ onShare: null,
413
+ onCancel: null
414
+ };
415
+
416
+ var ShareModal = function ShareModal(_ref) {
417
+ var _ref3;
418
+
419
+ var url = _ref.url,
420
+ title = _ref.title,
421
+ opened = _ref.opened,
422
+ className = _ref.className,
423
+ onShare = _ref.onShare,
424
+ onCancel = _ref.onCancel;
425
+ var modalRef = React.useRef();
426
+ var onDocumentClick = React.useCallback(function (e) {
427
+ var _ref2 = e || {},
428
+ target = _ref2.target;
429
+
430
+ if (!modalRef.current || modalRef.current.contains(target)) {
431
+ return;
432
+ }
433
+
434
+ onCancel();
435
+ }, [opened, onCancel]);
436
+ hooks.useDocumentEvent('click', onDocumentClick, opened);
437
+ 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)]),
439
+ "aria-hidden": opened ? null : '-1'
440
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
441
+ className: styles$9.modal,
442
+ ref: modalRef
443
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
444
+ className: styles$9.header
445
+ }, /*#__PURE__*/React__default["default"].createElement("h2", {
446
+ className: styles$9.heading
447
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
448
+ id: "oL4ueH",
449
+ defaultMessage: [{
450
+ "type": 0,
451
+ "value": "Share"
452
+ }]
453
+ })), /*#__PURE__*/React__default["default"].createElement(components.Button, {
454
+ className: styles$9.close,
455
+ onClick: onCancel,
456
+ focusable: opened
457
+ }, /*#__PURE__*/React__default["default"].createElement(components.Close, {
458
+ className: styles$9.closeIcon,
459
+ border: "none"
460
+ }))), /*#__PURE__*/React__default["default"].createElement("div", {
461
+ className: styles$9.content
462
+ }, /*#__PURE__*/React__default["default"].createElement(ShareOptions__default["default"], {
463
+ className: styles$9.shareOptions,
464
+ title: title,
465
+ url: url,
466
+ focusable: opened,
467
+ onShare: onShare,
468
+ onClose: onCancel
469
+ }))));
470
+ };
471
+
472
+ ShareModal.propTypes = propTypes$f;
473
+ ShareModal.defaultProps = defaultProps$f;
474
+
475
+ var styles$8 = {"container":"micromag-viewer-partials-share-button-container"};
476
+
477
+ var propTypes$e = {
478
+ title: PropTypes__default["default"].string,
479
+ url: PropTypes__default["default"].string,
480
+ className: PropTypes__default["default"].string,
481
+ buttonClassName: PropTypes__default["default"].string,
482
+ onShare: PropTypes__default["default"].func,
483
+ children: PropTypes__default["default"].node,
484
+ focusable: PropTypes__default["default"].bool
485
+ };
486
+ var defaultProps$e = {
487
+ title: null,
488
+ url: null,
489
+ className: null,
490
+ buttonClassName: null,
491
+ onShare: null,
492
+ children: null,
493
+ focusable: false
494
+ };
495
+
496
+ var ShareButton = function ShareButton(_ref) {
497
+ var title = _ref.title,
498
+ url = _ref.url,
499
+ className = _ref.className,
500
+ buttonClassName = _ref.buttonClassName,
501
+ onShare = _ref.onShare,
502
+ children = _ref.children,
503
+ focusable = _ref.focusable;
504
+ var intl = reactIntl.useIntl();
505
+
506
+ var _useState = React.useState(false),
507
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
508
+ storyShareModalOpened = _useState2[0],
509
+ setStoryShareModalOpened = _useState2[1];
510
+
511
+ var onShareIconClick = React.useCallback(function () {
512
+ setStoryShareModalOpened(function (opened) {
513
+ return !opened;
514
+ });
515
+ }, [setStoryShareModalOpened, storyShareModalOpened]);
516
+ var onStoryShared = React.useCallback(function (type) {
517
+ setStoryShareModalOpened(false);
518
+
519
+ if (onShare !== null) {
520
+ onShare(type);
521
+ }
522
+ }, [setStoryShareModalOpened, onShare]);
523
+ var onStoryShareCanceled = React.useCallback(function () {
524
+ setStoryShareModalOpened(false);
525
+ }, [setStoryShareModalOpened]);
526
+ return /*#__PURE__*/React__default["default"].createElement("div", {
527
+ className: classNames__default["default"]([styles$8.container, _defineProperty__default["default"]({}, className, className !== null)])
528
+ }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
529
+ className: classNames__default["default"]([_defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
530
+ onClick: onShareIconClick,
531
+ title: intl.formatMessage({
532
+ id: "7tw6U2",
533
+ defaultMessage: [{
534
+ "type": 0,
535
+ "value": "Share"
536
+ }]
537
+ }),
538
+ "aria-label": intl.formatMessage({
539
+ id: "7tw6U2",
540
+ defaultMessage: [{
541
+ "type": 0,
542
+ "value": "Share"
543
+ }]
544
+ }),
545
+ focusable: focusable
546
+ }, children), /*#__PURE__*/React__default["default"].createElement(ShareModal, {
547
+ className: styles$8.shareModal,
548
+ opened: storyShareModalOpened,
549
+ title: title,
550
+ url: url,
551
+ onShare: onStoryShared,
552
+ onCancel: onStoryShareCanceled
553
+ }));
554
+ };
555
+
556
+ ShareButton.propTypes = propTypes$e;
557
+ ShareButton.defaultProps = defaultProps$e;
558
+
559
+ var propTypes$d = {
398
560
  direction: PropTypes__default["default"].oneOf(['horizontal', 'vertical']),
399
561
  withShadow: PropTypes__default["default"].bool,
562
+ title: PropTypes__default["default"].string,
400
563
  items: core$1.PropTypes.menuItems,
564
+ shareUrl: PropTypes__default["default"].string,
565
+ onShare: PropTypes__default["default"].func,
401
566
  onClickItem: PropTypes__default["default"].func,
402
567
  onClickMenu: PropTypes__default["default"].func,
403
568
  colors: PropTypes__default["default"].shape({
@@ -410,10 +575,13 @@ var propTypes$f = {
410
575
  onClose: PropTypes__default["default"].func,
411
576
  className: PropTypes__default["default"].string
412
577
  };
413
- var defaultProps$f = {
578
+ var defaultProps$d = {
414
579
  direction: 'horizontal',
415
580
  withShadow: false,
581
+ title: null,
416
582
  items: [],
583
+ shareUrl: null,
584
+ onShare: null,
417
585
  onClickItem: null,
418
586
  onClickMenu: null,
419
587
  colors: null,
@@ -429,7 +597,10 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
429
597
 
430
598
  var direction = _ref.direction,
431
599
  withShadow = _ref.withShadow,
600
+ title = _ref.title,
432
601
  items = _ref.items,
602
+ shareUrl = _ref.shareUrl,
603
+ onShare = _ref.onShare,
433
604
  onClickItem = _ref.onClickItem,
434
605
  onClickMenu = _ref.onClickMenu,
435
606
  colors = _ref.colors,
@@ -500,7 +671,18 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
500
671
  },
501
672
  vertical: direction === 'vertical'
502
673
  });
503
- }), !withoutScreensMenu ? /*#__PURE__*/React__default["default"].createElement("li", {
674
+ }), /*#__PURE__*/React__default["default"].createElement("li", {
675
+ className: styles$c.menu
676
+ }, /*#__PURE__*/React__default["default"].createElement(ShareButton, {
677
+ className: styles$c.shareButton,
678
+ buttonClassName: styles$c.menuButton,
679
+ onShare: onShare,
680
+ url: shareUrl,
681
+ title: title
682
+ }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
683
+ className: styles$c.icon,
684
+ icon: faShare.faShare
685
+ }))), !withoutScreensMenu ? /*#__PURE__*/React__default["default"].createElement("li", {
504
686
  className: styles$c.menu
505
687
  }, /*#__PURE__*/React__default["default"].createElement(MenuIcon, {
506
688
  className: styles$c.menuIcon,
@@ -551,13 +733,13 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
551
733
  }))) : null));
552
734
  };
553
735
 
554
- ViewerMenuDots.propTypes = propTypes$f;
555
- ViewerMenuDots.defaultProps = defaultProps$f;
736
+ ViewerMenuDots.propTypes = propTypes$d;
737
+ ViewerMenuDots.defaultProps = defaultProps$d;
556
738
 
557
- var propTypes$e = {
739
+ var propTypes$c = {
558
740
  className: PropTypes__default["default"].string
559
741
  };
560
- var defaultProps$e = {
742
+ var defaultProps$c = {
561
743
  className: null
562
744
  };
563
745
 
@@ -574,170 +756,8 @@ var StackIcon = function StackIcon(_ref) {
574
756
  }));
575
757
  };
576
758
 
577
- StackIcon.propTypes = propTypes$e;
578
- StackIcon.defaultProps = defaultProps$e;
579
-
580
- 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"};
581
-
582
- var propTypes$d = {
583
- url: PropTypes__default["default"].string,
584
- title: PropTypes__default["default"].string,
585
- opened: PropTypes__default["default"].bool,
586
- className: PropTypes__default["default"].string,
587
- onShare: PropTypes__default["default"].func,
588
- onCancel: PropTypes__default["default"].func
589
- };
590
- var defaultProps$d = {
591
- url: null,
592
- title: null,
593
- opened: false,
594
- className: null,
595
- onShare: null,
596
- onCancel: null
597
- };
598
-
599
- var ShareModal = function ShareModal(_ref) {
600
- var _ref3;
601
-
602
- var url = _ref.url,
603
- title = _ref.title,
604
- opened = _ref.opened,
605
- className = _ref.className,
606
- onShare = _ref.onShare,
607
- onCancel = _ref.onCancel;
608
- var modalRef = React.useRef();
609
- var onDocumentClick = React.useCallback(function (e) {
610
- var _ref2 = e || {},
611
- target = _ref2.target;
612
-
613
- if (!modalRef.current || modalRef.current.contains(target)) {
614
- return;
615
- }
616
-
617
- onCancel();
618
- }, [opened, onCancel]);
619
- hooks.useDocumentEvent('click', onDocumentClick, opened);
620
- return /*#__PURE__*/React__default["default"].createElement("div", {
621
- className: classNames__default["default"]([styles$9.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className), _defineProperty__default["default"](_ref3, styles$9.opened, opened), _ref3)]),
622
- "aria-hidden": opened ? null : '-1'
623
- }, /*#__PURE__*/React__default["default"].createElement("div", {
624
- className: styles$9.modal,
625
- ref: modalRef
626
- }, /*#__PURE__*/React__default["default"].createElement("div", {
627
- className: styles$9.header
628
- }, /*#__PURE__*/React__default["default"].createElement("h2", {
629
- className: styles$9.heading
630
- }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
631
- id: "oL4ueH",
632
- defaultMessage: [{
633
- "type": 0,
634
- "value": "Share"
635
- }]
636
- })), /*#__PURE__*/React__default["default"].createElement(components.Button, {
637
- className: styles$9.close,
638
- onClick: onCancel,
639
- focusable: opened
640
- }, /*#__PURE__*/React__default["default"].createElement(components.Close, {
641
- className: styles$9.closeIcon,
642
- border: "none"
643
- }))), /*#__PURE__*/React__default["default"].createElement("div", {
644
- className: styles$9.content
645
- }, /*#__PURE__*/React__default["default"].createElement(ShareOptions__default["default"], {
646
- className: styles$9.shareOptions,
647
- title: title,
648
- url: url,
649
- focusable: opened,
650
- onShare: onShare,
651
- onClose: onCancel
652
- }))));
653
- };
654
-
655
- ShareModal.propTypes = propTypes$d;
656
- ShareModal.defaultProps = defaultProps$d;
657
-
658
- var styles$8 = {"container":"micromag-viewer-partials-share-button-container"};
659
-
660
- var propTypes$c = {
661
- title: PropTypes__default["default"].string,
662
- url: PropTypes__default["default"].string,
663
- className: PropTypes__default["default"].string,
664
- buttonClassName: PropTypes__default["default"].string,
665
- onShare: PropTypes__default["default"].func,
666
- children: PropTypes__default["default"].node,
667
- focusable: PropTypes__default["default"].bool
668
- };
669
- var defaultProps$c = {
670
- title: null,
671
- url: null,
672
- className: null,
673
- buttonClassName: null,
674
- onShare: null,
675
- children: null,
676
- focusable: false
677
- };
678
-
679
- var ShareButton = function ShareButton(_ref) {
680
- var title = _ref.title,
681
- url = _ref.url,
682
- className = _ref.className,
683
- buttonClassName = _ref.buttonClassName,
684
- onShare = _ref.onShare,
685
- children = _ref.children,
686
- focusable = _ref.focusable;
687
- var intl = reactIntl.useIntl();
688
-
689
- var _useState = React.useState(false),
690
- _useState2 = _slicedToArray__default["default"](_useState, 2),
691
- storyShareModalOpened = _useState2[0],
692
- setStoryShareModalOpened = _useState2[1];
693
-
694
- var onShareIconClick = React.useCallback(function () {
695
- setStoryShareModalOpened(function (opened) {
696
- return !opened;
697
- });
698
- }, [setStoryShareModalOpened, storyShareModalOpened]);
699
- var onStoryShared = React.useCallback(function (type) {
700
- setStoryShareModalOpened(false);
701
-
702
- if (onShare !== null) {
703
- onShare(type);
704
- }
705
- }, [setStoryShareModalOpened, onShare]);
706
- var onStoryShareCanceled = React.useCallback(function () {
707
- setStoryShareModalOpened(false);
708
- }, [setStoryShareModalOpened]);
709
- return /*#__PURE__*/React__default["default"].createElement("div", {
710
- className: classNames__default["default"]([styles$8.container, _defineProperty__default["default"]({}, className, className !== null)])
711
- }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
712
- className: classNames__default["default"]([_defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
713
- onClick: onShareIconClick,
714
- title: intl.formatMessage({
715
- id: "7tw6U2",
716
- defaultMessage: [{
717
- "type": 0,
718
- "value": "Share"
719
- }]
720
- }),
721
- "aria-label": intl.formatMessage({
722
- id: "7tw6U2",
723
- defaultMessage: [{
724
- "type": 0,
725
- "value": "Share"
726
- }]
727
- }),
728
- focusable: focusable
729
- }, children), /*#__PURE__*/React__default["default"].createElement(ShareModal, {
730
- className: styles$8.shareModal,
731
- opened: storyShareModalOpened,
732
- title: title,
733
- url: url,
734
- onShare: onStoryShared,
735
- onCancel: onStoryShareCanceled
736
- }));
737
- };
738
-
739
- ShareButton.propTypes = propTypes$c;
740
- ShareButton.defaultProps = defaultProps$c;
759
+ StackIcon.propTypes = propTypes$c;
760
+ StackIcon.defaultProps = defaultProps$c;
741
761
 
742
762
  var styles$7 = {"container":"micromag-viewer-menus-menu-preview-container","screenButton":"micromag-viewer-menus-menu-preview-screenButton","activeScreenBorder":"micromag-viewer-menus-menu-preview-activeScreenBorder","scroll":"micromag-viewer-menus-menu-preview-scroll","header":"micromag-viewer-menus-menu-preview-header","button":"micromag-viewer-menus-menu-preview-button","shareButton":"micromag-viewer-menus-menu-preview-shareButton","disabled":"micromag-viewer-menus-menu-preview-disabled","icon":"micromag-viewer-menus-menu-preview-icon","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","title":"micromag-viewer-menus-menu-preview-title","content":"micromag-viewer-menus-menu-preview-content","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","active":"micromag-viewer-menus-menu-preview-active","itemContent":"micromag-viewer-menus-menu-preview-itemContent","screenContainer":"micromag-viewer-menus-menu-preview-screenContainer","subScreenBadge":"micromag-viewer-menus-menu-preview-subScreenBadge","subScreenCount":"micromag-viewer-menus-menu-preview-subScreenCount","subScreenIcon":"micromag-viewer-menus-menu-preview-subScreenIcon","screenContent":"micromag-viewer-menus-menu-preview-screenContent"};
743
763
 
@@ -746,13 +766,11 @@ var propTypes$b = {
746
766
  screenSize: core$1.PropTypes.screenSize,
747
767
  menuWidth: PropTypes__default["default"].number,
748
768
  title: PropTypes__default["default"].string,
749
- shareUrl: PropTypes__default["default"].string,
750
769
  items: core$1.PropTypes.menuItems,
751
770
  focusable: PropTypes__default["default"].bool,
752
771
  shouldLoad: PropTypes__default["default"].bool,
753
772
  onClickItem: PropTypes__default["default"].func,
754
773
  onClose: PropTypes__default["default"].func,
755
- onShare: PropTypes__default["default"].func,
756
774
  maxThumbsWidth: PropTypes__default["default"].number,
757
775
  toggleFullscreen: PropTypes__default["default"].func,
758
776
  fullscreenActive: PropTypes__default["default"].bool,
@@ -764,13 +782,11 @@ var defaultProps$b = {
764
782
  screenSize: null,
765
783
  menuWidth: null,
766
784
  title: null,
767
- shareUrl: null,
768
785
  items: [],
769
786
  focusable: true,
770
787
  shouldLoad: true,
771
788
  onClickItem: null,
772
789
  onClose: null,
773
- onShare: null,
774
790
  maxThumbsWidth: 140,
775
791
  toggleFullscreen: null,
776
792
  fullscreenActive: false,
@@ -783,12 +799,10 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
783
799
  screenSize = _ref.screenSize,
784
800
  menuWidth = _ref.menuWidth,
785
801
  title = _ref.title,
786
- shareUrl = _ref.shareUrl,
787
802
  items = _ref.items,
788
803
  focusable = _ref.focusable,
789
804
  onClickItem = _ref.onClickItem,
790
805
  onClose = _ref.onClose,
791
- onShare = _ref.onShare,
792
806
  maxThumbsWidth = _ref.maxThumbsWidth,
793
807
  toggleFullscreen = _ref.toggleFullscreen,
794
808
  fullscreenActive = _ref.fullscreenActive,
@@ -903,17 +917,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
903
917
  }, title), /*#__PURE__*/React__default["default"].createElement("div", {
904
918
  className: styles$7.buttons,
905
919
  style: colorSecondaryColorStyle
906
- }, /*#__PURE__*/React__default["default"].createElement(ShareButton, {
907
- className: styles$7.shareButton,
908
- buttonClassName: styles$7.button,
909
- onShare: onShare,
910
- url: shareUrl,
911
- title: title,
912
- focusable: focusable
913
- }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
914
- className: styles$7.icon,
915
- icon: faShare.faShare
916
- })), fullscreenEnabled ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
920
+ }, fullscreenEnabled ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
917
921
  className: styles$7.button,
918
922
  onClick: toggleFullscreen,
919
923
  title: intl.formatMessage({
@@ -1293,6 +1297,9 @@ var ViewerMenu = function ViewerMenu(_ref) {
1293
1297
  direction: "horizontal",
1294
1298
  withShadow: withShadow,
1295
1299
  items: items,
1300
+ title: title,
1301
+ shareUrl: shareUrl,
1302
+ onShare: onClickShare,
1296
1303
  onClickItem: onClickItem,
1297
1304
  onClickMenu: onClickMenu,
1298
1305
  closeable: closeable,
@@ -1306,8 +1313,6 @@ var ViewerMenu = function ViewerMenu(_ref) {
1306
1313
  ref: menuPreviewContainerRef
1307
1314
  }, /*#__PURE__*/React__default["default"].createElement(ViewerMenuPreview, {
1308
1315
  viewerTheme: viewerTheme,
1309
- title: title,
1310
- shareUrl: shareUrl,
1311
1316
  className: styles$6.menuPreview,
1312
1317
  screenSize: screenSize,
1313
1318
  menuWidth: menuWidth,
@@ -1315,7 +1320,6 @@ var ViewerMenu = function ViewerMenu(_ref) {
1315
1320
  items: items,
1316
1321
  onClickItem: onClickItem,
1317
1322
  onClose: onClickClose,
1318
- onShare: onClickShare,
1319
1323
  toggleFullscreen: toggleFullscreen,
1320
1324
  fullscreenActive: fullscreenActive,
1321
1325
  fullscreenEnabled: fullscreenEnabled
@@ -1911,6 +1915,7 @@ var propTypes$2 = {
1911
1915
  withoutFullscreen: PropTypes__default["default"].bool,
1912
1916
  withLandscapeSiblingsScreens: PropTypes__default["default"].bool,
1913
1917
  withNavigationHint: PropTypes__default["default"].bool,
1918
+ withoutPlaybackControls: PropTypes__default["default"].bool,
1914
1919
  closeable: PropTypes__default["default"].bool,
1915
1920
  onClose: PropTypes__default["default"].func,
1916
1921
  onInteraction: PropTypes__default["default"].func,
@@ -1950,6 +1955,7 @@ var defaultProps$2 = {
1950
1955
  withoutFullscreen: false,
1951
1956
  withLandscapeSiblingsScreens: false,
1952
1957
  withNavigationHint: false,
1958
+ withoutPlaybackControls: false,
1953
1959
  menuIsScreenWidth: false,
1954
1960
  closeable: false,
1955
1961
  onClose: null,
@@ -1987,6 +1993,7 @@ var Viewer = function Viewer(_ref) {
1987
1993
  _ref.withoutFullscreen;
1988
1994
  var withLandscapeSiblingsScreens = _ref.withLandscapeSiblingsScreens,
1989
1995
  withNavigationHint = _ref.withNavigationHint,
1996
+ withoutPlaybackControls = _ref.withoutPlaybackControls,
1990
1997
  menuIsScreenWidth = _ref.menuIsScreenWidth,
1991
1998
  closeable = _ref.closeable,
1992
1999
  onCloseViewer = _ref.onClose,
@@ -2483,7 +2490,7 @@ var Viewer = function Viewer(_ref) {
2483
2490
  className: classNames__default["default"]([styles$6.navButton, styles$6.next]),
2484
2491
  onClick: gotoNextScreen
2485
2492
  }) : null));
2486
- }), /*#__PURE__*/React__default["default"].createElement("div", {
2493
+ }), !withoutPlaybackControls ? /*#__PURE__*/React__default["default"].createElement("div", {
2487
2494
  className: styles$6.playbackControls,
2488
2495
  ref: playbackControlsContainerRef
2489
2496
  }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2493,7 +2500,7 @@ var Viewer = function Viewer(_ref) {
2493
2500
  }
2494
2501
  }, /*#__PURE__*/React__default["default"].createElement(PlaybackControls, {
2495
2502
  className: styles$6.controls
2496
- })))) : null, /*#__PURE__*/React__default["default"].createElement(WebViewContainer, {
2503
+ }))) : null) : null, /*#__PURE__*/React__default["default"].createElement(WebViewContainer, {
2497
2504
  className: styles$6.webView,
2498
2505
  style: {
2499
2506
  maxWidth: Math.max(screenContainerWidth, 600)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/viewer",
3
- "version": "0.3.171",
3
+ "version": "0.3.176",
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.169",
63
- "@micromag/element-scroll": "^0.3.169",
64
- "@micromag/element-share-options": "^0.3.169",
65
- "@micromag/element-webview": "^0.3.169",
66
- "@micromag/elements": "^0.3.170",
67
- "@micromag/fields": "^0.3.169",
68
- "@micromag/intl": "^0.3.169",
69
- "@micromag/screens": "^0.3.170",
62
+ "@micromag/core": "^0.3.175",
63
+ "@micromag/element-scroll": "^0.3.175",
64
+ "@micromag/element-share-options": "^0.3.175",
65
+ "@micromag/element-webview": "^0.3.175",
66
+ "@micromag/elements": "^0.3.175",
67
+ "@micromag/fields": "^0.3.175",
68
+ "@micromag/intl": "^0.3.175",
69
+ "@micromag/screens": "^0.3.175",
70
70
  "@react-spring/core": "^9.1.1",
71
71
  "@react-spring/web": "^9.1.1",
72
72
  "@use-gesture/react": "^10.2.4",
@@ -84,5 +84,5 @@
84
84
  "publishConfig": {
85
85
  "access": "public"
86
86
  },
87
- "gitHead": "69c7ceefc99fa77492dcf712f9da70afd00bc77a"
87
+ "gitHead": "55ea3dbe1d4d5721f09e127e9dd224ee75f5cb8b"
88
88
  }