Skip to content

P
pa2d4ti06
Commit 42e20a5f by Palti Sinaga
Options

tambah sweet popup

parent d7f65837
Showing with 1854 additions and 7 deletions
public/css/sweet-alert.css 0 → 100644
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,600,700,300);
.sweet-overlay {
background-color: rgba(0, 0, 0, 0.4);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: none;
z-index: 1000; }
.sweet-alert {
background-color: white;
font-family: 'Open Sans', sans-serif;
width: 478px;
padding: 17px;
border-radius: 5px;
text-align: center;
position: fixed;
left: 50%;
top: 50%;
margin-left: -256px;
margin-top: -200px;
overflow: hidden;
display: none;
z-index: 2000; }
@media all and (max-width: 540px) {
.sweet-alert {
width: auto;
margin-left: 0;
margin-right: 0;
left: 15px;
right: 15px; } }
.sweet-alert h2 {
color: #575757;
font-size: 30px;
text-align: center;
font-weight: 600;
text-transform: none;
position: relative;
margin: 25px 0;
padding: 0;
line-height: 25px;
display: block; }
.sweet-alert p {
color: #797979;
font-size: 16px;
text-align: center;
font-weight: 300;
position: relative;
margin: 0;
padding: 0;
line-height: normal; }
.sweet-alert button {
background-color: #AEDEF4;
color: white;
border: none;
box-shadow: none;
font-size: 17px;
font-weight: 500;
border-radius: 5px;
padding: 10px 32px;
margin: 26px 5px 0 5px;
cursor: pointer; }
.sweet-alert button:focus {
outline: none;
box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
.sweet-alert button:hover {
background-color: #a1d9f2; }
.sweet-alert button:active {
background-color: #81ccee; }
.sweet-alert button.cancel {
background-color: #D0D0D0; }
.sweet-alert button.cancel:hover {
background-color: #c8c8c8; }
.sweet-alert button.cancel:active {
background-color: #b6b6b6; }
.sweet-alert button.cancel:focus {
box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset !important; }
.sweet-alert button::-moz-focus-inner {
border: 0; }
.sweet-alert[data-has-cancel-button=false] button {
box-shadow: none !important; }
.sweet-alert .icon {
width: 80px;
height: 80px;
border: 4px solid gray;
border-radius: 50%;
margin: 20px auto;
padding: 0;
position: relative;
box-sizing: content-box; }
.sweet-alert .icon.error {
border-color: #F27474; }
.sweet-alert .icon.error .x-mark {
position: relative;
display: block; }
.sweet-alert .icon.error .line {
position: absolute;
height: 5px;
width: 47px;
background-color: #F27474;
display: block;
top: 37px;
border-radius: 2px; }
.sweet-alert .icon.error .line.left {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
left: 17px; }
.sweet-alert .icon.error .line.right {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 16px; }
.sweet-alert .icon.warning {
border-color: #F8BB86; }
.sweet-alert .icon.warning .body {
position: absolute;
width: 5px;
height: 47px;
left: 50%;
top: 10px;
border-radius: 2px;
margin-left: -2px;
background-color: #F8BB86; }
.sweet-alert .icon.warning .dot {
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
margin-left: -3px;
left: 50%;
bottom: 10px;
background-color: #F8BB86; }
.sweet-alert .icon.info {
border-color: #C9DAE1; }
.sweet-alert .icon.info::before {
content: "";
position: absolute;
width: 5px;
height: 29px;
left: 50%;
bottom: 17px;
border-radius: 2px;
margin-left: -2px;
background-color: #C9DAE1; }
.sweet-alert .icon.info::after {
content: "";
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
margin-left: -3px;
top: 19px;
background-color: #C9DAE1; }
.sweet-alert .icon.success {
border-color: #A5DC86; }
.sweet-alert .icon.success::before, .sweet-alert .icon.success::after {
content: '';
border-radius: 50%;
position: absolute;
width: 60px;
height: 120px;
background: white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.sweet-alert .icon.success::before {
border-radius: 120px 0 0 120px;
top: -7px;
left: -33px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 60px 60px;
transform-origin: 60px 60px; }
.sweet-alert .icon.success::after {
border-radius: 0 120px 120px 0;
top: -11px;
left: 30px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0px 60px;
transform-origin: 0px 60px; }
.sweet-alert .icon.success .placeholder {
width: 80px;
height: 80px;
border: 4px solid rgba(165, 220, 134, 0.2);
border-radius: 50%;
box-sizing: content-box;
position: absolute;
left: -4px;
top: -4px;
z-index: 2; }
.sweet-alert .icon.success .fix {
width: 5px;
height: 90px;
background-color: white;
position: absolute;
left: 28px;
top: 8px;
z-index: 1;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.sweet-alert .icon.success .line {
height: 5px;
background-color: #A5DC86;
display: block;
border-radius: 2px;
position: absolute;
z-index: 2; }
.sweet-alert .icon.success .line.tip {
width: 25px;
left: 14px;
top: 46px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.sweet-alert .icon.success .line.long {
width: 47px;
right: 8px;
top: 38px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.sweet-alert .icon.custom {
background-size: contain;
border-radius: 0;
border: none;
background-position: center center;
background-repeat: no-repeat; }
/*
* Animations
*/
@-webkit-keyframes showSweetAlert {
0% {
transform: scale(0.7);
-webkit-transform: scale(0.7); }
45% {
transform: scale(1.05);
-webkit-transform: scale(1.05); }
80% {
transform: scale(0.95);
-webkit-tranform: scale(0.95); }
100% {
transform: scale(1);
-webkit-transform: scale(1); } }
@-moz-keyframes showSweetAlert {
0% {
transform: scale(0.7);
-webkit-transform: scale(0.7); }
45% {
transform: scale(1.05);
-webkit-transform: scale(1.05); }
80% {
transform: scale(0.95);
-webkit-tranform: scale(0.95); }
100% {
transform: scale(1);
-webkit-transform: scale(1); } }
@keyframes showSweetAlert {
0% {
transform: scale(0.7);
-webkit-transform: scale(0.7); }
45% {
transform: scale(1.05);
-webkit-transform: scale(1.05); }
80% {
transform: scale(0.95);
-webkit-tranform: scale(0.95); }
100% {
transform: scale(1);
-webkit-transform: scale(1); } }
@-webkit-keyframes hideSweetAlert {
0% {
transform: scale(1);
-webkit-transform: scale(1); }
100% {
transform: scale(0.5);
-webkit-transform: scale(0.5); } }
@-moz-keyframes hideSweetAlert {
0% {
transform: scale(1);
-webkit-transform: scale(1); }
100% {
transform: scale(0.5);
-webkit-transform: scale(0.5); } }
@keyframes hideSweetAlert {
0% {
transform: scale(1);
-webkit-transform: scale(1); }
100% {
transform: scale(0.5);
-webkit-transform: scale(0.5); } }
.showSweetAlert {
-webkit-animation: showSweetAlert 0.3s;
-moz-animation: showSweetAlert 0.3s;
animation: showSweetAlert 0.3s; }
.hideSweetAlert {
-webkit-animation: hideSweetAlert 0.2s;
-moz-animation: hideSweetAlert 0.2s;
animation: hideSweetAlert 0.2s; }
@-webkit-keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px; }
54% {
width: 0;
left: 1px;
top: 19px; }
70% {
width: 50px;
left: -8px;
top: 37px; }
84% {
width: 17px;
left: 21px;
top: 48px; }
100% {
width: 25px;
left: 14px;
top: 45px; } }
@-moz-keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px; }
54% {
width: 0;
left: 1px;
top: 19px; }
70% {
width: 50px;
left: -8px;
top: 37px; }
84% {
width: 17px;
left: 21px;
top: 48px; }
100% {
width: 25px;
left: 14px;
top: 45px; } }
@keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px; }
54% {
width: 0;
left: 1px;
top: 19px; }
70% {
width: 50px;
left: -8px;
top: 37px; }
84% {
width: 17px;
left: 21px;
top: 48px; }
100% {
width: 25px;
left: 14px;
top: 45px; } }
@-webkit-keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px; }
65% {
width: 0;
right: 46px;
top: 54px; }
84% {
width: 55px;
right: 0px;
top: 35px; }
100% {
width: 47px;
right: 8px;
top: 38px; } }
@-moz-keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px; }
65% {
width: 0;
right: 46px;
top: 54px; }
84% {
width: 55px;
right: 0px;
top: 35px; }
100% {
width: 47px;
right: 8px;
top: 38px; } }
@keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px; }
65% {
width: 0;
right: 46px;
top: 54px; }
84% {
width: 55px;
right: 0px;
top: 35px; }
100% {
width: 47px;
right: 8px;
top: 38px; } }
@-webkit-keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg); }
5% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg); }
12% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg); }
100% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg); } }
@-moz-keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg); }
5% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg); }
12% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg); }
100% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg); } }
@keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg); }
5% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg); }
12% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg); }
100% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg); } }
.animateSuccessTip {
-webkit-animation: animateSuccessTip 0.75s;
-moz-animation: animateSuccessTip 0.75s;
animation: animateSuccessTip 0.75s; }
.animateSuccessLong {
-webkit-animation: animateSuccessLong 0.75s;
-moz-animation: animateSuccessLong 0.75s;
animation: animateSuccessLong 0.75s; }
.icon.success.animate::after {
-webkit-animation: rotatePlaceholder 4.25s ease-in;
-moz-animation: rotatePlaceholder 4.25s ease-in;
animation: rotatePlaceholder 4.25s ease-in; }
@-webkit-keyframes animateErrorIcon {
0% {
transform: rotateX(100deg);
-webkit-transform: rotateX(100deg);
opacity: 0; }
100% {
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
opacity: 1; } }
@-moz-keyframes animateErrorIcon {
0% {
transform: rotateX(100deg);
-webkit-transform: rotateX(100deg);
opacity: 0; }
100% {
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
opacity: 1; } }
@keyframes animateErrorIcon {
0% {
transform: rotateX(100deg);
-webkit-transform: rotateX(100deg);
opacity: 0; }
100% {
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
opacity: 1; } }
.animateErrorIcon {
-webkit-animation: animateErrorIcon 0.5s;
-moz-animation: animateErrorIcon 0.5s;
animation: animateErrorIcon 0.5s; }
@-webkit-keyframes animateXMark {
0% {
transform: scale(0.4);
-webkit-transform: scale(0.4);
margin-top: 26px;
opacity: 0; }
50% {
transform: scale(0.4);
-webkit-transform: scale(0.4);
margin-top: 26px;
opacity: 0; }
80% {
transform: scale(1.15);
-webkit-transform: scale(1.15);
margin-top: -6px; }
100% {
transform: scale(1);
-webkit-transform: scale(1);
margin-top: 0;
opacity: 1; } }
@-moz-keyframes animateXMark {
0% {
transform: scale(0.4);
-webkit-transform: scale(0.4);
margin-top: 26px;
opacity: 0; }
50% {
transform: scale(0.4);
-webkit-transform: scale(0.4);
margin-top: 26px;
opacity: 0; }
80% {
transform: scale(1.15);
-webkit-transform: scale(1.15);
margin-top: -6px; }
100% {
transform: scale(1);
-webkit-transform: scale(1);
margin-top: 0;
opacity: 1; } }
@keyframes animateXMark {
0% {
transform: scale(0.4);
-webkit-transform: scale(0.4);
margin-top: 26px;
opacity: 0; }
50% {
transform: scale(0.4);
-webkit-transform: scale(0.4);
margin-top: 26px;
opacity: 0; }
80% {
transform: scale(1.15);
-webkit-transform: scale(1.15);
margin-top: -6px; }
100% {
transform: scale(1);
-webkit-transform: scale(1);
margin-top: 0;
opacity: 1; } }
.animateXMark {
-webkit-animation: animateXMark 0.5s;
-moz-animation: animateXMark 0.5s;
animation: animateXMark 0.5s; }
@-webkit-keyframes pulseWarning {
0% {
border-color: #F8D486; }
100% {
border-color: #F8BB86; } }
@-moz-keyframes pulseWarning {
0% {
border-color: #F8D486; }
100% {
border-color: #F8BB86; } }
@keyframes pulseWarning {
0% {
border-color: #F8D486; }
100% {
border-color: #F8BB86; } }
.pulseWarning {
-webkit-animation: pulseWarning 0.75s infinite alternate;
-moz-animation: pulseWarning 0.75s infinite alternate;
animation: pulseWarning 0.75s infinite alternate; }
@-webkit-keyframes pulseWarningIns {
0% {
background-color: #F8D486; }
100% {
background-color: #F8BB86; } }
@-moz-keyframes pulseWarningIns {
0% {
background-color: #F8D486; }
100% {
background-color: #F8BB86; } }
@keyframes pulseWarningIns {
0% {
background-color: #F8D486; }
100% {
background-color: #F8BB86; } }
.pulseWarningIns {
-webkit-animation: pulseWarningIns 0.75s infinite alternate;
-moz-animation: pulseWarningIns 0.75s infinite alternate;
animation: pulseWarningIns 0.75s infinite alternate; }
public/css/sweet-alert.scss 0 → 100644
// SweetAlert
// 2014 (c) - Tristan Edwards
// github.com/t4t5/sweetalert
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,600,700,300); // Open Sans font
.sweet-overlay {
background-color: rgba(black, 0.4);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: none;
z-index: 1000;
}
.sweet-alert {
$width: 478px;
$padding: 17px;
background-color: white;
font-family: 'Open Sans', sans-serif;
width: $width;
padding: $padding;
border-radius: 5px;
text-align: center;
position: fixed;
left: 50%;
top: 50%;
margin-left: -($width/2 + $padding);
margin-top: -200px;
overflow: hidden;
display: none;
z-index: 2000;
@media all and (max-width: 540px) {
width: auto;
margin-left: 0;
margin-right: 0;
left: 15px;
right: 15px;
}
h2 {
color: #575757;
font-size: 30px;
text-align: center;
font-weight: 600;
text-transform: none;
position: relative;
margin: 25px 0;
padding: 0;
line-height: 25px;
display: block;
}
p {
color: #797979;
font-size: 16px;
text-align: center;
font-weight: 300;
position: relative;
margin: 0;
padding: 0;
line-height: normal;
}
button {
$btnBlue: #AEDEF4;
$btnGray: #D0D0D0;
background-color: $btnBlue;
color: white;
border: none;
box-shadow: none;
font-size: 17px;
font-weight: 500;
border-radius: 5px;
padding: 10px 32px;
margin: 26px 5px 0 5px;
cursor: pointer;
&:focus {
outline: none;
box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
&:hover {
background-color: darken($btnBlue, 3%);
}
&:active {
background-color: darken($btnBlue, 10%);
}
&.cancel {
background-color: $btnGray;
&:hover {
background-color: darken($btnGray, 3%);
}
&:active {
background-color: darken($btnGray, 10%);
}
// Cancel button should keep the same style
&:focus {
box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset !important;
}
}
// Removes selection outline in Firefox
&::-moz-focus-inner {
border: 0;
}
}
// Only show focus-style when there is multiple choice of actions
&[data-has-cancel-button=false] button {
box-shadow: none !important;
}
.icon {
$red: #F27474;
$orange: #F8BB86;
$blue: #C9DAE1;
$green: #A5DC86;
width: 80px;
height: 80px;
border: 4px solid gray;
border-radius: 50%;
margin: 20px auto;
padding: 0;
position: relative;
box-sizing: content-box;
&.error {
border-color: $red;
.x-mark {
position: relative;
display: block;
}
.line {
position: absolute;
height: 5px;
width: 47px;
background-color: $red;
display: block;
top: 37px;
border-radius: 2px;
&.left {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
left: 17px;
}
&.right {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 16px;
}
}
}
&.warning {
border-color: $orange;
.body { // Exclamation mark body
position: absolute;
width: 5px;
height: 47px;
left: 50%;
top: 10px;
border-radius: 2px;
margin-left: -2px;
background-color: $orange;
}
.dot { // Exclamation mark dot
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
margin-left: -3px;
left: 50%;
bottom: 10px;
background-color: $orange;
}
}
&.info {
border-color: $blue;
&::before { // i-letter body
content: "";
position: absolute;
width: 5px;
height: 29px;
left: 50%;
bottom: 17px;
border-radius: 2px;
margin-left: -2px;
background-color: $blue;
}
&::after { // i-letter dot
content: "";
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
margin-left: -3px;
top: 19px;
background-color: $blue;
}
}
&.success {
border-color: $green;
&::before, &::after { // Emulate moving circular line
content: '';
border-radius: 50%;
position: absolute;
width: 60px;
height: 120px;
background: white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
&::before {
border-radius: 120px 0 0 120px;
top: -7px;
left: -33px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 60px 60px;
transform-origin: 60px 60px;
}
&::after {
border-radius: 0 120px 120px 0;
top: -11px;
left: 30px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0px 60px;
transform-origin: 0px 60px;
}
.placeholder { // Ring
width: 80px;
height: 80px;
border: 4px solid rgba($green, 0.2);
border-radius: 50%;
box-sizing: content-box;
position: absolute;
left: -4px;
top: -4px;
z-index: 2;
}
.fix { // Hide corners left from animation
width: 5px;
height: 90px;
background-color: white;
position: absolute;
left: 28px;
top: 8px;
z-index: 1;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.line {
height: 5px;
background-color: $green;
display: block;
border-radius: 2px;
position: absolute;
z-index: 2;
&.tip {
width: 25px;
left: 14px;
top: 46px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
&.long {
width: 47px;
right: 8px;
top: 38px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
}
&.custom {
background-size: contain;
border-radius: 0;
border: none;
background-position: center center;
background-repeat: no-repeat;
}
}
}
/*
* Animations
*/
@mixin keyframes($animation-name) {
@-webkit-keyframes #{$animation-name} {
@content;
}
@-moz-keyframes #{$animation-name} {
@content;
}
@keyframes #{$animation-name} {
@content;
}
}
@mixin animation($str) {
-webkit-animation: #{$str};
-moz-animation: #{$str};
animation: #{$str};
}
// Modal animation
@include keyframes(showSweetAlert) {
0% { transform: scale(0.7); -webkit-transform: scale(0.7); }
45% { transform: scale(1.05); -webkit-transform: scale(1.05); }
80% { transform: scale(0.95); -webkit-tranform: scale(0.95); }
100% { transform: scale(1); -webkit-transform: scale(1); }
}
@include keyframes(hideSweetAlert) {
0% { transform: scale(1); -webkit-transform: scale(1); }
100% { transform: scale(0.5); -webkit-transform: scale(0.5); }
}
.showSweetAlert {
@include animation('showSweetAlert 0.3s');
}
.hideSweetAlert {
@include animation('hideSweetAlert 0.2s');
}
// Success icon animation
@include keyframes(animateSuccessTip) {
0% { width: 0; left: 1px; top: 19px; }
54% { width: 0; left: 1px; top: 19px; }
70% { width: 50px; left: -8px; top: 37px; }
84% { width: 17px; left: 21px; top: 48px; }
100% { width: 25px; left: 14px; top: 45px; }
}
@include keyframes(animateSuccessLong) {
0% { width: 0; right: 46px; top: 54px; }
65% { width: 0; right: 46px; top: 54px; }
84% { width: 55px; right: 0px; top: 35px; }
100% { width: 47px; right: 8px; top: 38px; }
}
@include keyframes(rotatePlaceholder) {
0% { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
5% { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
12% { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); }
100% { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); }
}
.animateSuccessTip {
@include animation('animateSuccessTip 0.75s');
}
.animateSuccessLong {
@include animation('animateSuccessLong 0.75s');
}
.icon.success.animate::after {
@include animation('rotatePlaceholder 4.25s ease-in');
}
// Error icon animation
@include keyframes(animateErrorIcon) {
0% { transform: rotateX(100deg); -webkit-transform: rotateX(100deg); opacity: 0; }
100% { transform: rotateX(0deg); -webkit-transform: rotateX(0deg); opacity: 1; }
}
.animateErrorIcon {
@include animation('animateErrorIcon 0.5s');
}
@include keyframes(animateXMark) {
0% { transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0; }
50% { transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0; }
80% { transform: scale(1.15); -webkit-transform: scale(1.15); margin-top: -6px; }
100% { transform: scale(1); -webkit-transform: scale(1); margin-top: 0; opacity: 1; }
}
.animateXMark {
@include animation('animateXMark 0.5s');
}
@include keyframes(pulseWarning) {
0% { border-color: #F8D486; }
100% { border-color: #F8BB86; }
}
.pulseWarning {
@include animation('pulseWarning 0.75s infinite alternate');
}
@include keyframes(pulseWarningIns) {
0% { background-color: #F8D486; }
100% { background-color: #F8BB86; }
}
.pulseWarningIns {
@include animation('pulseWarningIns 0.75s infinite alternate');
}
public/js/sweet-alert.js 0 → 100644
// SweetAlert
// 2014 (c) - Tristan Edwards
// github.com/t4t5/sweetalert
;(function(window, document) {
var modalClass = '.sweet-alert',
overlayClass = '.sweet-overlay',
alertTypes = ['error', 'warning', 'info', 'success'],
defaultParams = {
title: '',
text: '',
type: null,
allowOutsideClick: false,
showCancelButton: false,
closeOnConfirm: true,
closeOnCancel: true,
confirmButtonText: 'OK',
confirmButtonColor: '#AEDEF4',
cancelButtonText: 'Cancel',
imageUrl: null,
imageSize: null,
timer: null
};
/*
* Manipulate DOM
*/
var getModal = function() {
return document.querySelector(modalClass);
},
getOverlay = function() {
return document.querySelector(overlayClass);
},
hasClass = function(elem, className) {
return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
},
addClass = function(elem, className) {
if (!hasClass(elem, className)) {
elem.className += ' ' + className;
}
},
removeClass = function(elem, className) {
var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
if (hasClass(elem, className)) {
while (newClass.indexOf(' ' + className + ' ') >= 0) {
newClass = newClass.replace(' ' + className + ' ', ' ');
}
elem.className = newClass.replace(/^\s+|\s+$/g, '');
}
},
escapeHtml = function(str) {
var div = document.createElement('div');
div.appendChild(document.createTextNode(str));
return div.innerHTML;
},
_show = function(elem) {
elem.style.opacity = '';
elem.style.display = 'block';
},
show = function(elems) {
if (elems && !elems.length) {
return _show(elems);
}
for (var i = 0; i < elems.length; ++i) {
_show(elems[i]);
}
},
_hide = function(elem) {
elem.style.opacity = '';
elem.style.display = 'none';
},
hide = function(elems) {
if (elems && !elems.length) {
return _hide(elems);
}
for (var i = 0; i < elems.length; ++i) {
_hide(elems[i]);
}
},
isDescendant = function(parent, child) {
var node = child.parentNode;
while (node !== null) {
if (node === parent) {
return true;
}
node = node.parentNode;
}
return false;
},
getTopMargin = function(elem) {
elem.style.left = '-9999px';
elem.style.display = 'block';
var height = elem.clientHeight,
padding;
if (typeof getComputedStyle !== "undefined") { /* IE 8 */
padding = parseInt(getComputedStyle(elem).getPropertyValue('padding'), 10);
} else{
padding = parseInt(elem.currentStyle.padding);
}
elem.style.left = '';
elem.style.display = 'none';
return ('-' + parseInt(height / 2 + padding) + 'px');
},
fadeIn = function(elem, interval) {
if (+elem.style.opacity < 1) {
interval = interval || 16;
elem.style.opacity = 0;
elem.style.display = 'block';
var last = +new Date();
var tick = function() {
elem.style.opacity = +elem.style.opacity + (new Date() - last) / 100;
last = +new Date();
if (+elem.style.opacity < 1) {
setTimeout(tick, interval);
}
};
tick();
}
elem.style.display = 'block'; //fallback IE8
},
fadeOut = function(elem, interval) {
interval = interval || 16;
elem.style.opacity = 1;
var last = +new Date();
var tick = function() {
elem.style.opacity = +elem.style.opacity - (new Date() - last) / 100;
last = +new Date();
if (+elem.style.opacity > 0) {
setTimeout(tick, interval);
} else {
elem.style.display = 'none';
}
};
tick();
},
fireClick = function(node) {
// Taken from http://www.nonobtrusive.com/2011/11/29/programatically-fire-crossbrowser-click-event-with-javascript/
// Then fixed for today's Chrome browser.
if (MouseEvent) {
// Up-to-date approach
var mevt = new MouseEvent('click', {
view: window,
bubbles: false,
cancelable: true
});
node.dispatchEvent(mevt);
} else if ( document.createEvent ) {
// Fallback
var evt = document.createEvent('MouseEvents');
evt.initEvent('click', false, false);
node.dispatchEvent(evt);
} else if( document.createEventObject ) {
node.fireEvent('onclick') ;
} else if (typeof node.onclick === 'function' ) {
node.onclick();
}
},
stopEventPropagation = function(e) {
// In particular, make sure the space bar doesn't scroll the main window.
if (typeof e.stopPropagation === 'function') {
e.stopPropagation();
e.preventDefault();
} else if (window.event && window.event.hasOwnProperty('cancelBubble')) {
window.event.cancelBubble = true;
}
};
// Remember state in cases where opening and handling a modal will fiddle with it.
var previousActiveElement,
previousDocumentClick,
previousWindowKeyDown,
lastFocusedButton;
/*
* Add modal + overlay to DOM
*/
window.sweetAlertInitialize = function() {
var sweetHTML = '<div class="sweet-overlay" tabIndex="-1"></div><div class="sweet-alert" tabIndex="-1"><div class="icon error"><span class="x-mark"><span class="line left"></span><span class="line right"></span></span></div><div class="icon warning"> <span class="body"></span> <span class="dot"></span> </div> <div class="icon info"></div> <div class="icon success"> <span class="line tip"></span> <span class="line long"></span> <div class="placeholder"></div> <div class="fix"></div> </div> <div class="icon custom"></div> <h2>Title</h2><p>Text</p><button class="cancel" tabIndex="2">Cancel</button><button class="confirm" tabIndex="1">OK</button></div>',
sweetWrap = document.createElement('div');
sweetWrap.innerHTML = sweetHTML;
// For readability: check sweet-alert.html
document.body.appendChild(sweetWrap);
};
/*
* Global sweetAlert function
*/
window.sweetAlert = window.swal = function() {
if (arguments[0] === undefined) {
window.console.error('sweetAlert expects at least 1 attribute!');
return false;
}
var params = extend({}, defaultParams);
switch (typeof arguments[0]) {
case 'string':
params.title = arguments[0];
params.text = arguments[1] || '';
params.type = arguments[2] || '';
break;
case 'object':
if (arguments[0].title === undefined) {
window.console.error('Missing "title" argument!');
return false;
}
params.title = arguments[0].title;
params.text = arguments[0].text || defaultParams.text;
params.type = arguments[0].type || defaultParams.type;
params.allowOutsideClick = arguments[0].allowOutsideClick || defaultParams.allowOutsideClick;
params.showCancelButton = arguments[0].showCancelButton !== undefined ? arguments[0].showCancelButton : defaultParams.showCancelButton;
params.closeOnConfirm = arguments[0].closeOnConfirm !== undefined ? arguments[0].closeOnConfirm : defaultParams.closeOnConfirm;
params.closeOnCancel = arguments[0].closeOnCancel !== undefined ? arguments[0].closeOnCancel : defaultParams.closeOnCancel;
params.timer = arguments[0].timer || defaultParams.timer;
// Show "Confirm" instead of "OK" if cancel button is visible
params.confirmButtonText = (defaultParams.showCancelButton) ? 'Confirm' : defaultParams.confirmButtonText;
params.confirmButtonText = arguments[0].confirmButtonText || defaultParams.confirmButtonText;
params.confirmButtonColor = arguments[0].confirmButtonColor || defaultParams.confirmButtonColor;
params.cancelButtonText = arguments[0].cancelButtonText || defaultParams.cancelButtonText;
params.imageUrl = arguments[0].imageUrl || defaultParams.imageUrl;
params.imageSize = arguments[0].imageSize || defaultParams.imageSize;
params.doneFunction = arguments[1] || null;
break;
default:
window.console.error('Unexpected type of argument! Expected "string" or "object", got ' + typeof arguments[0]);
return false;
}
setParameters(params);
fixVerticalPosition();
openModal();
// Modal interactions
var modal = getModal();
// Mouse interactions
var onButtonEvent = function(event) {
var e = event || window.event;
var target = e.target || e.srcElement,
targetedConfirm = (target.className === 'confirm'),
modalIsVisible = hasClass(modal, 'visible'),
doneFunctionExists = (params.doneFunction && modal.getAttribute('data-has-done-function') === 'true');
switch (e.type) {
case ("mouseover"):
if (targetedConfirm) {
target.style.backgroundColor = colorLuminance(params.confirmButtonColor, -0.04);
}
break;
case ("mouseout"):
if (targetedConfirm) {
target.style.backgroundColor = params.confirmButtonColor;
}
break;
case ("mousedown"):
if (targetedConfirm) {
target.style.backgroundColor = colorLuminance(params.confirmButtonColor, -0.14);
}
break;
case ("mouseup"):
if (targetedConfirm) {
target.style.backgroundColor = colorLuminance(params.confirmButtonColor, -0.04);
}
break;
case ("focus"):
var $confirmButton = modal.querySelector('button.confirm'),
$cancelButton = modal.querySelector('button.cancel');
if (targetedConfirm) {
$cancelButton.style.boxShadow = 'none';
} else {
$confirmButton.style.boxShadow = 'none';
}
break;
case ("click"):
if (targetedConfirm && doneFunctionExists && modalIsVisible) { // Clicked "confirm"
params.doneFunction(true);
if (params.closeOnConfirm) {
closeModal();
}
} else if (doneFunctionExists && modalIsVisible) { // Clicked "cancel"
// Check if callback function expects a parameter (to track cancel actions)
var functionAsStr = String(params.doneFunction).replace(/\s/g, '');
var functionHandlesCancel = functionAsStr.substring(0, 9) === "function(" && functionAsStr.substring(9, 10) !== ")";
if (functionHandlesCancel) {
params.doneFunction(false);
}
if (params.closeOnCancel) {
closeModal();
}
} else {
closeModal();
}
break;
}
};
var $buttons = modal.querySelectorAll('button');
for (var i = 0; i < $buttons.length; i++) {
$buttons[i].onclick = onButtonEvent;
$buttons[i].onmouseover = onButtonEvent;
$buttons[i].onmouseout = onButtonEvent;
$buttons[i].onmousedown = onButtonEvent;
//$buttons[i].onmouseup = onButtonEvent;
$buttons[i].onfocus = onButtonEvent;
}
// Remember the current document.onclick event.
previousDocumentClick = document.onclick;
document.onclick = function(event) {
var e = event || window.event;
var target = e.target || e.srcElement;
var clickedOnModal = (modal === target),
clickedOnModalChild = isDescendant(modal, target),
modalIsVisible = hasClass(modal, 'visible'),
outsideClickIsAllowed = modal.getAttribute('data-allow-ouside-click') === 'true';
if (!clickedOnModal && !clickedOnModalChild && modalIsVisible && outsideClickIsAllowed) {
closeModal();
}
};
// Keyboard interactions
var $okButton = modal.querySelector('button.confirm'),
$cancelButton = modal.querySelector('button.cancel'),
$modalButtons = modal.querySelectorAll('button:not([type=hidden])');
function handleKeyDown(event) {
var e = event || window.event;
var keyCode = e.keyCode || e.which;
if ([9,13,32,27].indexOf(keyCode) === -1) {
// Don't do work on keys we don't care about.
return;
}
var $targetElement = e.target || e.srcElement;
var btnIndex = -1; // Find the button - note, this is a nodelist, not an array.
for (var i = 0; i < $modalButtons.length; i++) {
if ($targetElement === $modalButtons[i]) {
btnIndex = i;
break;
}
}
if (keyCode === 9) {
// TAB
if (btnIndex === -1) {
// No button focused. Jump to the confirm button.
$targetElement = $okButton;
} else {
// Cycle to the next button
if (btnIndex === $modalButtons.length - 1) {
$targetElement = $modalButtons[0];
} else {
$targetElement = $modalButtons[btnIndex + 1];
}
}
stopEventPropagation(e);
$targetElement.focus();
setFocusStyle($targetElement, params.confirmButtonColor); // TODO
} else {
if (keyCode === 13 || keyCode === 32) {
if (btnIndex === -1) {
// ENTER/SPACE clicked outside of a button.
$targetElement = $okButton;
} else {
// Do nothing - let the browser handle it.
$targetElement = undefined;
}
} else if (keyCode === 27 && !($cancelButton.hidden || $cancelButton.style.display === 'none')) {
// ESC to cancel only if there's a cancel button displayed (like the alert() window).
$targetElement = $cancelButton;
} else {
// Fallback - let the browser handle it.
$targetElement = undefined;
}
if ($targetElement !== undefined) {
fireClick($targetElement, e);
}
}
}
previousWindowKeyDown = window.onkeydown;
window.onkeydown = handleKeyDown;
function handleOnBlur(event) {
var e = event || window.event;
var $targetElement = e.target || e.srcElement,
$focusElement = e.relatedTarget,
modalIsVisible = hasClass(modal, 'visible');
if (modalIsVisible) {
var btnIndex = -1; // Find the button - note, this is a nodelist, not an array.
if ($focusElement !== null) {
// If we picked something in the DOM to focus to, let's see if it was a button.
for (var i = 0; i < $modalButtons.length; i++) {
if ($focusElement === $modalButtons[i]) {
btnIndex = i;
break;
}
}
if (btnIndex === -1) {
// Something in the dom, but not a visible button. Focus back on the button.
$targetElement.focus();
}
} else {
// Exiting the DOM (e.g. clicked in the URL bar);
lastFocusedButton = $targetElement;
}
}
}
$okButton.onblur = handleOnBlur;
$cancelButton.onblur = handleOnBlur;
window.onfocus = function() {
// When the user has focused away and focused back from the whole window.
window.setTimeout(function() {
// Put in a timeout to jump out of the event sequence. Calling focus() in the event
// sequence confuses things.
if (lastFocusedButton !== undefined) {
lastFocusedButton.focus();
lastFocusedButton = undefined;
}
}, 0);
};
};
/**
* Set default params for each popup
* @param {Object} userParams
*/
window.swal.setDefaults = function(userParams) {
if (!userParams) {
throw new Error('userParams is required');
}
if (typeof userParams !== 'object') {
throw new Error('userParams has to be a object');
}
extend(defaultParams, userParams);
};
/*
* Set type, text and actions on modal
*/
function setParameters(params) {
var modal = getModal();
var $title = modal.querySelector('h2'),
$text = modal.querySelector('p'),
$cancelBtn = modal.querySelector('button.cancel'),
$confirmBtn = modal.querySelector('button.confirm');
// Title
$title.innerHTML = escapeHtml(params.title).split("\n").join("<br>");
// Text
$text.innerHTML = escapeHtml(params.text || '').split("\n").join("<br>");
if (params.text) {
show($text);
}
// Icon
hide(modal.querySelectorAll('.icon'));
if (params.type) {
var validType = false;
for (var i = 0; i < alertTypes.length; i++) {
if (params.type === alertTypes[i]) {
validType = true;
break;
}
}
if (!validType) {
window.console.error('Unknown alert type: ' + params.type);
return false;
}
var $icon = modal.querySelector('.icon.' + params.type);
show($icon);
// Animate icon
switch (params.type) {
case "success":
addClass($icon, 'animate');
addClass($icon.querySelector('.tip'), 'animateSuccessTip');
addClass($icon.querySelector('.long'), 'animateSuccessLong');
break;
case "error":
addClass($icon, 'animateErrorIcon');
addClass($icon.querySelector('.x-mark'), 'animateXMark');
break;
case "warning":
addClass($icon, 'pulseWarning');
addClass($icon.querySelector('.body'), 'pulseWarningIns');
addClass($icon.querySelector('.dot'), 'pulseWarningIns');
break;
}
}
// Custom image
if (params.imageUrl) {
var $customIcon = modal.querySelector('.icon.custom');
$customIcon.style.backgroundImage = 'url(' + params.imageUrl + ')';
show($customIcon);
var _imgWidth = 80,
_imgHeight = 80;
if (params.imageSize) {
var imgWidth = params.imageSize.split('x')[0];
var imgHeight = params.imageSize.split('x')[1];
if (!imgWidth || !imgHeight) {
window.console.error("Parameter imageSize expects value with format WIDTHxHEIGHT, got " + params.imageSize);
} else {
_imgWidth = imgWidth;
_imgHeight = imgHeight;
$customIcon.css({
'width': imgWidth + 'px',
'height': imgHeight + 'px'
});
}
}
$customIcon.setAttribute('style', $customIcon.getAttribute('style') + 'width:' + _imgWidth + 'px; height:' + _imgHeight + 'px');
}
// Cancel button
modal.setAttribute('data-has-cancel-button', params.showCancelButton);
if (params.showCancelButton) {
$cancelBtn.style.display = 'inline-block';
} else {
hide($cancelBtn);
}
// Edit text on cancel and confirm buttons
if (params.cancelButtonText) {
$cancelBtn.innerHTML = escapeHtml(params.cancelButtonText);
}
if (params.confirmButtonText) {
$confirmBtn.innerHTML = escapeHtml(params.confirmButtonText);
}
// Set confirm button to selected background color
$confirmBtn.style.backgroundColor = params.confirmButtonColor;
// Set box-shadow to default focused button
setFocusStyle($confirmBtn, params.confirmButtonColor);
// Allow outside click?
modal.setAttribute('data-allow-ouside-click', params.allowOutsideClick);
// Done-function
var hasDoneFunction = (params.doneFunction) ? true : false;
modal.setAttribute('data-has-done-function', hasDoneFunction);
// Close timer
modal.setAttribute('data-timer', params.timer);
}
/*
* Set hover, active and focus-states for buttons (source: http://www.sitepoint.com/javascript-generate-lighter-darker-color)
*/
function colorLuminance(hex, lum) {
// Validate hex string
hex = String(hex).replace(/[^0-9a-f]/gi, '');
if (hex.length < 6) {
hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
}
lum = lum || 0;
// Convert to decimal and change luminosity
var rgb = "#", c, i;
for (i = 0; i < 3; i++) {
c = parseInt(hex.substr(i*2,2), 16);
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
rgb += ("00"+c).substr(c.length);
}
return rgb;
}
function extend(a, b){
for (var key in b) {
if (b.hasOwnProperty(key)) {
a[key] = b[key];
}
}
return a;
}
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? parseInt(result[1], 16) + ', ' + parseInt(result[2], 16) + ', ' + parseInt(result[3], 16) : null;
}
// Add box-shadow style to button (depending on its chosen bg-color)
function setFocusStyle($button, bgColor) {
var rgbColor = hexToRgb(bgColor);
$button.style.boxShadow = '0 0 2px rgba(' + rgbColor +', 0.8), inset 0 0 0 1px rgba(0, 0, 0, 0.05)';
}
/*
* Animations
*/
function openModal() {
var modal = getModal();
fadeIn(getOverlay(), 10);
show(modal);
addClass(modal, 'showSweetAlert');
removeClass(modal, 'hideSweetAlert');
previousActiveElement = document.activeElement;
var $okButton = modal.querySelector('button.confirm');
$okButton.focus();
setTimeout(function() {
addClass(modal, 'visible');
}, 500);
var timer = modal.getAttribute('data-timer');
if (timer !== "null" && timer !== "") {
modal.timeout = setTimeout(function() {
closeModal();
}, timer);
}
}
function closeModal() {
var modal = getModal();
fadeOut(getOverlay(), 5);
fadeOut(modal, 5);
removeClass(modal, 'showSweetAlert');
addClass(modal, 'hideSweetAlert');
removeClass(modal, 'visible');
// Reset icon animations
var $successIcon = modal.querySelector('.icon.success');
removeClass($successIcon, 'animate');
removeClass($successIcon.querySelector('.tip'), 'animateSuccessTip');
removeClass($successIcon.querySelector('.long'), 'animateSuccessLong');
var $errorIcon = modal.querySelector('.icon.error');
removeClass($errorIcon, 'animateErrorIcon');
removeClass($errorIcon.querySelector('.x-mark'), 'animateXMark');
var $warningIcon = modal.querySelector('.icon.warning');
removeClass($warningIcon, 'pulseWarning');
removeClass($warningIcon.querySelector('.body'), 'pulseWarningIns');
removeClass($warningIcon.querySelector('.dot'), 'pulseWarningIns');
// Reset the page to its previous state
window.onkeydown = previousWindowKeyDown;
document.onclick = previousDocumentClick;
if (previousActiveElement) {
previousActiveElement.focus();
}
lastFocusedButton = undefined;
clearTimeout(modal.timeout);
}
/*
* Set "margin-top"-property on modal based on its computed height
*/
function fixVerticalPosition() {
var modal = getModal();
modal.style.marginTop = getTopMargin(getModal());
}
/*
* If library is injected after page has loaded
*/
(function () {
if (document.readyState === "complete" || document.readyState === "interactive" && document.body) {
window.sweetAlertInitialize();
} else {
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function factorial() {
document.removeEventListener('DOMContentLoaded', arguments.callee, false);
window.sweetAlertInitialize();
}, false);
} else if (document.attachEvent) {
document.attachEvent('onreadystatechange', function() {
if (document.readyState === 'complete') {
document.detachEvent('onreadystatechange', arguments.callee);
window.sweetAlertInitialize();
}
});
}
}
})();
})(window, document);
public/js/sweet-alert.min.js 0 → 100644
!function(e,t){function n(t){var n=y(),o=n.querySelector("h2"),r=n.querySelector("p"),a=n.querySelector("button.cancel"),c=n.querySelector("button.confirm");if(o.innerHTML=w(t.title).split("\n").join("<br>"),r.innerHTML=w(t.text||"").split("\n").join("<br>"),t.text&&S(r),C(n.querySelectorAll(".icon")),t.type){for(var l=!1,s=0;s<d.length;s++)if(t.type===d[s]){l=!0;break}if(!l)return e.console.error("Unknown alert type: "+t.type),!1;var u=n.querySelector(".icon."+t.type);switch(S(u),t.type){case"success":v(u,"animate"),v(u.querySelector(".tip"),"animateSuccessTip"),v(u.querySelector(".long"),"animateSuccessLong");break;case"error":v(u,"animateErrorIcon"),v(u.querySelector(".x-mark"),"animateXMark");break;case"warning":v(u,"pulseWarning"),v(u.querySelector(".body"),"pulseWarningIns"),v(u.querySelector(".dot"),"pulseWarningIns")}}if(t.imageUrl){var f=n.querySelector(".icon.custom");f.style.backgroundImage="url("+t.imageUrl+")",S(f);var m=80,p=80;if(t.imageSize){var g=t.imageSize.split("x")[0],b=t.imageSize.split("x")[1];g&&b?(m=g,p=b,f.css({width:g+"px",height:b+"px"})):e.console.error("Parameter imageSize expects value with format WIDTHxHEIGHT, got "+t.imageSize)}f.setAttribute("style",f.getAttribute("style")+"width:"+m+"px; height:"+p+"px")}n.setAttribute("data-has-cancel-button",t.showCancelButton),t.showCancelButton?a.style.display="inline-block":C(a),t.cancelButtonText&&(a.innerHTML=w(t.cancelButtonText)),t.confirmButtonText&&(c.innerHTML=w(t.confirmButtonText)),c.style.backgroundColor=t.confirmButtonColor,i(c,t.confirmButtonColor),n.setAttribute("data-allow-ouside-click",t.allowOutsideClick);var h=t.doneFunction?!0:!1;n.setAttribute("data-has-done-function",h),n.setAttribute("data-timer",t.timer)}function o(e,t){e=String(e).replace(/[^0-9a-f]/gi,""),e.length<6&&(e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]),t=t||0;var n="#",o,r;for(r=0;3>r;r++)o=parseInt(e.substr(2*r,2),16),o=Math.round(Math.min(Math.max(0,o+o*t),255)).toString(16),n+=("00"+o).substr(o.length);return n}function r(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n]);return e}function a(e){var t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?parseInt(t[1],16)+", "+parseInt(t[2],16)+", "+parseInt(t[3],16):null}function i(e,t){var n=a(t);e.style.boxShadow="0 0 2px rgba("+n+", 0.8), inset 0 0 0 1px rgba(0, 0, 0, 0.05)"}function c(){var e=y();T(p(),10),S(e),v(e,"showSweetAlert"),b(e,"hideSweetAlert"),I=t.activeElement;var n=e.querySelector("button.confirm");n.focus(),setTimeout(function(){v(e,"visible")},500);var o=e.getAttribute("data-timer");"null"!==o&&""!==o&&(e.timeout=setTimeout(function(){l()},o))}function l(){var n=y();E(p(),5),E(n,5),b(n,"showSweetAlert"),v(n,"hideSweetAlert"),b(n,"visible");var o=n.querySelector(".icon.success");b(o,"animate"),b(o.querySelector(".tip"),"animateSuccessTip"),b(o.querySelector(".long"),"animateSuccessLong");var r=n.querySelector(".icon.error");b(r,"animateErrorIcon"),b(r.querySelector(".x-mark"),"animateXMark");var a=n.querySelector(".icon.warning");b(a,"pulseWarning"),b(a.querySelector(".body"),"pulseWarningIns"),b(a.querySelector(".dot"),"pulseWarningIns"),e.onkeydown=M,t.onclick=A,I&&I.focus(),z=void 0,clearTimeout(n.timeout)}function s(){var e=y();e.style.marginTop=B(y())}var u=".sweet-alert",f=".sweet-overlay",d=["error","warning","info","success"],m={title:"",text:"",type:null,allowOutsideClick:!1,showCancelButton:!1,closeOnConfirm:!0,closeOnCancel:!0,confirmButtonText:"OK",confirmButtonColor:"#AEDEF4",cancelButtonText:"Cancel",imageUrl:null,imageSize:null,timer:null},y=function(){return t.querySelector(u)},p=function(){return t.querySelector(f)},g=function(e,t){return new RegExp(" "+t+" ").test(" "+e.className+" ")},v=function(e,t){g(e,t)||(e.className+=" "+t)},b=function(e,t){var n=" "+e.className.replace(/[\t\r\n]/g," ")+" ";if(g(e,t)){for(;n.indexOf(" "+t+" ")>=0;)n=n.replace(" "+t+" "," ");e.className=n.replace(/^\s+|\s+$/g,"")}},w=function(e){var n=t.createElement("div");return n.appendChild(t.createTextNode(e)),n.innerHTML},h=function(e){e.style.opacity="",e.style.display="block"},S=function(e){if(e&&!e.length)return h(e);for(var t=0;t<e.length;++t)h(e[t])},x=function(e){e.style.opacity="",e.style.display="none"},C=function(e){if(e&&!e.length)return x(e);for(var t=0;t<e.length;++t)x(e[t])},k=function(e,t){for(var n=t.parentNode;null!==n;){if(n===e)return!0;n=n.parentNode}return!1},B=function(e){e.style.left="-9999px",e.style.display="block";var t=e.clientHeight,n;return n="undefined"!=typeof getComputedStyle?parseInt(getComputedStyle(e).getPropertyValue("padding"),10):parseInt(e.currentStyle.padding),e.style.left="",e.style.display="none","-"+parseInt(t/2+n)+"px"},T=function(e,t){if(+e.style.opacity<1){t=t||16,e.style.opacity=0,e.style.display="block";var n=+new Date,o=function(){e.style.opacity=+e.style.opacity+(new Date-n)/100,n=+new Date,+e.style.opacity<1&&setTimeout(o,t)};o()}e.style.display="block"},E=function(e,t){t=t||16,e.style.opacity=1;var n=+new Date,o=function(){e.style.opacity=+e.style.opacity-(new Date-n)/100,n=+new Date,+e.style.opacity>0?setTimeout(o,t):e.style.display="none"};o()},q=function(n){if(MouseEvent){var o=new MouseEvent("click",{view:e,bubbles:!1,cancelable:!0});n.dispatchEvent(o)}else if(t.createEvent){var r=t.createEvent("MouseEvents");r.initEvent("click",!1,!1),n.dispatchEvent(r)}else t.createEventObject?n.fireEvent("onclick"):"function"==typeof n.onclick&&n.onclick()},O=function(t){"function"==typeof t.stopPropagation?(t.stopPropagation(),t.preventDefault()):e.event&&e.event.hasOwnProperty("cancelBubble")&&(e.event.cancelBubble=!0)},I,A,M,z;e.sweetAlertInitialize=function(){var e='<div class="sweet-overlay" tabIndex="-1"></div><div class="sweet-alert" tabIndex="-1"><div class="icon error"><span class="x-mark"><span class="line left"></span><span class="line right"></span></span></div><div class="icon warning"> <span class="body"></span> <span class="dot"></span> </div> <div class="icon info"></div> <div class="icon success"> <span class="line tip"></span> <span class="line long"></span> <div class="placeholder"></div> <div class="fix"></div> </div> <div class="icon custom"></div> <h2>Title</h2><p>Text</p><button class="cancel" tabIndex="2">Cancel</button><button class="confirm" tabIndex="1">OK</button></div>',n=t.createElement("div");n.innerHTML=e,t.body.appendChild(n)},e.sweetAlert=e.swal=function(){function a(t){var n=t||e.event,o=n.keyCode||n.which;if(-1!==[9,13,32,27].indexOf(o)){for(var r=n.target||n.srcElement,a=-1,c=0;c<S.length;c++)if(r===S[c]){a=c;break}9===o?(r=-1===a?w:a===S.length-1?S[0]:S[a+1],O(n),r.focus(),i(r,f.confirmButtonColor)):(r=13===o||32===o?-1===a?w:void 0:27!==o||h.hidden||"none"===h.style.display?void 0:h,void 0!==r&&q(r,n))}}function u(t){var n=t||e.event,o=n.target||n.srcElement,r=n.relatedTarget,a=g(d,"visible");if(a){var i=-1;if(null!==r){for(var c=0;c<S.length;c++)if(r===S[c]){i=c;break}-1===i&&o.focus()}else z=o}}if(void 0===arguments[0])return e.console.error("sweetAlert expects at least 1 attribute!"),!1;var f=r({},m);switch(typeof arguments[0]){case"string":f.title=arguments[0],f.text=arguments[1]||"",f.type=arguments[2]||"";break;case"object":if(void 0===arguments[0].title)return e.console.error('Missing "title" argument!'),!1;f.title=arguments[0].title,f.text=arguments[0].text||m.text,f.type=arguments[0].type||m.type,f.allowOutsideClick=arguments[0].allowOutsideClick||m.allowOutsideClick,f.showCancelButton=void 0!==arguments[0].showCancelButton?arguments[0].showCancelButton:m.showCancelButton,f.closeOnConfirm=void 0!==arguments[0].closeOnConfirm?arguments[0].closeOnConfirm:m.closeOnConfirm,f.closeOnCancel=void 0!==arguments[0].closeOnCancel?arguments[0].closeOnCancel:m.closeOnCancel,f.timer=arguments[0].timer||m.timer,f.confirmButtonText=m.showCancelButton?"Confirm":m.confirmButtonText,f.confirmButtonText=arguments[0].confirmButtonText||m.confirmButtonText,f.confirmButtonColor=arguments[0].confirmButtonColor||m.confirmButtonColor,f.cancelButtonText=arguments[0].cancelButtonText||m.cancelButtonText,f.imageUrl=arguments[0].imageUrl||m.imageUrl,f.imageSize=arguments[0].imageSize||m.imageSize,f.doneFunction=arguments[1]||null;break;default:return e.console.error('Unexpected type of argument! Expected "string" or "object", got '+typeof arguments[0]),!1}n(f),s(),c();for(var d=y(),p=function(t){var n=t||e.event,r=n.target||n.srcElement,a="confirm"===r.className,i=g(d,"visible"),c=f.doneFunction&&"true"===d.getAttribute("data-has-done-function");switch(n.type){case"mouseover":a&&(r.style.backgroundColor=o(f.confirmButtonColor,-.04));break;case"mouseout":a&&(r.style.backgroundColor=f.confirmButtonColor);break;case"mousedown":a&&(r.style.backgroundColor=o(f.confirmButtonColor,-.14));break;case"mouseup":a&&(r.style.backgroundColor=o(f.confirmButtonColor,-.04));break;case"focus":var s=d.querySelector("button.confirm"),u=d.querySelector("button.cancel");a?u.style.boxShadow="none":s.style.boxShadow="none";break;case"click":if(a&&c&&i)f.doneFunction(!0),f.closeOnConfirm&&l();else if(c&&i){var m=String(f.doneFunction).replace(/\s/g,""),y="function("===m.substring(0,9)&&")"!==m.substring(9,10);y&&f.doneFunction(!1),f.closeOnCancel&&l()}else l()}},v=d.querySelectorAll("button"),b=0;b<v.length;b++)v[b].onclick=p,v[b].onmouseover=p,v[b].onmouseout=p,v[b].onmousedown=p,v[b].onfocus=p;A=t.onclick,t.onclick=function(t){var n=t||e.event,o=n.target||n.srcElement,r=d===o,a=k(d,o),i=g(d,"visible"),c="true"===d.getAttribute("data-allow-ouside-click");!r&&!a&&i&&c&&l()};var w=d.querySelector("button.confirm"),h=d.querySelector("button.cancel"),S=d.querySelectorAll("button:not([type=hidden])");M=e.onkeydown,e.onkeydown=a,w.onblur=u,h.onblur=u,e.onfocus=function(){e.setTimeout(function(){void 0!==z&&(z.focus(),z=void 0)},0)}},e.swal.setDefaults=function(e){if(!e)throw new Error("userParams is required");if("object"!=typeof e)throw new Error("userParams has to be a object");r(m,e)},function(){"complete"===t.readyState||"interactive"===t.readyState&&t.body?e.sweetAlertInitialize():t.addEventListener?t.addEventListener("DOMContentLoaded",function n(){t.removeEventListener("DOMContentLoaded",arguments.callee,!1),e.sweetAlertInitialize()},!1):t.attachEvent&&t.attachEvent("onreadystatechange",function(){"complete"===t.readyState&&(t.detachEvent("onreadystatechange",arguments.callee),e.sweetAlertInitialize())})}()}(window,document);
\ No newline at end of file
resources/views/vendor/adminlte/layouts/customers/editprofiles.blade.php
......@@ -32,7 +32,7 @@
<div class="form-group">
<label class="col-sm-2 control-label"> Foto </label>
<div class="col-sm-10">
<input class="btn btn-success" value="Browse">
<input type="file" class="btn btn-success" value="Browse">
</div>
</div>
<div class="form-group" align="right">
......
resources/views/vendor/adminlte/layouts/pages/Homestay.blade.php
......@@ -219,6 +219,7 @@
<textarea name="Message" class="wow agileits w3layouts slideInLeft" placeholder="Message" required=""></textarea>
<input type="submit" class="more_btn wow agileits w3layouts slideInLeft" value="Send Message">
<a class="popup-with-zoom-anim " href="#small-dialog2">BOOK NOW</a>
<pre>swal(<span class="str">"Good job!"</span>, <span class="str">"You clicked the button!"</span>, <span class="str">"success"</span>)</pre>
</form>
</div>
</div>
......@@ -274,7 +275,7 @@
</div>
</div>
<!-- Tooltip-Content -->
<div class="tooltip-content agileits w3layouts">
<div class="tooltip-content agileits w3layouts">
<div class="modal fade agileits w3layouts details-modal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog agileits w3layouts modal-lg">
......@@ -325,8 +326,17 @@
$('#myModal').modal('');
</script>
</div>
<!-- //Tooltip-Content -->
</div>
<!-- //Tooltip-Content -->
<!-- Kritik & Saran -->
@endsection
<script>
$('#myModal').modal('');
</script>
<script>
document.querySelector('li.success button').onclick = function(){
swal("Good job!", "You clicked the button!", "success");};
</script>
@endsection
resources/views/vendor/adminlte/layouts/pages/editprofiles.blade.php 0 → 100644
@extends('adminlte::layouts.master')
@section('main-content')
<div class="cuisines agileits w3layouts" style="padding-top: 50px; margin-top: 80px; ">
<div class="container">
<div class="register agileits w3layouts wow agileits w3layouts slideInLeft">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Nama</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Alamat</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Alamat">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">No.Telepon</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="No.Telepon">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Pekerjaan</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Pekerjaan">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> Foto </label>
<div class="col-sm-10">
<input class="btn btn-success" value="Browse">
</div>
</div>
<div class="form-group" align="right">
<div class="col-sm-12">
<input type="submit" class="btn btn-primary"></input>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
@endsection
\ No newline at end of file
resources/views/vendor/adminlte/layouts/partialweb/htmlheader.blade.php
......@@ -19,6 +19,8 @@
<link rel="stylesheet" href="{{asset('css/animate.css')}}" type="text/css" media="all">
<!-- Tanggal -->
<link rel="stylesheet" href="{{asset('css/jquery-ui.css')}}" type="text/css" media="all">
<!-- Popup -->
<link rel="stylesheet" href="{{asset('css/sweet-alert.css')}}" type="text/css" media="all">
<!-- <!-- All css --> <!-- <link href="{{ asset('/css/all.css') }}" rel="stylesheet" type="text/css" /> -->
<!-- //Custom-Stylesheet-Links -->
......
resources/views/vendor/adminlte/layouts/partialweb/scripts.blade.php
<!-- Custom-JavaScript-File-Links -->
<!-- Default-JavaScript --> <script type="text/javascript" src="{{asset('js/jquery-2.1.4.min.js')}}"></script>
<!-- Bootstrap-JavaScript --> <script type="text/javascript" src="{{asset('js/bootstrap.min.js')}}"></script>
<!-- Default-JavaScript -->
<script type="text/javascript" src="{{asset('js/jquery-2.1.4.min.js')}}"></script>
<!-- Bootstrap-JavaScript -->
<script type="text/javascript" src="{{asset('js/bootstrap.min.js')}}"></script>
<!-- Sweealert-JavaScript -->
<script type="text/javascript" src="{{asset('js/sweet-alert.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/sweet-alert.js')}}"></script>
<!-- Animate.CSS-JavaScript -->
<script src="{{asset('js/wow.min.js')}}"></script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment