diff --git a/admin/data/menu.json b/admin/data/menu.json index c88b119..c014918 100644 --- a/admin/data/menu.json +++ b/admin/data/menu.json @@ -141,6 +141,13 @@ "type": 1, "openType": "_iframe", "href": "view/document/notice.html" + },{ + "id": 2024, + "title": "加载组件", + "icon": "layui-icon layui-icon-face-cry", + "type": 1, + "openType": "_iframe", + "href": "view/document/loading.html" }, { "id": 2023, "title": "弹出层", diff --git a/component/pear/css/pear-module/loading.css b/component/pear/css/pear-module/loading.css new file mode 100644 index 0000000..4abb57d --- /dev/null +++ b/component/pear/css/pear-module/loading.css @@ -0,0 +1,987 @@ +/*! +* Notiflix ('https://www.notiflix.com') +* Version: 2.0.0 +* Author: Furkan MT ('https://github.com/furcan') +* Copyright 2020 Notiflix, MIT Licence ('https://opensource.org/licenses/MIT') +*/ + +/* Notiflix: Notify wrap on */ +[id^=NotiflixNotifyWrap] { +position: fixed; +z-index:4001; +opacity:1; +right: 10px; +top: 10px; +width: 280px; +max-width:96%; +box-sizing:border-box; +background: transparent;} + +[id^=NotiflixNotifyWrap] * { +box-sizing:border-box;} +/* Notiflix: Notify wrap off */ + +/* Notiflix: Notify content on */ +[id^=NotiflixNotifyWrap] > div { +-webkit-user-select: none; +-moz-user-select: none; +-ms-user-select: none; +user-select: none; +font-family: 'Quicksand', sans-serif; +width:100%; +display: inline-block; +position:relative; +margin:0 0 10px; +border-radius:5px; +background: #1e1e1e; +color: #fff; +padding: 10px 12px; +font-size: 14px; +line-height: 1.4;} + +[id^=NotiflixNotifyWrap] > div:last-child { +margin:0;} + +[id^=NotiflixNotifyWrap] > div.with-callback { +cursor:pointer;} + +[id^=NotiflixNotifyWrap] *::selection { +background:inherit;} + +[id^=NotiflixNotifyWrap] > div.with-icon { +padding: 8px;} + +[id^=NotiflixNotifyWrap] > div.click-to-close { +cursor: pointer;} + +[id^=NotiflixNotifyWrap] > div.with-close-button { +padding: 10px 30px 10px 12px;} +[id^=NotiflixNotifyWrap] > div.with-icon.with-close-button { +padding: 6px 30px 6px 6px;} + +[id^=NotiflixNotifyWrap] > div > span.the-message { +font-weight: 500; +font-family:inherit !important; +word-break: break-all; +word-break: break-word;} + +[id^=NotiflixNotifyWrap] > div > span.notify-close-button { +cursor:pointer; +transition:all .2s ease-in-out; +position: absolute; +right: 8px; +top: 0; +bottom:0; +margin:auto; +color:inherit; +width: 16px; +height: 16px;} +[id^=NotiflixNotifyWrap] > div > span.notify-close-button:hover { +transform:rotate(90deg);} +[id^=NotiflixNotifyWrap] > div > span.notify-close-button > svg { +position: absolute; +width: 16px; +height: 16px; +right: 0; +top: 0;} +/* Notiflix: Notify content off */ + +/* Notiflix: Notify icon on */ +[id^=NotiflixNotifyWrap] > div > .nmi { +position: absolute; +width: 40px; +height: 40px; +font-size: 30px; +line-height: 40px; +text-align: center; +left: 8px; +top: 0; +bottom: 0; +margin: auto; +border-radius: inherit;} + +[id^=NotiflixNotifyWrap] > div > .wfa.shadow { +color: inherit; +background: rgba(0, 0, 0, 0.15); +box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.2); +text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);} + +[id^=NotiflixNotifyWrap] > div > span.with-icon { +position: relative; +float: left; +width: calc(100% - 40px); +margin:0 0 0 40px; +padding:0 0 0 10px; +box-sizing: border-box;} +/* Notiflix: Notify icon off */ + +/* Notiflix: Notify rtl on */ +[id^=NotiflixNotifyWrap] > div.rtl-on > .nmi { +left:auto; +right:8px;} + +[id^=NotiflixNotifyWrap] > div.rtl-on > span.with-icon { +padding:0 10px 0 0; +margin:0 40px 0 0;} + +[id^=NotiflixNotifyWrap] > div.rtl-on > span.notify-close-button { +right: auto; +left: 8px;} + +[id^=NotiflixNotifyWrap] > div.with-icon.with-close-button.rtl-on { +padding: 6px 6px 6px 30px;} + +[id^=NotiflixNotifyWrap] > div.with-close-button.rtl-on { +padding: 10px 12px 10px 30px;} +/* Notiflix: Notify rtl off */ + +/* Notiflix: Notify animation => fade on */ +[id^=NotiflixNotifyOverlay].with-animation, +[id^=NotiflixNotifyWrap] > div.with-animation.nx-fade { +animation: notify-animation-fade .3s ease-in-out 0s normal; +-webkit-animation: notify-animation-fade .3s ease-in-out 0s normal;} + +@keyframes notify-animation-fade { +0% {opacity:0;} +100% {opacity:1;} +} + +@-webkit-keyframes notify-animation-fade { +0% {opacity:0;} +100% {opacity:1;} +} +/* Notiflix: Notify animation => fade off */ + +/* Notiflix: Notify animation => zoom on */ +[id^=NotiflixNotifyWrap] > div.with-animation.nx-zoom { +animation: notify-animation-zoom .3s ease-in-out 0s normal; +-webkit-animation: notify-animation-zoom .3s ease-in-out 0s normal;} + +@keyframes notify-animation-zoom { +0% {transform:scale(0);} +50% {transform:scale(1.05);} +100% {transform:scale(1);} +} + +@-webkit-keyframes notify-animation-zoom { +0% {transform:scale(0);} +50% {transform:scale(1.05);} +100% {transform:scale(1);} +} +/* Notiflix: Notify animation => zoom off */ + +/* Notiflix: Notify animation => from right on */ +[id^=NotiflixNotifyWrap] > div.with-animation.nx-from-right { +animation: notify-animation-from-right .3s ease-in-out 0s normal; +-webkit-animation: notify-animation-from-right .3s ease-in-out 0s normal;} + +@keyframes notify-animation-from-right { +0% {right:-300px; opacity:0;} +50% {right:8px; opacity:1;} +100% {right:0px; opacity:1;} +} + +@-webkit-keyframes notify-animation-from-right { +0% {right:-300px; opacity:0;} +50% {right:8px; opacity:1;} +100% {right:0px; opacity:1;} +} +/* Notiflix: Notify animation => from right off */ + +/* Notiflix: Notify animation => from left on */ +[id^=NotiflixNotifyWrap] > div.with-animation.nx-from-left { +animation: notify-animation-from-left .3s ease-in-out 0s normal; +-webkit-animation: notify-animation-from-left .3s ease-in-out 0s normal;} + +@keyframes notify-animation-from-left { +0% {left:-300px; opacity:0;} +50% {left:8px; opacity:1;} +100% {left:0px; opacity:1;} +} + +@-webkit-keyframes notify-animation-from-left { +0% {left:-300px; opacity:0;} +50% {left:8px; opacity:1;} +100% {left:0px; opacity:1;} +} +/* Notiflix: Notify animation => from left off */ + +/* Notiflix: Notify animation => from top on */ +[id^=NotiflixNotifyWrap] > div.with-animation.nx-from-top { +animation: notify-animation-from-top .3s ease-in-out 0s normal; +-webkit-animation: notify-animation-from-top .3s ease-in-out 0s normal;} + +@keyframes notify-animation-from-top { +0% {top:-50px; opacity:0;} +50% {top:8px; opacity:1;} +100% {top:0px; opacity:1;} +} + +@-webkit-keyframes notify-animation-from-top { +0% {top:-50px; opacity:0;} +50% {top:8px; opacity:1;} +100% {top:0px; opacity:1;} +} +/* Notiflix: Notify animation => from top off */ + +/* Notiflix: Notify animation => from bottom on */ +[id^=NotiflixNotifyWrap] > div.with-animation.nx-from-bottom { +animation: notify-animation-from-bottom .3s ease-in-out 0s normal; +-webkit-animation: notify-animation-from-bottom .3s ease-in-out 0s normal;} + +@keyframes notify-animation-from-bottom { +0% {bottom:-50px; opacity:0;} +50% {bottom:8px; opacity:1;} +100% {bottom:0px; opacity:1;} +} + +@-webkit-keyframes notify-animation-from-bottom { +0% {bottom:-50px; opacity:0;} +50% {bottom:8px; opacity:1;} +100% {bottom:0px; opacity:1;} +} +/* Notiflix: Notify animation => from bottom off */ + +/* Notiflix: Notify animation remove => fade on */ +[id^=NotiflixNotifyOverlay].with-animation.remove, +[id^=NotiflixNotifyWrap] > div.with-animation.nx-fade.remove { +opacity:0; +animation: notify-remove-fade .3s ease-in-out 0s normal; +-webkit-animation: notify-remove-fade .3s ease-in-out 0s normal;} + +@keyframes notify-remove-fade { +0% {opacity:1;} +100% {opacity:0;} +} + +@-webkit-keyframes notify-remove-fade { +0% {opacity:1;} +100% {opacity:0;} +} +/* Notiflix: Notify animation remove => fade off */ + +/* Notiflix: Notify animation remove => zoom on */ +[id^=NotiflixNotifyWrap] > div.with-animation.nx-zoom.remove { +transform:scale(0); +animation: notify-remove-zoom .3s ease-in-out 0s normal; +-webkit-animation: notify-remove-zoom .3s ease-in-out 0s normal;} + +@keyframes notify-remove-zoom { +0% {transform:scale(1);} +50% {transform:scale(1.05);} +100% {transform:scale(0);} +} + +@-webkit-keyframes notify-remove-zoom { +0% {transform:scale(1);} +50% {transform:scale(1.05);} +100% {transform:scale(0);} +} +/* Notiflix: Notify animation remove => zoom off */ + +/* Notiflix: Notify animation remove => from top on */ +[id^=NotiflixNotifyWrap] > div.with-animation.nx-from-top.remove { +opacity:0; +animation: notify-remove-to-top .3s ease-in-out 0s normal; +-webkit-animation: notify-remove-to-top .3s ease-in-out 0s normal;} + +@keyframes notify-remove-to-top { +0% {top:0px; opacity:1;} +50% {top:8px; opacity:1;} +100% {top:-50px; opacity:0;} +} + +@-webkit-keyframes notify-remove-to-top { +0% {top:0px; opacity:1;} +50% {top:8px; opacity:1;} +100% {top:-50px; opacity:0;} +} +/* Notiflix: Notify animation remove => from top off */ + +/* Notiflix: Notify animation remove => from right on */ +[id^=NotiflixNotifyWrap] > div.with-animation.nx-from-right.remove { +opacity:0; +animation: notify-remove-to-right .3s ease-in-out 0s normal; +-webkit-animation: notify-remove-to-right .3s ease-in-out 0s normal;} + +@keyframes notify-remove-to-right { +0% {right:0px; opacity:1;} +50% {right:8px; opacity:1;} +100% {right:-300px; opacity:0;} +} + +@-webkit-keyframes notify-remove-to-right { +0% {right:0px; opacity:1;} +50% {right:8px; opacity:1;} +100% {right:-300px; opacity:0;} +} +/* Notiflix: Notify animation remove => from right off */ + +/* Notiflix: Notify animation remove => from bottom on */ +[id^=NotiflixNotifyWrap] > div.with-animation.nx-from-bottom.remove { +opacity:0; +animation: notify-remove-to-bottom .3s ease-in-out 0s normal; +-webkit-animation: notify-remove-to-bottom .3s ease-in-out 0s normal;} + +@keyframes notify-remove-to-bottom { +0% {bottom:0px; opacity:1;} +50% {bottom:8px; opacity:1;} +100% {bottom:-50px; opacity:0;} +} + +@-webkit-keyframes notify-remove-to-bottom { +0% {bottom:0px; opacity:1;} +50% {bottom:8px; opacity:1;} +100% {bottom:-50px; opacity:0;} +} +/* Notiflix: Notify animation remove => from bottom off */ + +/* Notiflix: Notify animation remove => from left on */ +[id^=NotiflixNotifyWrap] > div.with-animation.nx-from-left.remove { +opacity:0; +animation: notify-remove-to-left .3s ease-in-out 0s normal; +-webkit-animation: notify-remove-to-left .3s ease-in-out 0s normal;} + +@keyframes notify-remove-to-left { +0% {left:0px; opacity:1;} +50% {left:8px; opacity:1;} +100% {left:-300px; opacity:0;} +} + +@-webkit-keyframes notify-remove-to-left { +0% {left:0px; opacity:1;} +50% {left:8px; opacity:1;} +100% {left:-300px; opacity:0;} +} +/* Notiflix: Notify animation remove => from left off */ + + +/* Notiflix: Report wrap on */ +[id^=NotiflixReportWrap] { +position: fixed; +z-index:4002; +width: 320px; +max-width:96%; +box-sizing:border-box; +font-family: "Quicksand", sans-serif; +left: 0; +right: 0; +top: 20px; +color:#1e1e1e; +border-radius: 25px; +background: transparent; +margin: auto;} + +[id^=NotiflixReportWrap] * { +box-sizing:border-box;} +/* Notiflix: Report wrap off */ + +/* Notiflix: Report content on */ +[id^=NotiflixReportWrap] > div[class*="-overlay"] { +width:100%; +height:100%; +left:0; +top:0; +background: rgba(255, 255, 255, .5); +position:fixed; +z-index:0;} + +[id^=NotiflixReportWrap] > div[class*="-content"] { +width:100%; +float:left; +border-radius: inherit; +padding:10px; +filter: drop-shadow(0 0 5px rgba(0,0,0,.1)); +border: 1px solid rgba(0,0,0,.03); +background: #f8f8f8; +position:relative; +z-index:1;} + +[id^=NotiflixReportWrap] > div[class*="-content"] > div[class$="-icon"] { +-webkit-user-select: none; +-moz-user-select: none; +-ms-user-select: none; +user-select: none; +width:110px; +height:110px; +display:block; +margin:6px auto 12px;} + +[id^=NotiflixReportWrap] > div[class*="-content"] > div[class$="-icon"] svg { +min-width:100%; +max-width:100%; +height:auto;} + +[id^=NotiflixReportWrap] > * > h5 { +word-break: break-all; +word-break: break-word; +font-family:inherit !important; +font-size:16px; +font-weight:500; +line-height: 1.4; +margin: 0 0 10px; +padding: 0 0 10px; +border-bottom: 1px solid rgba(0, 0, 0, 0.1); +float: left; +width: 100%; +text-align: center;} + +[id^=NotiflixReportWrap] > * > p { +word-break: break-all; +word-break: break-word; +font-family:inherit !important; +font-size:13px; +line-height: 1.4; +float: left; +width: 100%; +padding:0 10px; +margin: 0 0 10px;} + +[id^=NotiflixReportWrap] a#NXReportButton { +word-break: break-all; +word-break: break-word; +-webkit-user-select: none; +-moz-user-select: none; +-ms-user-select: none; +user-select: none; +font-family:inherit !important; +transition:all .25s ease-in-out; +cursor:pointer; +float: right; +padding: 7px 17px; +background: #32c682; +font-size:14px; +line-height: 1.4; +font-weight: 500; +border-radius: inherit !important; +color: #fff;} + +[id^=NotiflixReportWrap] a#NXReportButton:hover { +box-shadow:inset 0 -60px 5px -5px rgba(0, 0, 0, 0.25);} + +[id^=NotiflixReportWrap].rtl-on a#NXReportButton { +float:left;} +/* Notiflix: Report content off */ + +/* Notiflix: Report overlay animation => fade on */ +[id^=NotiflixReportWrap] > div[class*="-overlay"].with-animation { +animation: report-overlay-animation .3s ease-in-out 0s normal; +-webkit-animation: report-overlay-animation .3s ease-in-out 0s normal;} + +@keyframes report-overlay-animation { +0% {opacity:0;} +100% {opacity:1;} +} + +@-webkit-keyframes report-overlay-animation { +0% {opacity:0;} +100% {opacity:1;} +} +/* Notiflix: Report overlay animation => fade off */ + +/* Notiflix: Report content animation => fade on */ +[id^=NotiflixReportWrap] > div[class*="-content"].with-animation.nx-fade { +animation: report-animation-fade .3s ease-in-out 0s normal; +-webkit-animation: report-animation-fade .3s ease-in-out 0s normal;} + +@keyframes report-animation-fade { +0% {opacity:0;} +100% {opacity:1;} +} + +@-webkit-keyframes report-animation-fade { +0% {opacity:0;} +100% {opacity:1;} +} +/* Notiflix: Report content animation => fade off */ + +/* Notiflix: Report content animation => zoom on */ +[id^=NotiflixReportWrap] > div[class*="-content"].with-animation.nx-zoom { +animation: report-animation-zoom .3s ease-in-out 0s normal; +-webkit-animation: report-animation-zoom .3s ease-in-out 0s normal;} + +@keyframes report-animation-zoom { +0% {opacity:0; transform:scale(0.5);} +50% {opacity:1; transform:scale(1.05);} +100% {opacity:1; transform:scale(1);} +} + +@-webkit-keyframes report-animation-zoom { +0% {opacity:0; transform:scale(0.5);} +50% {opacity:1; transform:scale(1.05);} +100% {opacity:1; transform:scale(1);} +} +/* Notiflix: Report content animation => zoom off */ + +/* Notiflix: Report overlay animation remove => fade on */ +[id^=NotiflixReportWrap].remove > div[class*="-overlay"].with-animation { +opacity:0; +animation: report-overlay-animation-remove .3s ease-in-out 0s normal; +-webkit-animation: report-overlay-animation-remove .3s ease-in-out 0s normal;} + +@keyframes report-overlay-animation-remove { +0% {opacity:1;} +100% {opacity:0;} +} + +@-webkit-keyframes report-overlay-animation-remove { +0% {opacity:1;} +100% {opacity:0;} +} +/* Notiflix: Report overlay animation remove => fade off */ + +/* Notiflix: Report content animation remove => fade on */ +[id^=NotiflixReportWrap].remove > div[class*="-content"].with-animation.nx-fade { +opacity:0; +animation: report-animation-fade-remove .3s ease-in-out 0s normal; +-webkit-animation: report-animation-fade-remove .3s ease-in-out 0s normal;} + +@keyframes report-animation-fade-remove { +0% {opacity:1;} +100% {opacity:0;} +} + +@-webkit-keyframes report-animation-fade-remove { +0% {opacity:1;} +100% {opacity:0;} +} +/* Notiflix: Report content animation remove => fade off */ + +/* Notiflix: Report content animation remove => zoom on */ +[id^=NotiflixReportWrap].remove > div[class*="-content"].with-animation.nx-zoom { +opacity:0; +animation: report-animation-zoom-remove .3s ease-in-out 0s normal; +-webkit-animation: report-animation-zoom-remove .3s ease-in-out 0s normal;} + +@keyframes report-animation-zoom-remove { +0% {opacity:1; transform:scale(1);} +50% {opacity:0.5; transform:scale(1.05);} +100% {opacity:0; transform:scale(0);} +} + +@-webkit-keyframes report-animation-zoom-remove { +0% {opacity:1; transform:scale(1);} +50% {opacity:0.5; transform:scale(1.05);} +100% {opacity:0; transform:scale(0);} +} +/* Notiflix: Report content animation remove => zoom off */ + + +/* Notiflix: Confirm wrap on */ +[id^=NotiflixConfirmWrap] { +position: fixed; +z-index: 4003; +width: 300px; +max-width:98%; +left: 10px; +right: 10px; +top: 10px; +margin:auto; +text-align: center; +box-sizing:border-box; +background:transparent; +font-family: "Quicksand", sans-serif;} + +[id^=NotiflixConfirmWrap] * { +box-sizing:border-box;} +/* Notiflix: Confirm wrap off */ + +/* Notiflix: Confirm content on */ +[id^=NotiflixConfirmWrap] > div[class*="-overlay"] { +width:100%; +height:100%; +left:0; +top:0; +background: rgba(255, 255, 255, .5); +position:fixed; +z-index:0;} + +[id^=NotiflixConfirmWrap] > div[class*="-content"] { +width:100%; +float:left; +border-radius: 25px; +padding:10px; +margin:0; +filter: drop-shadow(0 0 5px rgba(0,0,0,.1)); +background: #f8f8f8; +color:#1e1e1e; +position:relative; +z-index:1;} + +[id^=NotiflixConfirmWrap] > div[class*="-content"] > div[class*="-head"] { +float:left; +width:100%;} + +[id^=NotiflixConfirmWrap] > div[class*="-content"] > div[class*="-head"] > h5 { +float:left; +width:100%; +margin:0; +padding:0 0 10px; +border-bottom:1px solid rgba(0,0,0,0.1); +color: #32c682; +font-family:inherit !important; +font-size:16px; +line-height:1.4; +font-weight:500;} + +[id^=NotiflixConfirmWrap] > div[class*="-content"] > div[class*="-head"] > p { +font-family:inherit !important; +margin: 15px 0 20px; +padding: 0 10px; +float:left; +width:100%; +font-size: 14px; +line-height: 1.4; +color: inherit;} + +[id^=NotiflixConfirmWrap] > div[class*="-content"] > div[class*="-buttons"] { +-webkit-user-select: none; +-moz-user-select: none; +-ms-user-select: none; +user-select: none; +border-radius:inherit; +float:left; +width:100%;} + +[id^=NotiflixConfirmWrap] > div[class*="-content"] > div[class*="-buttons"] > a { +cursor:pointer; +font-family:inherit !important; +transition:all .25s ease-in-out; +float: left; +width: 48%; +padding: 9px 5px; +border-radius:inherit !important; +font-weight: 500; +font-size: 15px; +line-height: 1.4; +color:#f8f8f8;} + +[id^=NotiflixConfirmWrap] > div[class*="-content"] > div[class*="-buttons"] > a.confirm-button-ok { +margin:0 2% 0 0; +background:#32c682;} + +[id^=NotiflixConfirmWrap] > div[class*="-content"] > div[class*="-buttons"] > a.confirm-button-cancel { +margin:0 0 0 2%; +background:#a9a9a9;} + +[id^=NotiflixConfirmWrap] > div[class*="-content"] > div[class*="-buttons"] > a.full { +margin:0; +width:100%;} + +[id^=NotiflixConfirmWrap] > div[class*="-content"] > div[class*="-buttons"] > a:hover { +box-shadow:inset 0 -60px 5px -5px rgba(0, 0, 0, 0.25);} +/* Notiflix: Confirm content off */ + +/* Notiflix: Confirm rtl on */ +[id^=NotiflixConfirmWrap].rtl-on > div[class*="-content"] > div[class*="-buttons"], +[id^=NotiflixConfirmWrap].rtl-on > div[class*="-content"] > div[class*="-buttons"] > a { +transform:rotateY(180deg);} +/* Notiflix: Confirm rtl off */ + +/* Notiflix: Confirm overlay animation => fade on */ +[id^=NotiflixConfirmWrap] > div[class*="-overlay"].with-animation { +animation: confirm-overlay-animation .3s ease-in-out 0s normal; +-webkit-animation: confirm-overlay-animation .3s ease-in-out 0s normal;} + +@keyframes confirm-overlay-animation { +0% {opacity:0;} +100% {opacity:1;} +} + +@-webkit-keyframes confirm-overlay-animation { +0% {opacity:0;} +100% {opacity:1;} +} +/* Notiflix: Confirm overlay animation => fade off */ + +/* Notiflix: Confirm overlay animation remove => fade on */ +[id^=NotiflixConfirmWrap].remove > div[class*="-overlay"].with-animation { +opacity:0; +animation: confirm-overlay-animation-remove .3s ease-in-out 0s normal; +-webkit-animation: confirm-overlay-animation-remove .3s ease-in-out 0s normal;} + +@keyframes confirm-overlay-animation-remove { +0% {opacity:1;} +100% {opacity:0;} +} + +@-webkit-keyframes confirm-overlay-animation-remove { +0% {opacity:1;} +100% {opacity:0;} +} +/* Notiflix: Confirm overlay animation remove => fade off */ + +/* Notiflix: Confirm content animation => fade on */ +[id^=NotiflixConfirmWrap].with-animation.nx-fade > div[class*="-content"] { +animation: confirm-animation-fade .3s ease-in-out 0s normal; +-webkit-animation: confirm-animation-fade .3s ease-in-out 0s normal;} + +@keyframes confirm-animation-fade { +0% {opacity:0;} +100% {opacity:1;} +} + +@-webkit-keyframes confirm-animation-fade { +0% {opacity:0;} +100% {opacity:1;} +} +/* Notiflix: Confirm content animation => fade off */ + +/* Notiflix: Confirm content animation => zoom on */ +[id^=NotiflixConfirmWrap].with-animation.nx-zoom > div[class*="-content"] { +animation: confirm-animation-zoom .3s ease-in-out 0s normal; +-webkit-animation: confirm-animation-zoom .3s ease-in-out 0s normal;} + +@keyframes confirm-animation-zoom { +0% {opacity:0; transform:scale(0.5);} +50% {opacity:1; transform:scale(1.05);} +100% {opacity:1; transform:scale(1);} +} + +@-webkit-keyframes confirm-animation-zoom { +0% {opacity:0; transform:scale(0.5);} +50% {opacity:1; transform:scale(1.05);} +100% {opacity:1; transform:scale(1);} +} +/* Notiflix: Confirm content animation => zoom off */ + +/* Notiflix: Confirm content animation remove => fade on */ +[id^=NotiflixConfirmWrap].with-animation.nx-fade.remove > div[class*="-content"] { +opacity:0; +animation: confirm-animation-fade-remove .3s ease-in-out 0s normal; +-webkit-animation: confirm-animation-fade-remove .3s ease-in-out 0s normal;} + +@keyframes confirm-animation-fade-remove { +0% {opacity:1;} +100% {opacity:0;} +} + +@-webkit-keyframes confirm-animation-fade-remove { +0% {opacity:1;} +100% {opacity:0;} +} +/* Notiflix: Confirm content animation remove => fade off */ + +/* Notiflix: Confirm content animation remove => zoom on */ +[id^=NotiflixConfirmWrap].with-animation.nx-zoom.remove > div[class*="-content"] { +opacity:0; +animation: confirm-animation-zoom-remove .3s ease-in-out 0s normal; +-webkit-animation: confirm-animation-zoom-remove .3s ease-in-out 0s normal;} + +@keyframes confirm-animation-zoom-remove { +0% {opacity:1; transform:scale(1);} +50% {opacity:0.5; transform:scale(1.05);} +100% {opacity:0; transform:scale(0);} +} + +@-webkit-keyframes confirm-animation-zoom-remove { +0% {opacity:1; transform:scale(1);} +50% {opacity:0.5; transform:scale(1.05);} +100% {opacity:0; transform:scale(0);} +} +/* Notiflix: Confirm content animation remove => zoom off */ + + +/* Notiflix: Loading wrap on */ +[id^=NotiflixLoadingWrap] { +-webkit-user-select: none; +-moz-user-select: none; +-ms-user-select: none; +user-select: none; +position: fixed; +z-index: 4000; +width: 100%; +height: 100%; +left: 0; +top: 0; +right:0; +bottom:0; +margin:auto; +text-align: center; +box-sizing:border-box; +background: white!important; +font-family: "Quicksand", sans-serif;} + +[id^=NotiflixLoadingWrap] * { +box-sizing:border-box;} + +[id^=NotiflixLoadingWrap].click-to-close { +cursor:pointer;} +/* Notiflix: Loading wrap off */ + +/* Notiflix: Loading content on */ +[id^=NotiflixLoadingWrap] > div[class*="-icon"] { +width:60px; +height:60px; +position:fixed; +background-color: white!important; +transition:top .2s ease-in-out; +left: 0; +top: 0; +right:0; +bottom:0; +margin:auto;} + +[id^=NotiflixLoadingWrap] > div[class*="-icon"] img, +[id^=NotiflixLoadingWrap] > div[class*="-icon"] svg { +max-width:unset; +max-height:unset; +width: 100%; +height: 100%; +position:absolute; +left: 0; +top: 0;} + +[id^=NotiflixLoadingWrap] > div[class*="-icon"].with-message { +top:-42px;} + +[id^=NotiflixLoadingWrap] > p { +position: fixed; +left: 0; +right: 0; +top: 42px; +bottom: 0; +margin: auto; +font-family: inherit !important; +font-weight: 500; +line-height: 1.4; +padding: 0 10px; +width: 100%; +font-size:15px; +height: 18px;} +/* Notiflix: Loading content off */ + +/* Notiflix: Loading animation => fade on */ +[id^=NotiflixLoadingWrap].with-animation { +animation: loading-animation-fade .3s ease-in-out 0s normal; +-webkit-animation: loading-animation-fade .3s ease-in-out 0s normal;} + +@keyframes loading-animation-fade { +0% {opacity:0;} +100% {opacity:1;} +} + +@-webkit-keyframes loading-animation-fade { +0% {opacity:0;} +100% {opacity:1;} +} +/* Notiflix: Loading animation => fade off */ + +/* Notiflix: Loading animation remove => fade on */ +[id^=NotiflixLoadingWrap].with-animation.remove { +opacity:0; +animation: loading-animation-fade-remove .3s ease-in-out 0s normal; +-webkit-animation: loading-animation-fade-remove .3s ease-in-out 0s normal;} + +@keyframes loading-animation-fade-remove { +0% {opacity:1;} +100% {opacity:0;} +} + +@-webkit-keyframes loading-animation-fade-remove { +0% {opacity:1;} +100% {opacity:0;} +} +/* Notiflix: Loading animation remove => fade off */ + +/* Notiflix: Loading animation new message => fade on */ +[id^=NotiflixLoadingWrap] > p.new { +animation: loading-new-message-fade .3s ease-in-out 0s normal; +-webkit-animation: loading-new-message-fade .3s ease-in-out 0s normal;} + +@keyframes loading-new-message-fade { +0% {opacity:0;} +100% {opacity:1;} +} + +@-webkit-keyframes loading-new-message-fade { +0% {opacity:0;} +100% {opacity:1;} +} +/* Notiflix: Loading animation new message => fade off */ + + +/* Notiflix: Block wrap on */ +[id^=NotiflixBlockWrap] { +-webkit-user-select: none; +-moz-user-select: none; +-ms-user-select: none; +user-select: none; +box-sizing: border-box; +position: absolute; +z-index: 1000; +font-family: "Quicksand", sans-serif; +background: rgba(255, 255, 255, 0.9); +text-align: center; +animation-duration: 400ms; +width: 100%; +height: 100%; +left: 0; +top: 0; +border-radius: inherit;} + +[id^=NotiflixBlockWrap] * { +box-sizing: border-box;} +/* Notiflix: Block wrap off */ + +/* Notiflix: Block content on */ +[id^=NotiflixBlockWrap] > span[class*="-icon"] { +width: 45px; +height: 45px; +position: absolute; +left: 0; +top: 0; +right: 0; +bottom: 0; +margin: auto;} + +[id^=NotiflixBlockWrap] > span[class*="-message"] { +position: absolute; +left: 0; +right: 0; +top: 50px; +bottom: 0; +margin: auto; +font-family: inherit !important; +font-weight: 500; +font-size: 14px; +line-height: 1.4; +padding: 0 10px; +width: 100%; +height: 20px; +overflow: hidden;} +/* Notiflix: Block content off */ + +/* Notiflix: Block animation => fade on */ +[id^=NotiflixBlockWrap].with-animation { +animation: block-animation-fade .3s ease-in-out 0s normal; +-webkit-animation: block-animation-fade .3s ease-in-out 0s normal;} + +@keyframes block-animation-fade { +0% {opacity: 0;} +100% {opacity: 1;} +} + +@-webkit-keyframes block-animation-fade { +0% {opacity: 0;} +100% {opacity: 1;} +} +/* Notiflix: Block animation => fade off */ + +/* Notiflix: Block animation remove => fade on */ +[id^=NotiflixBlockWrap].with-animation.remove { +opacity: 0; +animation: block-animation-fade-remove .3s ease-in-out 0s normal; +-webkit-animation: block-animation-fade-remove .3s ease-in-out 0s normal;} + +@keyframes block-animation-fade-remove { +0% {opacity: 1;} +100% {opacity: 0;} +} + +@-webkit-keyframes block-animation-fade-remove { +0% {opacity: 1;} +100% {opacity: 0;} +} +/* Notiflix: Block animation remove => fade off */ + diff --git a/component/pear/css/pear.css b/component/pear/css/pear.css index a9d8dd9..2f804c5 100644 --- a/component/pear/css/pear.css +++ b/component/pear/css/pear.css @@ -6,6 +6,7 @@ @import url("pear-module/iconPicker.css"); @import url("pear-module/treetable.css"); @import url("pear-module/dropdown.css"); +@import url("pear-module/loading.css"); @import url("pear-module/topBar.css"); @import url("pear-module/select.css"); @import url("pear-module/layout.css"); @@ -22,4 +23,4 @@ @import url("pear-module/step.css"); @import url("pear-module/card.css"); @import url("pear-module/tab.css"); -@import url("pear-module/tag.css"); +@import url("pear-module/tag.css"); \ No newline at end of file diff --git a/component/pear/module/loading.js b/component/pear/module/loading.js new file mode 100644 index 0000000..d03beea --- /dev/null +++ b/component/pear/module/loading.js @@ -0,0 +1,2158 @@ +layui.define(['table', 'jquery', 'element'], function (exports) { + "use strict"; + + var MOD_NAME = 'loading', + $ = layui.jquery, + element = layui.element; + + var pearOper = new function () { + + this.blockRemove = function(dom,time){ + + Notiflix.Block.Remove(dom, time); + } + + + this.block = function(option){ + + if(option.type==1){ + + Notiflix.Block.Standard( + option.elem + ,option.msg); + + } + + else if(option.type==2){ + Notiflix.Block.Hourglass( + option.elem + ,option.msg); + } + else if(option.type==3){ + + Notiflix.Block.Circle( + option.elem + ,option.msg); + } + + else if(option.type==4){ + + Notiflix.Block.Arrows( + option.elem + ,option.msg); + } + + else if(option.type==5){ + + + Notiflix.Block.Dots( + option.elem + ,option.msg); + } + + else if(option.type==6){ + + Notiflix.Block.Pulse( + option.elem + ,option.msg); + } + } + + + + this.report = function(option){ + + + if(option.type=="success"){ + + Notiflix.Report.Success( + option.title, + option.message,'确认'); + + }else if(option.type=="failure"){ + + Notiflix.Report.Failure( + option.title, + option.message,'确认'); + + }else if(option.type=="warning"){ + + Notiflix.Report.Warning( + option.title, + option.message,'确认'); + + }else if(option.type=="info"){ + + Notiflix.Report.Info( + option.title, + option.message,'确认'); + + } + } + + + this.notice = function(option){ + + Notiflix.Notify.Init({ + position:option.position?"right-top":option.position, + }); + + + if(option.type=="success"){ + + Notiflix.Notify.Success(option.title); + + }else if(option.type=="failure"){ + + Notiflix.Notify.Failure(option.title); + + }else if(option.type=="warning"){ + + Notiflix.Notify.Warning(option.title); + + }else if(option.type=="info"){ + + Notiflix.Notify.Info(option.title); + + } + } + + + this.confirm = function(option){ + + Notiflix.Confirm.Show( + option.title, + option.message, + '确认', + '取消', + option.success, + option.cancle + ); + + } + + this.drawer = function(position,dom,distance){ + + var _right = new mSlider({ + dom: dom, + direction: position, + distance:distance + }); + + _right.open(); + + } + + + this.loadRemove = function(time){ + + Notiflix.Loading.Remove(time); + + } + + this.Load = function(type,message){ + + if(type==1){ + + Notiflix.Loading.Standard(message); + + }else if(type==2){ + + Notiflix.Loading.Hourglass(message); + + }else if(type==3){ + + Notiflix.Loading.Circle(message); + + }else if(type==4){ + + Notiflix.Loading.Dots(message); + + }else if(type==5){ + + Notiflix.Loading.Pulse(message); + + } + + } + + + + + this.msg = function(option){ + + if(option.type=="success"){ + + layer.msg(option.title,{icon:1,time:option.time},option.callback); + + }else if(option.type=="failure"){ + + layer.msg(option.title,{icon:2,time:option.time},option.callback); + + }else if(option.type=="warning"){ + + layer.msg(option.title,{icon:3,time:option.time},option.callback); + + }else if(option.type=="info"){ + + layer.msg(option.title,{icon:4,time:option.time},option.callback); + } + } + + + + + }; + + // Notiflix: Notify Default Settings on + var notifySettings = { + wrapID: 'NotiflixNotifyWrap', // can not customizable + width: '280px', + position: 'right-top', // 'right-top' - 'right-bottom' - 'left-top' - 'left-bottom' + distance: '10px', + opacity: 1, + borderRadius: '5px', + rtl: false, + timeout: 3000, + messageMaxLength: 110, + backOverlay: false, + backOverlayColor: 'rgba(0,0,0,0.5)', + plainText: true, + showOnlyTheLastOne: false, + clickToClose: false, + + ID: 'NotiflixNotify', + className: 'notiflix-notify', + zindex: 4001, + useGoogleFont: true, + fontFamily: 'Quicksand', + fontSize: '13px', + cssAnimation: true, + cssAnimationDuration: 400, + cssAnimationStyle: 'fade', // 'fade' - 'zoom' - 'from-right' - 'from-top' - 'from-bottom' - 'from-left' + closeButton: false, + useIcon: true, + useFontAwesome: false, + fontAwesomeIconStyle: 'basic', // 'basic' - 'shadow' + fontAwesomeIconSize: '34px', + + success: { + background: '#32c682', + textColor: '#fff', + childClassName: 'success', + notiflixIconColor: 'rgba(0,0,0,0.2)', + fontAwesomeClassName: 'fas fa-check-circle', + fontAwesomeIconColor: 'rgba(0,0,0,0.2)', + }, + + failure: { + background: '#ff5549', + textColor: '#fff', + childClassName: 'failure', + notiflixIconColor: 'rgba(0,0,0,0.2)', + fontAwesomeClassName: 'fas fa-times-circle', + fontAwesomeIconColor: 'rgba(0,0,0,0.2)', + }, + + warning: { + background: '#eebf31', + textColor: '#fff', + childClassName: 'warning', + notiflixIconColor: 'rgba(0,0,0,0.2)', + fontAwesomeClassName: 'fas fa-exclamation-circle', + fontAwesomeIconColor: 'rgba(0,0,0,0.2)', + }, + + info: { + background: '#26c0d3', + textColor: '#fff', + childClassName: 'info', + notiflixIconColor: 'rgba(0,0,0,0.2)', + fontAwesomeClassName: 'fas fa-info-circle', + fontAwesomeIconColor: 'rgba(0,0,0,0.2)', + }, + }; + // Notiflix: Notify Default Settings off + + // Notiflix: Report Default Settings on + var reportSettings = { + ID: 'NotiflixReportWrap', // can not customizable + className: 'notiflix-report', + width: '320px', + backgroundColor: '#f8f8f8', + borderRadius: '25px', + rtl: false, + zindex: 4002, + backOverlay: true, + backOverlayColor: 'rgba(0, 0, 0, 0.5)', + useGoogleFont: true, + fontFamily: 'Quicksand', + svgSize: '110px', + plainText: true, + titleFontSize: '16px', + titleMaxLength: 34, + messageFontSize: '13px', + messageMaxLength: 400, + buttonFontSize: '14px', + buttonMaxLength: 34, + cssAnimation: true, + cssAnimationDuration: 360, + cssAnimationStyle: 'fade', // 'fade' - 'zoom' + + success: { + svgColor: '#32c682', + titleColor: '#1e1e1e', + messageColor: '#242424', + buttonBackground: '#32c682', + buttonColor: '#fff', + }, + + failure: { + svgColor: '#ff5549', + titleColor: '#1e1e1e', + messageColor: '#242424', + buttonBackground: '#ff5549', + buttonColor: '#fff', + }, + + warning: { + svgColor: '#eebf31', + titleColor: '#1e1e1e', + messageColor: '#242424', + buttonBackground: '#eebf31', + buttonColor: '#fff', + }, + + info: { + svgColor: '#26c0d3', + titleColor: '#1e1e1e', + messageColor: '#242424', + buttonBackground: '#26c0d3', + buttonColor: '#fff', + }, + }; + // Notiflix: Report Default Settings off + + // Notiflix: Confirm Default Settings on + var confirmSettings = { + ID: 'NotiflixConfirmWrap', // can not customizable + className: 'notiflix-confirm', + width: '300px', + zindex: 4003, + position: 'center', // 'center' - 'center-top' - 'right-top' - 'right-bottom' - 'left-top' - 'left-bottom' + distance: '10px', + backgroundColor: '#f8f8f8', + borderRadius: '25px', + backOverlay: true, + backOverlayColor: 'rgba(0,0,0,0.5)', + rtl: false, + useGoogleFont: true, + fontFamily: 'Quicksand', + cssAnimation: true, + cssAnimationStyle: 'fade', // 'zoom' - 'fade' + cssAnimationDuration: 300, + plainText: true, + + titleColor: '#32c682', + titleFontSize: '16px', + titleMaxLength: 34, + + messageColor: '#1e1e1e', + messageFontSize: '14px', + messageMaxLength: 110, + + buttonsFontSize: '15px', + buttonsMaxLength: 34, + okButtonColor: '#f8f8f8', + okButtonBackground: '#32c682', + cancelButtonColor: '#f8f8f8', + cancelButtonBackground: '#a9a9a9', + }; + // Notiflix: Confirm Default Settings off + + // Notiflix: Loading Default Settings on + var loadingSettings = { + ID: 'NotiflixLoadingWrap', // can not customizable + className: 'notiflix-loading', + zindex: 4000, + backgroundColor: 'rgba(0,0,0,0.8)', + rtl: false, + useGoogleFont: true, + fontFamily: 'Quicksand', + cssAnimation: true, + cssAnimationDuration: 400, + clickToClose: false, + customSvgUrl: null, + svgSize: '80px', + svgColor: '#32c682', + messageID: 'NotiflixLoadingMessage', + messageFontSize: '15px', + messageMaxLength: 34, + messageColor: '#dcdcdc', + }; + // Notiflix: Loading Default Settings off + + // Notiflix: Block Default Settings on + var blockSettings = { + ID: 'NotiflixBlockWrap', // can not customizable + querySelectorLimit: 200, + className: 'notiflix-block', + position: 'absolute', + zindex: 1000, + backgroundColor: 'rgba(255,255,255,0.9)', + rtl: false, + useGoogleFont: true, + fontFamily: 'Quicksand', + cssAnimation: true, + cssAnimationDuration: 300, + svgSize: '45px', + svgColor: '#383838', + messageFontSize: '14px', + messageMaxLength: 34, + messageColor: '#383838', + }; + // Notiflix: Block Default Settings off + + // Notiflix: Extend on + var extendNotiflix = function () { + // variables + var extended = {}; + var deep = false; + var i = 0; + // check if a deep merge + if (Object.prototype.toString.call(arguments[0]) === '[object Boolean]') { + deep = arguments[0]; + i++; + } + // merge the object into the extended object + var merge = function (obj) { + for (var prop in obj) { + if (Object.prototype.hasOwnProperty.call(obj, prop)) { + // if property is an object, merge properties + if (deep && Object.prototype.toString.call(obj[prop]) === '[object Object]') { + extended[prop] = extendNotiflix(extended[prop], obj[prop]); + } else { + extended[prop] = obj[prop]; + } + } + } + }; + // loop through each object and conduct a merge + for (; i < arguments.length; i++) { + merge(arguments[i]); + } + return extended; + }; + // Notiflix: Extend off + + // Notiflix: Plaintext on + var notiflixPlaintext = function (html) { + var htmlPool = document.createElement('div'); + htmlPool.innerHTML = html; + return htmlPool.textContent || htmlPool.innerText || ''; + }; + // Notiflix: Plaintext off + + // Notiflix: GoogleFont on + var notiflixGoogleFont = function (use, family) { + if (!document.getElementById('NotiflixQuicksand') && use && (family && typeof family === 'string' && family.toLowerCase() === 'quicksand')) { + // google fonts dns prefetch on + var dns = ''; + var dnsRange = document.createRange(); + dnsRange.selectNode(document.head); + var dnsFragment = dnsRange.createContextualFragment(dns); + document.head.appendChild(dnsFragment); + // google fonts dns prefetch off + + // google fonts style on + var font = ''; + var fontRange = document.createRange(); + fontRange.selectNode(document.head); + var fontFragment = fontRange.createContextualFragment(font); + document.head.appendChild(fontFragment); + // google fonts style off + } + }; + // Notiflix: GoogleFont off + + // Notiflix: Console Error on + var notiflixConsoleError = function (title, message) { + return console.error('%c ' + title + ' ', 'padding:2px;border-radius:20px;color:#fff;background:#ff5549', '\n' + message + '\nVisit documentation page to learn more: https://www.notiflix.com/documentation'); + }; + // Notiflix: Console Error off + + // Notiflix: Console Log on + var notiflixConsoleLog = function (title, message) { + return console.log('%c ' + title + ' ', 'padding:2px;border-radius:20px;color:#fff;background:#26c0d3', '\n' + message + '\nVisit documentation page to learn more: https://www.notiflix.com/documentation'); + }; + // Notiflix: Console Log off + + // Notiflix: Main on + var newNotifySettings; + var newReportSettings; + var newConfirmSettings; + var newLoadingSettings; + var newBlockSettings; + var Notiflix = { + // Notify on + Notify: { + + // Init + Init: function (userNotifyOpt) { + // extend options + newNotifySettings = extendNotiflix(true, notifySettings, userNotifyOpt); + // use GoogleFonts if "Quicksand" + notiflixGoogleFont(newNotifySettings.useGoogleFont, newNotifySettings.fontFamily); + }, + + // Merge First Init + Merge: function (userNotifyExtend) { + // if initialized already + if (newNotifySettings) { + newNotifySettings = extendNotiflix(true, newNotifySettings, userNotifyExtend); + } + // initialize first + else { + notiflixConsoleError('Notiflix Error', 'You have to initialize the Notify module before call Merge function.'); + return false; + } + }, + + // Display Notification: Success + Success: function (message, callback) { + // if not initialized pretend like init + if (!newNotifySettings) { + Notiflix.Notify.Init({}); + } + var theType = newNotifySettings.success; + NotiflixNotify(message, callback, theType, 'Success'); + }, + + // Display Notification: Failure + Failure: function (message, callback) { + // if not initialized pretend like init + if (!newNotifySettings) { + Notiflix.Notify.Init({}); + } + var theType = newNotifySettings.failure; + NotiflixNotify(message, callback, theType, 'Failure'); + }, + + // Display Notification: Warning + Warning: function (message, callback) { + // if not initialized pretend like init + if (!newNotifySettings) { + Notiflix.Notify.Init({}); + } + var theType = newNotifySettings.warning; + NotiflixNotify(message, callback, theType, 'Warning'); + }, + + // Display Notification: Info + Info: function (message, callback) { + // if not initialized pretend like init + if (!newNotifySettings) { + Notiflix.Notify.Init({}); + } + var theType = newNotifySettings.info; + NotiflixNotify(message, callback, theType, 'Info'); + }, + }, + // Notify off + + // Report on + Report: { + + // Init + Init: function (userReportOpt) { + // extend options + newReportSettings = extendNotiflix(true, reportSettings, userReportOpt); + // use GoogleFonts if "Quicksand" + notiflixGoogleFont(newReportSettings.useGoogleFont, newReportSettings.fontFamily); + }, + + // Merge First Init + Merge: function (userReportExtend) { + // if initialized already + if (newReportSettings) { + newReportSettings = extendNotiflix(true, newReportSettings, userReportExtend); + } + // initialize first + else { + notiflixConsoleError('Notiflix Error', 'You have to initialize the Report module before call Merge function.'); + return false; + } + }, + + // Display Report: Success + Success: function (title, message, buttonText, buttonCallback) { + // if not initialized pretend like init + if (!newReportSettings) { + Notiflix.Report.Init({}); + } + var theType = newReportSettings.success; + NotiflixReport(title, message, buttonText, buttonCallback, theType, 'Success'); + }, + + // Display Report: Failure + Failure: function (title, message, buttonText, buttonCallback) { + // if not initialized pretend like init + if (!newReportSettings) { + Notiflix.Report.Init({}); + } + var theType = newReportSettings.failure; + NotiflixReport(title, message, buttonText, buttonCallback, theType, 'Failure'); + }, + + // Display Report: Warning + Warning: function (title, message, buttonText, buttonCallback) { + // if not initialized pretend like init + if (!newReportSettings) { + Notiflix.Report.Init({}); + } + var theType = newReportSettings.warning; + NotiflixReport(title, message, buttonText, buttonCallback, theType, 'Warning'); + }, + + // Display Report: Info + Info: function (title, message, buttonText, buttonCallback) { + // if not initialized pretend like init + if (!newReportSettings) { + Notiflix.Report.Init({}); + } + var theType = newReportSettings.info; + NotiflixReport(title, message, buttonText, buttonCallback, theType, 'Info'); + }, + }, + // Report off + + // Confirm on + Confirm: { + + // Init + Init: function (userConfirmOpt) { + // extend options + newConfirmSettings = extendNotiflix(true, confirmSettings, userConfirmOpt); + // use GoogleFonts if "Quicksand" + notiflixGoogleFont(newConfirmSettings.useGoogleFont, newConfirmSettings.fontFamily); + }, + + // Merge First Init + Merge: function (userConfirmExtend) { + // if initialized already + if (newConfirmSettings) { + newConfirmSettings = extendNotiflix(true, newConfirmSettings, userConfirmExtend); + } + // initialize first + else { + notiflixConsoleError('Notiflix Error', 'You have to initialize the Confirm module before call Merge function.'); + return false; + } + }, + + // Display Confirm: Show + Show: function (title, message, okText, cancelText, okCallback, cancelCallback) { + if (!title) { title = 'Notiflix Confirm'; } + if (!message) { message = 'Do you agree with me?'; } + if (!okText) { okText = 'Yes'; } + if (!cancelText) { cancelText = 'No'; } + if (!okCallback) { okCallback = undefined; } + if (!cancelCallback) { cancelCallback = undefined; } + NotiflixConfirm(title, message, okText, cancelText, okCallback, cancelCallback); + }, + }, + // Confirm off + + // Loading on + Loading: { + + // Init + Init: function (userLoadingOpt) { + // extend options + newLoadingSettings = extendNotiflix(true, loadingSettings, userLoadingOpt); + // use GoogleFonts if "Quicksand" + notiflixGoogleFont(newLoadingSettings.useGoogleFont, newLoadingSettings.fontFamily); + }, + + // Merge First Init + Merge: function (userLoadingExtend) { + // if initialized already + if (newLoadingSettings) { + newLoadingSettings = extendNotiflix(true, newLoadingSettings, userLoadingExtend); + } + // initialize first + else { + notiflixConsoleError('Notiflix Error', 'You have to initialize the Loading module before call Merge function.'); + return false; + } + }, + + // Display Loading: Standard + Standard: function (message) { + NotiflixLoading(message, 'standard', true, 0); // true => display || 0 => delay + }, + + // Display Loading: Hourglass + Hourglass: function (message) { + NotiflixLoading(message, 'hourglass', true, 0); // true => display || 0 => delay + }, + + // Display Loading: Circle + Circle: function (message) { + NotiflixLoading(message, 'circle', true, 0); // true => display || 0 => delay + }, + + // Display Loading: Arrows + Arrows: function (message) { + NotiflixLoading(message, 'arrows', true, 0); // true => display || 0 => delay + }, + + // Display Loading: Dots + Dots: function (message) { + NotiflixLoading(message, 'dots', true, 0); // true => display || 0 => delay + }, + + // Display Loading: Pulse + Pulse: function (message) { + NotiflixLoading(message, 'pulse', true, 0); // true => display || 0 => delay + }, + + // Display Loading: Custom + Custom: function (message) { + NotiflixLoading(message, 'custom', true, 0); // true => display || 0 => delay + }, + + // Display Loading: Notiflix + Notiflix: function (message) { + NotiflixLoading(message, 'notiflix', true, 0); // true => display || 0 => delay + }, + + // Remove Loading + Remove: function (theDelay) { + if (!theDelay) { theDelay = 0; } + NotiflixLoading(false, false, false, theDelay); // false = Remove + }, + + // Change The Message + Change: function (newMessage) { + NotiflixLoadingChange(newMessage); + }, + }, + // Loading off + + // Block on + Block: { + + // Initialize + Init: function (userBlockOpt) { + // extend options + newBlockSettings = extendNotiflix(true, blockSettings, userBlockOpt); + // use GoogleFonts if "Quicksand" + notiflixGoogleFont(newBlockSettings.useGoogleFont, newBlockSettings.fontFamily); + }, + + // Merge First Initialize + Merge: function (userBlockExtend) { + // if initialized already + if (newBlockSettings) { + newBlockSettings = extendNotiflix(true, newBlockSettings, userBlockExtend); + } + // initialize first + else { + notiflixConsoleError('Notiflix Error', 'You have to initialize the "Notiflix.Block" module before call Merge function.'); + return false; + } + }, + + // Display Block: Standard + Standard: function (selector, message) { + var block = true; + var theIcon = 'standard'; + NotiflixBlockUnblockElement(block, selector, theIcon, message); + }, + + // Display Block: Hourglass + Hourglass: function (selector, message) { + var block = true; + var theIcon = 'hourglass'; + NotiflixBlockUnblockElement(block, selector, theIcon, message); + }, + + // Display Block: Circle + Circle: function (selector, message) { + var block = true; + var theIcon = 'circle'; + NotiflixBlockUnblockElement(block, selector, theIcon, message); + }, + + // Display Block: Arrows + Arrows: function (selector, message) { + var block = true; + var theIcon = 'arrows'; + NotiflixBlockUnblockElement(block, selector, theIcon, message); + }, + + // Display Block: Dots + Dots: function (selector, message) { + var block = true; + var theIcon = 'dots'; + NotiflixBlockUnblockElement(block, selector, theIcon, message); + }, + + // Display Block: Pulse + Pulse: function (selector, message) { + var block = true; + var theIcon = 'pulse'; + NotiflixBlockUnblockElement(block, selector, theIcon, message); + }, + + // Remove Block + Remove: function (selector, delay) { + var block = false; + var theIcon = null; + var message = null; + NotiflixBlockUnblockElement(block, selector, theIcon, message, delay); + }, + }, + // Block off + }; + // Notiflix: Main off + + + // Notiflix: Notify Single on + var notiflixNotifyCount = 0; + var NotiflixNotify = function (message, callback, theType, staticType) { + if (arguments && arguments.length === 4) { + + // notify counter on + notiflixNotifyCount++; + // notify counter off + + // if no message on + if (!message) { + message = 'Notiflix ' + staticType; + } + // if no message off + + // if plainText true = HTML tags not allowed on + if (newNotifySettings.plainText) { + message = notiflixPlaintext(message); // message plain text + } + // if plainText true = HTML tags not allowed off + + // if plainText false but the message length more than messageMaxLength = HTML tags error on + if (!newNotifySettings.plainText && message.length > newNotifySettings.messageMaxLength) { + Notiflix.Notify.Merge({ closeButton: true, plainText: false, }); + message = 'HTML Tags Error: Your content length is more than "messageMaxLength" option.'; // message html error + } + // if plainText false but the message length more than messageMaxLength = HTML tags error off + + // message max length substring on + if (message.length > newNotifySettings.messageMaxLength) { + message = message.substring(0, newNotifySettings.messageMaxLength) + '...'; + } + // message max length substring off + + // font awesome icon style on + if (newNotifySettings.fontAwesomeIconStyle === 'shadow') { + theType.fontAwesomeIconColor = theType.background; + } + // font awesome icon style off + + // if cssAnimaion false -> duration on + if (!newNotifySettings.cssAnimation) { + newNotifySettings.cssAnimationDuration = 0; + } + // if cssAnimaion false -> duration off + + // notify wrap on + var docBody = document.body; + var ntflxNotifyWrap = document.createElement('div'); + ntflxNotifyWrap.id = notifySettings.wrapID; + ntflxNotifyWrap.style.width = newNotifySettings.width; + ntflxNotifyWrap.style.zIndex = newNotifySettings.zindex; + ntflxNotifyWrap.style.opacity = newNotifySettings.opacity; + + // wrap position on + if (newNotifySettings.position === 'right-bottom') { + ntflxNotifyWrap.style.right = newNotifySettings.distance; + ntflxNotifyWrap.style.bottom = newNotifySettings.distance; + ntflxNotifyWrap.style.top = 'auto'; + ntflxNotifyWrap.style.left = 'auto'; + } else if (newNotifySettings.position === 'left-top') { + ntflxNotifyWrap.style.left = newNotifySettings.distance; + ntflxNotifyWrap.style.top = newNotifySettings.distance; + ntflxNotifyWrap.style.right = 'auto'; + ntflxNotifyWrap.style.bottom = 'auto'; + } else if (newNotifySettings.position === 'left-bottom') { + ntflxNotifyWrap.style.left = newNotifySettings.distance; + ntflxNotifyWrap.style.bottom = newNotifySettings.distance; + ntflxNotifyWrap.style.top = 'auto'; + ntflxNotifyWrap.style.right = 'auto'; + } else { // 'right-top' or else + ntflxNotifyWrap.style.right = newNotifySettings.distance; + ntflxNotifyWrap.style.top = newNotifySettings.distance; + ntflxNotifyWrap.style.left = 'auto'; + ntflxNotifyWrap.style.bottom = 'auto'; + } + // wrap position off + + // if background overlay true on + var notifyOverlay; + if (newNotifySettings.backOverlay) { + notifyOverlay = document.createElement('div'); + notifyOverlay.id = newNotifySettings.ID + 'Overlay'; + notifyOverlay.style.width = '100%'; + notifyOverlay.style.height = '100%'; + notifyOverlay.style.position = 'fixed'; + notifyOverlay.style.zIndex = newNotifySettings.zindex; + notifyOverlay.style.left = 0; + notifyOverlay.style.top = 0; + notifyOverlay.style.right = 0; + notifyOverlay.style.bottom = 0; + notifyOverlay.style.background = newNotifySettings.backOverlayColor; + notifyOverlay.className = (newNotifySettings.cssAnimation ? 'with-animation' : ''); + notifyOverlay.style.animationDuration = (newNotifySettings.cssAnimation) ? newNotifySettings.cssAnimationDuration + 'ms' : ''; + if (!document.getElementById(notifyOverlay.id)) { + docBody.appendChild(notifyOverlay); + } + } + // if background overlay true off + + if (!document.getElementById(ntflxNotifyWrap.id)) { + docBody.appendChild(ntflxNotifyWrap); + } + // notify wrap off + + // notify content on + var ntflxNotify = document.createElement('div'); + ntflxNotify.id = newNotifySettings.ID + '-' + notiflixNotifyCount; + ntflxNotify.className = newNotifySettings.className + ' ' + theType.childClassName + ' ' + (newNotifySettings.cssAnimation ? 'with-animation' : '') + ' ' + (newNotifySettings.useIcon ? 'with-icon' : '') + ' nx-' + newNotifySettings.cssAnimationStyle + ' ' + (newNotifySettings.closeButton && !callback ? 'with-close-button' : '') + ' ' + (callback && typeof callback === 'function' ? 'with-callback' : '') + ' ' + (newNotifySettings.clickToClose ? 'click-to-close' : ''); + ntflxNotify.style.fontSize = newNotifySettings.fontSize; + ntflxNotify.style.color = theType.textColor; + ntflxNotify.style.background = theType.background; + ntflxNotify.style.borderRadius = newNotifySettings.borderRadius; + + // rtl on + if (newNotifySettings.rtl) { + ntflxNotify.setAttribute('dir', 'rtl'); + ntflxNotify.classList.add('rtl-on'); + } + // rtl off + + // font-family on + ntflxNotify.style.fontFamily = '"' + newNotifySettings.fontFamily + '"' + ', sans-serif'; + // font-family off + + // use css animation on + if (newNotifySettings.cssAnimation) { + ntflxNotify.style.animationDuration = newNotifySettings.cssAnimationDuration + 'ms'; + } + // use css animation off + + // close button element on + var closeButtonHTML = ''; + if (newNotifySettings.closeButton && !callback) { + closeButtonHTML = ''; + } + // close buttpon element off + + // use icon on + if (newNotifySettings.useIcon) { + // use font awesome + if (newNotifySettings.useFontAwesome) { + ntflxNotify.innerHTML = '' + message + '' + (newNotifySettings.closeButton ? closeButtonHTML : ''); + } + // use notiflix icon + else { + var svgIcon; + if (staticType === 'Success') { // success + svgIcon = ''; + } else if (staticType === 'Failure') { // failure + svgIcon = ''; + } else if (staticType === 'Warning') { // warning + svgIcon = ''; + } else if (staticType === 'Info') { // info + svgIcon = ''; + } else { + svgIcon = ''; + } + ntflxNotify.innerHTML = svgIcon + '' + message + '' + (newNotifySettings.closeButton ? closeButtonHTML : ''); + } + } + // without icon + else { + ntflxNotify.innerHTML = '' + message + '' + (newNotifySettings.closeButton ? closeButtonHTML : ''); + } + // use icon off + // notify content off + + // notify append or prepend on + if (newNotifySettings.position === 'left-bottom' || newNotifySettings.position === 'right-bottom') { // the new one will be first + var notifyWrap = document.getElementById(ntflxNotifyWrap.id); + notifyWrap.insertBefore(ntflxNotify, notifyWrap.firstChild); + } else { + document.getElementById(ntflxNotifyWrap.id).appendChild(ntflxNotify); + } + + if (newNotifySettings.useIcon) { // if useIcon, dynamically vertical align the contents + var messageIcon = document.getElementById(ntflxNotify.id).querySelectorAll('.nmi')[0]; + var messageIconH = 40; + // if font awesome + if (newNotifySettings.useFontAwesome) { + messageIconH = Math.round(parseInt(messageIcon.offsetHeight)); + } + // if notiflix SVG + else { + var SvgBBox = messageIcon.getBBox(); + messageIconH = Math.round(parseInt(SvgBBox.width)); + } + var messageText = document.getElementById(ntflxNotify.id).querySelectorAll('span')[0]; + var messageTextH = Math.round(messageText.offsetHeight); + if (messageTextH <= messageIconH) { + messageText.style.paddingTop = (messageIconH - messageTextH) / 2 + 'px'; + messageText.style.paddingBottom = (messageIconH - messageTextH) / 2 + 'px'; + } + } + // notify append or prepend off + + // remove by timeout or click on + if (document.getElementById(ntflxNotify.id)) { + // set elements on + var removeDiv = document.getElementById(ntflxNotify.id); + var removeWrap = document.getElementById(ntflxNotifyWrap.id); + var removeOverlay; + if (newNotifySettings.backOverlay) { + removeOverlay = document.getElementById(notifyOverlay.id); + } + // set elements on + + // timeout vars on + var timeoutHide; + var timeoutRemove; + // timeout vars off + + // hide notify elm and hide overlay on + var hideNotifyElementsAndOverlay = function () { + removeDiv.classList.add('remove'); + if (newNotifySettings.backOverlay && removeWrap.childElementCount <= 0) { + removeOverlay.classList.add('remove'); + } + clearTimeout(timeoutHide); + }; + // hide notify elm and hide overlay off + + // remove notify elm and wrapper on + var removeNotifyElmentsAndWrapper = function () { + var notifyExist = document.getElementById(ntflxNotify.id); + if (notifyExist && removeDiv.parentNode !== null) { + removeDiv.parentNode.removeChild(removeDiv); + } + if (removeWrap.childElementCount <= 0 && removeWrap.parentNode !== null) { // if childs count === 0 remove wrap + removeWrap.parentNode.removeChild(removeWrap); + if (newNotifySettings.backOverlay && removeOverlay.parentNode !== null) { + removeOverlay.parentNode.removeChild(removeOverlay); + } + } + clearTimeout(timeoutRemove); + }; + // remove notify elm and wrapper off + + // if close button and callback undefined on + if (newNotifySettings.closeButton && !callback) { + var closeButtonElm = document.getElementById(ntflxNotify.id).querySelectorAll('span.notify-close-button')[0]; + closeButtonElm.addEventListener('click', function () { + hideNotifyElementsAndOverlay(); + var clickToCloseTimeout = setTimeout(function () { + removeNotifyElmentsAndWrapper(); + clearTimeout(clickToCloseTimeout); + }, newNotifySettings.cssAnimationDuration); + }); + } + // if close button and callback undefined off + + // if callback or click to close on + if ((callback && typeof callback === 'function') || newNotifySettings.clickToClose) { + removeDiv.addEventListener('click', function (e) { + if (callback && typeof callback === 'function') { + callback(); + } + hideNotifyElementsAndOverlay(); + var callbackTimeout = setTimeout(function () { + removeNotifyElmentsAndWrapper(); + clearTimeout(callbackTimeout); + }, newNotifySettings.cssAnimationDuration); + }); + } + // if callback or click to close off + + // else auto remove on + if (!newNotifySettings.closeButton && !callback) { + timeoutHide = setTimeout(function () { + hideNotifyElementsAndOverlay(); + }, newNotifySettings.timeout); + timeoutRemove = setTimeout(function () { + removeNotifyElmentsAndWrapper(); + }, newNotifySettings.timeout + newNotifySettings.cssAnimationDuration); + } + // else auto remove off + } + // remove by timeout or click off + + // notify - show only the last one on + if (newNotifySettings.showOnlyTheLastOne && notiflixNotifyCount > 0) { + var allNotifyElmNotTheLastOne = document.querySelectorAll('[id^=' + newNotifySettings.ID + '-]:not([id=' + newNotifySettings.ID + '-' + notiflixNotifyCount + '])'); + for (var i = 0; i < allNotifyElmNotTheLastOne.length; i++) { + var eachNotifyElmNotLastOne = allNotifyElmNotTheLastOne[i]; + if (eachNotifyElmNotLastOne.parentNode !== null) { + eachNotifyElmNotLastOne.parentNode.removeChild(eachNotifyElmNotLastOne); + } + } + } + // notify - show only the last one off + + } else { + notiflixConsoleError('Notiflix Error', 'Where is the arguments?'); + } + }; + // Notiflix: Notify Single off + + + // Notiflix: Report Single on + var NotiflixReport = function (title, message, buttonText, buttonCallback, theType, staticType) { + + // check the arguments on + if (!title) { title = 'Notiflix ' + staticType; } + if (!message) { + if (staticType === 'Success') { + message = '"Do not try to become a person of success but try to become a person of value."

- Albert Einstein'; + } + else if (staticType === 'Failure') { + message = '"Failure is simply the opportunity to begin again, this time more intelligently."

- Henry Ford'; + } + else if (staticType === 'Warning') { + message = '"The peoples who want to live comfortably without producing and fatigue; they are doomed to lose their dignity, then liberty, and then independence and destiny."

- Mustafa Kemal Ataturk'; + } + else if (staticType === 'Info') { + message = '"Knowledge rests not upon truth alone, but upon error also."

- Carl Gustav Jung'; + } + } + if (!buttonText) { buttonText = 'Okay'; } + if (!buttonCallback) { buttonCallback = undefined; } + // check the arguments off + + // if plainText true = HTML tags not allowed on + if (newReportSettings.plainText) { + title = notiflixPlaintext(title); + message = notiflixPlaintext(message); + buttonText = notiflixPlaintext(buttonText); + } + // if plainText true = HTML tags not allowed off + + // if plainText false but the contents length more than *MaxLength = HTML tags error on + if (!newReportSettings.plainText) { + if (title.length > newReportSettings.titleMaxLength) { + title = 'HTML Tags Error'; // title html error + message = 'Your Title content length is more than "titleMaxLength" option.'; // message html error + buttonText = 'Okay'; // button html error + } + if (message.length > newReportSettings.messageMaxLength) { + title = 'HTML Tags Error'; // title html error + message = 'Your Message content length is more than "messageMaxLength" option.'; // message html error + buttonText = 'Okay'; // button html error + } + if (buttonText.length > newReportSettings.buttonMaxLength) { + title = 'HTML Tags Error'; // title html error + message = 'Your Button content length is more than "buttonMaxLength" option.'; // message html error + buttonText = 'Okay'; // button html error + } + } + // if plainText false but the contents length more than *MaxLength = HTML tags error off + + // max length on + if (title.length > newReportSettings.titleMaxLength) { + title = title.substring(0, newReportSettings.titleMaxLength) + '...'; + } + if (message.length > newReportSettings.messageMaxLength) { + message = message.substring(0, newReportSettings.messageMaxLength) + '...'; + } + if (buttonText.length > newReportSettings.buttonMaxLength) { + buttonText = buttonText.substring(0, newReportSettings.buttonMaxLength) + '...'; + } + // max length off + + // if cssAnimaion false -> duration on + if (!newReportSettings.cssAnimation) { + newReportSettings.cssAnimationDuration = 0; + } + // if cssAnimaion false -> duration off + + // report wrap on + var docBody = document.body; + var ntflxReportWrap = document.createElement('div'); + ntflxReportWrap.id = reportSettings.ID; + ntflxReportWrap.className = newReportSettings.className; + ntflxReportWrap.style.width = newReportSettings.width; + ntflxReportWrap.style.zIndex = newReportSettings.zindex; + ntflxReportWrap.style.borderRadius = newReportSettings.borderRadius; + ntflxReportWrap.style.fontFamily = '"' + newReportSettings.fontFamily + '"' + ', sans-serif'; + + // rtl on + if (newReportSettings.rtl) { + ntflxReportWrap.setAttribute('dir', 'rtl'); + ntflxReportWrap.classList.add('rtl-on'); + } + // rtl off + + // overlay on + var reportOverlay = ''; + if (newReportSettings.backOverlay) { + reportOverlay = '
'; + } + // overlay off + + // svg icon on + var svgIcon = ''; + if (staticType === 'Success') { + svgIcon = notiflixReportSvgSuccess(newReportSettings.svgSize, theType.svgColor); + } else if (staticType === 'Failure') { + svgIcon = notiflixReportSvgFailure(newReportSettings.svgSize, theType.svgColor); + } else if (staticType === 'Warning') { + svgIcon = notiflixReportSvgWarning(newReportSettings.svgSize, theType.svgColor); + } else if (staticType === 'Info') { + svgIcon = notiflixReportSvgInfo(newReportSettings.svgSize, theType.svgColor); + } + // svg icon off + + ntflxReportWrap.innerHTML = reportOverlay + '
' + + '
' + svgIcon + '
' + + '
' + title + '
' + + '

' + message + '

' + + '' + buttonText + '' + + '
'; + + // if there is no report element + if (!document.getElementById(ntflxReportWrap.id)) { + // append + docBody.appendChild(ntflxReportWrap); + + // vertical align on + var windowH = Math.round(window.innerHeight); + var reportH = Math.round(document.getElementById(ntflxReportWrap.id).offsetHeight); + ntflxReportWrap.style.top = (windowH - reportH) / 2 + 'px'; + // vertical align off + + // callback on + var getReportWrap = document.getElementById(ntflxReportWrap.id); + var reportButton = document.getElementById('NXReportButton'); + reportButton.addEventListener('click', function () { + // if callback on + if (buttonCallback && typeof buttonCallback === 'function') { + buttonCallback(); + } + // if callback off + + // remove element on + getReportWrap.classList.add('remove'); + var timeout = setTimeout(function () { + if (getReportWrap.parentNode !== null) { + getReportWrap.parentNode.removeChild(getReportWrap); + } + clearTimeout(timeout); + }, newReportSettings.cssAnimationDuration); + // remove element off + }); + // callback off + + } + // report wrap off + + }; + // Notiflix: Report Single off + + + // Notiflix: Confirm Single on + var NotiflixConfirm = function (title, message, okButtonText, cancelButtonText, okButtonCallback, cancelButtonCallback) { + // if not initialized pretend like init + if (!newConfirmSettings) { + Notiflix.Confirm.Init({}); + } + + // if plainText true => HTML tags not allowed on + if (newConfirmSettings.plainText) { + title = notiflixPlaintext(title); + message = notiflixPlaintext(message); + okButtonText = notiflixPlaintext(okButtonText); + cancelButtonText = notiflixPlaintext(cancelButtonText); + } + // if plainText true => HTML tags not allowed off + + // if plainText false but the contents length more than *MaxLength = HTML tags error on + if (!newConfirmSettings.plainText) { + if (title.length > newConfirmSettings.titleMaxLength) { + title = 'HTML Tags Error'; // title html error + message = 'Your Title content length is more than "titleMaxLength" option.'; // message html error + okButtonText = 'Okay'; // button html error + cancelButtonText = '...'; // button html error + } + if (message.length > newConfirmSettings.messageMaxLength) { + title = 'HTML Tags Error'; // title html error + message = 'Your Message content length is more than "messageMaxLength" option.'; // message html error + okButtonText = 'Okay'; // button html error + cancelButtonText = '...'; // button html error + } + if ((okButtonText.length || cancelButtonText.length) > newConfirmSettings.buttonsMaxLength) { + title = 'HTML Tags Error'; // title html error + message = 'Your Buttons contents length is more than "buttonsMaxLength" option.'; // message html error + okButtonText = 'Okay'; // button html error + cancelButtonText = '...'; // button html error + } + } + // if plainText false but the contents length more than *MaxLength = HTML tags error off + + // max length on + if (title.length > newConfirmSettings.titleMaxLength) { + title = title.substring(0, newConfirmSettings.titleMaxLength) + '...'; + } + if (message.length > newConfirmSettings.messageMaxLength) { + message = message.substring(0, newConfirmSettings.messageMaxLength) + '...'; + } + if (okButtonText.length > newConfirmSettings.buttonsMaxLength) { + okButtonText = okButtonText.substring(0, newConfirmSettings.buttonsMaxLength) + '...'; + } + if (cancelButtonText.length > newConfirmSettings.buttonsMaxLength) { + cancelButtonText = cancelButtonText.substring(0, newConfirmSettings.buttonsMaxLength) + '...'; + } + // max length off + + // if cssAnimaion false -> duration on + if (!newConfirmSettings.cssAnimation) { + newConfirmSettings.cssAnimationDuration = 0; + } + // if cssAnimaion false -> duration off + + // confirm wrap on + var docBody = document.body; + var ntflxConfirmWrap = document.createElement('div'); + ntflxConfirmWrap.id = confirmSettings.ID; + ntflxConfirmWrap.className = newConfirmSettings.className + (newConfirmSettings.cssAnimation ? ' with-animation nx-' + newConfirmSettings.cssAnimationStyle : ''); + ntflxConfirmWrap.style.width = newConfirmSettings.width; + ntflxConfirmWrap.style.zIndex = newConfirmSettings.zindex; + + // rtl on + if (newConfirmSettings.rtl) { + ntflxConfirmWrap.setAttribute('dir', 'rtl'); + ntflxConfirmWrap.classList.add('rtl-on'); + } + // rtl off + + // font-family on + ntflxConfirmWrap.style.fontFamily = '"' + newConfirmSettings.fontFamily + '"' + ', sans-serif'; + // font-family off + + // if background overlay true on + var confirmOverlay = ''; + if (newConfirmSettings.backOverlay) { + confirmOverlay = '
'; + } + // if background overlay true off + + // if have a callback => add cancel button on + var cancelButtonHTML = ''; + if (okButtonCallback) { + cancelButtonHTML = '' + cancelButtonText + ''; + } + // if have a callback => add cancel button off + + ntflxConfirmWrap.innerHTML = confirmOverlay + + '
' + + '
' + + '
' + title + '
' + + '

' + message + '

' + + '
' + + '
' + + '' + okButtonText + '' + + cancelButtonHTML + + '
' + + '
'; + // confirm wrap off + + // if there is no confirm box on + if (!document.getElementById(ntflxConfirmWrap.id)) { + docBody.appendChild(ntflxConfirmWrap); + + // position on + if (newConfirmSettings.position === 'center') { // if center-center + var windowH = Math.round(window.innerHeight); + var confirmH = Math.round(document.getElementById(ntflxConfirmWrap.id).offsetHeight); + ntflxConfirmWrap.style.top = (windowH - confirmH) / 2 + 'px'; + ntflxConfirmWrap.style.left = newConfirmSettings.distance; + ntflxConfirmWrap.style.right = newConfirmSettings.distance; + ntflxConfirmWrap.style.bottom = 'auto'; + ntflxConfirmWrap.style.margin = 'auto'; + } else if (newConfirmSettings.position === 'right-top') { // if right-top + ntflxConfirmWrap.style.right = newConfirmSettings.distance; + ntflxConfirmWrap.style.top = newConfirmSettings.distance; + ntflxConfirmWrap.style.bottom = 'auto'; + ntflxConfirmWrap.style.left = 'auto'; + ntflxConfirmWrap.style.margin = 'auto'; + } else if (newConfirmSettings.position === 'right-bottom') { // if right-bottom + ntflxConfirmWrap.style.right = newConfirmSettings.distance; + ntflxConfirmWrap.style.bottom = newConfirmSettings.distance; + ntflxConfirmWrap.style.top = 'auto'; + ntflxConfirmWrap.style.left = 'auto'; + ntflxConfirmWrap.style.margin = 'auto'; + } else if (newConfirmSettings.position === 'left-top') { // if left-top + ntflxConfirmWrap.style.left = newConfirmSettings.distance; + ntflxConfirmWrap.style.top = newConfirmSettings.distance; + ntflxConfirmWrap.style.right = 'auto'; + ntflxConfirmWrap.style.bottom = 'auto'; + ntflxConfirmWrap.style.margin = 'auto'; + } else if (newConfirmSettings.position === 'left-bottom') { // if left-bottom + ntflxConfirmWrap.style.left = newConfirmSettings.distance; + ntflxConfirmWrap.style.bottom = newConfirmSettings.distance; + ntflxConfirmWrap.style.top = 'auto'; + ntflxConfirmWrap.style.right = 'auto'; + ntflxConfirmWrap.style.margin = 'auto'; + } else { // if center-top + ntflxConfirmWrap.style.top = newConfirmSettings.distance; + ntflxConfirmWrap.style.left = 0; + ntflxConfirmWrap.style.right = 0; + ntflxConfirmWrap.style.bottom = 'auto'; + ntflxConfirmWrap.style.margin = 'auto'; + } + // position off + + // buttons listener on + var confirmCloseWrap = document.getElementById(ntflxConfirmWrap.id); + var okButton = document.getElementById('NXConfirmButtonOk'); + + // ok button listener on + okButton.addEventListener('click', function () { + // if ok callback && if ok callback is a function + if (okButtonCallback && typeof okButtonCallback === 'function') { + okButtonCallback(); + } + confirmCloseWrap.classList.add('remove'); + + var timeout = setTimeout(function () { + if (confirmCloseWrap.parentNode !== null) { + confirmCloseWrap.parentNode.removeChild(confirmCloseWrap); + clearTimeout(timeout); + } + }, newConfirmSettings.cssAnimationDuration); + }); + // ok button listener off + + // if ok callback && if ok callback a function => add Cancel Button listener on + if (okButtonCallback && typeof okButtonCallback === 'function') { + // cancel button listener on + var cancelButton = document.getElementById('NXConfirmButtonCancel'); + cancelButton.addEventListener('click', function () { + // if cancel callback && if cancel callback a function + if (cancelButtonCallback && typeof cancelButtonCallback === 'function') { + cancelButtonCallback(); + } + confirmCloseWrap.classList.add('remove'); + + var timeout = setTimeout(function () { + if (confirmCloseWrap.parentNode !== null) { + confirmCloseWrap.parentNode.removeChild(confirmCloseWrap); + clearTimeout(timeout); + } + }, newConfirmSettings.cssAnimationDuration); + }); + // cancel button listener off + } + // if ok callback && if ok callback a function => add Cancel Button listener off + // buttons listener off + } + // if there is no confirm box off + }; + // Notiflix: Confirm Single off + + + // Notiflix: Loading Single on + var NotiflixLoading = function (message, iconType, display, theDelay) { + // if not initialized pretend like init + if (!newLoadingSettings) { + Notiflix.Loading.Init({}); + } + // check the message + if (!message) { + message = ''; + } + // show loading + if (display) { + + // if message settings on + if (message.toString().length > newLoadingSettings.messageMaxLength) { + message = notiflixPlaintext(message).toString().substring(0, newLoadingSettings.messageMaxLength) + '...'; + } else { + message = notiflixPlaintext(message).toString(); + } + var intSvgSize = parseInt(newLoadingSettings.svgSize); + var messageHTML = ''; + if (message.length > 0) { + var messagePosTop = Math.round(intSvgSize - (intSvgSize / 4)).toString() + 'px'; + var messageHeight = (parseInt(newLoadingSettings.messageFontSize) * 1.4).toString() + 'px'; + messageHTML = '

' + message + '

'; + } + // if message settings off + + // if cssAnimaion false -> duration on + if (!newLoadingSettings.cssAnimation) { + newLoadingSettings.cssAnimationDuration = 0; + } + // if cssAnimaion false -> duration off + + // svgIcon on + var svgIcon = ''; + if (iconType === 'standard') { + svgIcon = notiflixIndicatorSvgStandard(newLoadingSettings.svgSize, newLoadingSettings.svgColor); + } else if (iconType === 'hourglass') { + svgIcon = notiflixIndicatorSvgHourglass(newLoadingSettings.svgSize, newLoadingSettings.svgColor); + } else if (iconType === 'circle') { + svgIcon = notiflixIndicatorSvgCircle(newLoadingSettings.svgSize, newLoadingSettings.svgColor); + } else if (iconType === 'arrows') { + svgIcon = notiflixIndicatorSvgArrows(newLoadingSettings.svgSize, newLoadingSettings.svgColor); + } else if (iconType === 'dots') { + svgIcon = notiflixIndicatorSvgDots(newLoadingSettings.svgSize, newLoadingSettings.svgColor); + } else if (iconType === 'pulse') { + svgIcon = notiflixIndicatorSvgPulse(newLoadingSettings.svgSize, newLoadingSettings.svgColor); + } else if (iconType === 'custom' && newLoadingSettings.customSvgUrl !== null) { + svgIcon = 'Notiflix'; + } else if (iconType === 'custom' && newLoadingSettings.customSvgUrl == null) { + notiflixConsoleError('Notiflix Error', 'You have to set a static SVG url to "customSvgUrl" option to use Loading Custom.'); + return false; + } else if (iconType === 'notiflix') { + svgIcon = notiflixIndicatorSvgNotiflix(newLoadingSettings.svgSize, '#f8f8f8', '#32c682'); + } + var svgPosTop = 0; + if (message.length > 0) { + svgPosTop = '-' + Math.round(intSvgSize - (intSvgSize / 4)).toString() + 'px'; + } + var svgIconHTML = '
' + svgIcon + '
'; + // svgIcon off + + // loading wrap on + var docBody = document.body; + var ntflxLoadingWrap = document.createElement('div'); + ntflxLoadingWrap.id = loadingSettings.ID; + ntflxLoadingWrap.className = newLoadingSettings.className + (newLoadingSettings.cssAnimation ? ' with-animation' : '') + (newLoadingSettings.clickToClose ? ' click-to-close' : ''); + ntflxLoadingWrap.style.zIndex = newLoadingSettings.zindex; + ntflxLoadingWrap.style.background = newLoadingSettings.backgroundColor; + ntflxLoadingWrap.style.animationDuration = newLoadingSettings.cssAnimationDuration + 'ms'; + ntflxLoadingWrap.style.fontFamily = '"' + newLoadingSettings.fontFamily + '"' + ', sans-serif'; + + // rtl on + if (newLoadingSettings.rtl) { + ntflxLoadingWrap.setAttribute('dir', 'rtl'); + ntflxLoadingWrap.classList.add('rtl-on'); + } + // rtl off + + // append on + ntflxLoadingWrap.innerHTML = svgIconHTML + messageHTML; + + // if there is no loading element + if (!document.getElementById(ntflxLoadingWrap.id)) { + // append + docBody.appendChild(ntflxLoadingWrap); + + // if click to close + if (newLoadingSettings.clickToClose) { + var loadingWrapElm = document.getElementById(ntflxLoadingWrap.id); + loadingWrapElm.addEventListener('click', function () { + ntflxLoadingWrap.classList.add('remove'); + var timeout = setTimeout(function () { + if (ntflxLoadingWrap.parentNode !== null) { + ntflxLoadingWrap.parentNode.removeChild(ntflxLoadingWrap); + clearTimeout(timeout); + } + }, newLoadingSettings.cssAnimationDuration); + }); + } + } + // append off + + } + // remove loading + else { + // if there is a loading element + if (document.getElementById(loadingSettings.ID)) { + var loadingElm = document.getElementById(loadingSettings.ID); + var timeout = setTimeout(function () { + loadingElm.classList.add('remove'); + var timeout2 = setTimeout(function () { + if (loadingElm.parentNode !== null) { + loadingElm.parentNode.removeChild(loadingElm); + clearTimeout(timeout2); + } + }, newLoadingSettings.cssAnimationDuration); + clearTimeout(timeout); + }, theDelay); + } + } + }; + // Notiflix: Loading Single off + + // Notiflix: Loading Change Message on + var NotiflixLoadingChange = function (newMessage) { + // check the new message + if (!newMessage) { + newMessage = ''; + } + // if has any loading + if (document.getElementById(loadingSettings.ID)) { + // if there is a new message + if (newMessage.length > 0) { + // max length on + if (newMessage.length > newLoadingSettings.messageMaxLength) { + newMessage = notiflixPlaintext(newMessage).toString().substring(0, newLoadingSettings.messageMaxLength) + '...'; + } else { + newMessage = notiflixPlaintext(newMessage).toString(); + } + // max length off + + // there is a message element + var oldMessageElm = document.getElementById(loadingSettings.ID).getElementsByTagName('p')[0]; + if (oldMessageElm) { + oldMessageElm.innerHTML = newMessage; // change the message + } + // there is no message element + else { + // create a new message element on + var newMessageHTML = document.createElement('p'); + newMessageHTML.id = newLoadingSettings.messageID; + newMessageHTML.className = 'loading-message new'; + newMessageHTML.style.color = newLoadingSettings.messageColor; + newMessageHTML.style.fontSize = newLoadingSettings.messageFontSize; + var intSvgSize = parseInt(newLoadingSettings.svgSize); + var messagePosTop = Math.round(intSvgSize - (intSvgSize / 4)).toString() + 'px'; + newMessageHTML.style.top = messagePosTop; + var messageHeight = (parseInt(newLoadingSettings.messageFontSize) * 1.4).toString() + 'px'; + newMessageHTML.style.height = messageHeight; + newMessageHTML.innerHTML = newMessage; + var messageWrap = document.getElementById(loadingSettings.ID); + messageWrap.appendChild(newMessageHTML); + // create a new message element off + + // vertical align svg on + var svgDivElm = document.getElementById(loadingSettings.ID).getElementsByTagName('div')[0]; + var svgNewPosTop = '-' + Math.round(intSvgSize - (intSvgSize / 4)).toString() + 'px'; + svgDivElm.style.top = svgNewPosTop; + // vertical align svg off + } + } + // if no message + else { + notiflixConsoleError('Notiflix Error', 'Where is the new message?'); + } + } + }; + // Notiflix: Loading Change Message off + + + // Notiflix: Block or Unblock Element on + var notiflixBlockElementCounter = 0; + var NotiflixBlockUnblockElement = function (block, selector, iconType, message, theDelay) { + + // check typeof selector on + if (typeof selector !== 'string') { + notiflixConsoleError('Notiflix Error', 'The selector must be a String.'); + return false; + } + // check typeof selector off + + // check the delay on + if (typeof theDelay !== 'number') { + theDelay = 0; + } + // check the delay off + + // check the selector on + var getSelector = document.querySelectorAll(selector); + if (getSelector.length > 0) { + + // if not initialized pretend like init on + if (!newBlockSettings) { + Notiflix.Block.Init({}); + } + // if not initialized pretend like init off + + // check the message on + if (!message || (message && typeof message !== 'string')) { + message = undefined; + } + // check the message off + + } else { + notiflixConsoleError('Notiflix Error', 'You called the "Notiflix.Block..." function with "' + selector + '" selector, but there is no such element(s) on the document.'); + return false; + } + // check the selector off + + // if cssAnimaion false => duration on + if (!newBlockSettings.cssAnimation) { + newBlockSettings.cssAnimationDuration = 0; + } + // if cssAnimaion false => duration off + + // check the class name on + var blockClassName = 'notiflix-block'; + if (newBlockSettings.className && typeof newBlockSettings.className === 'string') { + blockClassName = newBlockSettings.className.trim(); + } + // check the class name off + + // check query limit on + var getQueryLimit = (typeof newBlockSettings.querySelectorLimit === 'number' ? newBlockSettings.querySelectorLimit : 200); + var checkQueryLimit = (getSelector.length >= getQueryLimit ? getQueryLimit : getSelector.length); + // check query limit off + + // block + if (block) { + + // add element(s) and style on + for (var i = 0; i < checkQueryLimit; i++) { + var eachSelector = getSelector[i]; + + // check block element exist on + var eachBlockElement = eachSelector.querySelectorAll('[id^=' + blockSettings.ID + ']'); + if (eachBlockElement.length < 1) { + + // check the icon on + var icon = ''; + if (iconType) { + if (iconType === 'hourglass') { + icon = notiflixIndicatorSvgHourglass(newBlockSettings.svgSize, newBlockSettings.svgColor); + } else if (iconType === 'circle') { + icon = notiflixIndicatorSvgCircle(newBlockSettings.svgSize, newBlockSettings.svgColor); + } else if (iconType === 'arrows') { + icon = notiflixIndicatorSvgArrows(newBlockSettings.svgSize, newBlockSettings.svgColor); + } else if (iconType === 'dots') { + icon = notiflixIndicatorSvgDots(newBlockSettings.svgSize, newBlockSettings.svgColor); + } else if (iconType === 'pulse') { + icon = notiflixIndicatorSvgPulse(newBlockSettings.svgSize, newBlockSettings.svgColor); + } else { + icon = notiflixIndicatorSvgStandard(newBlockSettings.svgSize, newBlockSettings.svgColor); + } + } + var intSvgSize = parseInt(newBlockSettings.svgSize); + var posRatio = Math.round(intSvgSize - (intSvgSize / 5)).toString() + 'px'; + var svgPosTop = (message && message.length > 0 ? '-' + posRatio : 0); + var iconElement = '' + icon + ''; + // check the icon off + + // check the message on + var messageElement = ''; + var messageHeight = 0; + if (message) { + if (message.length > newBlockSettings.messageMaxLength) { + message = notiflixPlaintext(message).toString().substring(0, newBlockSettings.messageMaxLength) + '...'; + } else { + message = notiflixPlaintext(message).toString(); + } + messageHeight = Math.round(parseInt(newBlockSettings.messageFontSize) * 1.4).toString() + 'px'; + messageElement = '' + message + ''; + } + // check the message off + + // block element on + notiflixBlockElementCounter++; + var notiflixBlockWrap = document.createElement('div'); + notiflixBlockWrap.id = blockSettings.ID + '-' + notiflixBlockElementCounter; + notiflixBlockWrap.className = blockClassName + '-wrap' + (newBlockSettings.cssAnimation ? ' with-animation' : ''); + notiflixBlockWrap.style.position = newBlockSettings.position; + notiflixBlockWrap.style.zIndex = newBlockSettings.zindex; + notiflixBlockWrap.style.background = newBlockSettings.backgroundColor; + notiflixBlockWrap.style.animationDuration = newBlockSettings.cssAnimationDuration + 'ms'; + notiflixBlockWrap.style.fontFamily = '"' + newBlockSettings.fontFamily + '"' + ', sans-serif'; + // block element off + + // block element rtl on + if (newBlockSettings.rtl) { + notiflixBlockWrap.setAttribute('dir', 'rtl'); + notiflixBlockWrap.classList.add('rtl-on'); + } + // block element rtl off + + // block element data on + notiflixBlockWrap.innerHTML = iconElement + messageElement; + // block element data off + + // append block element on + var eachSelectorPos = getComputedStyle(eachSelector).getPropertyValue('position'); + eachSelectorPos = eachSelectorPos && typeof eachSelectorPos === 'string' ? eachSelectorPos.toLowerCase() : 'relative'; + + // selector internal style on + var eachSelectorIdOrClass = ''; + if (eachSelector.getAttribute('id')) { + eachSelectorIdOrClass = '#' + eachSelector.getAttribute('id'); + } else if (eachSelector.classList[0]) { + eachSelectorIdOrClass = '.' + eachSelector.classList[0]; + } + + var positions = ['absolute', 'relative', 'fixed', 'sticky']; + if (positions.indexOf(eachSelectorPos) <= -1) { + var minHeight = Math.round((parseInt(messageHeight) + intSvgSize) * 1.5).toString() + 'px'; + var style = ''; + var styleRange = document.createRange(); + styleRange.selectNode(document.head); + var styleFragment = styleRange.createContextualFragment(style); + document.head.appendChild(styleFragment); + eachSelector.classList.add(blockClassName + '-position'); + } + // selector internal style off + + // append + eachSelector.appendChild(notiflixBlockWrap); + // append block element off + } + // check block element exist off + } + // add element(s) and style off + } + // unblock/remove + else { + + // Step 3 => Remove each block element on + var removeBlockElements = function (eachOne) { + var timeout = setTimeout(function () { + // remove element + eachOne.remove(); + + // remove this selector internal style + var eachOneId = eachOne.getAttribute('id'); + var eachOneStyle = document.getElementById('Style-' + eachOneId); + if (eachOneStyle) { + eachOneStyle.remove(); + } + + // clear timeout + clearTimeout(timeout); + }, newBlockSettings.cssAnimationDuration); + } + // Step 3 => Remove each block element off + + // Step 2A => Remove each block element on + var removeClassBlockElements = function (eachBlockElement) { + // if elements exist + if (eachBlockElement && eachBlockElement.length > 0) { + for (var i = 0; i < eachBlockElement.length; i++) { + var eachOne = eachBlockElement[i]; + if (eachOne) { + // add remove class + eachOne.classList.add('remove'); + // remove block elements + removeBlockElements(eachOne); + } + } + } + // not exist + else { + notiflixConsoleLog('Notiflix Info', '"Notiflix.Block.Remove();" function called with "' + selector + '" selector, but this selector does not have a "Notiflix.Block..." element to remove.'); + } + } + // Step 2A => Remove each block element on + + // Step 2B => Remove each selector class name on + var removeEachSelectorClassName = function (eachSelector) { + var timeout = setTimeout(function () { + // remove class name + var positionClass = blockClassName + '-position'; + eachSelector.classList.remove(positionClass); + + // clear timeout + clearTimeout(timeout); + }, newBlockSettings.cssAnimationDuration + 300); + } + // Step 2B => Remove each selector class name off + + // Step 1 => Remove selector class name on + var selectorTimeout = setTimeout(function () { + for (var i = 0; i < checkQueryLimit; i++) { + var eachSelector = getSelector[i]; + + // remove each selector class name + removeEachSelectorClassName(eachSelector); + + // remove each block element + eachBlockElement = eachSelector.querySelectorAll('[id^=' + blockSettings.ID + ']'); + removeClassBlockElements(eachBlockElement); + } + // clear timeout + clearTimeout(selectorTimeout); + }, theDelay); + // Step 1 => Remove selector class name off + } + }; + // Notiflix: Block or Unblock Element off + + + // Notiflix: Report SVG Success on + var notiflixReportSvgSuccess = function (width, color) { + if (!width) { width = '110px'; } + if (!color) { color = '#32c682'; } + var reportSvgSuccess = ''; + return reportSvgSuccess; + }; + // Notiflix: Report SVG Success off + + // Notiflix: Report SVG Failure on + var notiflixReportSvgFailure = function (width, color) { + if (!width) { width = '110px'; } + if (!color) { color = '#ff5549'; } + var reportSvgFailure = ''; + return reportSvgFailure; + }; + // Notiflix: Report SVG Failure off + + // Notiflix: Report SVG Warning on + var notiflixReportSvgWarning = function (width, color) { + if (!width) { width = '110px'; } + if (!color) { color = '#eebf31'; } + var reportSvgWarning = ''; + return reportSvgWarning; + }; + // Notiflix: Report SVG Warning off + + // Notiflix: Report SVG Info on + var notiflixReportSvgInfo = function (width, color) { + if (!width) { width = '110px'; } + if (!color) { color = '#26c0d3'; } + var reportSvgInfo = ''; + return reportSvgInfo; + }; + // Notiflix: Report SVG Info off + + + // Notiflix: Indicator SVG standard on + var notiflixIndicatorSvgStandard = function (width, color) { + if (!width) { width = '60px'; } + if (!color) { color = '#32c682'; } + var standard = ''; + return standard; + }; + // Notiflix: Indicator SVG standard off + + // Notiflix: Indicator SVG hourglass on + var notiflixIndicatorSvgHourglass = function (width, color) { + if (!width) { width = '60px'; } + if (!color) { color = '#32c682'; } + var hourglass = ' '; + return hourglass; + }; + // Notiflix: Indicator SVG hourglass off + + // Notiflix: Indicator SVG circle on + var notiflixIndicatorSvgCircle = function (width, color) { + if (!width) { width = '60px'; } + if (!color) { color = '#32c682'; } + var circle = ''; + return circle; + }; + // Notiflix: Indicator SVG circle off + + // Notiflix: Indicator SVG arrows on + var notiflixIndicatorSvgArrows = function (width, color) { + if (!width) { width = '60px'; } + if (!color) { color = '#32c682'; } + var arrows = ''; + return arrows; + }; + // Notiflix: Indicator SVG arrows off + + // Notiflix: Indicator SVG dots on + var notiflixIndicatorSvgDots = function (width, color) { + if (!width) { width = '60px'; } + if (!color) { color = '#32c682'; } + var dots = ' '; + return dots; + }; + // Notiflix: Indicator SVG dots off + + // Notiflix: Indicator SVG pulse on + var notiflixIndicatorSvgPulse = function (width, color) { + if (!width) { width = '60px'; } + if (!color) { color = '#32c682'; } + var pulse = ''; + return pulse; + }; + // Notiflix: Indicator SVG pulse off + + // Notiflix: Indicator SVG notiflix on + var notiflixIndicatorSvgNotiflix = function (width, white, green) { + if (!width) { width = '60px'; } + if (!white) { white = '#f8f8f8'; } + if (!green) { green = '#32c682'; } + var notiflixIcon = ''; + return notiflixIcon; + }; + // Notiflix: Indicator SVG notiflix off + + + /* + * 侧边滑出弹层插件 mSlider.js + * DH (https://denghao.me) + * 2018-07 + */ + (function(b, c) { + function a(d) { + this.opts = { + "direction": d.direction || "left", + "distance": d.distance || "60%", + "dom": this.Q(d.dom), + "time": d.time || "", + "maskClose": (d.maskClose + "").toString() !== "false" ? true : false, + "callback": d.callback || "" + }; + this.rnd = this.rnd(); + this.dom = this.opts.dom[0]; + this.wrap = ""; + this.inner = ""; + this.mask = ""; + this.init() + } + a.prototype = { + Q: function(d) { + return document.querySelectorAll(d) + }, + isMobile: function() { + return navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i) ? true : false + }, + addEvent: function(f, e, d) { + if (f.attachEvent) { + f.attachEvent("on" + e, d) + } else { + f.addEventListener(e, d, false) + } + }, + rnd: function() { + return Math.random().toString(36).substr(2, 6) + }, + init: function() { + var g = this; + if (!g.dom) { + console.log("未正确绑定弹窗容器"); + return + } + var d = document.createElement("div"); + var e = document.createElement("div"); + var f = document.createElement("div"); + d.setAttribute("class", "mSlider-main ms-" + g.rnd); + e.setAttribute("class", "mSlider-inner"); + f.setAttribute("class", "mSlider-mask"); + g.Q("body")[0].appendChild(d); + g.Q(".ms-" + g.rnd)[0].appendChild(e); + g.Q(".ms-" + g.rnd)[0].appendChild(f); + g.wrap = g.Q(".ms-" + g.rnd)[0]; + g.inner = g.Q(".ms-" + g.rnd + " .mSlider-inner")[0]; + g.mask = g.Q(".ms-" + g.rnd + " .mSlider-mask")[0]; + g.inner.appendChild(g.dom); + switch (g.opts.direction) { + case "top": + g.top = "0"; + g.left = "0"; + g.width = "100%"; + g.height = g.opts.distance; + g.translate = "0,-100%,0"; + break; + case "bottom": + g.bottom = "0"; + g.left = "0"; + g.width = "100%"; + g.height = g.opts.distance; + g.translate = "0,100%,0"; + break; + case "right": + g.top = "0"; + g.right = "0"; + g.width = g.opts.distance; + g.height = document.documentElement.clientHeight + "px"; + g.translate = "100%,0,0"; + break; + default: + g.top = "0"; + g.left = "0"; + g.width = g.opts.distance; + g.height = document.documentElement.clientHeight + "px"; + g.translate = "-100%,0,0" + } + g.wrap.style.display = "none"; + g.wrap.style.position = "fixed"; + g.wrap.style.top = "0"; + g.wrap.style.left = "0"; + g.wrap.style.width = "100%"; + g.wrap.style.height = "100%"; + g.wrap.style.zIndex = 99; + g.inner.style.position = "absolute"; + g.inner.style.top = g.top; + g.inner.style.bottom = g.bottom; + g.inner.style.left = g.left; + g.inner.style.right = g.right; + g.inner.style.width = g.width; + g.inner.style.height = g.height; + g.inner.style.backgroundColor = "#fff"; + g.inner.style.transform = "translate3d(" + g.translate + ")"; + g.inner.style.webkitTransition = "all .2s ease-out"; + g.inner.style.transition = "all .2s ease-out"; + g.inner.style.zIndex = 100; + g.mask.style.width = "100%"; + g.mask.style.height = "100%"; + g.mask.style.opacity = "0"; + g.mask.style.backgroundColor = "black"; + g.mask.style.zIndex = "98"; + g.mask.style.webkitTransition = "all .2s ease-out"; + g.mask.style.transition = "all .2s ease-out"; + g.mask.style.webkitBackfaceVisibility = "hidden"; + g.events() + }, + open: function() { + var d = this; + d.wrap.style.display = "block"; + + setTimeout(function() { + d.inner.style.transform = "translate3d(0,0,0)"; + d.inner.style.webkitTransform = "translate3d(0,0,0)"; + d.mask.style.opacity = 0.5 + }, 30); + if (d.opts.time) { + d.timer = setTimeout(function() { + d.close() + }, d.opts.time) + } + }, + close: function() { + var d = this; + d.timer && clearTimeout(d.timer); + d.inner.style.webkitTransform = "translate3d(" + d.translate + ")"; + d.inner.style.transform = "translate3d(" + d.translate + ")"; + d.mask.style.opacity = 0; + setTimeout(function() { + d.wrap.style.display = "none"; + d.timer = null; + d.opts.callback && d.opts.callback() + }, 300) + }, + events: function() { + var d = this; + d.addEvent(d.mask, "touchmove", function(f) { + f.preventDefault() + }); + d.addEvent(d.mask, (d.isMobile() ? "touchend" : "click"), function(f) { + if (d.opts.maskClose) { + d.close() + } + }) + } + }; + b.mSlider = a + })(window); + + exports(MOD_NAME,pearOper); +}) + diff --git a/component/pear/pear.js b/component/pear/pear.js index f2885de..c9014e3 100644 --- a/component/pear/pear.js +++ b/component/pear/pear.js @@ -30,5 +30,6 @@ layui.config({ button: "button", design: "design", dropdown: "dropdown", - card: "card" + card: "card", + loading: "loading" }); diff --git a/view/document/loading.html b/view/document/loading.html new file mode 100644 index 0000000..4fd735b --- /dev/null +++ b/view/document/loading.html @@ -0,0 +1,149 @@ + + + + + + + + + +
+
加载组件
+
+
+ loading.Load(1,message); +
+
+ loading.Load(2,message); +
+
+ loading.Load(3,message); +
+
+ loading.Load(4,message); +
+
+ loading.Load(5,message); +
+
+ loading.remove(time); +
+
+
+ + + + + +
+
+ +
+
加载组件
+
+ + + + + + + + +
+ +
+
+ +
+ +
+ + + + + + \ No newline at end of file