@micromag/screen-urbania-horoscope 0.3.81 → 0.3.88
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.
- package/assets/css/styles.css +3 -3
- package/es/index.js +167 -101
- package/lib/index.js +165 -99
- package/package.json +14 -14
package/assets/css/styles.css
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
.micromag-screen-urbania-horoscope-sign-modal-container{width:100%;height:100%;overflow:hidden}.micromag-screen-urbania-horoscope-sign-modal-disabled.micromag-screen-urbania-horoscope-sign-modal-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-horoscope-sign-modal-hidden.micromag-screen-urbania-horoscope-sign-modal-container{display:none;visibility:hidden}.micromag-screen-urbania-horoscope-sign-modal-placeholder.micromag-screen-urbania-horoscope-sign-modal-container .micromag-screen-urbania-horoscope-sign-modal-content{position:relative;padding:6px}.micromag-screen-urbania-horoscope-sign-modal-container{position:relative;z-index:4}.micromag-screen-urbania-horoscope-sign-modal-container .micromag-screen-urbania-horoscope-sign-modal-backButton{position:absolute;top:7px;left:5px;padding-left:10%;border-radius:25px;background-color:#fff;-webkit-box-shadow:0 0 0 2px hsla(0,0%,100%,.85),0 0 4px #010f66;box-shadow:0 0 0 2px hsla(0,0%,100%,.85),0 0 4px #010f66;color:#010f66;font-family:Agrandir Tight,sans-serif;font-weight:
|
|
2
|
-
.micromag-screen-urbania-horoscope-signs-grid-container{width:100%;height:100%;overflow:hidden}.micromag-screen-urbania-horoscope-signs-grid-disabled.micromag-screen-urbania-horoscope-signs-grid-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-horoscope-signs-grid-hidden.micromag-screen-urbania-horoscope-signs-grid-container{display:none;visibility:hidden}.micromag-screen-urbania-horoscope-signs-grid-placeholder.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-content{position:relative;padding:6px}.micromag-screen-urbania-horoscope-signs-grid-container{position:relative;z-index:2}.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-closeButton{position:absolute;z-index:5;top:7px;right:7px;width:30px;height:30px;padding:0;border-radius:50%;background-color:#fff;-webkit-box-shadow:0 0 0 2px hsla(0,0%,100%,.85),0 0 4px #010f66;box-shadow:0 0 0 2px hsla(0,0%,100%,.85),0 0 4px #010f66}.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-closeX{-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);color:#000}.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-gridContainer{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:30px}.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-gridContainer.micromag-screen-urbania-horoscope-signs-grid-isPlaceholder{padding:0}.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-signPlaceholder{width:30px;height:30px;margin:1px;background-color:#b3b3b3}.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-gridElement{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-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:80px;height:85px;margin-bottom:8px;padding:5px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;border:0;border-radius:16px;background-color:#1d3af2}.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-gridElement:hover{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-image{max-height:44px;padding-bottom:4px}.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-signName{width:100%;margin-bottom:4px;padding:2px 5px 1px;border-radius:24px;background-color:#fffc00;-webkit-box-shadow:0 0 0 2px rgba(255,250,0,.6);box-shadow:0 0 0 2px rgba(255,250,0,.6);color:#222;font-family:Agrandir Tight,sans-serif;font-size:12px;font-weight:700}.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-date{color:#fffa00;font-family:Agrandir,sans-serif;font-size:8px}.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-backButton{position:absolute;z-index:5;top:7px;left:0;padding-left:20px;border-top-right-radius:25px;border-bottom-right-radius:25px;background-color:#fff;-webkit-box-shadow:0 0 0 2px hsla(0,0%,100%,.85),0 0 4px #010f66;box-shadow:0 0 0 2px hsla(0,0%,100%,.85),0 0 4px #010f66;color:#010f66;font-family:Agrandir Tight,sans-serif;font-weight:
|
|
3
|
-
.micromag-screen-urbania-horoscope-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-urbania-horoscope-disabled.micromag-screen-urbania-horoscope-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-horoscope-hidden.micromag-screen-urbania-horoscope-container{display:none;visibility:hidden}.micromag-screen-urbania-horoscope-placeholder.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-content{position:relative;padding:6px}.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-emptyText,.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-layout{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:space-
|
|
1
|
+
.micromag-screen-urbania-horoscope-sign-modal-container{width:100%;height:100%;overflow:hidden}.micromag-screen-urbania-horoscope-sign-modal-disabled.micromag-screen-urbania-horoscope-sign-modal-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-horoscope-sign-modal-hidden.micromag-screen-urbania-horoscope-sign-modal-container{display:none;visibility:hidden}.micromag-screen-urbania-horoscope-sign-modal-placeholder.micromag-screen-urbania-horoscope-sign-modal-container .micromag-screen-urbania-horoscope-sign-modal-content{position:relative;padding:6px}.micromag-screen-urbania-horoscope-sign-modal-container{position:relative;z-index:4}.micromag-screen-urbania-horoscope-sign-modal-container .micromag-screen-urbania-horoscope-sign-modal-backButton{position:absolute;top:7px;left:5px;height:36px;padding-left:10%;border-radius:25px;background-color:#fff;-webkit-box-shadow:0 0 0 2px hsla(0,0%,100%,.85),0 0 4px #010f66;box-shadow:0 0 0 2px hsla(0,0%,100%,.85),0 0 4px #010f66;color:#010f66;font-family:Agrandir Tight,sans-serif;font-weight:400;line-height:1}.micromag-screen-urbania-horoscope-sign-modal-container .micromag-screen-urbania-horoscope-sign-modal-arrow{padding-right:5px;font-size:20px;vertical-align:middle}.micromag-screen-urbania-horoscope-sign-modal-container .micromag-screen-urbania-horoscope-sign-modal-modalContainer{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;margin:60px 18px 30px;padding:10px;border-radius:22px;background-color:#0ff;-webkit-box-shadow:0 0 4px #010f66;box-shadow:0 0 4px #010f66;color:#1d3af2}.micromag-screen-urbania-horoscope-sign-modal-container .micromag-screen-urbania-horoscope-sign-modal-signName{padding:7px auto 5px;font-family:Agrandir Tight,sans-serif;font-weight:900;text-transform:uppercase}.micromag-screen-urbania-horoscope-sign-modal-container .micromag-screen-urbania-horoscope-sign-modal-wordContainer{margin-bottom:5px;padding:8px 6px 6px;border:1px solid #1d3af2;border-radius:9px;text-transform:uppercase}.micromag-screen-urbania-horoscope-sign-modal-container .micromag-screen-urbania-horoscope-sign-modal-wordTitle{padding-bottom:2px;font-family:Agrandir Tight,sans-serif;font-size:8px;font-weight:500;letter-spacing:.03rem}.micromag-screen-urbania-horoscope-sign-modal-container .micromag-screen-urbania-horoscope-sign-modal-word{font-family:Agrandir Narrow,sans-serif;font-size:16px;font-weight:700}.micromag-screen-urbania-horoscope-sign-modal-container .micromag-screen-urbania-horoscope-sign-modal-description{padding-bottom:5px;font-family:Roboto,sans-serif;font-size:12px;line-height:1.2}.micromag-screen-urbania-horoscope-sign-modal-container .micromag-screen-urbania-horoscope-sign-modal-description p{margin-bottom:1em}.micromag-screen-urbania-horoscope-sign-modal-container .micromag-screen-urbania-horoscope-sign-modal-description p:last-child{margin-bottom:0}.micromag-screen-urbania-horoscope-sign-modal-container .micromag-screen-urbania-horoscope-sign-modal-image{width:85%;height:auto;margin:0 auto}
|
|
2
|
+
.micromag-screen-urbania-horoscope-signs-grid-container{width:100%;height:100%;overflow:hidden}.micromag-screen-urbania-horoscope-signs-grid-disabled.micromag-screen-urbania-horoscope-signs-grid-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-horoscope-signs-grid-hidden.micromag-screen-urbania-horoscope-signs-grid-container{display:none;visibility:hidden}.micromag-screen-urbania-horoscope-signs-grid-placeholder.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-content{position:relative;padding:6px}.micromag-screen-urbania-horoscope-signs-grid-container{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;z-index:2;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;text-align:center}.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-closeButton{position:absolute;z-index:5;top:7px;right:7px;width:30px;height:30px;padding:0;border-radius:50%;background-color:#fff;-webkit-box-shadow:0 0 0 2px hsla(0,0%,100%,.85),0 0 4px #010f66;box-shadow:0 0 0 2px hsla(0,0%,100%,.85),0 0 4px #010f66}.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-closeX{-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);color:#000}.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-gridContainer{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:30px}.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-gridContainer.micromag-screen-urbania-horoscope-signs-grid-isPlaceholder{padding:0}.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-signPlaceholder{width:30px;height:30px;margin:1px;background-color:#b3b3b3}.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-gridElement{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-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:80px;height:85px;margin-bottom:8px;padding:5px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;border:0;border-radius:16px;background-color:#1d3af2}.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-gridElement:hover{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-image{max-height:44px;padding-bottom:4px}.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-signName{width:100%;margin-bottom:4px;padding:2px 5px 1px;border-radius:24px;background-color:#fffc00;-webkit-box-shadow:0 0 0 2px rgba(255,250,0,.6);box-shadow:0 0 0 2px rgba(255,250,0,.6);color:#222;font-family:Agrandir Tight,sans-serif;font-size:12px;font-weight:700}.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-date{color:#fffa00;font-family:Agrandir,sans-serif;font-size:8px}.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-backButton{position:absolute;z-index:5;top:7px;left:0;height:30px;padding-left:20px;border-top-right-radius:25px;border-bottom-right-radius:25px;background-color:#fff;-webkit-box-shadow:0 0 0 2px hsla(0,0%,100%,.85),0 0 4px #010f66;box-shadow:0 0 0 2px hsla(0,0%,100%,.85),0 0 4px #010f66;color:#010f66;font-family:Agrandir Tight,sans-serif;font-size:12px;font-weight:400;line-height:1}.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-arrow{padding-right:5px;font-size:20px;vertical-align:middle}.micromag-screen-urbania-horoscope-signs-grid-container .micromag-screen-urbania-horoscope-signs-grid-modalContainer{position:absolute;top:0;right:0;left:0}.micromag-screen-urbania-horoscope-signs-grid-gridContainer.micromag-screen-urbania-horoscope-signs-grid-enter{z-index:1;-webkit-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;transition:opacity .5s ease-out;opacity:0}.micromag-screen-urbania-horoscope-signs-grid-gridContainer.micromag-screen-urbania-horoscope-signs-grid-enterActive{opacity:1}.micromag-screen-urbania-horoscope-signs-grid-gridContainer.micromag-screen-urbania-horoscope-signs-grid-exit{z-index:2;-webkit-transition:opacity .8s ease-out;-o-transition:opacity .8s ease-out;transition:opacity .8s ease-out;opacity:1}.micromag-screen-urbania-horoscope-signs-grid-gridContainer.micromag-screen-urbania-horoscope-signs-grid-exitActive{opacity:0}.micromag-screen-urbania-horoscope-signs-grid-modalContainer.micromag-screen-urbania-horoscope-signs-grid-enter .micromag-screen-urbania-horoscope-signs-grid-signModal{z-index:1;-webkit-transform:scale(20%);-ms-transform:scale(20%);transform:scale(20%);-webkit-transition:-webkit-transform .5s ease-out;transition:-webkit-transform .5s ease-out;-o-transition:transform .5s ease-out;transition:transform .5s ease-out;transition:transform .5s ease-out, -webkit-transform .5s ease-out}.micromag-screen-urbania-horoscope-signs-grid-modalContainer.micromag-screen-urbania-horoscope-signs-grid-enter .micromag-screen-urbania-horoscope-signs-grid-backButton{z-index:1;-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px);-webkit-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;opacity:0}.micromag-screen-urbania-horoscope-signs-grid-modalContainer.micromag-screen-urbania-horoscope-signs-grid-enterActive .micromag-screen-urbania-horoscope-signs-grid-signModal{-webkit-transform:scale(100%);-ms-transform:scale(100%);transform:scale(100%)}.micromag-screen-urbania-horoscope-signs-grid-modalContainer.micromag-screen-urbania-horoscope-signs-grid-enterActive .micromag-screen-urbania-horoscope-signs-grid-backButton{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1}.micromag-screen-urbania-horoscope-signs-grid-modalContainer.micromag-screen-urbania-horoscope-signs-grid-exit{z-index:2;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform .5s ease-out;transition:-webkit-transform .5s ease-out;-o-transition:transform .5s ease-out;transition:transform .5s ease-out;transition:transform .5s ease-out, -webkit-transform .5s ease-out}.micromag-screen-urbania-horoscope-signs-grid-modalContainer.micromag-screen-urbania-horoscope-signs-grid-exit .micromag-screen-urbania-horoscope-signs-grid-backButton,.micromag-screen-urbania-horoscope-signs-grid-modalContainer.micromag-screen-urbania-horoscope-signs-grid-exit .micromag-screen-urbania-horoscope-signs-grid-signModal{z-index:2;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;opacity:1}.micromag-screen-urbania-horoscope-signs-grid-modalContainer.micromag-screen-urbania-horoscope-signs-grid-exitActive .micromag-screen-urbania-horoscope-signs-grid-signModal{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.micromag-screen-urbania-horoscope-signs-grid-modalContainer.micromag-screen-urbania-horoscope-signs-grid-exitActive .micromag-screen-urbania-horoscope-signs-grid-backButton{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px);opacity:0}
|
|
3
|
+
.micromag-screen-urbania-horoscope-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-urbania-horoscope-disabled.micromag-screen-urbania-horoscope-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-horoscope-hidden.micromag-screen-urbania-horoscope-container{display:none;visibility:hidden}.micromag-screen-urbania-horoscope-placeholder.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-content{position:relative;padding:6px}.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-emptyText,.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-layout{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;text-align:center}.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-emptyText,.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-emptyTitle{width:100%;margin:10px auto}.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-emptyTitle{height:100px}.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-emptyText{height:50px}.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-headerContainer{width:280px}.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-title{color:#0ff;font-family:Agrandir Tight,sans-serif;font-size:48px;font-weight:700;letter-spacing:-1px;text-shadow:-3px -3px 0 #000f66;text-transform:uppercase;-webkit-text-stroke:1px #000f66}.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-title,.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-titleImage{-webkit-filter:drop-shadow(0 0 6px rgba(0,0,0,.7));filter:drop-shadow(0 0 6px rgba(0,0,0,.7))}.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-titleImage{width:100%;height:auto}.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-titlePlaceholder{padding:10px;background-color:#343434}.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-description{margin-bottom:8px;padding:10px;color:#0ff;font-family:Agrandir Tight,sans-serif;font-size:18px;font-weight:700;-webkit-filter:drop-shadow(0 0 3px rgba(0,0,0,.7));filter:drop-shadow(0 0 3px rgba(0,0,0,.7))}.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-descriptionPlaceholder{padding:10px 10px 30px}.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-author{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 auto;-webkit-filter:drop-shadow(0 0 3px rgba(0,0,0,.7));filter:drop-shadow(0 0 3px rgba(0,0,0,.7))}.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-button{padding:8px 15px 4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;border-radius:24px;background-color:#fffc00;-webkit-box-shadow:0 0 0 6px rgba(255,250,0,.6);box-shadow:0 0 0 6px rgba(255,250,0,.6)}.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-button .micromag-screen-urbania-horoscope-buttonLabel{color:#000;font-family:Agrandir Tight,sans-serif;font-size:22px;font-weight:700;letter-spacing:.03rem}.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-button:hover{-webkit-transform:scale(1.02);-ms-transform:scale(1.02);transform:scale(1.02)}.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-signsGrid{position:absolute;bottom:0;left:0}.micromag-screen-urbania-horoscope-container.micromag-screen-urbania-horoscope-isPlaceholder .micromag-screen-urbania-horoscope-layout{padding:10px}.micromag-screen-urbania-horoscope-enter{z-index:1;-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);-webkit-transition:-webkit-transform .5s ease-out;transition:-webkit-transform .5s ease-out;-o-transition:transform .5s ease-out;transition:transform .5s ease-out;transition:transform .5s ease-out, -webkit-transform .5s ease-out}.micromag-screen-urbania-horoscope-enterActive,.micromag-screen-urbania-horoscope-exit{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.micromag-screen-urbania-horoscope-exit{z-index:2;-webkit-transition:-webkit-transform .5s ease-out;transition:-webkit-transform .5s ease-out;-o-transition:transform .5s ease-out;transition:transform .5s ease-out;transition:transform .5s ease-out, -webkit-transform .5s ease-out}.micromag-screen-urbania-horoscope-exitActive{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}
|
package/es/index.js
CHANGED
|
@@ -4,11 +4,11 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
|
|
|
4
4
|
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
5
5
|
import classNames from 'classnames';
|
|
6
6
|
import PropTypes from 'prop-types';
|
|
7
|
-
import React, { useState,
|
|
7
|
+
import React, { useCallback, useState, useEffect } from 'react';
|
|
8
8
|
import { TransitionGroup, CSSTransition } from 'react-transition-group';
|
|
9
9
|
import { PropTypes as PropTypes$1 } from '@micromag/core';
|
|
10
10
|
import { ScreenElement, PlaceholderTitle, TransitionsStagger } from '@micromag/core/components';
|
|
11
|
-
import { useScreenRenderContext, useScreenSize, useViewer } from '@micromag/core/contexts';
|
|
11
|
+
import { useScreenRenderContext, useScreenState, useScreenSize, useViewer } from '@micromag/core/contexts';
|
|
12
12
|
import { isTextFilled } from '@micromag/core/utils';
|
|
13
13
|
import Background from '@micromag/element-background';
|
|
14
14
|
import Button from '@micromag/element-button';
|
|
@@ -47,6 +47,7 @@ var propTypes$3 = {
|
|
|
47
47
|
}),
|
|
48
48
|
subtitle: PropTypes$1.headingElement,
|
|
49
49
|
current: PropTypes.bool,
|
|
50
|
+
transitionDisabled: PropTypes.bool,
|
|
50
51
|
className: PropTypes.string
|
|
51
52
|
};
|
|
52
53
|
var defaultProps$3 = {
|
|
@@ -55,15 +56,19 @@ var defaultProps$3 = {
|
|
|
55
56
|
sign: null,
|
|
56
57
|
subtitle: null,
|
|
57
58
|
current: true,
|
|
59
|
+
transitionDisabled: false,
|
|
58
60
|
className: null
|
|
59
61
|
};
|
|
60
62
|
|
|
61
63
|
var SignModal = function SignModal(_ref) {
|
|
64
|
+
var _ref3;
|
|
65
|
+
|
|
62
66
|
var width = _ref.width,
|
|
63
67
|
height = _ref.height,
|
|
64
68
|
sign = _ref.sign,
|
|
65
69
|
subtitle = _ref.subtitle,
|
|
66
70
|
current = _ref.current,
|
|
71
|
+
transitionDisabled = _ref.transitionDisabled,
|
|
67
72
|
className = _ref.className;
|
|
68
73
|
// eslint-disable-next-line no-unused-vars
|
|
69
74
|
var _sign$label = sign.label,
|
|
@@ -81,15 +86,10 @@ var SignModal = function SignModal(_ref) {
|
|
|
81
86
|
wordBody = _ref2$body === void 0 ? null : _ref2$body;
|
|
82
87
|
|
|
83
88
|
var _useScreenRenderConte = useScreenRenderContext(),
|
|
84
|
-
|
|
85
|
-
isPlaceholder = _useScreenRenderConte.isPlaceholder,
|
|
86
|
-
isEdit = _useScreenRenderConte.isEdit,
|
|
87
|
-
isStatic = _useScreenRenderConte.isStatic,
|
|
88
|
-
isCapture = _useScreenRenderConte.isCapture;
|
|
89
|
+
isEdit = _useScreenRenderConte.isEdit;
|
|
89
90
|
|
|
90
91
|
var hasWord = isTextFilled(word);
|
|
91
92
|
var hasSubtitle = isTextFilled(subtitle);
|
|
92
|
-
var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
|
|
93
93
|
var scrollingDisabled = !isEdit && transitionDisabled || !current;
|
|
94
94
|
var items = [/*#__PURE__*/React.createElement(ScreenElement, null, /*#__PURE__*/React.createElement("h2", {
|
|
95
95
|
className: styles$2.signName
|
|
@@ -118,7 +118,7 @@ var SignModal = function SignModal(_ref) {
|
|
|
118
118
|
return /*#__PURE__*/React.createElement(Container, {
|
|
119
119
|
width: width,
|
|
120
120
|
height: height,
|
|
121
|
-
className: classNames([styles$2.container,
|
|
121
|
+
className: classNames([styles$2.container, (_ref3 = {}, _defineProperty(_ref3, styles$2.withoutTransitions, transitionDisabled), _defineProperty(_ref3, className, className !== null), _ref3)])
|
|
122
122
|
}, /*#__PURE__*/React.createElement(Scroll, {
|
|
123
123
|
disabled: scrollingDisabled,
|
|
124
124
|
verticalAlign: "middle"
|
|
@@ -197,42 +197,46 @@ var propTypes$1 = {
|
|
|
197
197
|
description: PropTypes$1.textElement
|
|
198
198
|
})),
|
|
199
199
|
signSubtitle: PropTypes$1.headingElement,
|
|
200
|
+
activeSignId: PropTypes.string,
|
|
201
|
+
setActiveSignId: PropTypes.func,
|
|
200
202
|
width: PropTypes.number,
|
|
201
203
|
height: PropTypes.number,
|
|
202
204
|
background: PropTypes$1.backgroundElement,
|
|
203
205
|
closeButton: PropTypes.func,
|
|
204
206
|
current: PropTypes.bool,
|
|
205
207
|
active: PropTypes.bool,
|
|
208
|
+
transitionDisabled: PropTypes.bool,
|
|
206
209
|
className: PropTypes.string
|
|
207
210
|
};
|
|
208
211
|
var defaultProps$1 = {
|
|
209
212
|
signs: null,
|
|
210
213
|
signSubtitle: null,
|
|
214
|
+
activeSignId: null,
|
|
215
|
+
setActiveSignId: null,
|
|
211
216
|
width: null,
|
|
212
217
|
height: null,
|
|
213
218
|
background: null,
|
|
214
219
|
closeButton: null,
|
|
215
220
|
current: true,
|
|
216
221
|
active: true,
|
|
222
|
+
transitionDisabled: false,
|
|
217
223
|
className: null
|
|
218
224
|
};
|
|
219
225
|
|
|
220
226
|
var SignsGrid = function SignsGrid(_ref) {
|
|
221
227
|
var signs = _ref.signs,
|
|
222
228
|
signSubtitle = _ref.signSubtitle,
|
|
229
|
+
activeSignId = _ref.activeSignId,
|
|
230
|
+
setActiveSignId = _ref.setActiveSignId,
|
|
223
231
|
width = _ref.width,
|
|
224
232
|
height = _ref.height,
|
|
225
233
|
background = _ref.background,
|
|
226
234
|
closeButton = _ref.closeButton,
|
|
227
235
|
current = _ref.current,
|
|
228
236
|
active = _ref.active,
|
|
237
|
+
transitionDisabled = _ref.transitionDisabled,
|
|
229
238
|
className = _ref.className;
|
|
230
|
-
|
|
231
|
-
var _useState = useState(null),
|
|
232
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
233
|
-
activeSignId = _useState2[0],
|
|
234
|
-
setActiveSignId = _useState2[1];
|
|
235
|
-
|
|
239
|
+
// const [activeSignId, setActiveSignId] = useState(null);
|
|
236
240
|
var activeSign = signs.find(function (_ref2) {
|
|
237
241
|
var _ref2$id = _ref2.id,
|
|
238
242
|
id = _ref2$id === void 0 ? null : _ref2$id;
|
|
@@ -270,7 +274,7 @@ var SignsGrid = function SignsGrid(_ref) {
|
|
|
270
274
|
})) : null, /*#__PURE__*/React.createElement(TransitionGroup, null, !activeSignId ? /*#__PURE__*/React.createElement(CSSTransition, {
|
|
271
275
|
key: "grid",
|
|
272
276
|
classNames: styles$1,
|
|
273
|
-
timeout: 1000
|
|
277
|
+
timeout: transitionDisabled ? 0 : 1000
|
|
274
278
|
}, /*#__PURE__*/React.createElement("div", {
|
|
275
279
|
className: classNames([styles$1.gridContainer, _defineProperty({}, styles$1.isPlaceholder, isPlaceholder)])
|
|
276
280
|
}, signs.map(function (sign) {
|
|
@@ -337,7 +341,8 @@ var SignsGrid = function SignsGrid(_ref) {
|
|
|
337
341
|
height: height,
|
|
338
342
|
className: styles$1.signModal,
|
|
339
343
|
sign: activeSign,
|
|
340
|
-
subtitle: signSubtitle
|
|
344
|
+
subtitle: signSubtitle,
|
|
345
|
+
transitionDisabled: transitionDisabled
|
|
341
346
|
})))))));
|
|
342
347
|
};
|
|
343
348
|
|
|
@@ -627,6 +632,15 @@ var Horoscope = function Horoscope(_ref) {
|
|
|
627
632
|
hasPopup = _useState2[0],
|
|
628
633
|
setHasPopup = _useState2[1];
|
|
629
634
|
|
|
635
|
+
var signs = defaultSigns.map(function (sign, index) {
|
|
636
|
+
return _objectSpread(_objectSpread({}, sign), signsValue !== null && signsValue[index] ? signsValue[index] || null : null);
|
|
637
|
+
});
|
|
638
|
+
|
|
639
|
+
var _useState3 = useState(null),
|
|
640
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
641
|
+
activeSignId = _useState4[0],
|
|
642
|
+
setActiveSignId = _useState4[1];
|
|
643
|
+
|
|
630
644
|
var openPopup = useCallback(function () {
|
|
631
645
|
setHasPopup(true);
|
|
632
646
|
disableInteraction();
|
|
@@ -635,9 +649,23 @@ var Horoscope = function Horoscope(_ref) {
|
|
|
635
649
|
setHasPopup(false);
|
|
636
650
|
enableInteraction();
|
|
637
651
|
}, [hasPopup, setHasPopup, enableInteraction]);
|
|
638
|
-
var
|
|
639
|
-
|
|
640
|
-
|
|
652
|
+
var screenState = useScreenState();
|
|
653
|
+
useEffect(function () {
|
|
654
|
+
if (screenState === 'intro') {
|
|
655
|
+
setHasPopup(false);
|
|
656
|
+
}
|
|
657
|
+
|
|
658
|
+
if (screenState === 'grid') {
|
|
659
|
+
setHasPopup(true);
|
|
660
|
+
setActiveSignId(null);
|
|
661
|
+
}
|
|
662
|
+
|
|
663
|
+
if (screenState !== null && screenState.includes('signs')) {
|
|
664
|
+
var index = screenState.split('.').pop();
|
|
665
|
+
setHasPopup(true);
|
|
666
|
+
setActiveSignId(signs[index].id);
|
|
667
|
+
}
|
|
668
|
+
}, [screenState]);
|
|
641
669
|
|
|
642
670
|
var _useScreenSize = useScreenSize(),
|
|
643
671
|
width = _useScreenSize.width,
|
|
@@ -731,19 +759,24 @@ var Horoscope = function Horoscope(_ref) {
|
|
|
731
759
|
className: styles.buttonLabel
|
|
732
760
|
}, button, {
|
|
733
761
|
inline: true
|
|
734
|
-
}))) : null)
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
}
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
}
|
|
762
|
+
}))) : null) // <TransitionGroup>
|
|
763
|
+
// {hasPopup || isPlaceholder ? (
|
|
764
|
+
// <CSSTransition key="grid" classNames={styles} timeout={500}>
|
|
765
|
+
// <SignsGrid
|
|
766
|
+
// width={width}
|
|
767
|
+
// height={height}
|
|
768
|
+
// className={styles.signsGrid}
|
|
769
|
+
// closeButton={closePopup}
|
|
770
|
+
// background={popupBackground}
|
|
771
|
+
// signs={signs}
|
|
772
|
+
// signSubtitle={signSubtitle}
|
|
773
|
+
// activeSignId={activeSignId}
|
|
774
|
+
// setActiveSignId={setActiveSignId}
|
|
775
|
+
// />
|
|
776
|
+
// </CSSTransition>
|
|
777
|
+
// ) : null}
|
|
778
|
+
// </TransitionGroup>,
|
|
779
|
+
].filter(function (el) {
|
|
747
780
|
return el !== null;
|
|
748
781
|
});
|
|
749
782
|
return /*#__PURE__*/React.createElement("div", {
|
|
@@ -774,7 +807,22 @@ var Horoscope = function Horoscope(_ref) {
|
|
|
774
807
|
stagger: transitionStagger,
|
|
775
808
|
disabled: transitionDisabled,
|
|
776
809
|
playing: transitionPlaying
|
|
777
|
-
}, items))
|
|
810
|
+
}, items)), /*#__PURE__*/React.createElement(TransitionGroup, null, hasPopup || isPlaceholder ? /*#__PURE__*/React.createElement(CSSTransition, {
|
|
811
|
+
key: "grid",
|
|
812
|
+
classNames: styles,
|
|
813
|
+
timeout: 500
|
|
814
|
+
}, /*#__PURE__*/React.createElement(SignsGrid, {
|
|
815
|
+
width: width,
|
|
816
|
+
height: height,
|
|
817
|
+
className: styles.signsGrid,
|
|
818
|
+
closeButton: closePopup,
|
|
819
|
+
background: popupBackground,
|
|
820
|
+
signs: signs,
|
|
821
|
+
signSubtitle: signSubtitle,
|
|
822
|
+
activeSignId: activeSignId,
|
|
823
|
+
setActiveSignId: setActiveSignId,
|
|
824
|
+
transitionDisabled: transitionDisabled
|
|
825
|
+
})) : null))));
|
|
778
826
|
};
|
|
779
827
|
|
|
780
828
|
Horoscope.propTypes = propTypes;
|
|
@@ -803,93 +851,111 @@ var definition = [{
|
|
|
803
851
|
}]
|
|
804
852
|
}),
|
|
805
853
|
component: Horoscope$1,
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
type: 'heading-element',
|
|
854
|
+
states: [{
|
|
855
|
+
id: 'intro',
|
|
809
856
|
label: defineMessage({
|
|
810
|
-
id: "
|
|
857
|
+
id: "XS4j3F",
|
|
811
858
|
defaultMessage: [{
|
|
812
859
|
"type": 0,
|
|
813
|
-
"value": "
|
|
860
|
+
"value": "Intro"
|
|
814
861
|
}]
|
|
815
|
-
})
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
862
|
+
}),
|
|
863
|
+
fields: [{
|
|
864
|
+
name: 'title',
|
|
865
|
+
type: 'heading-element',
|
|
866
|
+
label: defineMessage({
|
|
867
|
+
id: "N25iDO",
|
|
868
|
+
defaultMessage: [{
|
|
869
|
+
"type": 0,
|
|
870
|
+
"value": "Title"
|
|
871
|
+
}]
|
|
872
|
+
})
|
|
873
|
+
}, {
|
|
874
|
+
name: 'description',
|
|
875
|
+
type: 'text-element',
|
|
876
|
+
label: defineMessage({
|
|
877
|
+
id: "Y7bs1v",
|
|
878
|
+
defaultMessage: [{
|
|
879
|
+
"type": 0,
|
|
880
|
+
"value": "Description"
|
|
881
|
+
}]
|
|
882
|
+
})
|
|
883
|
+
}, {
|
|
884
|
+
name: 'author',
|
|
885
|
+
type: 'author-element',
|
|
886
|
+
label: defineMessage({
|
|
887
|
+
id: "73hxYw",
|
|
888
|
+
defaultMessage: [{
|
|
889
|
+
"type": 0,
|
|
890
|
+
"value": "Author"
|
|
891
|
+
}]
|
|
892
|
+
})
|
|
893
|
+
}, {
|
|
894
|
+
name: 'button',
|
|
895
|
+
type: 'button-element',
|
|
896
|
+
label: defineMessage({
|
|
897
|
+
id: "i6bmbD",
|
|
898
|
+
defaultMessage: [{
|
|
899
|
+
"type": 0,
|
|
900
|
+
"value": "Button"
|
|
901
|
+
}]
|
|
902
|
+
})
|
|
903
|
+
}, {
|
|
904
|
+
name: 'background',
|
|
905
|
+
type: 'background',
|
|
906
|
+
label: defineMessage({
|
|
907
|
+
id: "+MPZRu",
|
|
908
|
+
defaultMessage: [{
|
|
909
|
+
"type": 0,
|
|
910
|
+
"value": "Background"
|
|
911
|
+
}]
|
|
912
|
+
})
|
|
913
|
+
}]
|
|
836
914
|
}, {
|
|
837
|
-
|
|
838
|
-
type: 'button-element',
|
|
915
|
+
id: 'grid',
|
|
839
916
|
label: defineMessage({
|
|
840
|
-
id: "
|
|
917
|
+
id: "CMNP2S",
|
|
841
918
|
defaultMessage: [{
|
|
842
919
|
"type": 0,
|
|
843
|
-
"value": "
|
|
920
|
+
"value": "Grid"
|
|
844
921
|
}]
|
|
845
|
-
})
|
|
922
|
+
}),
|
|
923
|
+
fields: []
|
|
846
924
|
}, {
|
|
847
|
-
|
|
848
|
-
component: 'items',
|
|
925
|
+
id: 'signs',
|
|
849
926
|
label: defineMessage({
|
|
850
|
-
id: "
|
|
927
|
+
id: "s5cvZR",
|
|
851
928
|
defaultMessage: [{
|
|
852
929
|
"type": 0,
|
|
853
930
|
"value": "Signs"
|
|
854
931
|
}]
|
|
855
932
|
}),
|
|
856
933
|
defaultValue: signs,
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
type: '
|
|
862
|
-
|
|
863
|
-
id: "
|
|
934
|
+
repeatable: true,
|
|
935
|
+
withoutCreate: true,
|
|
936
|
+
fields: [{
|
|
937
|
+
name: 'word',
|
|
938
|
+
type: 'heading-element',
|
|
939
|
+
label: defineMessage({
|
|
940
|
+
id: "fLdjGi",
|
|
864
941
|
defaultMessage: [{
|
|
865
942
|
"type": 0,
|
|
866
|
-
"value": "
|
|
943
|
+
"value": "Word of the week"
|
|
867
944
|
}]
|
|
868
|
-
})
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
type: 'text-element',
|
|
883
|
-
label: defineMessage({
|
|
884
|
-
id: "ZCe0r4",
|
|
885
|
-
defaultMessage: [{
|
|
886
|
-
"type": 0,
|
|
887
|
-
"value": "Description"
|
|
888
|
-
}]
|
|
889
|
-
})
|
|
890
|
-
}]
|
|
891
|
-
}
|
|
892
|
-
}, {
|
|
945
|
+
})
|
|
946
|
+
}, {
|
|
947
|
+
name: 'description',
|
|
948
|
+
type: 'text-element',
|
|
949
|
+
label: defineMessage({
|
|
950
|
+
id: "ZCe0r4",
|
|
951
|
+
defaultMessage: [{
|
|
952
|
+
"type": 0,
|
|
953
|
+
"value": "Description"
|
|
954
|
+
}]
|
|
955
|
+
})
|
|
956
|
+
}]
|
|
957
|
+
}],
|
|
958
|
+
fields: [{
|
|
893
959
|
name: 'signSubtitle',
|
|
894
960
|
type: 'heading-element',
|
|
895
961
|
defaultValue: {
|
package/lib/index.js
CHANGED
|
@@ -81,6 +81,7 @@ var propTypes$3 = {
|
|
|
81
81
|
}),
|
|
82
82
|
subtitle: core.PropTypes.headingElement,
|
|
83
83
|
current: PropTypes__default["default"].bool,
|
|
84
|
+
transitionDisabled: PropTypes__default["default"].bool,
|
|
84
85
|
className: PropTypes__default["default"].string
|
|
85
86
|
};
|
|
86
87
|
var defaultProps$3 = {
|
|
@@ -89,15 +90,19 @@ var defaultProps$3 = {
|
|
|
89
90
|
sign: null,
|
|
90
91
|
subtitle: null,
|
|
91
92
|
current: true,
|
|
93
|
+
transitionDisabled: false,
|
|
92
94
|
className: null
|
|
93
95
|
};
|
|
94
96
|
|
|
95
97
|
var SignModal = function SignModal(_ref) {
|
|
98
|
+
var _ref3;
|
|
99
|
+
|
|
96
100
|
var width = _ref.width,
|
|
97
101
|
height = _ref.height,
|
|
98
102
|
sign = _ref.sign,
|
|
99
103
|
subtitle = _ref.subtitle,
|
|
100
104
|
current = _ref.current,
|
|
105
|
+
transitionDisabled = _ref.transitionDisabled,
|
|
101
106
|
className = _ref.className;
|
|
102
107
|
// eslint-disable-next-line no-unused-vars
|
|
103
108
|
var _sign$label = sign.label,
|
|
@@ -115,15 +120,10 @@ var SignModal = function SignModal(_ref) {
|
|
|
115
120
|
wordBody = _ref2$body === void 0 ? null : _ref2$body;
|
|
116
121
|
|
|
117
122
|
var _useScreenRenderConte = contexts.useScreenRenderContext(),
|
|
118
|
-
|
|
119
|
-
isPlaceholder = _useScreenRenderConte.isPlaceholder,
|
|
120
|
-
isEdit = _useScreenRenderConte.isEdit,
|
|
121
|
-
isStatic = _useScreenRenderConte.isStatic,
|
|
122
|
-
isCapture = _useScreenRenderConte.isCapture;
|
|
123
|
+
isEdit = _useScreenRenderConte.isEdit;
|
|
123
124
|
|
|
124
125
|
var hasWord = utils.isTextFilled(word);
|
|
125
126
|
var hasSubtitle = utils.isTextFilled(subtitle);
|
|
126
|
-
var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
|
|
127
127
|
var scrollingDisabled = !isEdit && transitionDisabled || !current;
|
|
128
128
|
var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, null, /*#__PURE__*/React__default["default"].createElement("h2", {
|
|
129
129
|
className: styles$2.signName
|
|
@@ -152,7 +152,7 @@ var SignModal = function SignModal(_ref) {
|
|
|
152
152
|
return /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
|
|
153
153
|
width: width,
|
|
154
154
|
height: height,
|
|
155
|
-
className: classNames__default["default"]([styles$2.container, _defineProperty__default["default"](
|
|
155
|
+
className: classNames__default["default"]([styles$2.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$2.withoutTransitions, transitionDisabled), _defineProperty__default["default"](_ref3, className, className !== null), _ref3)])
|
|
156
156
|
}, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
|
|
157
157
|
disabled: scrollingDisabled,
|
|
158
158
|
verticalAlign: "middle"
|
|
@@ -231,42 +231,46 @@ var propTypes$1 = {
|
|
|
231
231
|
description: core.PropTypes.textElement
|
|
232
232
|
})),
|
|
233
233
|
signSubtitle: core.PropTypes.headingElement,
|
|
234
|
+
activeSignId: PropTypes__default["default"].string,
|
|
235
|
+
setActiveSignId: PropTypes__default["default"].func,
|
|
234
236
|
width: PropTypes__default["default"].number,
|
|
235
237
|
height: PropTypes__default["default"].number,
|
|
236
238
|
background: core.PropTypes.backgroundElement,
|
|
237
239
|
closeButton: PropTypes__default["default"].func,
|
|
238
240
|
current: PropTypes__default["default"].bool,
|
|
239
241
|
active: PropTypes__default["default"].bool,
|
|
242
|
+
transitionDisabled: PropTypes__default["default"].bool,
|
|
240
243
|
className: PropTypes__default["default"].string
|
|
241
244
|
};
|
|
242
245
|
var defaultProps$1 = {
|
|
243
246
|
signs: null,
|
|
244
247
|
signSubtitle: null,
|
|
248
|
+
activeSignId: null,
|
|
249
|
+
setActiveSignId: null,
|
|
245
250
|
width: null,
|
|
246
251
|
height: null,
|
|
247
252
|
background: null,
|
|
248
253
|
closeButton: null,
|
|
249
254
|
current: true,
|
|
250
255
|
active: true,
|
|
256
|
+
transitionDisabled: false,
|
|
251
257
|
className: null
|
|
252
258
|
};
|
|
253
259
|
|
|
254
260
|
var SignsGrid = function SignsGrid(_ref) {
|
|
255
261
|
var signs = _ref.signs,
|
|
256
262
|
signSubtitle = _ref.signSubtitle,
|
|
263
|
+
activeSignId = _ref.activeSignId,
|
|
264
|
+
setActiveSignId = _ref.setActiveSignId,
|
|
257
265
|
width = _ref.width,
|
|
258
266
|
height = _ref.height,
|
|
259
267
|
background = _ref.background,
|
|
260
268
|
closeButton = _ref.closeButton,
|
|
261
269
|
current = _ref.current,
|
|
262
270
|
active = _ref.active,
|
|
271
|
+
transitionDisabled = _ref.transitionDisabled,
|
|
263
272
|
className = _ref.className;
|
|
264
|
-
|
|
265
|
-
var _useState = React.useState(null),
|
|
266
|
-
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
267
|
-
activeSignId = _useState2[0],
|
|
268
|
-
setActiveSignId = _useState2[1];
|
|
269
|
-
|
|
273
|
+
// const [activeSignId, setActiveSignId] = useState(null);
|
|
270
274
|
var activeSign = signs.find(function (_ref2) {
|
|
271
275
|
var _ref2$id = _ref2.id,
|
|
272
276
|
id = _ref2$id === void 0 ? null : _ref2$id;
|
|
@@ -304,7 +308,7 @@ var SignsGrid = function SignsGrid(_ref) {
|
|
|
304
308
|
})) : null, /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.TransitionGroup, null, !activeSignId ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
|
|
305
309
|
key: "grid",
|
|
306
310
|
classNames: styles$1,
|
|
307
|
-
timeout: 1000
|
|
311
|
+
timeout: transitionDisabled ? 0 : 1000
|
|
308
312
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
309
313
|
className: classNames__default["default"]([styles$1.gridContainer, _defineProperty__default["default"]({}, styles$1.isPlaceholder, isPlaceholder)])
|
|
310
314
|
}, signs.map(function (sign) {
|
|
@@ -371,7 +375,8 @@ var SignsGrid = function SignsGrid(_ref) {
|
|
|
371
375
|
height: height,
|
|
372
376
|
className: styles$1.signModal,
|
|
373
377
|
sign: activeSign,
|
|
374
|
-
subtitle: signSubtitle
|
|
378
|
+
subtitle: signSubtitle,
|
|
379
|
+
transitionDisabled: transitionDisabled
|
|
375
380
|
})))))));
|
|
376
381
|
};
|
|
377
382
|
|
|
@@ -661,6 +666,15 @@ var Horoscope = function Horoscope(_ref) {
|
|
|
661
666
|
hasPopup = _useState2[0],
|
|
662
667
|
setHasPopup = _useState2[1];
|
|
663
668
|
|
|
669
|
+
var signs = defaultSigns.map(function (sign, index) {
|
|
670
|
+
return _objectSpread__default["default"](_objectSpread__default["default"]({}, sign), signsValue !== null && signsValue[index] ? signsValue[index] || null : null);
|
|
671
|
+
});
|
|
672
|
+
|
|
673
|
+
var _useState3 = React.useState(null),
|
|
674
|
+
_useState4 = _slicedToArray__default["default"](_useState3, 2),
|
|
675
|
+
activeSignId = _useState4[0],
|
|
676
|
+
setActiveSignId = _useState4[1];
|
|
677
|
+
|
|
664
678
|
var openPopup = React.useCallback(function () {
|
|
665
679
|
setHasPopup(true);
|
|
666
680
|
disableInteraction();
|
|
@@ -669,9 +683,23 @@ var Horoscope = function Horoscope(_ref) {
|
|
|
669
683
|
setHasPopup(false);
|
|
670
684
|
enableInteraction();
|
|
671
685
|
}, [hasPopup, setHasPopup, enableInteraction]);
|
|
672
|
-
var
|
|
673
|
-
|
|
674
|
-
|
|
686
|
+
var screenState = contexts.useScreenState();
|
|
687
|
+
React.useEffect(function () {
|
|
688
|
+
if (screenState === 'intro') {
|
|
689
|
+
setHasPopup(false);
|
|
690
|
+
}
|
|
691
|
+
|
|
692
|
+
if (screenState === 'grid') {
|
|
693
|
+
setHasPopup(true);
|
|
694
|
+
setActiveSignId(null);
|
|
695
|
+
}
|
|
696
|
+
|
|
697
|
+
if (screenState !== null && screenState.includes('signs')) {
|
|
698
|
+
var index = screenState.split('.').pop();
|
|
699
|
+
setHasPopup(true);
|
|
700
|
+
setActiveSignId(signs[index].id);
|
|
701
|
+
}
|
|
702
|
+
}, [screenState]);
|
|
675
703
|
|
|
676
704
|
var _useScreenSize = contexts.useScreenSize(),
|
|
677
705
|
width = _useScreenSize.width,
|
|
@@ -765,19 +793,24 @@ var Horoscope = function Horoscope(_ref) {
|
|
|
765
793
|
className: styles.buttonLabel
|
|
766
794
|
}, button, {
|
|
767
795
|
inline: true
|
|
768
|
-
}))) : null)
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
}
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
}
|
|
796
|
+
}))) : null) // <TransitionGroup>
|
|
797
|
+
// {hasPopup || isPlaceholder ? (
|
|
798
|
+
// <CSSTransition key="grid" classNames={styles} timeout={500}>
|
|
799
|
+
// <SignsGrid
|
|
800
|
+
// width={width}
|
|
801
|
+
// height={height}
|
|
802
|
+
// className={styles.signsGrid}
|
|
803
|
+
// closeButton={closePopup}
|
|
804
|
+
// background={popupBackground}
|
|
805
|
+
// signs={signs}
|
|
806
|
+
// signSubtitle={signSubtitle}
|
|
807
|
+
// activeSignId={activeSignId}
|
|
808
|
+
// setActiveSignId={setActiveSignId}
|
|
809
|
+
// />
|
|
810
|
+
// </CSSTransition>
|
|
811
|
+
// ) : null}
|
|
812
|
+
// </TransitionGroup>,
|
|
813
|
+
].filter(function (el) {
|
|
781
814
|
return el !== null;
|
|
782
815
|
});
|
|
783
816
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
@@ -808,7 +841,22 @@ var Horoscope = function Horoscope(_ref) {
|
|
|
808
841
|
stagger: transitionStagger,
|
|
809
842
|
disabled: transitionDisabled,
|
|
810
843
|
playing: transitionPlaying
|
|
811
|
-
}, items))
|
|
844
|
+
}, items)), /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.TransitionGroup, null, hasPopup || isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
|
|
845
|
+
key: "grid",
|
|
846
|
+
classNames: styles,
|
|
847
|
+
timeout: 500
|
|
848
|
+
}, /*#__PURE__*/React__default["default"].createElement(SignsGrid, {
|
|
849
|
+
width: width,
|
|
850
|
+
height: height,
|
|
851
|
+
className: styles.signsGrid,
|
|
852
|
+
closeButton: closePopup,
|
|
853
|
+
background: popupBackground,
|
|
854
|
+
signs: signs,
|
|
855
|
+
signSubtitle: signSubtitle,
|
|
856
|
+
activeSignId: activeSignId,
|
|
857
|
+
setActiveSignId: setActiveSignId,
|
|
858
|
+
transitionDisabled: transitionDisabled
|
|
859
|
+
})) : null))));
|
|
812
860
|
};
|
|
813
861
|
|
|
814
862
|
Horoscope.propTypes = propTypes;
|
|
@@ -837,93 +885,111 @@ var definition = [{
|
|
|
837
885
|
}]
|
|
838
886
|
}),
|
|
839
887
|
component: Horoscope$1,
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
type: 'heading-element',
|
|
888
|
+
states: [{
|
|
889
|
+
id: 'intro',
|
|
843
890
|
label: reactIntl.defineMessage({
|
|
844
|
-
id: "
|
|
891
|
+
id: "XS4j3F",
|
|
845
892
|
defaultMessage: [{
|
|
846
893
|
"type": 0,
|
|
847
|
-
"value": "
|
|
894
|
+
"value": "Intro"
|
|
848
895
|
}]
|
|
849
|
-
})
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
896
|
+
}),
|
|
897
|
+
fields: [{
|
|
898
|
+
name: 'title',
|
|
899
|
+
type: 'heading-element',
|
|
900
|
+
label: reactIntl.defineMessage({
|
|
901
|
+
id: "N25iDO",
|
|
902
|
+
defaultMessage: [{
|
|
903
|
+
"type": 0,
|
|
904
|
+
"value": "Title"
|
|
905
|
+
}]
|
|
906
|
+
})
|
|
907
|
+
}, {
|
|
908
|
+
name: 'description',
|
|
909
|
+
type: 'text-element',
|
|
910
|
+
label: reactIntl.defineMessage({
|
|
911
|
+
id: "Y7bs1v",
|
|
912
|
+
defaultMessage: [{
|
|
913
|
+
"type": 0,
|
|
914
|
+
"value": "Description"
|
|
915
|
+
}]
|
|
916
|
+
})
|
|
917
|
+
}, {
|
|
918
|
+
name: 'author',
|
|
919
|
+
type: 'author-element',
|
|
920
|
+
label: reactIntl.defineMessage({
|
|
921
|
+
id: "73hxYw",
|
|
922
|
+
defaultMessage: [{
|
|
923
|
+
"type": 0,
|
|
924
|
+
"value": "Author"
|
|
925
|
+
}]
|
|
926
|
+
})
|
|
927
|
+
}, {
|
|
928
|
+
name: 'button',
|
|
929
|
+
type: 'button-element',
|
|
930
|
+
label: reactIntl.defineMessage({
|
|
931
|
+
id: "i6bmbD",
|
|
932
|
+
defaultMessage: [{
|
|
933
|
+
"type": 0,
|
|
934
|
+
"value": "Button"
|
|
935
|
+
}]
|
|
936
|
+
})
|
|
937
|
+
}, {
|
|
938
|
+
name: 'background',
|
|
939
|
+
type: 'background',
|
|
940
|
+
label: reactIntl.defineMessage({
|
|
941
|
+
id: "+MPZRu",
|
|
942
|
+
defaultMessage: [{
|
|
943
|
+
"type": 0,
|
|
944
|
+
"value": "Background"
|
|
945
|
+
}]
|
|
946
|
+
})
|
|
947
|
+
}]
|
|
870
948
|
}, {
|
|
871
|
-
|
|
872
|
-
type: 'button-element',
|
|
949
|
+
id: 'grid',
|
|
873
950
|
label: reactIntl.defineMessage({
|
|
874
|
-
id: "
|
|
951
|
+
id: "CMNP2S",
|
|
875
952
|
defaultMessage: [{
|
|
876
953
|
"type": 0,
|
|
877
|
-
"value": "
|
|
954
|
+
"value": "Grid"
|
|
878
955
|
}]
|
|
879
|
-
})
|
|
956
|
+
}),
|
|
957
|
+
fields: []
|
|
880
958
|
}, {
|
|
881
|
-
|
|
882
|
-
component: 'items',
|
|
959
|
+
id: 'signs',
|
|
883
960
|
label: reactIntl.defineMessage({
|
|
884
|
-
id: "
|
|
961
|
+
id: "s5cvZR",
|
|
885
962
|
defaultMessage: [{
|
|
886
963
|
"type": 0,
|
|
887
964
|
"value": "Signs"
|
|
888
965
|
}]
|
|
889
966
|
}),
|
|
890
967
|
defaultValue: signs,
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
type: '
|
|
896
|
-
|
|
897
|
-
id: "
|
|
968
|
+
repeatable: true,
|
|
969
|
+
withoutCreate: true,
|
|
970
|
+
fields: [{
|
|
971
|
+
name: 'word',
|
|
972
|
+
type: 'heading-element',
|
|
973
|
+
label: reactIntl.defineMessage({
|
|
974
|
+
id: "fLdjGi",
|
|
898
975
|
defaultMessage: [{
|
|
899
976
|
"type": 0,
|
|
900
|
-
"value": "
|
|
977
|
+
"value": "Word of the week"
|
|
901
978
|
}]
|
|
902
|
-
})
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
type: 'text-element',
|
|
917
|
-
label: reactIntl.defineMessage({
|
|
918
|
-
id: "ZCe0r4",
|
|
919
|
-
defaultMessage: [{
|
|
920
|
-
"type": 0,
|
|
921
|
-
"value": "Description"
|
|
922
|
-
}]
|
|
923
|
-
})
|
|
924
|
-
}]
|
|
925
|
-
}
|
|
926
|
-
}, {
|
|
979
|
+
})
|
|
980
|
+
}, {
|
|
981
|
+
name: 'description',
|
|
982
|
+
type: 'text-element',
|
|
983
|
+
label: reactIntl.defineMessage({
|
|
984
|
+
id: "ZCe0r4",
|
|
985
|
+
defaultMessage: [{
|
|
986
|
+
"type": 0,
|
|
987
|
+
"value": "Description"
|
|
988
|
+
}]
|
|
989
|
+
})
|
|
990
|
+
}]
|
|
991
|
+
}],
|
|
992
|
+
fields: [{
|
|
927
993
|
name: 'signSubtitle',
|
|
928
994
|
type: 'heading-element',
|
|
929
995
|
defaultValue: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-urbania-horoscope",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.88",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -50,18 +50,18 @@
|
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
52
|
"@babel/runtime": "^7.13.10",
|
|
53
|
-
"@micromag/core": "^0.3.
|
|
54
|
-
"@micromag/element-background": "^0.3.
|
|
55
|
-
"@micromag/element-button": "^0.3.
|
|
56
|
-
"@micromag/element-call-to-action": "^0.3.
|
|
57
|
-
"@micromag/element-container": "^0.3.
|
|
58
|
-
"@micromag/element-grid": "^0.3.
|
|
59
|
-
"@micromag/element-heading": "^0.3.
|
|
60
|
-
"@micromag/element-layout": "^0.3.
|
|
61
|
-
"@micromag/element-scroll": "^0.3.
|
|
62
|
-
"@micromag/element-text": "^0.3.
|
|
63
|
-
"@micromag/element-urbania-author": "^0.3.
|
|
64
|
-
"@micromag/transforms": "^0.3.
|
|
53
|
+
"@micromag/core": "^0.3.88",
|
|
54
|
+
"@micromag/element-background": "^0.3.88",
|
|
55
|
+
"@micromag/element-button": "^0.3.88",
|
|
56
|
+
"@micromag/element-call-to-action": "^0.3.88",
|
|
57
|
+
"@micromag/element-container": "^0.3.88",
|
|
58
|
+
"@micromag/element-grid": "^0.3.88",
|
|
59
|
+
"@micromag/element-heading": "^0.3.88",
|
|
60
|
+
"@micromag/element-layout": "^0.3.88",
|
|
61
|
+
"@micromag/element-scroll": "^0.3.88",
|
|
62
|
+
"@micromag/element-text": "^0.3.88",
|
|
63
|
+
"@micromag/element-urbania-author": "^0.3.88",
|
|
64
|
+
"@micromag/transforms": "^0.3.88",
|
|
65
65
|
"classnames": "^2.2.6",
|
|
66
66
|
"lodash": "^4.17.21",
|
|
67
67
|
"prop-types": "^15.7.2",
|
|
@@ -72,5 +72,5 @@
|
|
|
72
72
|
"publishConfig": {
|
|
73
73
|
"access": "public"
|
|
74
74
|
},
|
|
75
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "d0fb1f7d4ae6bfa1fd07dc856307c1c4225ab889"
|
|
76
76
|
}
|