| @@ -7,6 +7,7 @@ | |||
| "@testing-library/jest-dom": "^5.13.0", | |||
| "@testing-library/react": "^11.2.7", | |||
| "@testing-library/user-event": "^12.8.3", | |||
| "admin-lte": "^3.1.0", | |||
| "axios": "^0.21.1", | |||
| "date-fns": "^2.22.1", | |||
| "eslint-plugin-prettier": "^3.4.0", | |||
| @@ -0,0 +1,968 @@ | |||
| /*! | |||
| * AdminLTE v3.1.0 | |||
| * Only Pages | |||
| * Author: Colorlib | |||
| * Website: AdminLTE.io <https://adminlte.io> | |||
| * License: Open source - MIT <https://opensource.org/licenses/MIT> | |||
| */ | |||
| .close, .mailbox-attachment-close { | |||
| float: right; | |||
| font-size: 1.5rem; | |||
| font-weight: 700; | |||
| line-height: 1; | |||
| color: #000; | |||
| text-shadow: 0 1px 0 #fff; | |||
| opacity: .5; | |||
| } | |||
| .close:hover, .mailbox-attachment-close:hover { | |||
| color: #000; | |||
| text-decoration: none; | |||
| } | |||
| .close:not(:disabled):not(.disabled):hover, .mailbox-attachment-close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus, .mailbox-attachment-close:not(:disabled):not(.disabled):focus { | |||
| opacity: .75; | |||
| } | |||
| button.close, button.mailbox-attachment-close { | |||
| padding: 0; | |||
| background-color: transparent; | |||
| border: 0; | |||
| } | |||
| a.close.disabled, a.disabled.mailbox-attachment-close { | |||
| pointer-events: none; | |||
| } | |||
| @-webkit-keyframes flipInX { | |||
| 0% { | |||
| -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |||
| transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |||
| transition-timing-function: ease-in; | |||
| opacity: 0; | |||
| } | |||
| 40% { | |||
| -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |||
| transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |||
| transition-timing-function: ease-in; | |||
| } | |||
| 60% { | |||
| -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |||
| transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |||
| opacity: 1; | |||
| } | |||
| 80% { | |||
| -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |||
| transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |||
| } | |||
| 100% { | |||
| -webkit-transform: perspective(400px); | |||
| transform: perspective(400px); | |||
| } | |||
| } | |||
| @keyframes flipInX { | |||
| 0% { | |||
| -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |||
| transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |||
| transition-timing-function: ease-in; | |||
| opacity: 0; | |||
| } | |||
| 40% { | |||
| -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |||
| transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |||
| transition-timing-function: ease-in; | |||
| } | |||
| 60% { | |||
| -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |||
| transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |||
| opacity: 1; | |||
| } | |||
| 80% { | |||
| -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |||
| transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |||
| } | |||
| 100% { | |||
| -webkit-transform: perspective(400px); | |||
| transform: perspective(400px); | |||
| } | |||
| } | |||
| @-webkit-keyframes fadeIn { | |||
| from { | |||
| opacity: 0; | |||
| } | |||
| to { | |||
| opacity: 1; | |||
| } | |||
| } | |||
| @keyframes fadeIn { | |||
| from { | |||
| opacity: 0; | |||
| } | |||
| to { | |||
| opacity: 1; | |||
| } | |||
| } | |||
| @-webkit-keyframes fadeOut { | |||
| from { | |||
| opacity: 1; | |||
| } | |||
| to { | |||
| opacity: 0; | |||
| } | |||
| } | |||
| @keyframes fadeOut { | |||
| from { | |||
| opacity: 1; | |||
| } | |||
| to { | |||
| opacity: 0; | |||
| } | |||
| } | |||
| @-webkit-keyframes shake { | |||
| 0% { | |||
| -webkit-transform: translate(2px, 1px) rotate(0deg); | |||
| transform: translate(2px, 1px) rotate(0deg); | |||
| } | |||
| 10% { | |||
| -webkit-transform: translate(-1px, -2px) rotate(-2deg); | |||
| transform: translate(-1px, -2px) rotate(-2deg); | |||
| } | |||
| 20% { | |||
| -webkit-transform: translate(-3px, 0) rotate(3deg); | |||
| transform: translate(-3px, 0) rotate(3deg); | |||
| } | |||
| 30% { | |||
| -webkit-transform: translate(0, 2px) rotate(0deg); | |||
| transform: translate(0, 2px) rotate(0deg); | |||
| } | |||
| 40% { | |||
| -webkit-transform: translate(1px, -1px) rotate(1deg); | |||
| transform: translate(1px, -1px) rotate(1deg); | |||
| } | |||
| 50% { | |||
| -webkit-transform: translate(-1px, 2px) rotate(-1deg); | |||
| transform: translate(-1px, 2px) rotate(-1deg); | |||
| } | |||
| 60% { | |||
| -webkit-transform: translate(-3px, 1px) rotate(0deg); | |||
| transform: translate(-3px, 1px) rotate(0deg); | |||
| } | |||
| 70% { | |||
| -webkit-transform: translate(2px, 1px) rotate(-2deg); | |||
| transform: translate(2px, 1px) rotate(-2deg); | |||
| } | |||
| 80% { | |||
| -webkit-transform: translate(-1px, -1px) rotate(4deg); | |||
| transform: translate(-1px, -1px) rotate(4deg); | |||
| } | |||
| 90% { | |||
| -webkit-transform: translate(2px, 2px) rotate(0deg); | |||
| transform: translate(2px, 2px) rotate(0deg); | |||
| } | |||
| 100% { | |||
| -webkit-transform: translate(1px, -2px) rotate(-1deg); | |||
| transform: translate(1px, -2px) rotate(-1deg); | |||
| } | |||
| } | |||
| @keyframes shake { | |||
| 0% { | |||
| -webkit-transform: translate(2px, 1px) rotate(0deg); | |||
| transform: translate(2px, 1px) rotate(0deg); | |||
| } | |||
| 10% { | |||
| -webkit-transform: translate(-1px, -2px) rotate(-2deg); | |||
| transform: translate(-1px, -2px) rotate(-2deg); | |||
| } | |||
| 20% { | |||
| -webkit-transform: translate(-3px, 0) rotate(3deg); | |||
| transform: translate(-3px, 0) rotate(3deg); | |||
| } | |||
| 30% { | |||
| -webkit-transform: translate(0, 2px) rotate(0deg); | |||
| transform: translate(0, 2px) rotate(0deg); | |||
| } | |||
| 40% { | |||
| -webkit-transform: translate(1px, -1px) rotate(1deg); | |||
| transform: translate(1px, -1px) rotate(1deg); | |||
| } | |||
| 50% { | |||
| -webkit-transform: translate(-1px, 2px) rotate(-1deg); | |||
| transform: translate(-1px, 2px) rotate(-1deg); | |||
| } | |||
| 60% { | |||
| -webkit-transform: translate(-3px, 1px) rotate(0deg); | |||
| transform: translate(-3px, 1px) rotate(0deg); | |||
| } | |||
| 70% { | |||
| -webkit-transform: translate(2px, 1px) rotate(-2deg); | |||
| transform: translate(2px, 1px) rotate(-2deg); | |||
| } | |||
| 80% { | |||
| -webkit-transform: translate(-1px, -1px) rotate(4deg); | |||
| transform: translate(-1px, -1px) rotate(4deg); | |||
| } | |||
| 90% { | |||
| -webkit-transform: translate(2px, 2px) rotate(0deg); | |||
| transform: translate(2px, 2px) rotate(0deg); | |||
| } | |||
| 100% { | |||
| -webkit-transform: translate(1px, -2px) rotate(-1deg); | |||
| transform: translate(1px, -2px) rotate(-1deg); | |||
| } | |||
| } | |||
| @-webkit-keyframes wobble { | |||
| 0% { | |||
| -webkit-transform: none; | |||
| transform: none; | |||
| } | |||
| 15% { | |||
| -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |||
| transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |||
| } | |||
| 30% { | |||
| -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |||
| transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |||
| } | |||
| 45% { | |||
| -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |||
| transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |||
| } | |||
| 60% { | |||
| -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |||
| transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |||
| } | |||
| 75% { | |||
| -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |||
| transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |||
| } | |||
| 100% { | |||
| -webkit-transform: none; | |||
| transform: none; | |||
| } | |||
| } | |||
| @keyframes wobble { | |||
| 0% { | |||
| -webkit-transform: none; | |||
| transform: none; | |||
| } | |||
| 15% { | |||
| -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |||
| transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |||
| } | |||
| 30% { | |||
| -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |||
| transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |||
| } | |||
| 45% { | |||
| -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |||
| transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |||
| } | |||
| 60% { | |||
| -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |||
| transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |||
| } | |||
| 75% { | |||
| -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |||
| transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |||
| } | |||
| 100% { | |||
| -webkit-transform: none; | |||
| transform: none; | |||
| } | |||
| } | |||
| .mailbox-messages > .table { | |||
| margin: 0; | |||
| } | |||
| .mailbox-controls { | |||
| padding: 5px; | |||
| } | |||
| .mailbox-controls.with-border { | |||
| border-bottom: 1px solid rgba(0, 0, 0, 0.125); | |||
| } | |||
| .mailbox-read-info { | |||
| border-bottom: 1px solid rgba(0, 0, 0, 0.125); | |||
| padding: 10px; | |||
| } | |||
| .mailbox-read-info h3 { | |||
| font-size: 20px; | |||
| margin: 0; | |||
| } | |||
| .mailbox-read-info h5 { | |||
| margin: 0; | |||
| padding: 5px 0 0; | |||
| } | |||
| .mailbox-read-time { | |||
| color: #999; | |||
| font-size: 13px; | |||
| } | |||
| .mailbox-read-message { | |||
| padding: 10px; | |||
| } | |||
| .mailbox-attachments { | |||
| padding-left: 0; | |||
| list-style: none; | |||
| } | |||
| .mailbox-attachments li { | |||
| border: 1px solid #eee; | |||
| float: left; | |||
| margin-bottom: 10px; | |||
| margin-right: 10px; | |||
| width: 200px; | |||
| } | |||
| .mailbox-attachment-name { | |||
| color: #666; | |||
| font-weight: 700; | |||
| } | |||
| .mailbox-attachment-icon, | |||
| .mailbox-attachment-info, | |||
| .mailbox-attachment-size { | |||
| display: block; | |||
| } | |||
| .mailbox-attachment-info { | |||
| background-color: #f8f9fa; | |||
| padding: 10px; | |||
| } | |||
| .mailbox-attachment-size { | |||
| color: #999; | |||
| font-size: 12px; | |||
| } | |||
| .mailbox-attachment-size > span { | |||
| display: inline-block; | |||
| padding-top: .75rem; | |||
| } | |||
| .mailbox-attachment-icon { | |||
| color: #666; | |||
| font-size: 65px; | |||
| max-height: 132.5px; | |||
| padding: 20px 10px; | |||
| text-align: center; | |||
| } | |||
| .mailbox-attachment-icon.has-img { | |||
| padding: 0; | |||
| } | |||
| .mailbox-attachment-icon.has-img > img { | |||
| height: auto; | |||
| max-width: 100%; | |||
| } | |||
| .lockscreen { | |||
| background-color: #e9ecef; | |||
| } | |||
| .lockscreen .lockscreen-name { | |||
| font-weight: 600; | |||
| text-align: center; | |||
| } | |||
| .lockscreen-logo { | |||
| font-size: 35px; | |||
| font-weight: 300; | |||
| margin-bottom: 25px; | |||
| text-align: center; | |||
| } | |||
| .lockscreen-logo a { | |||
| color: #495057; | |||
| } | |||
| .lockscreen-wrapper { | |||
| margin: 0 auto; | |||
| margin-top: 10%; | |||
| max-width: 400px; | |||
| } | |||
| .lockscreen-item { | |||
| border-radius: 4px; | |||
| background-color: #fff; | |||
| margin: 10px auto 30px; | |||
| padding: 0; | |||
| position: relative; | |||
| width: 290px; | |||
| } | |||
| .lockscreen-image { | |||
| border-radius: 50%; | |||
| background-color: #fff; | |||
| left: -10px; | |||
| padding: 5px; | |||
| position: absolute; | |||
| top: -25px; | |||
| z-index: 10; | |||
| } | |||
| .lockscreen-image > img { | |||
| border-radius: 50%; | |||
| height: 70px; | |||
| width: 70px; | |||
| } | |||
| .lockscreen-credentials { | |||
| margin-left: 70px; | |||
| } | |||
| .lockscreen-credentials .form-control { | |||
| border: 0; | |||
| } | |||
| .lockscreen-credentials .btn { | |||
| background-color: #fff; | |||
| border: 0; | |||
| padding: 0 10px; | |||
| } | |||
| .lockscreen-footer { | |||
| margin-top: 10px; | |||
| } | |||
| .dark-mode .lockscreen-item { | |||
| background-color: #343a40; | |||
| } | |||
| .dark-mode .lockscreen-logo a { | |||
| color: #fff; | |||
| } | |||
| .dark-mode .lockscreen-credentials .btn { | |||
| background-color: #343a40; | |||
| } | |||
| .dark-mode .lockscreen-image { | |||
| background-color: #6c757d; | |||
| } | |||
| .login-logo, | |||
| .register-logo { | |||
| font-size: 2.1rem; | |||
| font-weight: 300; | |||
| margin-bottom: .9rem; | |||
| text-align: center; | |||
| } | |||
| .login-logo a, | |||
| .register-logo a { | |||
| color: #495057; | |||
| } | |||
| .login-page, | |||
| .register-page { | |||
| -webkit-align-items: center; | |||
| -ms-flex-align: center; | |||
| align-items: center; | |||
| background-color: #e9ecef; | |||
| display: -webkit-flex; | |||
| display: -ms-flexbox; | |||
| display: flex; | |||
| -webkit-flex-direction: column; | |||
| -ms-flex-direction: column; | |||
| flex-direction: column; | |||
| height: 100vh; | |||
| -webkit-justify-content: center; | |||
| -ms-flex-pack: center; | |||
| justify-content: center; | |||
| } | |||
| .login-box, | |||
| .register-box { | |||
| width: 360px; | |||
| } | |||
| @media (max-width: 576px) { | |||
| .login-box, | |||
| .register-box { | |||
| margin-top: .5rem; | |||
| width: 90%; | |||
| } | |||
| } | |||
| .login-box .card, | |||
| .register-box .card { | |||
| margin-bottom: 0; | |||
| } | |||
| .login-card-body, | |||
| .register-card-body { | |||
| background-color: #fff; | |||
| border-top: 0; | |||
| color: #666; | |||
| padding: 20px; | |||
| } | |||
| .login-card-body .input-group .form-control, | |||
| .register-card-body .input-group .form-control { | |||
| border-right: 0; | |||
| } | |||
| .login-card-body .input-group .form-control:focus, | |||
| .register-card-body .input-group .form-control:focus { | |||
| box-shadow: none; | |||
| } | |||
| .login-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text, | |||
| .login-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text, | |||
| .register-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text, | |||
| .register-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text { | |||
| border-color: #80bdff; | |||
| } | |||
| .login-card-body .input-group .form-control.is-valid:focus, | |||
| .register-card-body .input-group .form-control.is-valid:focus { | |||
| box-shadow: none; | |||
| } | |||
| .login-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text, | |||
| .login-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text, | |||
| .register-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text, | |||
| .register-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text { | |||
| border-color: #28a745; | |||
| } | |||
| .login-card-body .input-group .form-control.is-invalid:focus, | |||
| .register-card-body .input-group .form-control.is-invalid:focus { | |||
| box-shadow: none; | |||
| } | |||
| .login-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text, | |||
| .register-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text { | |||
| border-color: #dc3545; | |||
| } | |||
| .login-card-body .input-group .input-group-text, | |||
| .register-card-body .input-group .input-group-text { | |||
| background-color: transparent; | |||
| border-bottom-right-radius: 0.25rem; | |||
| border-left: 0; | |||
| border-top-right-radius: 0.25rem; | |||
| color: #777; | |||
| transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; | |||
| } | |||
| .login-box-msg, | |||
| .register-box-msg { | |||
| margin: 0; | |||
| padding: 0 20px 20px; | |||
| text-align: center; | |||
| } | |||
| .social-auth-links { | |||
| margin: 10px 0; | |||
| } | |||
| .dark-mode .login-card-body, | |||
| .dark-mode .register-card-body { | |||
| background-color: #343a40; | |||
| border-color: #6c757d; | |||
| color: #fff; | |||
| } | |||
| .dark-mode .login-logo a, | |||
| .dark-mode .register-logo a { | |||
| color: #fff; | |||
| } | |||
| .error-page { | |||
| margin: 20px auto 0; | |||
| width: 600px; | |||
| } | |||
| @media (max-width: 767.98px) { | |||
| .error-page { | |||
| width: 100%; | |||
| } | |||
| } | |||
| .error-page > .headline { | |||
| float: left; | |||
| font-size: 100px; | |||
| font-weight: 300; | |||
| } | |||
| @media (max-width: 767.98px) { | |||
| .error-page > .headline { | |||
| float: none; | |||
| text-align: center; | |||
| } | |||
| } | |||
| .error-page > .error-content { | |||
| display: block; | |||
| margin-left: 190px; | |||
| } | |||
| @media (max-width: 767.98px) { | |||
| .error-page > .error-content { | |||
| margin-left: 0; | |||
| } | |||
| } | |||
| .error-page > .error-content > h3 { | |||
| font-size: 25px; | |||
| font-weight: 300; | |||
| } | |||
| @media (max-width: 767.98px) { | |||
| .error-page > .error-content > h3 { | |||
| text-align: center; | |||
| } | |||
| } | |||
| .invoice { | |||
| background-color: #fff; | |||
| border: 1px solid rgba(0, 0, 0, 0.125); | |||
| position: relative; | |||
| } | |||
| .invoice-title { | |||
| margin-top: 0; | |||
| } | |||
| .dark-mode .invoice { | |||
| background-color: #343a40; | |||
| } | |||
| .profile-user-img { | |||
| border: 3px solid #adb5bd; | |||
| margin: 0 auto; | |||
| padding: 3px; | |||
| width: 100px; | |||
| } | |||
| .profile-username { | |||
| font-size: 21px; | |||
| margin-top: 5px; | |||
| } | |||
| .post { | |||
| border-bottom: 1px solid #adb5bd; | |||
| color: #666; | |||
| margin-bottom: 15px; | |||
| padding-bottom: 15px; | |||
| } | |||
| .post:last-of-type { | |||
| border-bottom: 0; | |||
| margin-bottom: 0; | |||
| padding-bottom: 0; | |||
| } | |||
| .post .user-block { | |||
| margin-bottom: 15px; | |||
| width: 100%; | |||
| } | |||
| .post .row { | |||
| width: 100%; | |||
| } | |||
| .dark-mode .post { | |||
| color: #fff; | |||
| border-color: #6c757d; | |||
| } | |||
| .product-image { | |||
| max-width: 100%; | |||
| height: auto; | |||
| width: 100%; | |||
| } | |||
| .product-image-thumbs { | |||
| -webkit-align-items: stretch; | |||
| -ms-flex-align: stretch; | |||
| align-items: stretch; | |||
| display: -webkit-flex; | |||
| display: -ms-flexbox; | |||
| display: flex; | |||
| margin-top: 2rem; | |||
| } | |||
| .product-image-thumb { | |||
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075); | |||
| border-radius: 0.25rem; | |||
| background-color: #fff; | |||
| border: 1px solid #dee2e6; | |||
| display: -webkit-flex; | |||
| display: -ms-flexbox; | |||
| display: flex; | |||
| margin-right: 1rem; | |||
| max-width: 7rem; | |||
| padding: 0.5rem; | |||
| } | |||
| .product-image-thumb img { | |||
| max-width: 100%; | |||
| height: auto; | |||
| -webkit-align-self: center; | |||
| -ms-flex-item-align: center; | |||
| align-self: center; | |||
| } | |||
| .product-image-thumb:hover { | |||
| opacity: .5; | |||
| } | |||
| .product-share a { | |||
| margin-right: .5rem; | |||
| } | |||
| .projects td { | |||
| vertical-align: middle; | |||
| } | |||
| .projects .list-inline { | |||
| margin-bottom: 0; | |||
| } | |||
| .projects img.table-avatar, | |||
| .projects .table-avatar img { | |||
| border-radius: 50%; | |||
| display: inline; | |||
| width: 2.5rem; | |||
| } | |||
| .projects .project-state { | |||
| text-align: center; | |||
| } | |||
| body.iframe-mode .main-sidebar { | |||
| display: none; | |||
| } | |||
| body.iframe-mode .content-wrapper { | |||
| margin-left: 0 !important; | |||
| margin-top: 0 !important; | |||
| padding-bottom: 0 !important; | |||
| } | |||
| body.iframe-mode .main-header, | |||
| body.iframe-mode .main-footer { | |||
| display: none; | |||
| } | |||
| body.iframe-mode-fullscreen { | |||
| overflow: hidden; | |||
| } | |||
| .content-wrapper { | |||
| height: 100%; | |||
| } | |||
| .content-wrapper.iframe-mode .btn-iframe-close { | |||
| color: #dc3545; | |||
| position: absolute; | |||
| line-height: 1; | |||
| right: .125rem; | |||
| top: .125rem; | |||
| z-index: 10; | |||
| visibility: hidden; | |||
| } | |||
| .content-wrapper.iframe-mode .btn-iframe-close:hover, .content-wrapper.iframe-mode .btn-iframe-close:focus { | |||
| -webkit-animation-name: fadeIn; | |||
| animation-name: fadeIn; | |||
| -webkit-animation-duration: 0.3s; | |||
| animation-duration: 0.3s; | |||
| -webkit-animation-fill-mode: both; | |||
| animation-fill-mode: both; | |||
| visibility: visible; | |||
| } | |||
| @media (hover: none) and (pointer: coarse) { | |||
| .content-wrapper.iframe-mode .btn-iframe-close { | |||
| visibility: visible; | |||
| } | |||
| } | |||
| .content-wrapper.iframe-mode .navbar-nav { | |||
| overflow-y: auto; | |||
| width: 100%; | |||
| } | |||
| .content-wrapper.iframe-mode .navbar-nav .nav-link { | |||
| white-space: nowrap; | |||
| } | |||
| .content-wrapper.iframe-mode .navbar-nav .nav-item { | |||
| position: relative; | |||
| } | |||
| .content-wrapper.iframe-mode .navbar-nav .nav-item:hover .btn-iframe-close, .content-wrapper.iframe-mode .navbar-nav .nav-item:focus .btn-iframe-close { | |||
| -webkit-animation-name: fadeIn; | |||
| animation-name: fadeIn; | |||
| -webkit-animation-duration: 0.3s; | |||
| animation-duration: 0.3s; | |||
| -webkit-animation-fill-mode: both; | |||
| animation-fill-mode: both; | |||
| visibility: visible; | |||
| } | |||
| @media (hover: none) and (pointer: coarse) { | |||
| .content-wrapper.iframe-mode .navbar-nav .nav-item:hover .btn-iframe-close, .content-wrapper.iframe-mode .navbar-nav .nav-item:focus .btn-iframe-close { | |||
| visibility: visible; | |||
| } | |||
| } | |||
| .content-wrapper.iframe-mode .tab-content { | |||
| position: relative; | |||
| } | |||
| .content-wrapper.iframe-mode .tab-pane + .tab-empty { | |||
| display: none; | |||
| } | |||
| .content-wrapper.iframe-mode .tab-empty { | |||
| width: 100%; | |||
| display: -webkit-flex; | |||
| display: -ms-flexbox; | |||
| display: flex; | |||
| -webkit-justify-content: center; | |||
| -ms-flex-pack: center; | |||
| justify-content: center; | |||
| -webkit-align-items: center; | |||
| -ms-flex-align: center; | |||
| align-items: center; | |||
| } | |||
| .content-wrapper.iframe-mode .tab-loading { | |||
| position: absolute; | |||
| top: 0; | |||
| left: 0; | |||
| width: 100%; | |||
| display: none; | |||
| background-color: #f4f6f9; | |||
| } | |||
| .content-wrapper.iframe-mode .tab-loading > div { | |||
| display: -webkit-flex; | |||
| display: -ms-flexbox; | |||
| display: flex; | |||
| -webkit-justify-content: center; | |||
| -ms-flex-pack: center; | |||
| justify-content: center; | |||
| -webkit-align-items: center; | |||
| -ms-flex-align: center; | |||
| align-items: center; | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| .content-wrapper.iframe-mode iframe { | |||
| border: 0; | |||
| width: 100%; | |||
| height: 100%; | |||
| margin-bottom: -8px; | |||
| } | |||
| .content-wrapper.iframe-mode iframe .content-wrapper { | |||
| padding-bottom: 0 !important; | |||
| } | |||
| body.iframe-mode-fullscreen .content-wrapper.iframe-mode { | |||
| position: absolute; | |||
| left: 0; | |||
| top: 0; | |||
| right: 0; | |||
| bottom: 0; | |||
| margin-left: 0 !important; | |||
| height: 100%; | |||
| min-height: 100%; | |||
| z-index: 1048; | |||
| } | |||
| .permanent-btn-iframe-close .btn-iframe-close { | |||
| -webkit-animation: none !important; | |||
| animation: none !important; | |||
| visibility: visible !important; | |||
| opacity: 1; | |||
| } | |||
| .content-wrapper.kanban { | |||
| height: 1px; | |||
| } | |||
| .content-wrapper.kanban .content { | |||
| height: 100%; | |||
| overflow-x: auto; | |||
| overflow-y: hidden; | |||
| } | |||
| .content-wrapper.kanban .content .container, | |||
| .content-wrapper.kanban .content .container-fluid { | |||
| width: -webkit-max-content; | |||
| width: -moz-max-content; | |||
| width: max-content; | |||
| display: -webkit-flex; | |||
| display: -ms-flexbox; | |||
| display: flex; | |||
| -webkit-align-items: stretch; | |||
| -ms-flex-align: stretch; | |||
| align-items: stretch; | |||
| } | |||
| .content-wrapper.kanban .content-header + .content { | |||
| height: calc(100% - ((2 * 15px) + (1.8rem * 1.2))); | |||
| } | |||
| .content-wrapper.kanban .card .card-body { | |||
| padding: .5rem; | |||
| } | |||
| .content-wrapper.kanban .card.card-row { | |||
| width: 340px; | |||
| display: inline-block; | |||
| margin: 0 .5rem; | |||
| } | |||
| .content-wrapper.kanban .card.card-row:first-child { | |||
| margin-left: 0; | |||
| } | |||
| .content-wrapper.kanban .card.card-row .card-body { | |||
| height: calc(100% - (12px + (1.8rem * 1.2) + .5rem)); | |||
| overflow-y: auto; | |||
| } | |||
| .content-wrapper.kanban .card.card-row .card:last-child { | |||
| margin-bottom: 0; | |||
| border-bottom-width: 1px; | |||
| } | |||
| .content-wrapper.kanban .card.card-row .card .card-header { | |||
| padding: .5rem .75rem; | |||
| } | |||
| .content-wrapper.kanban .card.card-row .card .card-body { | |||
| padding: .75rem; | |||
| } | |||
| .content-wrapper.kanban .btn-tool.btn-link { | |||
| text-decoration: underline; | |||
| padding-left: 0; | |||
| padding-right: 0; | |||
| } | |||
| /*# sourceMappingURL=adminlte.pages.css.map */ | |||
| @@ -0,0 +1,48 @@ | |||
| { | |||
| "root": true, | |||
| "parserOptions": { | |||
| "ecmaVersion": 5, | |||
| "sourceType": "script" | |||
| }, | |||
| "env": { | |||
| "jquery": true | |||
| }, | |||
| "extends": [ | |||
| "plugin:unicorn/recommended", | |||
| "xo", | |||
| "xo/browser" | |||
| ], | |||
| "rules": { | |||
| "capitalized-comments": "off", | |||
| "indent": [ | |||
| "error", | |||
| 2, | |||
| { | |||
| "MemberExpression": "off", | |||
| "SwitchCase": 1 | |||
| } | |||
| ], | |||
| "multiline-ternary": [ | |||
| "error", | |||
| "always-multiline" | |||
| ], | |||
| "object-curly-spacing": [ | |||
| "error", | |||
| "always" | |||
| ], | |||
| "semi": [ | |||
| "error", | |||
| "never" | |||
| ], | |||
| "strict": "error", | |||
| "unicorn/no-array-for-each": "off", | |||
| "unicorn/no-for-loop": "off", | |||
| "unicorn/no-null": "off", | |||
| "unicorn/prefer-dataset": "off", | |||
| "unicorn/prefer-includes": "off", | |||
| "unicorn/prefer-node-append": "off", | |||
| "unicorn/prefer-query-selector": "off", | |||
| "unicorn/prefer-spread": "off", | |||
| "unicorn/prevent-abbreviations": "off" | |||
| } | |||
| } | |||
| @@ -0,0 +1,686 @@ | |||
| /** | |||
| * AdminLTE Demo Menu | |||
| * ------------------ | |||
| * You should not use this file in production. | |||
| * This file is for demo purposes only. | |||
| */ | |||
| /* eslint-disable camelcase */ | |||
| (function ($) { | |||
| 'use strict' | |||
| function capitalizeFirstLetter(string) { | |||
| return string.charAt(0).toUpperCase() + string.slice(1) | |||
| } | |||
| function createSkinBlock(colors, callback, noneSelected) { | |||
| var $block = $('<select />', { | |||
| class: noneSelected ? 'custom-select mb-3 border-0' : 'custom-select mb-3 text-light border-0 ' + colors[0].replace(/accent-|navbar-/, 'bg-') | |||
| }) | |||
| if (noneSelected) { | |||
| var $default = $('<option />', { | |||
| text: 'None Selected' | |||
| }) | |||
| if (callback) { | |||
| $default.on('click', callback) | |||
| } | |||
| $block.append($default) | |||
| } | |||
| colors.forEach(function (color) { | |||
| var $color = $('<option />', { | |||
| class: (typeof color === 'object' ? color.join(' ') : color).replace('navbar-', 'bg-').replace('accent-', 'bg-'), | |||
| text: capitalizeFirstLetter((typeof color === 'object' ? color.join(' ') : color).replace(/navbar-|accent-|bg-/, '').replace('-', ' ')) | |||
| }) | |||
| $block.append($color) | |||
| $color.data('color', color) | |||
| if (callback) { | |||
| $color.on('click', callback) | |||
| } | |||
| }) | |||
| return $block | |||
| } | |||
| var $sidebar = $('.control-sidebar') | |||
| var $container = $('<div />', { | |||
| class: 'p-3 control-sidebar-content' | |||
| }) | |||
| $sidebar.append($container) | |||
| // Checkboxes | |||
| $container.append( | |||
| '<h5>Customize AdminLTE</h5><hr class="mb-2"/>' | |||
| ) | |||
| var $dark_mode_checkbox = $('<input />', { | |||
| type: 'checkbox', | |||
| value: 1, | |||
| checked: $('body').hasClass('dark-mode'), | |||
| class: 'mr-1' | |||
| }).on('click', function () { | |||
| if ($(this).is(':checked')) { | |||
| $('body').addClass('dark-mode') | |||
| } else { | |||
| $('body').removeClass('dark-mode') | |||
| } | |||
| }) | |||
| var $dark_mode_container = $('<div />', { class: 'mb-4' }).append($dark_mode_checkbox).append('<span>Dark Mode</span>') | |||
| $container.append($dark_mode_container) | |||
| $container.append('<h6>Header Options</h6>') | |||
| var $header_fixed_checkbox = $('<input />', { | |||
| type: 'checkbox', | |||
| value: 1, | |||
| checked: $('body').hasClass('layout-navbar-fixed'), | |||
| class: 'mr-1' | |||
| }).on('click', function () { | |||
| if ($(this).is(':checked')) { | |||
| $('body').addClass('layout-navbar-fixed') | |||
| } else { | |||
| $('body').removeClass('layout-navbar-fixed') | |||
| } | |||
| }) | |||
| var $header_fixed_container = $('<div />', { class: 'mb-1' }).append($header_fixed_checkbox).append('<span>Fixed</span>') | |||
| $container.append($header_fixed_container) | |||
| var $dropdown_legacy_offset_checkbox = $('<input />', { | |||
| type: 'checkbox', | |||
| value: 1, | |||
| checked: $('.main-header').hasClass('dropdown-legacy'), | |||
| class: 'mr-1' | |||
| }).on('click', function () { | |||
| if ($(this).is(':checked')) { | |||
| $('.main-header').addClass('dropdown-legacy') | |||
| } else { | |||
| $('.main-header').removeClass('dropdown-legacy') | |||
| } | |||
| }) | |||
| var $dropdown_legacy_offset_container = $('<div />', { class: 'mb-1' }).append($dropdown_legacy_offset_checkbox).append('<span>Dropdown Legacy Offset</span>') | |||
| $container.append($dropdown_legacy_offset_container) | |||
| var $no_border_checkbox = $('<input />', { | |||
| type: 'checkbox', | |||
| value: 1, | |||
| checked: $('.main-header').hasClass('border-bottom-0'), | |||
| class: 'mr-1' | |||
| }).on('click', function () { | |||
| if ($(this).is(':checked')) { | |||
| $('.main-header').addClass('border-bottom-0') | |||
| } else { | |||
| $('.main-header').removeClass('border-bottom-0') | |||
| } | |||
| }) | |||
| var $no_border_container = $('<div />', { class: 'mb-4' }).append($no_border_checkbox).append('<span>No border</span>') | |||
| $container.append($no_border_container) | |||
| $container.append('<h6>Sidebar Options</h6>') | |||
| var $sidebar_collapsed_checkbox = $('<input />', { | |||
| type: 'checkbox', | |||
| value: 1, | |||
| checked: $('body').hasClass('sidebar-collapse'), | |||
| class: 'mr-1' | |||
| }).on('click', function () { | |||
| if ($(this).is(':checked')) { | |||
| $('body').addClass('sidebar-collapse') | |||
| $(window).trigger('resize') | |||
| } else { | |||
| $('body').removeClass('sidebar-collapse') | |||
| $(window).trigger('resize') | |||
| } | |||
| }) | |||
| var $sidebar_collapsed_container = $('<div />', { class: 'mb-1' }).append($sidebar_collapsed_checkbox).append('<span>Collapsed</span>') | |||
| $container.append($sidebar_collapsed_container) | |||
| $(document).on('collapsed.lte.pushmenu', '[data-widget="pushmenu"]', function () { | |||
| $sidebar_collapsed_checkbox.prop('checked', true) | |||
| }) | |||
| $(document).on('shown.lte.pushmenu', '[data-widget="pushmenu"]', function () { | |||
| $sidebar_collapsed_checkbox.prop('checked', false) | |||
| }) | |||
| var $sidebar_fixed_checkbox = $('<input />', { | |||
| type: 'checkbox', | |||
| value: 1, | |||
| checked: $('body').hasClass('layout-fixed'), | |||
| class: 'mr-1' | |||
| }).on('click', function () { | |||
| if ($(this).is(':checked')) { | |||
| $('body').addClass('layout-fixed') | |||
| $(window).trigger('resize') | |||
| } else { | |||
| $('body').removeClass('layout-fixed') | |||
| $(window).trigger('resize') | |||
| } | |||
| }) | |||
| var $sidebar_fixed_container = $('<div />', { class: 'mb-1' }).append($sidebar_fixed_checkbox).append('<span>Fixed</span>') | |||
| $container.append($sidebar_fixed_container) | |||
| var $sidebar_mini_checkbox = $('<input />', { | |||
| type: 'checkbox', | |||
| value: 1, | |||
| checked: $('body').hasClass('sidebar-mini'), | |||
| class: 'mr-1' | |||
| }).on('click', function () { | |||
| if ($(this).is(':checked')) { | |||
| $('body').addClass('sidebar-mini') | |||
| } else { | |||
| $('body').removeClass('sidebar-mini') | |||
| } | |||
| }) | |||
| var $sidebar_mini_container = $('<div />', { class: 'mb-1' }).append($sidebar_mini_checkbox).append('<span>Sidebar Mini</span>') | |||
| $container.append($sidebar_mini_container) | |||
| var $sidebar_mini_md_checkbox = $('<input />', { | |||
| type: 'checkbox', | |||
| value: 1, | |||
| checked: $('body').hasClass('sidebar-mini-md'), | |||
| class: 'mr-1' | |||
| }).on('click', function () { | |||
| if ($(this).is(':checked')) { | |||
| $('body').addClass('sidebar-mini-md') | |||
| } else { | |||
| $('body').removeClass('sidebar-mini-md') | |||
| } | |||
| }) | |||
| var $sidebar_mini_md_container = $('<div />', { class: 'mb-1' }).append($sidebar_mini_md_checkbox).append('<span>Sidebar Mini MD</span>') | |||
| $container.append($sidebar_mini_md_container) | |||
| var $sidebar_mini_xs_checkbox = $('<input />', { | |||
| type: 'checkbox', | |||
| value: 1, | |||
| checked: $('body').hasClass('sidebar-mini-xs'), | |||
| class: 'mr-1' | |||
| }).on('click', function () { | |||
| if ($(this).is(':checked')) { | |||
| $('body').addClass('sidebar-mini-xs') | |||
| } else { | |||
| $('body').removeClass('sidebar-mini-xs') | |||
| } | |||
| }) | |||
| var $sidebar_mini_xs_container = $('<div />', { class: 'mb-1' }).append($sidebar_mini_xs_checkbox).append('<span>Sidebar Mini XS</span>') | |||
| $container.append($sidebar_mini_xs_container) | |||
| var $flat_sidebar_checkbox = $('<input />', { | |||
| type: 'checkbox', | |||
| value: 1, | |||
| checked: $('.nav-sidebar').hasClass('nav-flat'), | |||
| class: 'mr-1' | |||
| }).on('click', function () { | |||
| if ($(this).is(':checked')) { | |||
| $('.nav-sidebar').addClass('nav-flat') | |||
| } else { | |||
| $('.nav-sidebar').removeClass('nav-flat') | |||
| } | |||
| }) | |||
| var $flat_sidebar_container = $('<div />', { class: 'mb-1' }).append($flat_sidebar_checkbox).append('<span>Nav Flat Style</span>') | |||
| $container.append($flat_sidebar_container) | |||
| var $legacy_sidebar_checkbox = $('<input />', { | |||
| type: 'checkbox', | |||
| value: 1, | |||
| checked: $('.nav-sidebar').hasClass('nav-legacy'), | |||
| class: 'mr-1' | |||
| }).on('click', function () { | |||
| if ($(this).is(':checked')) { | |||
| $('.nav-sidebar').addClass('nav-legacy') | |||
| } else { | |||
| $('.nav-sidebar').removeClass('nav-legacy') | |||
| } | |||
| }) | |||
| var $legacy_sidebar_container = $('<div />', { class: 'mb-1' }).append($legacy_sidebar_checkbox).append('<span>Nav Legacy Style</span>') | |||
| $container.append($legacy_sidebar_container) | |||
| var $compact_sidebar_checkbox = $('<input />', { | |||
| type: 'checkbox', | |||
| value: 1, | |||
| checked: $('.nav-sidebar').hasClass('nav-compact'), | |||
| class: 'mr-1' | |||
| }).on('click', function () { | |||
| if ($(this).is(':checked')) { | |||
| $('.nav-sidebar').addClass('nav-compact') | |||
| } else { | |||
| $('.nav-sidebar').removeClass('nav-compact') | |||
| } | |||
| }) | |||
| var $compact_sidebar_container = $('<div />', { class: 'mb-1' }).append($compact_sidebar_checkbox).append('<span>Nav Compact</span>') | |||
| $container.append($compact_sidebar_container) | |||
| var $child_indent_sidebar_checkbox = $('<input />', { | |||
| type: 'checkbox', | |||
| value: 1, | |||
| checked: $('.nav-sidebar').hasClass('nav-child-indent'), | |||
| class: 'mr-1' | |||
| }).on('click', function () { | |||
| if ($(this).is(':checked')) { | |||
| $('.nav-sidebar').addClass('nav-child-indent') | |||
| } else { | |||
| $('.nav-sidebar').removeClass('nav-child-indent') | |||
| } | |||
| }) | |||
| var $child_indent_sidebar_container = $('<div />', { class: 'mb-1' }).append($child_indent_sidebar_checkbox).append('<span>Nav Child Indent</span>') | |||
| $container.append($child_indent_sidebar_container) | |||
| var $child_hide_sidebar_checkbox = $('<input />', { | |||
| type: 'checkbox', | |||
| value: 1, | |||
| checked: $('.nav-sidebar').hasClass('nav-collapse-hide-child'), | |||
| class: 'mr-1' | |||
| }).on('click', function () { | |||
| if ($(this).is(':checked')) { | |||
| $('.nav-sidebar').addClass('nav-collapse-hide-child') | |||
| } else { | |||
| $('.nav-sidebar').removeClass('nav-collapse-hide-child') | |||
| } | |||
| }) | |||
| var $child_hide_sidebar_container = $('<div />', { class: 'mb-1' }).append($child_hide_sidebar_checkbox).append('<span>Nav Child Hide on Collapse</span>') | |||
| $container.append($child_hide_sidebar_container) | |||
| var $no_expand_sidebar_checkbox = $('<input />', { | |||
| type: 'checkbox', | |||
| value: 1, | |||
| checked: $('.main-sidebar').hasClass('sidebar-no-expand'), | |||
| class: 'mr-1' | |||
| }).on('click', function () { | |||
| if ($(this).is(':checked')) { | |||
| $('.main-sidebar').addClass('sidebar-no-expand') | |||
| } else { | |||
| $('.main-sidebar').removeClass('sidebar-no-expand') | |||
| } | |||
| }) | |||
| var $no_expand_sidebar_container = $('<div />', { class: 'mb-4' }).append($no_expand_sidebar_checkbox).append('<span>Disable Hover/Focus Auto-Expand</span>') | |||
| $container.append($no_expand_sidebar_container) | |||
| $container.append('<h6>Footer Options</h6>') | |||
| var $footer_fixed_checkbox = $('<input />', { | |||
| type: 'checkbox', | |||
| value: 1, | |||
| checked: $('body').hasClass('layout-footer-fixed'), | |||
| class: 'mr-1' | |||
| }).on('click', function () { | |||
| if ($(this).is(':checked')) { | |||
| $('body').addClass('layout-footer-fixed') | |||
| } else { | |||
| $('body').removeClass('layout-footer-fixed') | |||
| } | |||
| }) | |||
| var $footer_fixed_container = $('<div />', { class: 'mb-4' }).append($footer_fixed_checkbox).append('<span>Fixed</span>') | |||
| $container.append($footer_fixed_container) | |||
| $container.append('<h6>Small Text Options</h6>') | |||
| var $text_sm_body_checkbox = $('<input />', { | |||
| type: 'checkbox', | |||
| value: 1, | |||
| checked: $('body').hasClass('text-sm'), | |||
| class: 'mr-1' | |||
| }).on('click', function () { | |||
| if ($(this).is(':checked')) { | |||
| $('body').addClass('text-sm') | |||
| } else { | |||
| $('body').removeClass('text-sm') | |||
| } | |||
| }) | |||
| var $text_sm_body_container = $('<div />', { class: 'mb-1' }).append($text_sm_body_checkbox).append('<span>Body</span>') | |||
| $container.append($text_sm_body_container) | |||
| var $text_sm_header_checkbox = $('<input />', { | |||
| type: 'checkbox', | |||
| value: 1, | |||
| checked: $('.main-header').hasClass('text-sm'), | |||
| class: 'mr-1' | |||
| }).on('click', function () { | |||
| if ($(this).is(':checked')) { | |||
| $('.main-header').addClass('text-sm') | |||
| } else { | |||
| $('.main-header').removeClass('text-sm') | |||
| } | |||
| }) | |||
| var $text_sm_header_container = $('<div />', { class: 'mb-1' }).append($text_sm_header_checkbox).append('<span>Navbar</span>') | |||
| $container.append($text_sm_header_container) | |||
| var $text_sm_brand_checkbox = $('<input />', { | |||
| type: 'checkbox', | |||
| value: 1, | |||
| checked: $('.brand-link').hasClass('text-sm'), | |||
| class: 'mr-1' | |||
| }).on('click', function () { | |||
| if ($(this).is(':checked')) { | |||
| $('.brand-link').addClass('text-sm') | |||
| } else { | |||
| $('.brand-link').removeClass('text-sm') | |||
| } | |||
| }) | |||
| var $text_sm_brand_container = $('<div />', { class: 'mb-1' }).append($text_sm_brand_checkbox).append('<span>Brand</span>') | |||
| $container.append($text_sm_brand_container) | |||
| var $text_sm_sidebar_checkbox = $('<input />', { | |||
| type: 'checkbox', | |||
| value: 1, | |||
| checked: $('.nav-sidebar').hasClass('text-sm'), | |||
| class: 'mr-1' | |||
| }).on('click', function () { | |||
| if ($(this).is(':checked')) { | |||
| $('.nav-sidebar').addClass('text-sm') | |||
| } else { | |||
| $('.nav-sidebar').removeClass('text-sm') | |||
| } | |||
| }) | |||
| var $text_sm_sidebar_container = $('<div />', { class: 'mb-1' }).append($text_sm_sidebar_checkbox).append('<span>Sidebar Nav</span>') | |||
| $container.append($text_sm_sidebar_container) | |||
| var $text_sm_footer_checkbox = $('<input />', { | |||
| type: 'checkbox', | |||
| value: 1, | |||
| checked: $('.main-footer').hasClass('text-sm'), | |||
| class: 'mr-1' | |||
| }).on('click', function () { | |||
| if ($(this).is(':checked')) { | |||
| $('.main-footer').addClass('text-sm') | |||
| } else { | |||
| $('.main-footer').removeClass('text-sm') | |||
| } | |||
| }) | |||
| var $text_sm_footer_container = $('<div />', { class: 'mb-4' }).append($text_sm_footer_checkbox).append('<span>Footer</span>') | |||
| $container.append($text_sm_footer_container) | |||
| // Color Arrays | |||
| var navbar_dark_skins = [ | |||
| 'navbar-primary', | |||
| 'navbar-secondary', | |||
| 'navbar-info', | |||
| 'navbar-success', | |||
| 'navbar-danger', | |||
| 'navbar-indigo', | |||
| 'navbar-purple', | |||
| 'navbar-pink', | |||
| 'navbar-navy', | |||
| 'navbar-lightblue', | |||
| 'navbar-teal', | |||
| 'navbar-cyan', | |||
| 'navbar-dark', | |||
| 'navbar-gray-dark', | |||
| 'navbar-gray' | |||
| ] | |||
| var navbar_light_skins = [ | |||
| 'navbar-light', | |||
| 'navbar-warning', | |||
| 'navbar-white', | |||
| 'navbar-orange' | |||
| ] | |||
| var sidebar_colors = [ | |||
| 'bg-primary', | |||
| 'bg-warning', | |||
| 'bg-info', | |||
| 'bg-danger', | |||
| 'bg-success', | |||
| 'bg-indigo', | |||
| 'bg-lightblue', | |||
| 'bg-navy', | |||
| 'bg-purple', | |||
| 'bg-fuchsia', | |||
| 'bg-pink', | |||
| 'bg-maroon', | |||
| 'bg-orange', | |||
| 'bg-lime', | |||
| 'bg-teal', | |||
| 'bg-olive' | |||
| ] | |||
| var accent_colors = [ | |||
| 'accent-primary', | |||
| 'accent-warning', | |||
| 'accent-info', | |||
| 'accent-danger', | |||
| 'accent-success', | |||
| 'accent-indigo', | |||
| 'accent-lightblue', | |||
| 'accent-navy', | |||
| 'accent-purple', | |||
| 'accent-fuchsia', | |||
| 'accent-pink', | |||
| 'accent-maroon', | |||
| 'accent-orange', | |||
| 'accent-lime', | |||
| 'accent-teal', | |||
| 'accent-olive' | |||
| ] | |||
| var sidebar_skins = [ | |||
| 'sidebar-dark-primary', | |||
| 'sidebar-dark-warning', | |||
| 'sidebar-dark-info', | |||
| 'sidebar-dark-danger', | |||
| 'sidebar-dark-success', | |||
| 'sidebar-dark-indigo', | |||
| 'sidebar-dark-lightblue', | |||
| 'sidebar-dark-navy', | |||
| 'sidebar-dark-purple', | |||
| 'sidebar-dark-fuchsia', | |||
| 'sidebar-dark-pink', | |||
| 'sidebar-dark-maroon', | |||
| 'sidebar-dark-orange', | |||
| 'sidebar-dark-lime', | |||
| 'sidebar-dark-teal', | |||
| 'sidebar-dark-olive', | |||
| 'sidebar-light-primary', | |||
| 'sidebar-light-warning', | |||
| 'sidebar-light-info', | |||
| 'sidebar-light-danger', | |||
| 'sidebar-light-success', | |||
| 'sidebar-light-indigo', | |||
| 'sidebar-light-lightblue', | |||
| 'sidebar-light-navy', | |||
| 'sidebar-light-purple', | |||
| 'sidebar-light-fuchsia', | |||
| 'sidebar-light-pink', | |||
| 'sidebar-light-maroon', | |||
| 'sidebar-light-orange', | |||
| 'sidebar-light-lime', | |||
| 'sidebar-light-teal', | |||
| 'sidebar-light-olive' | |||
| ] | |||
| // Navbar Variants | |||
| $container.append('<h6>Navbar Variants</h6>') | |||
| var $navbar_variants = $('<div />', { | |||
| class: 'd-flex' | |||
| }) | |||
| var navbar_all_colors = navbar_dark_skins.concat(navbar_light_skins) | |||
| var $navbar_variants_colors = createSkinBlock(navbar_all_colors, function () { | |||
| var color = $(this).data('color') | |||
| var $main_header = $('.main-header') | |||
| $main_header.removeClass('navbar-dark').removeClass('navbar-light') | |||
| navbar_all_colors.forEach(function (color) { | |||
| $main_header.removeClass(color) | |||
| }) | |||
| $(this).parent().removeClass().addClass('custom-select mb-3 text-light border-0 ') | |||
| if (navbar_dark_skins.indexOf(color) > -1) { | |||
| $main_header.addClass('navbar-dark') | |||
| $(this).parent().addClass(color).addClass('text-light') | |||
| } else { | |||
| $main_header.addClass('navbar-light') | |||
| $(this).parent().addClass(color) | |||
| } | |||
| $main_header.addClass(color) | |||
| }) | |||
| var active_navbar_color = null | |||
| $('.main-header')[0].classList.forEach(function (className) { | |||
| if (navbar_all_colors.indexOf(className) > -1 && active_navbar_color === null) { | |||
| active_navbar_color = className.replace('navbar-', 'bg-') | |||
| } | |||
| }) | |||
| $navbar_variants_colors.find('option.' + active_navbar_color).prop('selected', true) | |||
| $navbar_variants_colors.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_navbar_color) | |||
| $navbar_variants.append($navbar_variants_colors) | |||
| $container.append($navbar_variants) | |||
| // Sidebar Colors | |||
| $container.append('<h6>Accent Color Variants</h6>') | |||
| var $accent_variants = $('<div />', { | |||
| class: 'd-flex' | |||
| }) | |||
| $container.append($accent_variants) | |||
| $container.append(createSkinBlock(accent_colors, function () { | |||
| var color = $(this).data('color') | |||
| var accent_class = color | |||
| var $body = $('body') | |||
| accent_colors.forEach(function (skin) { | |||
| $body.removeClass(skin) | |||
| }) | |||
| $body.addClass(accent_class) | |||
| }, true)) | |||
| var active_accent_color = null | |||
| $('body')[0].classList.forEach(function (className) { | |||
| if (accent_colors.indexOf(className) > -1 && active_accent_color === null) { | |||
| active_accent_color = className.replace('navbar-', 'bg-') | |||
| } | |||
| }) | |||
| // $accent_variants.find('option.' + active_accent_color).prop('selected', true) | |||
| // $accent_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_accent_color) | |||
| $container.append('<h6>Dark Sidebar Variants</h6>') | |||
| var $sidebar_variants_dark = $('<div />', { | |||
| class: 'd-flex' | |||
| }) | |||
| $container.append($sidebar_variants_dark) | |||
| var $sidebar_dark_variants = createSkinBlock(sidebar_colors, function () { | |||
| var color = $(this).data('color') | |||
| var sidebar_class = 'sidebar-dark-' + color.replace('bg-', '') | |||
| var $sidebar = $('.main-sidebar') | |||
| sidebar_skins.forEach(function (skin) { | |||
| $sidebar.removeClass(skin) | |||
| $sidebar_light_variants.removeClass(skin.replace('sidebar-dark-', 'bg-')).removeClass('text-light') | |||
| }) | |||
| $(this).parent().removeClass().addClass('custom-select mb-3 text-light border-0').addClass(color) | |||
| $sidebar_light_variants.find('option').prop('selected', false) | |||
| $sidebar.addClass(sidebar_class) | |||
| $('.sidebar').removeClass('os-theme-dark').addClass('os-theme-light') | |||
| }, true) | |||
| $container.append($sidebar_dark_variants) | |||
| var active_sidebar_dark_color = null | |||
| $('.main-sidebar')[0].classList.forEach(function (className) { | |||
| var color = className.replace('sidebar-dark-', 'bg-') | |||
| if (sidebar_colors.indexOf(color) > -1 && active_sidebar_dark_color === null) { | |||
| active_sidebar_dark_color = color | |||
| } | |||
| }) | |||
| $sidebar_dark_variants.find('option.' + active_sidebar_dark_color).prop('selected', true) | |||
| $sidebar_dark_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_sidebar_dark_color) | |||
| $container.append('<h6>Light Sidebar Variants</h6>') | |||
| var $sidebar_variants_light = $('<div />', { | |||
| class: 'd-flex' | |||
| }) | |||
| $container.append($sidebar_variants_light) | |||
| var $sidebar_light_variants = createSkinBlock(sidebar_colors, function () { | |||
| var color = $(this).data('color') | |||
| var sidebar_class = 'sidebar-light-' + color.replace('bg-', '') | |||
| var $sidebar = $('.main-sidebar') | |||
| sidebar_skins.forEach(function (skin) { | |||
| $sidebar.removeClass(skin) | |||
| $sidebar_dark_variants.removeClass(skin.replace('sidebar-light-', 'bg-')).removeClass('text-light') | |||
| }) | |||
| $(this).parent().removeClass().addClass('custom-select mb-3 text-light border-0').addClass(color) | |||
| $sidebar_dark_variants.find('option').prop('selected', false) | |||
| $sidebar.addClass(sidebar_class) | |||
| $('.sidebar').removeClass('os-theme-light').addClass('os-theme-dark') | |||
| }, true) | |||
| $container.append($sidebar_light_variants) | |||
| var active_sidebar_light_color = null | |||
| $('.main-sidebar')[0].classList.forEach(function (className) { | |||
| var color = className.replace('sidebar-light-', 'bg-') | |||
| if (sidebar_colors.indexOf(color) > -1 && active_sidebar_light_color === null) { | |||
| active_sidebar_light_color = color | |||
| } | |||
| }) | |||
| if (active_sidebar_light_color !== null) { | |||
| $sidebar_light_variants.find('option.' + active_sidebar_light_color).prop('selected', true) | |||
| $sidebar_light_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_sidebar_light_color) | |||
| } | |||
| var logo_skins = navbar_all_colors | |||
| $container.append('<h6>Brand Logo Variants</h6>') | |||
| var $logo_variants = $('<div />', { | |||
| class: 'd-flex' | |||
| }) | |||
| $container.append($logo_variants) | |||
| var $clear_btn = $('<a />', { | |||
| href: '#' | |||
| }).text('clear').on('click', function (e) { | |||
| e.preventDefault() | |||
| var $logo = $('.brand-link') | |||
| logo_skins.forEach(function (skin) { | |||
| $logo.removeClass(skin) | |||
| }) | |||
| }) | |||
| var $brand_variants = createSkinBlock(logo_skins, function () { | |||
| var color = $(this).data('color') | |||
| var $logo = $('.brand-link') | |||
| if (color === 'navbar-light' || color === 'navbar-white') { | |||
| $logo.addClass('text-black') | |||
| } else { | |||
| $logo.removeClass('text-black') | |||
| } | |||
| logo_skins.forEach(function (skin) { | |||
| $logo.removeClass(skin) | |||
| }) | |||
| if (color) { | |||
| $(this).parent().removeClass().addClass('custom-select mb-3 border-0').addClass(color).addClass(color !== 'navbar-light' && color !== 'navbar-white' ? 'text-light' : '') | |||
| } else { | |||
| $(this).parent().removeClass().addClass('custom-select mb-3 border-0') | |||
| } | |||
| $logo.addClass(color) | |||
| }, true).append($clear_btn) | |||
| $container.append($brand_variants) | |||
| var active_brand_color = null | |||
| $('.brand-link')[0].classList.forEach(function (className) { | |||
| if (logo_skins.indexOf(className) > -1 && active_brand_color === null) { | |||
| active_brand_color = className.replace('navbar-', 'bg-') | |||
| } | |||
| }) | |||
| if (active_brand_color) { | |||
| $brand_variants.find('option.' + active_brand_color).prop('selected', true) | |||
| $brand_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_brand_color) | |||
| } | |||
| })(jQuery) | |||
| @@ -0,0 +1,267 @@ | |||
| /* | |||
| * Author: Abdullah A Almsaeed | |||
| * Date: 4 Jan 2014 | |||
| * Description: | |||
| * This is a demo file used only for the main dashboard (index.html) | |||
| **/ | |||
| /* global moment:false, Chart:false, Sparkline:false */ | |||
| $(function () { | |||
| 'use strict' | |||
| // Make the dashboard widgets sortable Using jquery UI | |||
| $('.connectedSortable').sortable({ | |||
| placeholder: 'sort-highlight', | |||
| connectWith: '.connectedSortable', | |||
| handle: '.card-header, .nav-tabs', | |||
| forcePlaceholderSize: true, | |||
| zIndex: 999999 | |||
| }) | |||
| $('.connectedSortable .card-header').css('cursor', 'move') | |||
| // jQuery UI sortable for the todo list | |||
| $('.todo-list').sortable({ | |||
| placeholder: 'sort-highlight', | |||
| handle: '.handle', | |||
| forcePlaceholderSize: true, | |||
| zIndex: 999999 | |||
| }) | |||
| // bootstrap WYSIHTML5 - text editor | |||
| $('.textarea').summernote() | |||
| $('.daterange').daterangepicker({ | |||
| ranges: { | |||
| Today: [moment(), moment()], | |||
| Yesterday: [moment().subtract(1, 'days'), moment().subtract(1, 'days')], | |||
| 'Last 7 Days': [moment().subtract(6, 'days'), moment()], | |||
| 'Last 30 Days': [moment().subtract(29, 'days'), moment()], | |||
| 'This Month': [moment().startOf('month'), moment().endOf('month')], | |||
| 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] | |||
| }, | |||
| startDate: moment().subtract(29, 'days'), | |||
| endDate: moment() | |||
| }, function (start, end) { | |||
| // eslint-disable-next-line no-alert | |||
| alert('You chose: ' + start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')) | |||
| }) | |||
| /* jQueryKnob */ | |||
| $('.knob').knob() | |||
| // jvectormap data | |||
| var visitorsData = { | |||
| US: 398, // USA | |||
| SA: 400, // Saudi Arabia | |||
| CA: 1000, // Canada | |||
| DE: 500, // Germany | |||
| FR: 760, // France | |||
| CN: 300, // China | |||
| AU: 700, // Australia | |||
| BR: 600, // Brazil | |||
| IN: 800, // India | |||
| GB: 320, // Great Britain | |||
| RU: 3000 // Russia | |||
| } | |||
| // World map by jvectormap | |||
| $('#world-map').vectorMap({ | |||
| map: 'usa_en', | |||
| backgroundColor: 'transparent', | |||
| regionStyle: { | |||
| initial: { | |||
| fill: 'rgba(255, 255, 255, 0.7)', | |||
| 'fill-opacity': 1, | |||
| stroke: 'rgba(0,0,0,.2)', | |||
| 'stroke-width': 1, | |||
| 'stroke-opacity': 1 | |||
| } | |||
| }, | |||
| series: { | |||
| regions: [{ | |||
| values: visitorsData, | |||
| scale: ['#ffffff', '#0154ad'], | |||
| normalizeFunction: 'polynomial' | |||
| }] | |||
| }, | |||
| onRegionLabelShow: function (e, el, code) { | |||
| if (typeof visitorsData[code] !== 'undefined') { | |||
| el.html(el.html() + ': ' + visitorsData[code] + ' new visitors') | |||
| } | |||
| } | |||
| }) | |||
| // Sparkline charts | |||
| var sparkline1 = new Sparkline($('#sparkline-1')[0], { width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9' }) | |||
| var sparkline2 = new Sparkline($('#sparkline-2')[0], { width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9' }) | |||
| var sparkline3 = new Sparkline($('#sparkline-3')[0], { width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9' }) | |||
| sparkline1.draw([1000, 1200, 920, 927, 931, 1027, 819, 930, 1021]) | |||
| sparkline2.draw([515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921]) | |||
| sparkline3.draw([15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21]) | |||
| // The Calender | |||
| $('#calendar').datetimepicker({ | |||
| format: 'L', | |||
| inline: true | |||
| }) | |||
| // SLIMSCROLL FOR CHAT WIDGET | |||
| $('#chat-box').overlayScrollbars({ | |||
| height: '250px' | |||
| }) | |||
| /* Chart.js Charts */ | |||
| // Sales chart | |||
| var salesChartCanvas = document.getElementById('revenue-chart-canvas').getContext('2d') | |||
| // $('#revenue-chart').get(0).getContext('2d'); | |||
| var salesChartData = { | |||
| labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], | |||
| datasets: [ | |||
| { | |||
| label: 'Digital Goods', | |||
| backgroundColor: 'rgba(60,141,188,0.9)', | |||
| borderColor: 'rgba(60,141,188,0.8)', | |||
| pointRadius: false, | |||
| pointColor: '#3b8bba', | |||
| pointStrokeColor: 'rgba(60,141,188,1)', | |||
| pointHighlightFill: '#fff', | |||
| pointHighlightStroke: 'rgba(60,141,188,1)', | |||
| data: [28, 48, 40, 19, 86, 27, 90] | |||
| }, | |||
| { | |||
| label: 'Electronics', | |||
| backgroundColor: 'rgba(210, 214, 222, 1)', | |||
| borderColor: 'rgba(210, 214, 222, 1)', | |||
| pointRadius: false, | |||
| pointColor: 'rgba(210, 214, 222, 1)', | |||
| pointStrokeColor: '#c1c7d1', | |||
| pointHighlightFill: '#fff', | |||
| pointHighlightStroke: 'rgba(220,220,220,1)', | |||
| data: [65, 59, 80, 81, 56, 55, 40] | |||
| } | |||
| ] | |||
| } | |||
| var salesChartOptions = { | |||
| maintainAspectRatio: false, | |||
| responsive: true, | |||
| legend: { | |||
| display: false | |||
| }, | |||
| scales: { | |||
| xAxes: [{ | |||
| gridLines: { | |||
| display: false | |||
| } | |||
| }], | |||
| yAxes: [{ | |||
| gridLines: { | |||
| display: false | |||
| } | |||
| }] | |||
| } | |||
| } | |||
| // This will get the first returned node in the jQuery collection. | |||
| // eslint-disable-next-line no-unused-vars | |||
| var salesChart = new Chart(salesChartCanvas, { // lgtm[js/unused-local-variable] | |||
| type: 'line', | |||
| data: salesChartData, | |||
| options: salesChartOptions | |||
| }) | |||
| // Donut Chart | |||
| var pieChartCanvas = $('#sales-chart-canvas').get(0).getContext('2d') | |||
| var pieData = { | |||
| labels: [ | |||
| 'Instore Sales', | |||
| 'Download Sales', | |||
| 'Mail-Order Sales' | |||
| ], | |||
| datasets: [ | |||
| { | |||
| data: [30, 12, 20], | |||
| backgroundColor: ['#f56954', '#00a65a', '#f39c12'] | |||
| } | |||
| ] | |||
| } | |||
| var pieOptions = { | |||
| legend: { | |||
| display: false | |||
| }, | |||
| maintainAspectRatio: false, | |||
| responsive: true | |||
| } | |||
| // Create pie or douhnut chart | |||
| // You can switch between pie and douhnut using the method below. | |||
| // eslint-disable-next-line no-unused-vars | |||
| var pieChart = new Chart(pieChartCanvas, { // lgtm[js/unused-local-variable] | |||
| type: 'doughnut', | |||
| data: pieData, | |||
| options: pieOptions | |||
| }) | |||
| // Sales graph chart | |||
| var salesGraphChartCanvas = $('#line-chart').get(0).getContext('2d') | |||
| // $('#revenue-chart').get(0).getContext('2d'); | |||
| var salesGraphChartData = { | |||
| labels: ['2011 Q1', '2011 Q2', '2011 Q3', '2011 Q4', '2012 Q1', '2012 Q2', '2012 Q3', '2012 Q4', '2013 Q1', '2013 Q2'], | |||
| datasets: [ | |||
| { | |||
| label: 'Digital Goods', | |||
| fill: false, | |||
| borderWidth: 2, | |||
| lineTension: 0, | |||
| spanGaps: true, | |||
| borderColor: '#efefef', | |||
| pointRadius: 3, | |||
| pointHoverRadius: 7, | |||
| pointColor: '#efefef', | |||
| pointBackgroundColor: '#efefef', | |||
| data: [2666, 2778, 4912, 3767, 6810, 5670, 4820, 15073, 10687, 8432] | |||
| } | |||
| ] | |||
| } | |||
| var salesGraphChartOptions = { | |||
| maintainAspectRatio: false, | |||
| responsive: true, | |||
| legend: { | |||
| display: false | |||
| }, | |||
| scales: { | |||
| xAxes: [{ | |||
| ticks: { | |||
| fontColor: '#efefef' | |||
| }, | |||
| gridLines: { | |||
| display: false, | |||
| color: '#efefef', | |||
| drawBorder: false | |||
| } | |||
| }], | |||
| yAxes: [{ | |||
| ticks: { | |||
| stepSize: 5000, | |||
| fontColor: '#efefef' | |||
| }, | |||
| gridLines: { | |||
| display: true, | |||
| color: '#efefef', | |||
| drawBorder: false | |||
| } | |||
| }] | |||
| } | |||
| } | |||
| // This will get the first returned node in the jQuery collection. | |||
| // eslint-disable-next-line no-unused-vars | |||
| var salesGraphChart = new Chart(salesGraphChartCanvas, { // lgtm[js/unused-local-variable] | |||
| type: 'line', | |||
| data: salesGraphChartData, | |||
| options: salesGraphChartOptions | |||
| }) | |||
| }) | |||
| @@ -0,0 +1,270 @@ | |||
| /* global Chart:false */ | |||
| $(function () { | |||
| 'use strict' | |||
| /* ChartJS | |||
| * ------- | |||
| * Here we will create a few charts using ChartJS | |||
| */ | |||
| //----------------------- | |||
| // - MONTHLY SALES CHART - | |||
| //----------------------- | |||
| // Get context with jQuery - using jQuery's .get() method. | |||
| var salesChartCanvas = $('#salesChart').get(0).getContext('2d') | |||
| var salesChartData = { | |||
| labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], | |||
| datasets: [ | |||
| { | |||
| label: 'Digital Goods', | |||
| backgroundColor: 'rgba(60,141,188,0.9)', | |||
| borderColor: 'rgba(60,141,188,0.8)', | |||
| pointRadius: false, | |||
| pointColor: '#3b8bba', | |||
| pointStrokeColor: 'rgba(60,141,188,1)', | |||
| pointHighlightFill: '#fff', | |||
| pointHighlightStroke: 'rgba(60,141,188,1)', | |||
| data: [28, 48, 40, 19, 86, 27, 90] | |||
| }, | |||
| { | |||
| label: 'Electronics', | |||
| backgroundColor: 'rgba(210, 214, 222, 1)', | |||
| borderColor: 'rgba(210, 214, 222, 1)', | |||
| pointRadius: false, | |||
| pointColor: 'rgba(210, 214, 222, 1)', | |||
| pointStrokeColor: '#c1c7d1', | |||
| pointHighlightFill: '#fff', | |||
| pointHighlightStroke: 'rgba(220,220,220,1)', | |||
| data: [65, 59, 80, 81, 56, 55, 40] | |||
| } | |||
| ] | |||
| } | |||
| var salesChartOptions = { | |||
| maintainAspectRatio: false, | |||
| responsive: true, | |||
| legend: { | |||
| display: false | |||
| }, | |||
| scales: { | |||
| xAxes: [{ | |||
| gridLines: { | |||
| display: false | |||
| } | |||
| }], | |||
| yAxes: [{ | |||
| gridLines: { | |||
| display: false | |||
| } | |||
| }] | |||
| } | |||
| } | |||
| // This will get the first returned node in the jQuery collection. | |||
| // eslint-disable-next-line no-unused-vars | |||
| var salesChart = new Chart(salesChartCanvas, { | |||
| type: 'line', | |||
| data: salesChartData, | |||
| options: salesChartOptions | |||
| } | |||
| ) | |||
| //--------------------------- | |||
| // - END MONTHLY SALES CHART - | |||
| //--------------------------- | |||
| //------------- | |||
| // - PIE CHART - | |||
| //------------- | |||
| // Get context with jQuery - using jQuery's .get() method. | |||
| var pieChartCanvas = $('#pieChart').get(0).getContext('2d') | |||
| var pieData = { | |||
| labels: [ | |||
| 'Chrome', | |||
| 'IE', | |||
| 'FireFox', | |||
| 'Safari', | |||
| 'Opera', | |||
| 'Navigator' | |||
| ], | |||
| datasets: [ | |||
| { | |||
| data: [700, 500, 400, 600, 300, 100], | |||
| backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de'] | |||
| } | |||
| ] | |||
| } | |||
| var pieOptions = { | |||
| legend: { | |||
| display: false | |||
| } | |||
| } | |||
| // Create pie or douhnut chart | |||
| // You can switch between pie and douhnut using the method below. | |||
| // eslint-disable-next-line no-unused-vars | |||
| var pieChart = new Chart(pieChartCanvas, { | |||
| type: 'doughnut', | |||
| data: pieData, | |||
| options: pieOptions | |||
| }) | |||
| //----------------- | |||
| // - END PIE CHART - | |||
| //----------------- | |||
| /* jVector Maps | |||
| * ------------ | |||
| * Create a world map with markers | |||
| */ | |||
| $('#world-map-markers').mapael({ | |||
| map: { | |||
| name: 'usa_states', | |||
| zoom: { | |||
| enabled: true, | |||
| maxLevel: 10 | |||
| } | |||
| } | |||
| }) | |||
| // $('#world-map-markers').vectorMap({ | |||
| // map : 'world_en', | |||
| // normalizeFunction: 'polynomial', | |||
| // hoverOpacity : 0.7, | |||
| // hoverColor : false, | |||
| // backgroundColor : 'transparent', | |||
| // regionStyle : { | |||
| // initial : { | |||
| // fill : 'rgba(210, 214, 222, 1)', | |||
| // 'fill-opacity' : 1, | |||
| // stroke : 'none', | |||
| // 'stroke-width' : 0, | |||
| // 'stroke-opacity': 1 | |||
| // }, | |||
| // hover : { | |||
| // 'fill-opacity': 0.7, | |||
| // cursor : 'pointer' | |||
| // }, | |||
| // selected : { | |||
| // fill: 'yellow' | |||
| // }, | |||
| // selectedHover: {} | |||
| // }, | |||
| // markerStyle : { | |||
| // initial: { | |||
| // fill : '#00a65a', | |||
| // stroke: '#111' | |||
| // } | |||
| // }, | |||
| // markers : [ | |||
| // { | |||
| // latLng: [41.90, 12.45], | |||
| // name : 'Vatican City' | |||
| // }, | |||
| // { | |||
| // latLng: [43.73, 7.41], | |||
| // name : 'Monaco' | |||
| // }, | |||
| // { | |||
| // latLng: [-0.52, 166.93], | |||
| // name : 'Nauru' | |||
| // }, | |||
| // { | |||
| // latLng: [-8.51, 179.21], | |||
| // name : 'Tuvalu' | |||
| // }, | |||
| // { | |||
| // latLng: [43.93, 12.46], | |||
| // name : 'San Marino' | |||
| // }, | |||
| // { | |||
| // latLng: [47.14, 9.52], | |||
| // name : 'Liechtenstein' | |||
| // }, | |||
| // { | |||
| // latLng: [7.11, 171.06], | |||
| // name : 'Marshall Islands' | |||
| // }, | |||
| // { | |||
| // latLng: [17.3, -62.73], | |||
| // name : 'Saint Kitts and Nevis' | |||
| // }, | |||
| // { | |||
| // latLng: [3.2, 73.22], | |||
| // name : 'Maldives' | |||
| // }, | |||
| // { | |||
| // latLng: [35.88, 14.5], | |||
| // name : 'Malta' | |||
| // }, | |||
| // { | |||
| // latLng: [12.05, -61.75], | |||
| // name : 'Grenada' | |||
| // }, | |||
| // { | |||
| // latLng: [13.16, -61.23], | |||
| // name : 'Saint Vincent and the Grenadines' | |||
| // }, | |||
| // { | |||
| // latLng: [13.16, -59.55], | |||
| // name : 'Barbados' | |||
| // }, | |||
| // { | |||
| // latLng: [17.11, -61.85], | |||
| // name : 'Antigua and Barbuda' | |||
| // }, | |||
| // { | |||
| // latLng: [-4.61, 55.45], | |||
| // name : 'Seychelles' | |||
| // }, | |||
| // { | |||
| // latLng: [7.35, 134.46], | |||
| // name : 'Palau' | |||
| // }, | |||
| // { | |||
| // latLng: [42.5, 1.51], | |||
| // name : 'Andorra' | |||
| // }, | |||
| // { | |||
| // latLng: [14.01, -60.98], | |||
| // name : 'Saint Lucia' | |||
| // }, | |||
| // { | |||
| // latLng: [6.91, 158.18], | |||
| // name : 'Federated States of Micronesia' | |||
| // }, | |||
| // { | |||
| // latLng: [1.3, 103.8], | |||
| // name : 'Singapore' | |||
| // }, | |||
| // { | |||
| // latLng: [1.46, 173.03], | |||
| // name : 'Kiribati' | |||
| // }, | |||
| // { | |||
| // latLng: [-21.13, -175.2], | |||
| // name : 'Tonga' | |||
| // }, | |||
| // { | |||
| // latLng: [15.3, -61.38], | |||
| // name : 'Dominica' | |||
| // }, | |||
| // { | |||
| // latLng: [-20.2, 57.5], | |||
| // name : 'Mauritius' | |||
| // }, | |||
| // { | |||
| // latLng: [26.02, 50.55], | |||
| // name : 'Bahrain' | |||
| // }, | |||
| // { | |||
| // latLng: [0.33, 6.73], | |||
| // name : 'São Tomé and Príncipe' | |||
| // } | |||
| // ] | |||
| // }) | |||
| }) | |||
| // lgtm [js/unused-local-variable] | |||
| @@ -0,0 +1,147 @@ | |||
| /* global Chart:false */ | |||
| $(function () { | |||
| 'use strict' | |||
| var ticksStyle = { | |||
| fontColor: '#495057', | |||
| fontStyle: 'bold' | |||
| } | |||
| var mode = 'index' | |||
| var intersect = true | |||
| var $salesChart = $('#sales-chart') | |||
| // eslint-disable-next-line no-unused-vars | |||
| var salesChart = new Chart($salesChart, { | |||
| type: 'bar', | |||
| data: { | |||
| labels: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'], | |||
| datasets: [ | |||
| { | |||
| backgroundColor: '#007bff', | |||
| borderColor: '#007bff', | |||
| data: [1000, 2000, 3000, 2500, 2700, 2500, 3000] | |||
| }, | |||
| { | |||
| backgroundColor: '#ced4da', | |||
| borderColor: '#ced4da', | |||
| data: [700, 1700, 2700, 2000, 1800, 1500, 2000] | |||
| } | |||
| ] | |||
| }, | |||
| options: { | |||
| maintainAspectRatio: false, | |||
| tooltips: { | |||
| mode: mode, | |||
| intersect: intersect | |||
| }, | |||
| hover: { | |||
| mode: mode, | |||
| intersect: intersect | |||
| }, | |||
| legend: { | |||
| display: false | |||
| }, | |||
| scales: { | |||
| yAxes: [{ | |||
| // display: false, | |||
| gridLines: { | |||
| display: true, | |||
| lineWidth: '4px', | |||
| color: 'rgba(0, 0, 0, .2)', | |||
| zeroLineColor: 'transparent' | |||
| }, | |||
| ticks: $.extend({ | |||
| beginAtZero: true, | |||
| // Include a dollar sign in the ticks | |||
| callback: function (value) { | |||
| if (value >= 1000) { | |||
| value /= 1000 | |||
| value += 'k' | |||
| } | |||
| return '$' + value | |||
| } | |||
| }, ticksStyle) | |||
| }], | |||
| xAxes: [{ | |||
| display: true, | |||
| gridLines: { | |||
| display: false | |||
| }, | |||
| ticks: ticksStyle | |||
| }] | |||
| } | |||
| } | |||
| }) | |||
| var $visitorsChart = $('#visitors-chart') | |||
| // eslint-disable-next-line no-unused-vars | |||
| var visitorsChart = new Chart($visitorsChart, { | |||
| data: { | |||
| labels: ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'], | |||
| datasets: [{ | |||
| type: 'line', | |||
| data: [100, 120, 170, 167, 180, 177, 160], | |||
| backgroundColor: 'transparent', | |||
| borderColor: '#007bff', | |||
| pointBorderColor: '#007bff', | |||
| pointBackgroundColor: '#007bff', | |||
| fill: false | |||
| // pointHoverBackgroundColor: '#007bff', | |||
| // pointHoverBorderColor : '#007bff' | |||
| }, | |||
| { | |||
| type: 'line', | |||
| data: [60, 80, 70, 67, 80, 77, 100], | |||
| backgroundColor: 'tansparent', | |||
| borderColor: '#ced4da', | |||
| pointBorderColor: '#ced4da', | |||
| pointBackgroundColor: '#ced4da', | |||
| fill: false | |||
| // pointHoverBackgroundColor: '#ced4da', | |||
| // pointHoverBorderColor : '#ced4da' | |||
| }] | |||
| }, | |||
| options: { | |||
| maintainAspectRatio: false, | |||
| tooltips: { | |||
| mode: mode, | |||
| intersect: intersect | |||
| }, | |||
| hover: { | |||
| mode: mode, | |||
| intersect: intersect | |||
| }, | |||
| legend: { | |||
| display: false | |||
| }, | |||
| scales: { | |||
| yAxes: [{ | |||
| // display: false, | |||
| gridLines: { | |||
| display: true, | |||
| lineWidth: '4px', | |||
| color: 'rgba(0, 0, 0, .2)', | |||
| zeroLineColor: 'transparent' | |||
| }, | |||
| ticks: $.extend({ | |||
| beginAtZero: true, | |||
| suggestedMax: 200 | |||
| }, ticksStyle) | |||
| }], | |||
| xAxes: [{ | |||
| display: true, | |||
| gridLines: { | |||
| display: false | |||
| }, | |||
| ticks: ticksStyle | |||
| }] | |||
| } | |||
| } | |||
| }) | |||
| }) | |||
| // lgtm [js/unused-local-variable] | |||
| @@ -24,9 +24,29 @@ | |||
| work correctly both with client-side routing and a non-root public URL. | |||
| Learn how to configure a non-root public URL by running `npm run build`. | |||
| --> | |||
| <!-- Font Awesome --> | |||
| <link rel="stylesheet" href="%PUBLIC_URL%/plugins/fontawesome-free/css/all.min.css"> | |||
| <!-- Ionicons --> | |||
| <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> | |||
| <!-- Tempusdominus Bbootstrap 4 --> | |||
| <link rel="stylesheet" href="%PUBLIC_URL%/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css"> | |||
| <!-- iCheck --> | |||
| <link rel="stylesheet" href="%PUBLIC_URL%/plugins/icheck-bootstrap/icheck-bootstrap.min.css"> | |||
| <!-- JQVMap --> | |||
| <link rel="stylesheet" href="%PUBLIC_URL%/plugins/jqvmap/jqvmap.min.css"> | |||
| <!-- Theme style --> | |||
| <link rel="stylesheet" href="%PUBLIC_URL%/dist/css/adminlte.min.css"> | |||
| <!-- overlayScrollbars --> | |||
| <link rel="stylesheet" href="%PUBLIC_URL%/plugins/overlayScrollbars/css/OverlayScrollbars.min.css"> | |||
| <!-- Daterange picker --> | |||
| <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css"> | |||
| <!-- summernote --> | |||
| <link rel="stylesheet" href="%PUBLIC_URL%/plugins/summernote/summernote-bs4.css"> | |||
| <!-- Google Font: Source Sans Pro --> | |||
| <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet"> | |||
| <title>React App</title> | |||
| </head> | |||
| <body> | |||
| <body class="hold-transition sidebar-mini layout-fixed"> | |||
| <noscript>You need to enable JavaScript to run this app.</noscript> | |||
| <div id="root"></div> | |||
| <!-- | |||
| @@ -39,5 +59,39 @@ | |||
| To begin the development, run `npm start` or `yarn start`. | |||
| To create a production bundle, use `npm run build` or `yarn build`. | |||
| --> | |||
| <!-- jQuery --> | |||
| <script src="%PUBLIC_URL%/plugins/jquery/jquery.min.js"></script> | |||
| <!-- jQuery UI 1.11.4 --> | |||
| <script src="%PUBLIC_URL%/plugins/jquery-ui/jquery-ui.min.js"></script> | |||
| <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip --> | |||
| <script> | |||
| $.widget.bridge('uibutton', $.ui.button) | |||
| </script> | |||
| <!-- Bootstrap 4 --> | |||
| <script src="%PUBLIC_URL%/plugins/bootstrap/js/bootstrap.bundle.min.js"></script> | |||
| <!-- ChartJS --> | |||
| <script src="%PUBLIC_URL%/plugins/chart.js/Chart.min.js"></script> | |||
| <!-- Sparkline --> | |||
| <script src="%PUBLIC_URL%/plugins/sparklines/sparkline.js"></script> | |||
| <!-- JQVMap --> | |||
| <script src="%PUBLIC_URL%/plugins/jqvmap/jquery.vmap.min.js"></script> | |||
| <script src="%PUBLIC_URL%/plugins/jqvmap/maps/jquery.vmap.usa.js"></script> | |||
| <!-- jQuery Knob Chart --> | |||
| <script src="%PUBLIC_URL%/plugins/jquery-knob/jquery.knob.min.js"></script> | |||
| <!-- daterangepicker --> | |||
| <script src="%PUBLIC_URL%/plugins/moment/moment.min.js"></script> | |||
| <script src="%PUBLIC_URL%/plugins/daterangepicker/daterangepicker.js"></script> | |||
| <!-- Tempusdominus Bootstrap 4 --> | |||
| <script src="%PUBLIC_URL%/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script> | |||
| <!-- Summernote --> | |||
| <script src="%PUBLIC_URL%/plugins/summernote/summernote-bs4.min.js"></script> | |||
| <!-- overlayScrollbars --> | |||
| <script src="%PUBLIC_URL%/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script> | |||
| <!-- AdminLTE App --> | |||
| <script src="%PUBLIC_URL%/dist/js/adminlte.js"></script> | |||
| <!-- AdminLTE dashboard demo (This is only for demo purposes) --> | |||
| <script src="%PUBLIC_URL%/dist/js/pages/dashboard.js"></script> | |||
| <!-- AdminLTE for demo purposes --> | |||
| <script src="%PUBLIC_URL%/dist/js/demo.js"></script> | |||
| </body> | |||
| </html> | |||
| @@ -0,0 +1,399 @@ | |||
| /*! | |||
| * Bootstrap Colorpicker - Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4. | |||
| * @package bootstrap-colorpicker | |||
| * @version v3.4.0 | |||
| * @license MIT | |||
| * @link https://itsjavi.com/bootstrap-colorpicker/ | |||
| * @link https://github.com/itsjavi/bootstrap-colorpicker.git | |||
| */ | |||
| .colorpicker { | |||
| position: relative; | |||
| display: none; | |||
| font-size: inherit; | |||
| color: inherit; | |||
| text-align: left; | |||
| list-style: none; | |||
| background-color: #ffffff; | |||
| background-clip: padding-box; | |||
| border: 1px solid rgba(0, 0, 0, 0.2); | |||
| padding: .75rem .75rem; | |||
| width: 148px; | |||
| border-radius: 4px; | |||
| -webkit-box-sizing: content-box; | |||
| box-sizing: content-box; } | |||
| .colorpicker.colorpicker-disabled, | |||
| .colorpicker.colorpicker-disabled * { | |||
| cursor: default !important; } | |||
| .colorpicker div { | |||
| position: relative; } | |||
| .colorpicker-popup { | |||
| position: absolute; | |||
| top: 100%; | |||
| left: 0; | |||
| float: left; | |||
| margin-top: 1px; | |||
| z-index: 1060; } | |||
| .colorpicker-popup.colorpicker-bs-popover-content { | |||
| position: relative; | |||
| top: auto; | |||
| left: auto; | |||
| float: none; | |||
| margin: 0; | |||
| z-index: initial; | |||
| border: none; | |||
| padding: 0.25rem 0; | |||
| border-radius: 0; | |||
| background: none; | |||
| -webkit-box-shadow: none; | |||
| box-shadow: none; } | |||
| .colorpicker:before, | |||
| .colorpicker:after { | |||
| content: ""; | |||
| display: table; | |||
| clear: both; | |||
| line-height: 0; } | |||
| .colorpicker-clear { | |||
| clear: both; | |||
| display: block; } | |||
| .colorpicker:before { | |||
| content: ''; | |||
| display: inline-block; | |||
| border-left: 7px solid transparent; | |||
| border-right: 7px solid transparent; | |||
| border-bottom: 7px solid #ccc; | |||
| border-bottom-color: rgba(0, 0, 0, 0.2); | |||
| position: absolute; | |||
| top: -7px; | |||
| left: auto; | |||
| right: 6px; } | |||
| .colorpicker:after { | |||
| content: ''; | |||
| display: inline-block; | |||
| border-left: 6px solid transparent; | |||
| border-right: 6px solid transparent; | |||
| border-bottom: 6px solid #ffffff; | |||
| position: absolute; | |||
| top: -6px; | |||
| left: auto; | |||
| right: 7px; } | |||
| .colorpicker.colorpicker-with-alpha { | |||
| width: 170px; } | |||
| .colorpicker.colorpicker-with-alpha .colorpicker-alpha { | |||
| display: block; } | |||
| .colorpicker-saturation { | |||
| position: relative; | |||
| width: 126px; | |||
| height: 126px; | |||
| /* FF3.6+ */ | |||
| /* Chrome,Safari4+ */ | |||
| /* Chrome10+,Safari5.1+ */ | |||
| /* Opera 11.10+ */ | |||
| /* IE10+ */ | |||
| background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black)), -webkit-gradient(linear, left top, right top, from(white), to(rgba(255, 255, 255, 0))); | |||
| background: linear-gradient(to bottom, transparent 0%, black 100%), linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); | |||
| /* W3C */ | |||
| cursor: crosshair; | |||
| float: left; | |||
| -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); | |||
| box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); | |||
| margin-bottom: 6px; } | |||
| .colorpicker-saturation .colorpicker-guide { | |||
| display: block; | |||
| height: 6px; | |||
| width: 6px; | |||
| border-radius: 6px; | |||
| border: 1px solid #000; | |||
| -webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8); | |||
| box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8); | |||
| position: absolute; | |||
| top: 0; | |||
| left: 0; | |||
| margin: -3px 0 0 -3px; } | |||
| .colorpicker-hue, | |||
| .colorpicker-alpha { | |||
| position: relative; | |||
| width: 16px; | |||
| height: 126px; | |||
| float: left; | |||
| cursor: row-resize; | |||
| margin-left: 6px; | |||
| margin-bottom: 6px; } | |||
| .colorpicker-alpha-color { | |||
| position: absolute; | |||
| top: 0; | |||
| left: 0; | |||
| width: 100%; | |||
| height: 100%; } | |||
| .colorpicker-hue, | |||
| .colorpicker-alpha-color { | |||
| -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); | |||
| box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); } | |||
| .colorpicker-hue .colorpicker-guide, | |||
| .colorpicker-alpha .colorpicker-guide { | |||
| display: block; | |||
| height: 4px; | |||
| background: rgba(255, 255, 255, 0.8); | |||
| border: 1px solid rgba(0, 0, 0, 0.4); | |||
| position: absolute; | |||
| top: 0; | |||
| left: 0; | |||
| margin-left: -2px; | |||
| margin-top: -2px; | |||
| right: -2px; | |||
| z-index: 1; } | |||
| .colorpicker-hue { | |||
| /* FF3.6+ */ | |||
| /* Chrome,Safari4+ */ | |||
| /* Chrome10+,Safari5.1+ */ | |||
| /* Opera 11.10+ */ | |||
| /* IE10+ */ | |||
| background: -webkit-gradient(linear, left bottom, left top, from(red), color-stop(8%, #ff8000), color-stop(17%, yellow), color-stop(25%, #80ff00), color-stop(33%, lime), color-stop(42%, #00ff80), color-stop(50%, cyan), color-stop(58%, #0080ff), color-stop(67%, blue), color-stop(75%, #8000ff), color-stop(83%, magenta), color-stop(92%, #ff0080), to(red)); | |||
| background: linear-gradient(to top, red 0%, #ff8000 8%, yellow 17%, #80ff00 25%, lime 33%, #00ff80 42%, cyan 50%, #0080ff 58%, blue 67%, #8000ff 75%, magenta 83%, #ff0080 92%, red 100%); | |||
| /* W3C */ } | |||
| .colorpicker-alpha { | |||
| background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white; | |||
| background-size: 10px 10px; | |||
| background-position: 0 0, 5px 5px; | |||
| display: none; } | |||
| .colorpicker-bar { | |||
| min-height: 16px; | |||
| margin: 6px 0 0 0; | |||
| clear: both; | |||
| text-align: center; | |||
| font-size: 10px; | |||
| line-height: normal; | |||
| max-width: 100%; | |||
| -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); | |||
| box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); } | |||
| .colorpicker-bar:before { | |||
| content: ""; | |||
| display: table; | |||
| clear: both; } | |||
| .colorpicker-bar.colorpicker-bar-horizontal { | |||
| height: 126px; | |||
| width: 16px; | |||
| margin: 0 0 6px 0; | |||
| float: left; } | |||
| .colorpicker-input-addon { | |||
| position: relative; } | |||
| .colorpicker-input-addon i { | |||
| display: inline-block; | |||
| cursor: pointer; | |||
| vertical-align: text-top; | |||
| height: 16px; | |||
| width: 16px; | |||
| position: relative; } | |||
| .colorpicker-input-addon:before { | |||
| content: ""; | |||
| position: absolute; | |||
| width: 16px; | |||
| height: 16px; | |||
| display: inline-block; | |||
| vertical-align: text-top; | |||
| background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white; | |||
| background-size: 10px 10px; | |||
| background-position: 0 0, 5px 5px; } | |||
| .colorpicker.colorpicker-inline { | |||
| position: relative; | |||
| display: inline-block; | |||
| float: none; | |||
| z-index: auto; | |||
| vertical-align: text-bottom; } | |||
| .colorpicker.colorpicker-horizontal { | |||
| width: 126px; | |||
| height: auto; } | |||
| .colorpicker.colorpicker-horizontal .colorpicker-bar { | |||
| width: 126px; } | |||
| .colorpicker.colorpicker-horizontal .colorpicker-saturation { | |||
| float: none; | |||
| margin-bottom: 0; } | |||
| .colorpicker.colorpicker-horizontal .colorpicker-hue, | |||
| .colorpicker.colorpicker-horizontal .colorpicker-alpha { | |||
| float: none; | |||
| width: 126px; | |||
| height: 16px; | |||
| cursor: col-resize; | |||
| margin-left: 0; | |||
| margin-top: 6px; | |||
| margin-bottom: 0; } | |||
| .colorpicker.colorpicker-horizontal .colorpicker-hue .colorpicker-guide, | |||
| .colorpicker.colorpicker-horizontal .colorpicker-alpha .colorpicker-guide { | |||
| position: absolute; | |||
| display: block; | |||
| bottom: -2px; | |||
| left: 0; | |||
| right: auto; | |||
| height: auto; | |||
| width: 4px; } | |||
| .colorpicker.colorpicker-horizontal .colorpicker-hue { | |||
| /* FF3.6+ */ | |||
| /* Chrome,Safari4+ */ | |||
| /* Chrome10+,Safari5.1+ */ | |||
| /* Opera 11.10+ */ | |||
| /* IE10+ */ | |||
| background: -webkit-gradient(linear, right top, left top, from(red), color-stop(8%, #ff8000), color-stop(17%, yellow), color-stop(25%, #80ff00), color-stop(33%, lime), color-stop(42%, #00ff80), color-stop(50%, cyan), color-stop(58%, #0080ff), color-stop(67%, blue), color-stop(75%, #8000ff), color-stop(83%, magenta), color-stop(92%, #ff0080), to(red)); | |||
| background: linear-gradient(to left, red 0%, #ff8000 8%, yellow 17%, #80ff00 25%, lime 33%, #00ff80 42%, cyan 50%, #0080ff 58%, blue 67%, #8000ff 75%, magenta 83%, #ff0080 92%, red 100%); | |||
| /* W3C */ } | |||
| .colorpicker.colorpicker-horizontal .colorpicker-alpha { | |||
| background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white; | |||
| background-size: 10px 10px; | |||
| background-position: 0 0, 5px 5px; } | |||
| .colorpicker-inline:before, | |||
| .colorpicker-no-arrow:before, | |||
| .colorpicker-popup.colorpicker-bs-popover-content:before { | |||
| content: none; | |||
| display: none; } | |||
| .colorpicker-inline:after, | |||
| .colorpicker-no-arrow:after, | |||
| .colorpicker-popup.colorpicker-bs-popover-content:after { | |||
| content: none; | |||
| display: none; } | |||
| .colorpicker-alpha, | |||
| .colorpicker-saturation, | |||
| .colorpicker-hue { | |||
| -webkit-user-select: none; | |||
| -moz-user-select: none; | |||
| -ms-user-select: none; | |||
| user-select: none; } | |||
| .colorpicker.colorpicker-visible, | |||
| .colorpicker-alpha.colorpicker-visible, | |||
| .colorpicker-saturation.colorpicker-visible, | |||
| .colorpicker-hue.colorpicker-visible, | |||
| .colorpicker-bar.colorpicker-visible { | |||
| display: block; } | |||
| .colorpicker.colorpicker-hidden, | |||
| .colorpicker-alpha.colorpicker-hidden, | |||
| .colorpicker-saturation.colorpicker-hidden, | |||
| .colorpicker-hue.colorpicker-hidden, | |||
| .colorpicker-bar.colorpicker-hidden { | |||
| display: none; } | |||
| .colorpicker-inline.colorpicker-visible { | |||
| display: inline-block; } | |||
| .colorpicker.colorpicker-disabled:after { | |||
| border: none; | |||
| content: ''; | |||
| display: block; | |||
| width: 100%; | |||
| height: 100%; | |||
| background: rgba(233, 236, 239, 0.33); | |||
| top: 0; | |||
| left: 0; | |||
| right: auto; | |||
| z-index: 2; | |||
| position: absolute; } | |||
| .colorpicker.colorpicker-disabled .colorpicker-guide { | |||
| display: none; } | |||
| /** EXTENSIONS **/ | |||
| .colorpicker-preview { | |||
| background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white; | |||
| background-size: 10px 10px; | |||
| background-position: 0 0, 5px 5px; } | |||
| .colorpicker-preview > div { | |||
| position: absolute; | |||
| left: 0; | |||
| top: 0; | |||
| width: 100%; | |||
| height: 100%; } | |||
| .colorpicker-bar.colorpicker-swatches { | |||
| -webkit-box-shadow: none; | |||
| box-shadow: none; | |||
| height: auto; } | |||
| .colorpicker-swatches--inner { | |||
| clear: both; | |||
| margin-top: -6px; } | |||
| .colorpicker-swatch { | |||
| position: relative; | |||
| cursor: pointer; | |||
| float: left; | |||
| height: 16px; | |||
| width: 16px; | |||
| margin-right: 6px; | |||
| margin-top: 6px; | |||
| margin-left: 0; | |||
| display: block; | |||
| -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); | |||
| box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); | |||
| background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white; | |||
| background-size: 10px 10px; | |||
| background-position: 0 0, 5px 5px; } | |||
| .colorpicker-swatch--inner { | |||
| position: absolute; | |||
| top: 0; | |||
| left: 0; | |||
| width: 100%; | |||
| height: 100%; } | |||
| .colorpicker-swatch:nth-of-type(7n+0) { | |||
| margin-right: 0; } | |||
| .colorpicker-with-alpha .colorpicker-swatch:nth-of-type(7n+0) { | |||
| margin-right: 6px; } | |||
| .colorpicker-with-alpha .colorpicker-swatch:nth-of-type(8n+0) { | |||
| margin-right: 0; } | |||
| .colorpicker-horizontal .colorpicker-swatch:nth-of-type(6n+0) { | |||
| margin-right: 0; } | |||
| .colorpicker-horizontal .colorpicker-swatch:nth-of-type(7n+0) { | |||
| margin-right: 6px; } | |||
| .colorpicker-horizontal .colorpicker-swatch:nth-of-type(8n+0) { | |||
| margin-right: 6px; } | |||
| .colorpicker-swatch:last-of-type:after { | |||
| content: ""; | |||
| display: table; | |||
| clear: both; } | |||
| *[dir='rtl'] .colorpicker-element input, | |||
| .colorpicker-element[dir='rtl'] input, | |||
| .colorpicker-element input[dir='rtl'] { | |||
| direction: ltr; | |||
| text-align: right; } | |||
| /*# sourceMappingURL=bootstrap-colorpicker.css.map */ | |||
| @@ -0,0 +1,418 @@ | |||
| /*! ======================================================= | |||
| VERSION 11.0.2 | |||
| ========================================================= */ | |||
| /*! ========================================================= | |||
| * bootstrap-slider.js | |||
| * | |||
| * Maintainers: | |||
| * Kyle Kemp | |||
| * - Twitter: @seiyria | |||
| * - Github: seiyria | |||
| * Rohit Kalkur | |||
| * - Twitter: @Rovolutionary | |||
| * - Github: rovolution | |||
| * | |||
| * ========================================================= | |||
| * | |||
| * bootstrap-slider is released under the MIT License | |||
| * Copyright (c) 2019 Kyle Kemp, Rohit Kalkur, and contributors | |||
| * | |||
| * Permission is hereby granted, free of charge, to any person | |||
| * obtaining a copy of this software and associated documentation | |||
| * files (the "Software"), to deal in the Software without | |||
| * restriction, including without limitation the rights to use, | |||
| * copy, modify, merge, publish, distribute, sublicense, and/or sell | |||
| * copies of the Software, and to permit persons to whom the | |||
| * Software is furnished to do so, subject to the following | |||
| * conditions: | |||
| * | |||
| * The above copyright notice and this permission notice shall be | |||
| * included in all copies or substantial portions of the Software. | |||
| * | |||
| * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, | |||
| * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES | |||
| * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND | |||
| * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT | |||
| * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, | |||
| * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING | |||
| * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR | |||
| * OTHER DEALINGS IN THE SOFTWARE. | |||
| * | |||
| * ========================================================= */ | |||
| .slider { | |||
| display: inline-block; | |||
| vertical-align: middle; | |||
| position: relative; | |||
| } | |||
| .slider.slider-horizontal { | |||
| width: 210px; | |||
| height: 20px; | |||
| } | |||
| .slider.slider-horizontal .slider-track { | |||
| height: 10px; | |||
| width: 100%; | |||
| margin-top: -5px; | |||
| top: 50%; | |||
| left: 0; | |||
| } | |||
| .slider.slider-horizontal .slider-selection, .slider.slider-horizontal .slider-track-low, .slider.slider-horizontal .slider-track-high { | |||
| height: 100%; | |||
| top: 0; | |||
| bottom: 0; | |||
| } | |||
| .slider.slider-horizontal .slider-tick, | |||
| .slider.slider-horizontal .slider-handle { | |||
| margin-left: -10px; | |||
| } | |||
| .slider.slider-horizontal .slider-tick.triangle, | |||
| .slider.slider-horizontal .slider-handle.triangle { | |||
| position: relative; | |||
| top: 50%; | |||
| transform: translateY(-50%); | |||
| border-width: 0 10px 10px 10px; | |||
| width: 0; | |||
| height: 0; | |||
| border-bottom-color: #036fa5; | |||
| margin-top: 0; | |||
| } | |||
| .slider.slider-horizontal .slider-tick-container { | |||
| white-space: nowrap; | |||
| position: absolute; | |||
| top: 0; | |||
| left: 0; | |||
| width: 100%; | |||
| } | |||
| .slider.slider-horizontal .slider-tick-label-container { | |||
| white-space: nowrap; | |||
| margin-top: 20px; | |||
| } | |||
| .slider.slider-horizontal .slider-tick-label-container .slider-tick-label { | |||
| display: inline-block; | |||
| text-align: center; | |||
| } | |||
| .slider.slider-horizontal.slider-rtl .slider-track { | |||
| left: initial; | |||
| right: 0; | |||
| } | |||
| .slider.slider-horizontal.slider-rtl .slider-tick, | |||
| .slider.slider-horizontal.slider-rtl .slider-handle { | |||
| margin-left: initial; | |||
| margin-right: -10px; | |||
| } | |||
| .slider.slider-horizontal.slider-rtl .slider-tick-container { | |||
| left: initial; | |||
| right: 0; | |||
| } | |||
| .slider.slider-vertical { | |||
| height: 210px; | |||
| width: 20px; | |||
| } | |||
| .slider.slider-vertical .slider-track { | |||
| width: 10px; | |||
| height: 100%; | |||
| left: 25%; | |||
| top: 0; | |||
| } | |||
| .slider.slider-vertical .slider-selection { | |||
| width: 100%; | |||
| left: 0; | |||
| top: 0; | |||
| bottom: 0; | |||
| } | |||
| .slider.slider-vertical .slider-track-low, .slider.slider-vertical .slider-track-high { | |||
| width: 100%; | |||
| left: 0; | |||
| right: 0; | |||
| } | |||
| .slider.slider-vertical .slider-tick, | |||
| .slider.slider-vertical .slider-handle { | |||
| margin-top: -10px; | |||
| } | |||
| .slider.slider-vertical .slider-tick.triangle, | |||
| .slider.slider-vertical .slider-handle.triangle { | |||
| border-width: 10px 0 10px 10px; | |||
| width: 1px; | |||
| height: 1px; | |||
| border-left-color: #036fa5; | |||
| margin-left: 0; | |||
| } | |||
| .slider.slider-vertical .slider-tick-label-container { | |||
| white-space: nowrap; | |||
| } | |||
| .slider.slider-vertical .slider-tick-label-container .slider-tick-label { | |||
| padding-left: 4px; | |||
| } | |||
| .slider.slider-vertical.slider-rtl .slider-track { | |||
| left: initial; | |||
| right: 25%; | |||
| } | |||
| .slider.slider-vertical.slider-rtl .slider-selection { | |||
| left: initial; | |||
| right: 0; | |||
| } | |||
| .slider.slider-vertical.slider-rtl .slider-tick.triangle, | |||
| .slider.slider-vertical.slider-rtl .slider-handle.triangle { | |||
| border-width: 10px 10px 10px 0; | |||
| } | |||
| .slider.slider-vertical.slider-rtl .slider-tick-label-container .slider-tick-label { | |||
| padding-left: initial; | |||
| padding-right: 4px; | |||
| } | |||
| .slider.slider-disabled .slider-handle { | |||
| background-color: #cfcfcf; | |||
| background-image: -moz-linear-gradient(top, #DFDFDF, #BEBEBE); | |||
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#DFDFDF), to(#BEBEBE)); | |||
| background-image: -webkit-linear-gradient(top, #DFDFDF, #BEBEBE); | |||
| background-image: -o-linear-gradient(top, #DFDFDF, #BEBEBE); | |||
| background-image: linear-gradient(to bottom, #DFDFDF, #BEBEBE); | |||
| background-repeat: repeat-x; | |||
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DFDFDF', endColorstr='#BEBEBE',GradientType=0); | |||
| } | |||
| .slider.slider-disabled .slider-track { | |||
| background-color: #e7e7e7; | |||
| background-image: -moz-linear-gradient(top, #E5E5E5, #E9E9E9); | |||
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E5E5E5), to(#E9E9E9)); | |||
| background-image: -webkit-linear-gradient(top, #E5E5E5, #E9E9E9); | |||
| background-image: -o-linear-gradient(top, #E5E5E5, #E9E9E9); | |||
| background-image: linear-gradient(to bottom, #E5E5E5, #E9E9E9); | |||
| background-repeat: repeat-x; | |||
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E5E5E5', endColorstr='#E9E9E9',GradientType=0); | |||
| cursor: not-allowed; | |||
| } | |||
| .slider input { | |||
| display: none; | |||
| } | |||
| .slider .tooltip-inner { | |||
| white-space: nowrap; | |||
| max-width: none; | |||
| } | |||
| .slider .bs-tooltip-top .tooltip-inner, | |||
| .slider .bs-tooltip-bottom .tooltip-inner { | |||
| position: relative; | |||
| left: -50%; | |||
| } | |||
| .slider.bs-tooltip-left .tooltip-inner, .slider.bs-tooltip-right .tooltip-inner { | |||
| position: relative; | |||
| top: -100%; | |||
| } | |||
| .slider .tooltip { | |||
| pointer-events: none; | |||
| } | |||
| .slider .tooltip.bs-tooltip-top .arrow, .slider .tooltip.bs-tooltip-bottom .arrow { | |||
| left: -.4rem; | |||
| } | |||
| .slider .tooltip.bs-tooltip-top { | |||
| margin-top: -44px; | |||
| } | |||
| .slider .tooltip.bs-tooltip-bottom { | |||
| margin-top: 2px; | |||
| } | |||
| .slider .tooltip.bs-tooltip-left, .slider .tooltip.bs-tooltip-right { | |||
| margin-top: -14px; | |||
| } | |||
| .slider .tooltip.bs-tooltip-left .arrow, .slider .tooltip.bs-tooltip-right .arrow { | |||
| top: 8px; | |||
| } | |||
| .slider .hide { | |||
| display: none; | |||
| } | |||
| .slider-track { | |||
| background-color: #f7f7f7; | |||
| background-image: -moz-linear-gradient(top, #F5F5F5, #F9F9F9); | |||
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F5F5F5), to(#F9F9F9)); | |||
| background-image: -webkit-linear-gradient(top, #F5F5F5, #F9F9F9); | |||
| background-image: -o-linear-gradient(top, #F5F5F5, #F9F9F9); | |||
| background-image: linear-gradient(to bottom, #F5F5F5, #F9F9F9); | |||
| background-repeat: repeat-x; | |||
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F5F5F5', endColorstr='#F9F9F9',GradientType=0); | |||
| -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); | |||
| -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); | |||
| box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); | |||
| -webkit-border-radius: 4px; | |||
| -moz-border-radius: 4px; | |||
| border-radius: 4px; | |||
| position: absolute; | |||
| cursor: pointer; | |||
| } | |||
| .slider-selection { | |||
| background-color: #f7f7f7; | |||
| background-image: -moz-linear-gradient(top, #F9F9F9, #F5F5F5); | |||
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F9F9F9), to(#F5F5F5)); | |||
| background-image: -webkit-linear-gradient(top, #F9F9F9, #F5F5F5); | |||
| background-image: -o-linear-gradient(top, #F9F9F9, #F5F5F5); | |||
| background-image: linear-gradient(to bottom, #F9F9F9, #F5F5F5); | |||
| background-repeat: repeat-x; | |||
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9F9F9', endColorstr='#F5F5F5',GradientType=0); | |||
| -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); | |||
| -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); | |||
| box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); | |||
| -webkit-box-sizing: border-box; | |||
| -moz-box-sizing: border-box; | |||
| box-sizing: border-box; | |||
| -webkit-border-radius: 4px; | |||
| -moz-border-radius: 4px; | |||
| border-radius: 4px; | |||
| position: absolute; | |||
| } | |||
| .slider-selection.tick-slider-selection { | |||
| background-color: #46c1fe; | |||
| background-image: -moz-linear-gradient(top, #52c5ff, #3abcfd); | |||
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#52c5ff), to(#3abcfd)); | |||
| background-image: -webkit-linear-gradient(top, #52c5ff, #3abcfd); | |||
| background-image: -o-linear-gradient(top, #52c5ff, #3abcfd); | |||
| background-image: linear-gradient(to bottom, #52c5ff, #3abcfd); | |||
| background-repeat: repeat-x; | |||
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#52c5ff', endColorstr='#3abcfd',GradientType=0); | |||
| } | |||
| .slider-track-low, .slider-track-high { | |||
| -webkit-box-sizing: border-box; | |||
| -moz-box-sizing: border-box; | |||
| box-sizing: border-box; | |||
| -webkit-border-radius: 4px; | |||
| -moz-border-radius: 4px; | |||
| border-radius: 4px; | |||
| position: absolute; | |||
| background: transparent; | |||
| } | |||
| .slider-handle { | |||
| background-color: #0478b2; | |||
| background-image: -moz-linear-gradient(top, #0480BE, #036fa5); | |||
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0480BE), to(#036fa5)); | |||
| background-image: -webkit-linear-gradient(top, #0480BE, #036fa5); | |||
| background-image: -o-linear-gradient(top, #0480BE, #036fa5); | |||
| background-image: linear-gradient(to bottom, #0480BE, #036fa5); | |||
| background-repeat: repeat-x; | |||
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0480BE', endColorstr='#036fa5',GradientType=0); | |||
| -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); | |||
| -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); | |||
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); | |||
| position: absolute; | |||
| top: 0; | |||
| width: 20px; | |||
| height: 20px; | |||
| background-color: #0480BE; | |||
| border: 0px solid transparent; | |||
| } | |||
| .slider-handle:hover { | |||
| cursor: pointer; | |||
| } | |||
| .slider-handle.round { | |||
| -webkit-border-radius: 20px; | |||
| -moz-border-radius: 20px; | |||
| border-radius: 20px; | |||
| } | |||
| .slider-handle.triangle { | |||
| background: transparent none; | |||
| } | |||
| .slider-handle.custom { | |||
| background: transparent none; | |||
| } | |||
| .slider-handle.custom::before { | |||
| line-height: 20px; | |||
| font-size: 20px; | |||
| content: '\2605'; | |||
| color: #726204; | |||
| } | |||
| .slider-tick { | |||
| background-color: #f7f7f7; | |||
| background-image: -moz-linear-gradient(top, #F5F5F5, #F9F9F9); | |||
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F5F5F5), to(#F9F9F9)); | |||
| background-image: -webkit-linear-gradient(top, #F5F5F5, #F9F9F9); | |||
| background-image: -o-linear-gradient(top, #F5F5F5, #F9F9F9); | |||
| background-image: linear-gradient(to bottom, #F5F5F5, #F9F9F9); | |||
| background-repeat: repeat-x; | |||
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F5F5F5', endColorstr='#F9F9F9',GradientType=0); | |||
| -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); | |||
| -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); | |||
| box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); | |||
| -webkit-box-sizing: border-box; | |||
| -moz-box-sizing: border-box; | |||
| box-sizing: border-box; | |||
| position: absolute; | |||
| cursor: pointer; | |||
| width: 20px; | |||
| height: 20px; | |||
| filter: none; | |||
| opacity: 0.8; | |||
| border: 0px solid transparent; | |||
| } | |||
| .slider-tick.round { | |||
| border-radius: 50%; | |||
| } | |||
| .slider-tick.triangle { | |||
| background: transparent none; | |||
| } | |||
| .slider-tick.custom { | |||
| background: transparent none; | |||
| } | |||
| .slider-tick.custom::before { | |||
| line-height: 20px; | |||
| font-size: 20px; | |||
| content: '\2605'; | |||
| color: #726204; | |||
| } | |||
| .slider-tick.in-selection { | |||
| background-color: #46c1fe; | |||
| background-image: -moz-linear-gradient(top, #52c5ff, #3abcfd); | |||
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#52c5ff), to(#3abcfd)); | |||
| background-image: -webkit-linear-gradient(top, #52c5ff, #3abcfd); | |||
| background-image: -o-linear-gradient(top, #52c5ff, #3abcfd); | |||
| background-image: linear-gradient(to bottom, #52c5ff, #3abcfd); | |||
| background-repeat: repeat-x; | |||
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#52c5ff', endColorstr='#3abcfd',GradientType=0); | |||
| opacity: 1; | |||
| } | |||
| /*# sourceMappingURL=bootstrap-slider.css.map */ | |||
| @@ -0,0 +1,510 @@ | |||
| /** | |||
| * bootstrap-switch - Turn checkboxes and radio buttons into toggle switches. | |||
| * | |||
| * @version v3.3.4 | |||
| * @homepage https://bttstrp.github.io/bootstrap-switch | |||
| * @author Mattia Larentis <mattia@larentis.eu> (http://larentis.eu) | |||
| * @license Apache-2.0 | |||
| */ | |||
| .clearfix { | |||
| *zoom: 1; | |||
| } | |||
| .clearfix:before, | |||
| .clearfix:after { | |||
| display: table; | |||
| content: ""; | |||
| line-height: 0; | |||
| } | |||
| .clearfix:after { | |||
| clear: both; | |||
| } | |||
| .hide-text { | |||
| font: 0/0 a; | |||
| color: transparent; | |||
| text-shadow: none; | |||
| background-color: transparent; | |||
| border: 0; | |||
| } | |||
| .input-block-level { | |||
| display: block; | |||
| width: 100%; | |||
| min-height: 30px; | |||
| -webkit-box-sizing: border-box; | |||
| -moz-box-sizing: border-box; | |||
| box-sizing: border-box; | |||
| } | |||
| .bootstrap-switch { | |||
| display: inline-block; | |||
| direction: ltr; | |||
| cursor: pointer; | |||
| -webkit-border-radius: 5px; | |||
| -moz-border-radius: 5px; | |||
| border-radius: 5px; | |||
| border: 1px solid; | |||
| border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); | |||
| position: relative; | |||
| text-align: left; | |||
| overflow: hidden; | |||
| line-height: 8px; | |||
| z-index: 0; | |||
| -webkit-user-select: none; | |||
| -moz-user-select: none; | |||
| -ms-user-select: none; | |||
| -o-user-select: none; | |||
| user-select: none; | |||
| vertical-align: middle; | |||
| -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; | |||
| -moz-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; | |||
| -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; | |||
| transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-container { | |||
| display: inline-block; | |||
| top: 0; | |||
| -webkit-border-radius: 4px; | |||
| -moz-border-radius: 4px; | |||
| border-radius: 4px; | |||
| -webkit-transform: translate3d(0, 0, 0); | |||
| -moz-transform: translate3d(0, 0, 0); | |||
| -o-transform: translate3d(0, 0, 0); | |||
| transform: translate3d(0, 0, 0); | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on, | |||
| .bootstrap-switch .bootstrap-switch-handle-off, | |||
| .bootstrap-switch .bootstrap-switch-label { | |||
| -webkit-box-sizing: border-box; | |||
| -moz-box-sizing: border-box; | |||
| box-sizing: border-box; | |||
| cursor: pointer; | |||
| display: inline-block !important; | |||
| padding-top: 4px; | |||
| padding-bottom: 4px; | |||
| padding-left: 8px; | |||
| padding-right: 8px; | |||
| font-size: 14px; | |||
| line-height: 20px; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on, | |||
| .bootstrap-switch .bootstrap-switch-handle-off { | |||
| text-align: center; | |||
| z-index: 1; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary { | |||
| color: #fff; | |||
| text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); | |||
| background-color: #005fcc; | |||
| background-image: -moz-linear-gradient(top, #0044cc, #08c); | |||
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0044cc), to(#08c)); | |||
| background-image: -webkit-linear-gradient(top, #0044cc, #08c); | |||
| background-image: -o-linear-gradient(top, #0044cc, #08c); | |||
| background-image: linear-gradient(to bottom, #0044cc, #08c); | |||
| background-repeat: repeat-x; | |||
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0044cc', endColorstr='#ff0088cc', GradientType=0); | |||
| border-color: #08c #08c #005580; | |||
| border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); | |||
| *background-color: #08c; | |||
| /* Darken IE7 buttons by default so they stand out more given they won't have borders */ | |||
| filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:hover, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:hover, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:focus, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:focus, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:active, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:active, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.active, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.active, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.disabled, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.disabled, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary[disabled], | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary[disabled] { | |||
| color: #fff; | |||
| background-color: #08c; | |||
| *background-color: #0077b3; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:active, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:active, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.active, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.active { | |||
| background-color: #006699 \9; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info { | |||
| color: #fff; | |||
| text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); | |||
| background-color: #41a7c5; | |||
| background-image: -moz-linear-gradient(top, #2f96b4, #5bc0de); | |||
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2f96b4), to(#5bc0de)); | |||
| background-image: -webkit-linear-gradient(top, #2f96b4, #5bc0de); | |||
| background-image: -o-linear-gradient(top, #2f96b4, #5bc0de); | |||
| background-image: linear-gradient(to bottom, #2f96b4, #5bc0de); | |||
| background-repeat: repeat-x; | |||
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2f96b4', endColorstr='#ff5bc0de', GradientType=0); | |||
| border-color: #5bc0de #5bc0de #28a1c5; | |||
| border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); | |||
| *background-color: #5bc0de; | |||
| /* Darken IE7 buttons by default so they stand out more given they won't have borders */ | |||
| filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:hover, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:hover, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:focus, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:focus, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:active, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:active, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info.active, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info.active, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info.disabled, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info.disabled, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info[disabled], | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info[disabled] { | |||
| color: #fff; | |||
| background-color: #5bc0de; | |||
| *background-color: #46b8da; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:active, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:active, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info.active, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info.active { | |||
| background-color: #31b0d5 \9; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success { | |||
| color: #fff; | |||
| text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); | |||
| background-color: #58b058; | |||
| background-image: -moz-linear-gradient(top, #51a351, #62c462); | |||
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#51a351), to(#62c462)); | |||
| background-image: -webkit-linear-gradient(top, #51a351, #62c462); | |||
| background-image: -o-linear-gradient(top, #51a351, #62c462); | |||
| background-image: linear-gradient(to bottom, #51a351, #62c462); | |||
| background-repeat: repeat-x; | |||
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff51a351', endColorstr='#ff62c462', GradientType=0); | |||
| border-color: #62c462 #62c462 #3b9e3b; | |||
| border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); | |||
| *background-color: #62c462; | |||
| /* Darken IE7 buttons by default so they stand out more given they won't have borders */ | |||
| filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:hover, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:hover, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:focus, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:focus, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:active, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:active, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success.active, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success.active, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success.disabled, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success.disabled, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success[disabled], | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success[disabled] { | |||
| color: #fff; | |||
| background-color: #62c462; | |||
| *background-color: #4fbd4f; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:active, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:active, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success.active, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success.active { | |||
| background-color: #42b142 \9; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning { | |||
| color: #fff; | |||
| text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); | |||
| background-color: #f9a123; | |||
| background-image: -moz-linear-gradient(top, #f89406, #fbb450); | |||
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f89406), to(#fbb450)); | |||
| background-image: -webkit-linear-gradient(top, #f89406, #fbb450); | |||
| background-image: -o-linear-gradient(top, #f89406, #fbb450); | |||
| background-image: linear-gradient(to bottom, #f89406, #fbb450); | |||
| background-repeat: repeat-x; | |||
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff89406', endColorstr='#fffbb450', GradientType=0); | |||
| border-color: #fbb450 #fbb450 #f89406; | |||
| border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); | |||
| *background-color: #fbb450; | |||
| /* Darken IE7 buttons by default so they stand out more given they won't have borders */ | |||
| filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:hover, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:hover, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:focus, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:focus, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:active, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:active, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning.active, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning.active, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning.disabled, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning.disabled, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning[disabled], | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning[disabled] { | |||
| color: #fff; | |||
| background-color: #fbb450; | |||
| *background-color: #faa937; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:active, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:active, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning.active, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning.active { | |||
| background-color: #fa9f1e \9; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger { | |||
| color: #fff; | |||
| text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); | |||
| background-color: #d14641; | |||
| background-image: -moz-linear-gradient(top, #bd362f, #ee5f5b); | |||
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bd362f), to(#ee5f5b)); | |||
| background-image: -webkit-linear-gradient(top, #bd362f, #ee5f5b); | |||
| background-image: -o-linear-gradient(top, #bd362f, #ee5f5b); | |||
| background-image: linear-gradient(to bottom, #bd362f, #ee5f5b); | |||
| background-repeat: repeat-x; | |||
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbd362f', endColorstr='#ffee5f5b', GradientType=0); | |||
| border-color: #ee5f5b #ee5f5b #e51d18; | |||
| border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); | |||
| *background-color: #ee5f5b; | |||
| /* Darken IE7 buttons by default so they stand out more given they won't have borders */ | |||
| filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:hover, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:hover, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:focus, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:focus, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:active, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:active, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger.active, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger.active, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger.disabled, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger.disabled, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger[disabled], | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger[disabled] { | |||
| color: #fff; | |||
| background-color: #ee5f5b; | |||
| *background-color: #ec4844; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:active, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:active, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger.active, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger.active { | |||
| background-color: #e9322d \9; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default { | |||
| color: #333; | |||
| text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); | |||
| background-color: #f0f0f0; | |||
| background-image: -moz-linear-gradient(top, #e6e6e6, #fff); | |||
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#fff)); | |||
| background-image: -webkit-linear-gradient(top, #e6e6e6, #fff); | |||
| background-image: -o-linear-gradient(top, #e6e6e6, #fff); | |||
| background-image: linear-gradient(to bottom, #e6e6e6, #fff); | |||
| background-repeat: repeat-x; | |||
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe6e6e6', endColorstr='#ffffffff', GradientType=0); | |||
| border-color: #fff #fff #d9d9d9; | |||
| border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); | |||
| *background-color: #fff; | |||
| /* Darken IE7 buttons by default so they stand out more given they won't have borders */ | |||
| filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default:hover, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default:hover, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default:focus, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default:focus, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default:active, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default:active, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default.active, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default.active, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default.disabled, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default.disabled, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default[disabled], | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default[disabled] { | |||
| color: #333; | |||
| background-color: #fff; | |||
| *background-color: #f2f2f2; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default:active, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default:active, | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default.active, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default.active { | |||
| background-color: #e6e6e6 \9; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-label { | |||
| text-align: center; | |||
| margin-top: -1px; | |||
| margin-bottom: -1px; | |||
| z-index: 100; | |||
| border-left: 1px solid #ccc; | |||
| border-right: 1px solid #ccc; | |||
| color: #333; | |||
| text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); | |||
| background-color: #f5f5f5; | |||
| background-image: -moz-linear-gradient(top, #fff, #e6e6e6); | |||
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6)); | |||
| background-image: -webkit-linear-gradient(top, #fff, #e6e6e6); | |||
| background-image: -o-linear-gradient(top, #fff, #e6e6e6); | |||
| background-image: linear-gradient(to bottom, #fff, #e6e6e6); | |||
| background-repeat: repeat-x; | |||
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); | |||
| border-color: #e6e6e6 #e6e6e6 #bfbfbf; | |||
| border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); | |||
| *background-color: #e6e6e6; | |||
| /* Darken IE7 buttons by default so they stand out more given they won't have borders */ | |||
| filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-label:hover, | |||
| .bootstrap-switch .bootstrap-switch-label:focus, | |||
| .bootstrap-switch .bootstrap-switch-label:active, | |||
| .bootstrap-switch .bootstrap-switch-label.active, | |||
| .bootstrap-switch .bootstrap-switch-label.disabled, | |||
| .bootstrap-switch .bootstrap-switch-label[disabled] { | |||
| color: #333; | |||
| background-color: #e6e6e6; | |||
| *background-color: #d9d9d9; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-label:active, | |||
| .bootstrap-switch .bootstrap-switch-label.active { | |||
| background-color: #cccccc \9; | |||
| } | |||
| .bootstrap-switch span::before { | |||
| content: "\200b"; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on { | |||
| -webkit-border-top-left-radius: 4px; | |||
| -moz-border-radius-topleft: 4px; | |||
| border-top-left-radius: 4px; | |||
| -webkit-border-bottom-left-radius: 4px; | |||
| -moz-border-radius-bottomleft: 4px; | |||
| border-bottom-left-radius: 4px; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-off { | |||
| -webkit-border-top-right-radius: 4px; | |||
| -moz-border-radius-topright: 4px; | |||
| border-top-right-radius: 4px; | |||
| -webkit-border-bottom-right-radius: 4px; | |||
| -moz-border-radius-bottomright: 4px; | |||
| border-bottom-right-radius: 4px; | |||
| } | |||
| .bootstrap-switch input[type='radio'], | |||
| .bootstrap-switch input[type='checkbox'] { | |||
| position: absolute !important; | |||
| top: 0; | |||
| left: 0; | |||
| opacity: 0; | |||
| filter: alpha(opacity=0); | |||
| z-index: -1; | |||
| visibility: hidden; | |||
| } | |||
| .bootstrap-switch input[type='radio'].form-control, | |||
| .bootstrap-switch input[type='checkbox'].form-control { | |||
| height: auto; | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-mini { | |||
| min-width: 71px; | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on, | |||
| .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off, | |||
| .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label { | |||
| padding: 3px 6px; | |||
| font-size: 10px; | |||
| line-height: 9px; | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-small { | |||
| min-width: 79px; | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on, | |||
| .bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off, | |||
| .bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label { | |||
| padding: 3px 6px; | |||
| font-size: 12px; | |||
| line-height: 18px; | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-large { | |||
| min-width: 120px; | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on, | |||
| .bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off, | |||
| .bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label { | |||
| padding: 9px 12px; | |||
| font-size: 16px; | |||
| line-height: normal; | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-disabled, | |||
| .bootstrap-switch.bootstrap-switch-readonly, | |||
| .bootstrap-switch.bootstrap-switch-indeterminate { | |||
| cursor: default !important; | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on, | |||
| .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on, | |||
| .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on, | |||
| .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off, | |||
| .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off, | |||
| .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off, | |||
| .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label, | |||
| .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label, | |||
| .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label { | |||
| opacity: 0.5; | |||
| filter: alpha(opacity=50); | |||
| cursor: default !important; | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container { | |||
| -webkit-transition: margin-left 0.5s; | |||
| -moz-transition: margin-left 0.5s; | |||
| -o-transition: margin-left 0.5s; | |||
| transition: margin-left 0.5s; | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on { | |||
| -webkit-border-top-left-radius: 0; | |||
| -moz-border-radius-topleft: 0; | |||
| border-top-left-radius: 0; | |||
| -webkit-border-bottom-left-radius: 0; | |||
| -moz-border-radius-bottomleft: 0; | |||
| border-bottom-left-radius: 0; | |||
| -webkit-border-top-right-radius: 4px; | |||
| -moz-border-radius-topright: 4px; | |||
| border-top-right-radius: 4px; | |||
| -webkit-border-bottom-right-radius: 4px; | |||
| -moz-border-radius-bottomright: 4px; | |||
| border-bottom-right-radius: 4px; | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off { | |||
| -webkit-border-top-right-radius: 0; | |||
| -moz-border-radius-topright: 0; | |||
| border-top-right-radius: 0; | |||
| -webkit-border-bottom-right-radius: 0; | |||
| -moz-border-radius-bottomright: 0; | |||
| border-bottom-right-radius: 0; | |||
| -webkit-border-top-left-radius: 4px; | |||
| -moz-border-radius-topleft: 4px; | |||
| border-top-left-radius: 4px; | |||
| -webkit-border-bottom-left-radius: 4px; | |||
| -moz-border-radius-bottomleft: 4px; | |||
| border-bottom-left-radius: 4px; | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-focused { | |||
| border-color: rgba(82, 168, 236, 0.8); | |||
| outline: 0; | |||
| outline: thin dotted \9; | |||
| -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82, 168, 236, .6); | |||
| -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82, 168, 236, .6); | |||
| box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82, 168, 236, .6); | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label, | |||
| .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label { | |||
| -webkit-border-top-right-radius: 4px; | |||
| -moz-border-radius-topright: 4px; | |||
| border-top-right-radius: 4px; | |||
| -webkit-border-bottom-right-radius: 4px; | |||
| -moz-border-radius-bottomright: 4px; | |||
| border-bottom-right-radius: 4px; | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label, | |||
| .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label { | |||
| -webkit-border-top-left-radius: 4px; | |||
| -moz-border-radius-topleft: 4px; | |||
| border-top-left-radius: 4px; | |||
| -webkit-border-bottom-left-radius: 4px; | |||
| -moz-border-radius-bottomleft: 4px; | |||
| border-bottom-left-radius: 4px; | |||
| } | |||
| @@ -0,0 +1,187 @@ | |||
| /** | |||
| * bootstrap-switch - Turn checkboxes and radio buttons into toggle switches. | |||
| * | |||
| * @version v3.3.4 | |||
| * @homepage https://bttstrp.github.io/bootstrap-switch | |||
| * @author Mattia Larentis <mattia@larentis.eu> (http://larentis.eu) | |||
| * @license Apache-2.0 | |||
| */ | |||
| .bootstrap-switch { | |||
| display: inline-block; | |||
| direction: ltr; | |||
| cursor: pointer; | |||
| border-radius: 4px; | |||
| border: 1px solid; | |||
| border-color: #ccc; | |||
| position: relative; | |||
| text-align: left; | |||
| overflow: hidden; | |||
| line-height: 8px; | |||
| z-index: 0; | |||
| -webkit-user-select: none; | |||
| -moz-user-select: none; | |||
| -ms-user-select: none; | |||
| user-select: none; | |||
| vertical-align: middle; | |||
| -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; | |||
| -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; | |||
| transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-container { | |||
| display: inline-block; | |||
| top: 0; | |||
| border-radius: 4px; | |||
| -webkit-transform: translate3d(0, 0, 0); | |||
| transform: translate3d(0, 0, 0); | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on, | |||
| .bootstrap-switch .bootstrap-switch-handle-off, | |||
| .bootstrap-switch .bootstrap-switch-label { | |||
| -webkit-box-sizing: border-box; | |||
| -moz-box-sizing: border-box; | |||
| box-sizing: border-box; | |||
| cursor: pointer; | |||
| display: table-cell; | |||
| vertical-align: middle; | |||
| padding: 6px 12px; | |||
| font-size: 14px; | |||
| line-height: 20px; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on, | |||
| .bootstrap-switch .bootstrap-switch-handle-off { | |||
| text-align: center; | |||
| z-index: 1; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary { | |||
| color: #fff; | |||
| background: #337ab7; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info { | |||
| color: #fff; | |||
| background: #5bc0de; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success { | |||
| color: #fff; | |||
| background: #5cb85c; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning { | |||
| background: #f0ad4e; | |||
| color: #fff; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger { | |||
| color: #fff; | |||
| background: #d9534f; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default, | |||
| .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default { | |||
| color: #000; | |||
| background: #eeeeee; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-label { | |||
| text-align: center; | |||
| margin-top: -1px; | |||
| margin-bottom: -1px; | |||
| z-index: 100; | |||
| color: #333; | |||
| background: #fff; | |||
| } | |||
| .bootstrap-switch span::before { | |||
| content: "\200b"; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-on { | |||
| border-bottom-left-radius: 3px; | |||
| border-top-left-radius: 3px; | |||
| } | |||
| .bootstrap-switch .bootstrap-switch-handle-off { | |||
| border-bottom-right-radius: 3px; | |||
| border-top-right-radius: 3px; | |||
| } | |||
| .bootstrap-switch input[type='radio'], | |||
| .bootstrap-switch input[type='checkbox'] { | |||
| position: absolute !important; | |||
| top: 0; | |||
| left: 0; | |||
| margin: 0; | |||
| z-index: -1; | |||
| opacity: 0; | |||
| filter: alpha(opacity=0); | |||
| visibility: hidden; | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on, | |||
| .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off, | |||
| .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label { | |||
| padding: 1px 5px; | |||
| font-size: 12px; | |||
| line-height: 1.5; | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on, | |||
| .bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off, | |||
| .bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label { | |||
| padding: 5px 10px; | |||
| font-size: 12px; | |||
| line-height: 1.5; | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on, | |||
| .bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off, | |||
| .bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label { | |||
| padding: 6px 16px; | |||
| font-size: 18px; | |||
| line-height: 1.3333333; | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-disabled, | |||
| .bootstrap-switch.bootstrap-switch-readonly, | |||
| .bootstrap-switch.bootstrap-switch-indeterminate { | |||
| cursor: default !important; | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on, | |||
| .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on, | |||
| .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on, | |||
| .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off, | |||
| .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off, | |||
| .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off, | |||
| .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label, | |||
| .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label, | |||
| .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label { | |||
| opacity: 0.5; | |||
| filter: alpha(opacity=50); | |||
| cursor: default !important; | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container { | |||
| -webkit-transition: margin-left 0.5s; | |||
| -o-transition: margin-left 0.5s; | |||
| transition: margin-left 0.5s; | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on { | |||
| border-bottom-left-radius: 0; | |||
| border-top-left-radius: 0; | |||
| border-bottom-right-radius: 3px; | |||
| border-top-right-radius: 3px; | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off { | |||
| border-bottom-right-radius: 0; | |||
| border-top-right-radius: 0; | |||
| border-bottom-left-radius: 3px; | |||
| border-top-left-radius: 3px; | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-focused { | |||
| border-color: #66afe9; | |||
| outline: 0; | |||
| -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); | |||
| box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label, | |||
| .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label { | |||
| border-bottom-right-radius: 3px; | |||
| border-top-right-radius: 3px; | |||
| } | |||
| .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label, | |||
| .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label { | |||
| border-bottom-left-radius: 3px; | |||
| border-top-left-radius: 3px; | |||
| } | |||
| @@ -0,0 +1,784 @@ | |||
| /** | |||
| * bootstrap-switch - Turn checkboxes and radio buttons into toggle switches. | |||
| * | |||
| * @version v3.3.4 | |||
| * @homepage https://bttstrp.github.io/bootstrap-switch | |||
| * @author Mattia Larentis <mattia@larentis.eu> (http://larentis.eu) | |||
| * @license Apache-2.0 | |||
| */ | |||
| (function (global, factory) { | |||
| if (typeof define === "function" && define.amd) { | |||
| define(['jquery'], factory); | |||
| } else if (typeof exports !== "undefined") { | |||
| factory(require('jquery')); | |||
| } else { | |||
| var mod = { | |||
| exports: {} | |||
| }; | |||
| factory(global.jquery); | |||
| global.bootstrapSwitch = mod.exports; | |||
| } | |||
| })(this, function (_jquery) { | |||
| 'use strict'; | |||
| var _jquery2 = _interopRequireDefault(_jquery); | |||
| function _interopRequireDefault(obj) { | |||
| return obj && obj.__esModule ? obj : { | |||
| default: obj | |||
| }; | |||
| } | |||
| var _extends = Object.assign || function (target) { | |||
| for (var i = 1; i < arguments.length; i++) { | |||
| var source = arguments[i]; | |||
| for (var key in source) { | |||
| if (Object.prototype.hasOwnProperty.call(source, key)) { | |||
| target[key] = source[key]; | |||
| } | |||
| } | |||
| } | |||
| return target; | |||
| }; | |||
| function _classCallCheck(instance, Constructor) { | |||
| if (!(instance instanceof Constructor)) { | |||
| throw new TypeError("Cannot call a class as a function"); | |||
| } | |||
| } | |||
| var _createClass = function () { | |||
| function defineProperties(target, props) { | |||
| for (var i = 0; i < props.length; i++) { | |||
| var descriptor = props[i]; | |||
| descriptor.enumerable = descriptor.enumerable || false; | |||
| descriptor.configurable = true; | |||
| if ("value" in descriptor) descriptor.writable = true; | |||
| Object.defineProperty(target, descriptor.key, descriptor); | |||
| } | |||
| } | |||
| return function (Constructor, protoProps, staticProps) { | |||
| if (protoProps) defineProperties(Constructor.prototype, protoProps); | |||
| if (staticProps) defineProperties(Constructor, staticProps); | |||
| return Constructor; | |||
| }; | |||
| }(); | |||
| var $ = _jquery2.default || window.jQuery || window.$; | |||
| var BootstrapSwitch = function () { | |||
| function BootstrapSwitch(element) { | |||
| var _this = this; | |||
| var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | |||
| _classCallCheck(this, BootstrapSwitch); | |||
| this.$element = $(element); | |||
| this.options = $.extend({}, $.fn.bootstrapSwitch.defaults, this._getElementOptions(), options); | |||
| this.prevOptions = {}; | |||
| this.$wrapper = $('<div>', { | |||
| class: function _class() { | |||
| var classes = []; | |||
| classes.push(_this.options.state ? 'on' : 'off'); | |||
| if (_this.options.size) { | |||
| classes.push(_this.options.size); | |||
| } | |||
| if (_this.options.disabled) { | |||
| classes.push('disabled'); | |||
| } | |||
| if (_this.options.readonly) { | |||
| classes.push('readonly'); | |||
| } | |||
| if (_this.options.indeterminate) { | |||
| classes.push('indeterminate'); | |||
| } | |||
| if (_this.options.inverse) { | |||
| classes.push('inverse'); | |||
| } | |||
| if (_this.$element.attr('id')) { | |||
| classes.push('id-' + _this.$element.attr('id')); | |||
| } | |||
| return classes.map(_this._getClass.bind(_this)).concat([_this.options.baseClass], _this._getClasses(_this.options.wrapperClass)).join(' '); | |||
| } | |||
| }); | |||
| this.$container = $('<div>', { class: this._getClass('container') }); | |||
| this.$on = $('<span>', { | |||
| html: this.options.onText, | |||
| class: this._getClass('handle-on') + ' ' + this._getClass(this.options.onColor) | |||
| }); | |||
| this.$off = $('<span>', { | |||
| html: this.options.offText, | |||
| class: this._getClass('handle-off') + ' ' + this._getClass(this.options.offColor) | |||
| }); | |||
| this.$label = $('<span>', { | |||
| html: this.options.labelText, | |||
| class: this._getClass('label') | |||
| }); | |||
| this.$element.on('init.bootstrapSwitch', this.options.onInit.bind(this, element)); | |||
| this.$element.on('switchChange.bootstrapSwitch', function () { | |||
| for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |||
| args[_key] = arguments[_key]; | |||
| } | |||
| if (_this.options.onSwitchChange.apply(element, args) === false) { | |||
| if (_this.$element.is(':radio')) { | |||
| $('[name="' + _this.$element.attr('name') + '"]').trigger('previousState.bootstrapSwitch', true); | |||
| } else { | |||
| _this.$element.trigger('previousState.bootstrapSwitch', true); | |||
| } | |||
| } | |||
| }); | |||
| this.$container = this.$element.wrap(this.$container).parent(); | |||
| this.$wrapper = this.$container.wrap(this.$wrapper).parent(); | |||
| this.$element.before(this.options.inverse ? this.$off : this.$on).before(this.$label).before(this.options.inverse ? this.$on : this.$off); | |||
| if (this.options.indeterminate) { | |||
| this.$element.prop('indeterminate', true); | |||
| } | |||
| this._init(); | |||
| this._elementHandlers(); | |||
| this._handleHandlers(); | |||
| this._labelHandlers(); | |||
| this._formHandler(); | |||
| this._externalLabelHandler(); | |||
| this.$element.trigger('init.bootstrapSwitch', this.options.state); | |||
| } | |||
| _createClass(BootstrapSwitch, [{ | |||
| key: 'setPrevOptions', | |||
| value: function setPrevOptions() { | |||
| this.prevOptions = _extends({}, this.options); | |||
| } | |||
| }, { | |||
| key: 'state', | |||
| value: function state(value, skip) { | |||
| if (typeof value === 'undefined') { | |||
| return this.options.state; | |||
| } | |||
| if (this.options.disabled || this.options.readonly || this.options.state && !this.options.radioAllOff && this.$element.is(':radio')) { | |||
| return this.$element; | |||
| } | |||
| if (this.$element.is(':radio')) { | |||
| $('[name="' + this.$element.attr('name') + '"]').trigger('setPreviousOptions.bootstrapSwitch'); | |||
| } else { | |||
| this.$element.trigger('setPreviousOptions.bootstrapSwitch'); | |||
| } | |||
| if (this.options.indeterminate) { | |||
| this.indeterminate(false); | |||
| } | |||
| this.$element.prop('checked', Boolean(value)).trigger('change.bootstrapSwitch', skip); | |||
| return this.$element; | |||
| } | |||
| }, { | |||
| key: 'toggleState', | |||
| value: function toggleState(skip) { | |||
| if (this.options.disabled || this.options.readonly) { | |||
| return this.$element; | |||
| } | |||
| if (this.options.indeterminate) { | |||
| this.indeterminate(false); | |||
| return this.state(true); | |||
| } else { | |||
| return this.$element.prop('checked', !this.options.state).trigger('change.bootstrapSwitch', skip); | |||
| } | |||
| } | |||
| }, { | |||
| key: 'size', | |||
| value: function size(value) { | |||
| if (typeof value === 'undefined') { | |||
| return this.options.size; | |||
| } | |||
| if (this.options.size != null) { | |||
| this.$wrapper.removeClass(this._getClass(this.options.size)); | |||
| } | |||
| if (value) { | |||
| this.$wrapper.addClass(this._getClass(value)); | |||
| } | |||
| this._width(); | |||
| this._containerPosition(); | |||
| this.options.size = value; | |||
| return this.$element; | |||
| } | |||
| }, { | |||
| key: 'animate', | |||
| value: function animate(value) { | |||
| if (typeof value === 'undefined') { | |||
| return this.options.animate; | |||
| } | |||
| if (this.options.animate === Boolean(value)) { | |||
| return this.$element; | |||
| } | |||
| return this.toggleAnimate(); | |||
| } | |||
| }, { | |||
| key: 'toggleAnimate', | |||
| value: function toggleAnimate() { | |||
| this.options.animate = !this.options.animate; | |||
| this.$wrapper.toggleClass(this._getClass('animate')); | |||
| return this.$element; | |||
| } | |||
| }, { | |||
| key: 'disabled', | |||
| value: function disabled(value) { | |||
| if (typeof value === 'undefined') { | |||
| return this.options.disabled; | |||
| } | |||
| if (this.options.disabled === Boolean(value)) { | |||
| return this.$element; | |||
| } | |||
| return this.toggleDisabled(); | |||
| } | |||
| }, { | |||
| key: 'toggleDisabled', | |||
| value: function toggleDisabled() { | |||
| this.options.disabled = !this.options.disabled; | |||
| this.$element.prop('disabled', this.options.disabled); | |||
| this.$wrapper.toggleClass(this._getClass('disabled')); | |||
| return this.$element; | |||
| } | |||
| }, { | |||
| key: 'readonly', | |||
| value: function readonly(value) { | |||
| if (typeof value === 'undefined') { | |||
| return this.options.readonly; | |||
| } | |||
| if (this.options.readonly === Boolean(value)) { | |||
| return this.$element; | |||
| } | |||
| return this.toggleReadonly(); | |||
| } | |||
| }, { | |||
| key: 'toggleReadonly', | |||
| value: function toggleReadonly() { | |||
| this.options.readonly = !this.options.readonly; | |||
| this.$element.prop('readonly', this.options.readonly); | |||
| this.$wrapper.toggleClass(this._getClass('readonly')); | |||
| return this.$element; | |||
| } | |||
| }, { | |||
| key: 'indeterminate', | |||
| value: function indeterminate(value) { | |||
| if (typeof value === 'undefined') { | |||
| return this.options.indeterminate; | |||
| } | |||
| if (this.options.indeterminate === Boolean(value)) { | |||
| return this.$element; | |||
| } | |||
| return this.toggleIndeterminate(); | |||
| } | |||
| }, { | |||
| key: 'toggleIndeterminate', | |||
| value: function toggleIndeterminate() { | |||
| this.options.indeterminate = !this.options.indeterminate; | |||
| this.$element.prop('indeterminate', this.options.indeterminate); | |||
| this.$wrapper.toggleClass(this._getClass('indeterminate')); | |||
| this._containerPosition(); | |||
| return this.$element; | |||
| } | |||
| }, { | |||
| key: 'inverse', | |||
| value: function inverse(value) { | |||
| if (typeof value === 'undefined') { | |||
| return this.options.inverse; | |||
| } | |||
| if (this.options.inverse === Boolean(value)) { | |||
| return this.$element; | |||
| } | |||
| return this.toggleInverse(); | |||
| } | |||
| }, { | |||
| key: 'toggleInverse', | |||
| value: function toggleInverse() { | |||
| this.$wrapper.toggleClass(this._getClass('inverse')); | |||
| var $on = this.$on.clone(true); | |||
| var $off = this.$off.clone(true); | |||
| this.$on.replaceWith($off); | |||
| this.$off.replaceWith($on); | |||
| this.$on = $off; | |||
| this.$off = $on; | |||
| this.options.inverse = !this.options.inverse; | |||
| return this.$element; | |||
| } | |||
| }, { | |||
| key: 'onColor', | |||
| value: function onColor(value) { | |||
| if (typeof value === 'undefined') { | |||
| return this.options.onColor; | |||
| } | |||
| if (this.options.onColor) { | |||
| this.$on.removeClass(this._getClass(this.options.onColor)); | |||
| } | |||
| this.$on.addClass(this._getClass(value)); | |||
| this.options.onColor = value; | |||
| return this.$element; | |||
| } | |||
| }, { | |||
| key: 'offColor', | |||
| value: function offColor(value) { | |||
| if (typeof value === 'undefined') { | |||
| return this.options.offColor; | |||
| } | |||
| if (this.options.offColor) { | |||
| this.$off.removeClass(this._getClass(this.options.offColor)); | |||
| } | |||
| this.$off.addClass(this._getClass(value)); | |||
| this.options.offColor = value; | |||
| return this.$element; | |||
| } | |||
| }, { | |||
| key: 'onText', | |||
| value: function onText(value) { | |||
| if (typeof value === 'undefined') { | |||
| return this.options.onText; | |||
| } | |||
| this.$on.html(value); | |||
| this._width(); | |||
| this._containerPosition(); | |||
| this.options.onText = value; | |||
| return this.$element; | |||
| } | |||
| }, { | |||
| key: 'offText', | |||
| value: function offText(value) { | |||
| if (typeof value === 'undefined') { | |||
| return this.options.offText; | |||
| } | |||
| this.$off.html(value); | |||
| this._width(); | |||
| this._containerPosition(); | |||
| this.options.offText = value; | |||
| return this.$element; | |||
| } | |||
| }, { | |||
| key: 'labelText', | |||
| value: function labelText(value) { | |||
| if (typeof value === 'undefined') { | |||
| return this.options.labelText; | |||
| } | |||
| this.$label.html(value); | |||
| this._width(); | |||
| this.options.labelText = value; | |||
| return this.$element; | |||
| } | |||
| }, { | |||
| key: 'handleWidth', | |||
| value: function handleWidth(value) { | |||
| if (typeof value === 'undefined') { | |||
| return this.options.handleWidth; | |||
| } | |||
| this.options.handleWidth = value; | |||
| this._width(); | |||
| this._containerPosition(); | |||
| return this.$element; | |||
| } | |||
| }, { | |||
| key: 'labelWidth', | |||
| value: function labelWidth(value) { | |||
| if (typeof value === 'undefined') { | |||
| return this.options.labelWidth; | |||
| } | |||
| this.options.labelWidth = value; | |||
| this._width(); | |||
| this._containerPosition(); | |||
| return this.$element; | |||
| } | |||
| }, { | |||
| key: 'baseClass', | |||
| value: function baseClass(value) { | |||
| return this.options.baseClass; | |||
| } | |||
| }, { | |||
| key: 'wrapperClass', | |||
| value: function wrapperClass(value) { | |||
| if (typeof value === 'undefined') { | |||
| return this.options.wrapperClass; | |||
| } | |||
| if (!value) { | |||
| value = $.fn.bootstrapSwitch.defaults.wrapperClass; | |||
| } | |||
| this.$wrapper.removeClass(this._getClasses(this.options.wrapperClass).join(' ')); | |||
| this.$wrapper.addClass(this._getClasses(value).join(' ')); | |||
| this.options.wrapperClass = value; | |||
| return this.$element; | |||
| } | |||
| }, { | |||
| key: 'radioAllOff', | |||
| value: function radioAllOff(value) { | |||
| if (typeof value === 'undefined') { | |||
| return this.options.radioAllOff; | |||
| } | |||
| var val = Boolean(value); | |||
| if (this.options.radioAllOff === val) { | |||
| return this.$element; | |||
| } | |||
| this.options.radioAllOff = val; | |||
| return this.$element; | |||
| } | |||
| }, { | |||
| key: 'onInit', | |||
| value: function onInit(value) { | |||
| if (typeof value === 'undefined') { | |||
| return this.options.onInit; | |||
| } | |||
| if (!value) { | |||
| value = $.fn.bootstrapSwitch.defaults.onInit; | |||
| } | |||
| this.options.onInit = value; | |||
| return this.$element; | |||
| } | |||
| }, { | |||
| key: 'onSwitchChange', | |||
| value: function onSwitchChange(value) { | |||
| if (typeof value === 'undefined') { | |||
| return this.options.onSwitchChange; | |||
| } | |||
| if (!value) { | |||
| value = $.fn.bootstrapSwitch.defaults.onSwitchChange; | |||
| } | |||
| this.options.onSwitchChange = value; | |||
| return this.$element; | |||
| } | |||
| }, { | |||
| key: 'destroy', | |||
| value: function destroy() { | |||
| var $form = this.$element.closest('form'); | |||
| if ($form.length) { | |||
| $form.off('reset.bootstrapSwitch').removeData('bootstrap-switch'); | |||
| } | |||
| this.$container.children().not(this.$element).remove(); | |||
| this.$element.unwrap().unwrap().off('.bootstrapSwitch').removeData('bootstrap-switch'); | |||
| return this.$element; | |||
| } | |||
| }, { | |||
| key: '_getElementOptions', | |||
| value: function _getElementOptions() { | |||
| return { | |||
| state: this.$element.is(':checked'), | |||
| size: this.$element.data('size'), | |||
| animate: this.$element.data('animate'), | |||
| disabled: this.$element.is(':disabled'), | |||
| readonly: this.$element.is('[readonly]'), | |||
| indeterminate: this.$element.data('indeterminate'), | |||
| inverse: this.$element.data('inverse'), | |||
| radioAllOff: this.$element.data('radio-all-off'), | |||
| onColor: this.$element.data('on-color'), | |||
| offColor: this.$element.data('off-color'), | |||
| onText: this.$element.data('on-text'), | |||
| offText: this.$element.data('off-text'), | |||
| labelText: this.$element.data('label-text'), | |||
| handleWidth: this.$element.data('handle-width'), | |||
| labelWidth: this.$element.data('label-width'), | |||
| baseClass: this.$element.data('base-class'), | |||
| wrapperClass: this.$element.data('wrapper-class') | |||
| }; | |||
| } | |||
| }, { | |||
| key: '_width', | |||
| value: function _width() { | |||
| var _this2 = this; | |||
| var $handles = this.$on.add(this.$off).add(this.$label).css('width', ''); | |||
| var handleWidth = this.options.handleWidth === 'auto' ? Math.round(Math.max(this.$on.width(), this.$off.width())) : this.options.handleWidth; | |||
| $handles.width(handleWidth); | |||
| this.$label.width(function (index, width) { | |||
| if (_this2.options.labelWidth !== 'auto') { | |||
| return _this2.options.labelWidth; | |||
| } | |||
| if (width < handleWidth) { | |||
| return handleWidth; | |||
| } | |||
| return width; | |||
| }); | |||
| this._handleWidth = this.$on.outerWidth(); | |||
| this._labelWidth = this.$label.outerWidth(); | |||
| this.$container.width(this._handleWidth * 2 + this._labelWidth); | |||
| return this.$wrapper.width(this._handleWidth + this._labelWidth); | |||
| } | |||
| }, { | |||
| key: '_containerPosition', | |||
| value: function _containerPosition() { | |||
| var _this3 = this; | |||
| var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.options.state; | |||
| var callback = arguments[1]; | |||
| this.$container.css('margin-left', function () { | |||
| var values = [0, '-' + _this3._handleWidth + 'px']; | |||
| if (_this3.options.indeterminate) { | |||
| return '-' + _this3._handleWidth / 2 + 'px'; | |||
| } | |||
| if (state) { | |||
| if (_this3.options.inverse) { | |||
| return values[1]; | |||
| } else { | |||
| return values[0]; | |||
| } | |||
| } else { | |||
| if (_this3.options.inverse) { | |||
| return values[0]; | |||
| } else { | |||
| return values[1]; | |||
| } | |||
| } | |||
| }); | |||
| } | |||
| }, { | |||
| key: '_init', | |||
| value: function _init() { | |||
| var _this4 = this; | |||
| var init = function init() { | |||
| _this4.setPrevOptions(); | |||
| _this4._width(); | |||
| _this4._containerPosition(); | |||
| setTimeout(function () { | |||
| if (_this4.options.animate) { | |||
| return _this4.$wrapper.addClass(_this4._getClass('animate')); | |||
| } | |||
| }, 50); | |||
| }; | |||
| if (this.$wrapper.is(':visible')) { | |||
| init(); | |||
| return; | |||
| } | |||
| var initInterval = window.setInterval(function () { | |||
| if (_this4.$wrapper.is(':visible')) { | |||
| init(); | |||
| return window.clearInterval(initInterval); | |||
| } | |||
| }, 50); | |||
| } | |||
| }, { | |||
| key: '_elementHandlers', | |||
| value: function _elementHandlers() { | |||
| var _this5 = this; | |||
| return this.$element.on({ | |||
| 'setPreviousOptions.bootstrapSwitch': this.setPrevOptions.bind(this), | |||
| 'previousState.bootstrapSwitch': function previousStateBootstrapSwitch() { | |||
| _this5.options = _this5.prevOptions; | |||
| if (_this5.options.indeterminate) { | |||
| _this5.$wrapper.addClass(_this5._getClass('indeterminate')); | |||
| } | |||
| _this5.$element.prop('checked', _this5.options.state).trigger('change.bootstrapSwitch', true); | |||
| }, | |||
| 'change.bootstrapSwitch': function changeBootstrapSwitch(event, skip) { | |||
| event.preventDefault(); | |||
| event.stopImmediatePropagation(); | |||
| var state = _this5.$element.is(':checked'); | |||
| _this5._containerPosition(state); | |||
| if (state === _this5.options.state) { | |||
| return; | |||
| } | |||
| _this5.options.state = state; | |||
| _this5.$wrapper.toggleClass(_this5._getClass('off')).toggleClass(_this5._getClass('on')); | |||
| if (!skip) { | |||
| if (_this5.$element.is(':radio')) { | |||
| $('[name="' + _this5.$element.attr('name') + '"]').not(_this5.$element).prop('checked', false).trigger('change.bootstrapSwitch', true); | |||
| } | |||
| _this5.$element.trigger('switchChange.bootstrapSwitch', [state]); | |||
| } | |||
| }, | |||
| 'focus.bootstrapSwitch': function focusBootstrapSwitch(event) { | |||
| event.preventDefault(); | |||
| _this5.$wrapper.addClass(_this5._getClass('focused')); | |||
| }, | |||
| 'blur.bootstrapSwitch': function blurBootstrapSwitch(event) { | |||
| event.preventDefault(); | |||
| _this5.$wrapper.removeClass(_this5._getClass('focused')); | |||
| }, | |||
| 'keydown.bootstrapSwitch': function keydownBootstrapSwitch(event) { | |||
| if (!event.which || _this5.options.disabled || _this5.options.readonly) { | |||
| return; | |||
| } | |||
| if (event.which === 37 || event.which === 39) { | |||
| event.preventDefault(); | |||
| event.stopImmediatePropagation(); | |||
| _this5.state(event.which === 39); | |||
| } | |||
| } | |||
| }); | |||
| } | |||
| }, { | |||
| key: '_handleHandlers', | |||
| value: function _handleHandlers() { | |||
| var _this6 = this; | |||
| this.$on.on('click.bootstrapSwitch', function (event) { | |||
| event.preventDefault(); | |||
| event.stopPropagation(); | |||
| _this6.state(false); | |||
| return _this6.$element.trigger('focus.bootstrapSwitch'); | |||
| }); | |||
| return this.$off.on('click.bootstrapSwitch', function (event) { | |||
| event.preventDefault(); | |||
| event.stopPropagation(); | |||
| _this6.state(true); | |||
| return _this6.$element.trigger('focus.bootstrapSwitch'); | |||
| }); | |||
| } | |||
| }, { | |||
| key: '_labelHandlers', | |||
| value: function _labelHandlers() { | |||
| var _this7 = this; | |||
| var handlers = { | |||
| click: function click(event) { | |||
| event.stopPropagation(); | |||
| }, | |||
| 'mousedown.bootstrapSwitch touchstart.bootstrapSwitch': function mousedownBootstrapSwitchTouchstartBootstrapSwitch(event) { | |||
| if (_this7._dragStart || _this7.options.disabled || _this7.options.readonly) { | |||
| return; | |||
| } | |||
| event.preventDefault(); | |||
| event.stopPropagation(); | |||
| _this7._dragStart = (event.pageX || event.originalEvent.touches[0].pageX) - parseInt(_this7.$container.css('margin-left'), 10); | |||
| if (_this7.options.animate) { | |||
| _this7.$wrapper.removeClass(_this7._getClass('animate')); | |||
| } | |||
| _this7.$element.trigger('focus.bootstrapSwitch'); | |||
| }, | |||
| 'mousemove.bootstrapSwitch touchmove.bootstrapSwitch': function mousemoveBootstrapSwitchTouchmoveBootstrapSwitch(event) { | |||
| if (_this7._dragStart == null) { | |||
| return; | |||
| } | |||
| var difference = (event.pageX || event.originalEvent.touches[0].pageX) - _this7._dragStart; | |||
| event.preventDefault(); | |||
| if (difference < -_this7._handleWidth || difference > 0) { | |||
| return; | |||
| } | |||
| _this7._dragEnd = difference; | |||
| _this7.$container.css('margin-left', _this7._dragEnd + 'px'); | |||
| }, | |||
| 'mouseup.bootstrapSwitch touchend.bootstrapSwitch': function mouseupBootstrapSwitchTouchendBootstrapSwitch(event) { | |||
| if (!_this7._dragStart) { | |||
| return; | |||
| } | |||
| event.preventDefault(); | |||
| if (_this7.options.animate) { | |||
| _this7.$wrapper.addClass(_this7._getClass('animate')); | |||
| } | |||
| if (_this7._dragEnd) { | |||
| var state = _this7._dragEnd > -(_this7._handleWidth / 2); | |||
| _this7._dragEnd = false; | |||
| _this7.state(_this7.options.inverse ? !state : state); | |||
| } else { | |||
| _this7.state(!_this7.options.state); | |||
| } | |||
| _this7._dragStart = false; | |||
| }, | |||
| 'mouseleave.bootstrapSwitch': function mouseleaveBootstrapSwitch() { | |||
| _this7.$label.trigger('mouseup.bootstrapSwitch'); | |||
| } | |||
| }; | |||
| this.$label.on(handlers); | |||
| } | |||
| }, { | |||
| key: '_externalLabelHandler', | |||
| value: function _externalLabelHandler() { | |||
| var _this8 = this; | |||
| var $externalLabel = this.$element.closest('label'); | |||
| $externalLabel.on('click', function (event) { | |||
| event.preventDefault(); | |||
| event.stopImmediatePropagation(); | |||
| if (event.target === $externalLabel[0]) { | |||
| _this8.toggleState(); | |||
| } | |||
| }); | |||
| } | |||
| }, { | |||
| key: '_formHandler', | |||
| value: function _formHandler() { | |||
| var $form = this.$element.closest('form'); | |||
| if ($form.data('bootstrap-switch')) { | |||
| return; | |||
| } | |||
| $form.on('reset.bootstrapSwitch', function () { | |||
| window.setTimeout(function () { | |||
| $form.find('input').filter(function () { | |||
| return $(this).data('bootstrap-switch'); | |||
| }).each(function () { | |||
| return $(this).bootstrapSwitch('state', this.checked); | |||
| }); | |||
| }, 1); | |||
| }).data('bootstrap-switch', true); | |||
| } | |||
| }, { | |||
| key: '_getClass', | |||
| value: function _getClass(name) { | |||
| return this.options.baseClass + '-' + name; | |||
| } | |||
| }, { | |||
| key: '_getClasses', | |||
| value: function _getClasses(classes) { | |||
| if (!$.isArray(classes)) { | |||
| return [this._getClass(classes)]; | |||
| } | |||
| return classes.map(this._getClass.bind(this)); | |||
| } | |||
| }]); | |||
| return BootstrapSwitch; | |||
| }(); | |||
| $.fn.bootstrapSwitch = function (option) { | |||
| for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { | |||
| args[_key2 - 1] = arguments[_key2]; | |||
| } | |||
| function reducer(ret, next) { | |||
| var $this = $(next); | |||
| var existingData = $this.data('bootstrap-switch'); | |||
| var data = existingData || new BootstrapSwitch(next, option); | |||
| if (!existingData) { | |||
| $this.data('bootstrap-switch', data); | |||
| } | |||
| if (typeof option === 'string') { | |||
| return data[option].apply(data, args); | |||
| } | |||
| return ret; | |||
| } | |||
| return Array.prototype.reduce.call(this, reducer, this); | |||
| }; | |||
| $.fn.bootstrapSwitch.Constructor = BootstrapSwitch; | |||
| $.fn.bootstrapSwitch.defaults = { | |||
| state: true, | |||
| size: null, | |||
| animate: true, | |||
| disabled: false, | |||
| readonly: false, | |||
| indeterminate: false, | |||
| inverse: false, | |||
| radioAllOff: false, | |||
| onColor: 'primary', | |||
| offColor: 'default', | |||
| onText: 'ON', | |||
| offText: 'OFF', | |||
| labelText: ' ', | |||
| handleWidth: 'auto', | |||
| labelWidth: 'auto', | |||
| baseClass: 'bootstrap-switch', | |||
| wrapperClass: 'wrapper', | |||
| onInit: function onInit() {}, | |||
| onSwitchChange: function onSwitchChange() {} | |||
| }; | |||
| }); | |||
| @@ -0,0 +1,87 @@ | |||
| /* | |||
| * Bootstrap Duallistbox - v4.0.2 | |||
| * A responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices. | |||
| * http://www.virtuosoft.eu/code/bootstrap-duallistbox/ | |||
| * | |||
| * Made by István Ujj-Mészáros | |||
| * Under Apache License v2.0 License | |||
| */ | |||
| .bootstrap-duallistbox-container .buttons { | |||
| width: 100%; | |||
| margin-bottom: -1px; | |||
| } | |||
| .bootstrap-duallistbox-container label { | |||
| display: block; | |||
| } | |||
| .bootstrap-duallistbox-container .info { | |||
| display: inline-block; | |||
| margin-bottom: 5px; | |||
| font-size: 11px; | |||
| } | |||
| .bootstrap-duallistbox-container .clear1, | |||
| .bootstrap-duallistbox-container .clear2 { | |||
| display: none; | |||
| font-size: 10px; | |||
| } | |||
| .bootstrap-duallistbox-container .box1.filtered .clear1, | |||
| .bootstrap-duallistbox-container .box2.filtered .clear2 { | |||
| display: inline-block; | |||
| } | |||
| .bootstrap-duallistbox-container .move, | |||
| .bootstrap-duallistbox-container .remove { | |||
| width: 50%; | |||
| box-sizing: content-box; | |||
| } | |||
| .bootstrap-duallistbox-container .btn-group .btn { | |||
| border-bottom-left-radius: 0; | |||
| border-bottom-right-radius: 0; | |||
| } | |||
| .bootstrap-duallistbox-container:not(.moveonselect) select { | |||
| border-top-left-radius: 0; | |||
| border-top-right-radius: 0; | |||
| } | |||
| .bootstrap-duallistbox-container .moveall, | |||
| .bootstrap-duallistbox-container .removeall { | |||
| width: 50%; | |||
| box-sizing: content-box; | |||
| } | |||
| .bootstrap-duallistbox-container.bs2compatible .btn-group > .btn + .btn { | |||
| margin-left: 0; | |||
| } | |||
| .bootstrap-duallistbox-container select { | |||
| width: 100%; | |||
| height: 300px; | |||
| padding: 0; | |||
| } | |||
| .bootstrap-duallistbox-container .filter { | |||
| display: inline-block; | |||
| width: 100%; | |||
| height: 31px; | |||
| margin: 0 0 5px 0; | |||
| -webkit-box-sizing: border-box; | |||
| -moz-box-sizing: border-box; | |||
| box-sizing: border-box; | |||
| } | |||
| .bootstrap-duallistbox-container .filter.placeholder { | |||
| color: #aaa; | |||
| } | |||
| .bootstrap-duallistbox-container.moveonselect .move, | |||
| .bootstrap-duallistbox-container.moveonselect .remove { | |||
| display:none; | |||
| } | |||
| .bootstrap-duallistbox-container.moveonselect .moveall, | |||
| .bootstrap-duallistbox-container.moveonselect .removeall { | |||
| width: 100%; | |||
| } | |||
| @@ -0,0 +1 @@ | |||
| .bootstrap-duallistbox-container .buttons{width:100%;margin-bottom:-1px}.bootstrap-duallistbox-container label{display:block}.bootstrap-duallistbox-container .info{display:inline-block;margin-bottom:5px;font-size:11px}.bootstrap-duallistbox-container .clear1,.bootstrap-duallistbox-container .clear2{display:none;font-size:10px}.bootstrap-duallistbox-container .box1.filtered .clear1,.bootstrap-duallistbox-container .box2.filtered .clear2{display:inline-block}.bootstrap-duallistbox-container .move,.bootstrap-duallistbox-container .remove{width:50%;box-sizing:content-box}.bootstrap-duallistbox-container .btn-group .btn{border-bottom-left-radius:0;border-bottom-right-radius:0}.bootstrap-duallistbox-container:not(.moveonselect) select{border-top-left-radius:0;border-top-right-radius:0}.bootstrap-duallistbox-container .moveall,.bootstrap-duallistbox-container .removeall{width:50%;box-sizing:content-box}.bootstrap-duallistbox-container.bs2compatible .btn-group>.btn+.btn{margin-left:0}.bootstrap-duallistbox-container select{width:100%;height:300px;padding:0}.bootstrap-duallistbox-container .filter{display:inline-block;width:100%;height:31px;margin:0 0 5px 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bootstrap-duallistbox-container .filter.placeholder{color:#aaa}.bootstrap-duallistbox-container.moveonselect .move,.bootstrap-duallistbox-container.moveonselect .remove{display:none}.bootstrap-duallistbox-container.moveonselect .moveall,.bootstrap-duallistbox-container.moveonselect .removeall{width:100%} | |||
| @@ -0,0 +1,893 @@ | |||
| /* | |||
| * Bootstrap Duallistbox - v4.0.2 | |||
| * A responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices. | |||
| * http://www.virtuosoft.eu/code/bootstrap-duallistbox/ | |||
| * | |||
| * Made by István Ujj-Mészáros | |||
| * Under Apache License v2.0 License | |||
| */ | |||
| (function(factory) { | |||
| if (typeof define === 'function' && define.amd) { | |||
| define(['jquery'], factory); | |||
| } else if (typeof module === 'object' && module.exports) { | |||
| module.exports = function(root, jQuery) { | |||
| if (jQuery === undefined) { | |||
| if (typeof window !== 'undefined') { | |||
| jQuery = require('jquery'); | |||
| } | |||
| else { | |||
| jQuery = require('jquery')(root); | |||
| } | |||
| } | |||
| factory(jQuery); | |||
| return jQuery; | |||
| }; | |||
| } else { | |||
| factory(jQuery); | |||
| } | |||
| }(function($) { | |||
| // Create the defaults once | |||
| var pluginName = 'bootstrapDualListbox', | |||
| defaults = { | |||
| filterTextClear: 'show all', | |||
| filterPlaceHolder: 'Filter', | |||
| moveSelectedLabel: 'Move selected', | |||
| moveAllLabel: 'Move all', | |||
| removeSelectedLabel: 'Remove selected', | |||
| removeAllLabel: 'Remove all', | |||
| moveOnSelect: true, // true/false (forced true on androids, see the comment later) | |||
| moveOnDoubleClick: true, // true/false (forced false on androids, cause moveOnSelect is forced to true) | |||
| preserveSelectionOnMove: false, // 'all' / 'moved' / false | |||
| selectedListLabel: false, // 'string', false | |||
| nonSelectedListLabel: false, // 'string', false | |||
| helperSelectNamePostfix: '_helper', // 'string_of_postfix' / false | |||
| selectorMinimalHeight: 100, | |||
| showFilterInputs: true, // whether to show filter inputs | |||
| nonSelectedFilter: '', // string, filter the non selected options | |||
| selectedFilter: '', // string, filter the selected options | |||
| infoText: 'Showing all {0}', // text when all options are visible / false for no info text | |||
| infoTextFiltered: '<span class="badge badge-warning">Filtered</span> {0} from {1}', // when not all of the options are visible due to the filter | |||
| infoTextEmpty: 'Empty list', // when there are no options present in the list | |||
| filterOnValues: false, // filter by selector's values, boolean | |||
| sortByInputOrder: false, | |||
| eventMoveOverride: false, // boolean, allows user to unbind default event behaviour and run their own instead | |||
| eventMoveAllOverride: false, // boolean, allows user to unbind default event behaviour and run their own instead | |||
| eventRemoveOverride: false, // boolean, allows user to unbind default event behaviour and run their own instead | |||
| eventRemoveAllOverride: false, // boolean, allows user to unbind default event behaviour and run their own instead | |||
| btnClass: 'btn-outline-secondary', // sets the button style class for all the buttons | |||
| btnMoveText: '>', // string, sets the text for the "Move" button | |||
| btnRemoveText: '<', // string, sets the text for the "Remove" button | |||
| btnMoveAllText: '>>', // string, sets the text for the "Move All" button | |||
| btnRemoveAllText: '<<' // string, sets the text for the "Remove All" button | |||
| }, | |||
| // Selections are invisible on android if the containing select is styled with CSS | |||
| // http://code.google.com/p/android/issues/detail?id=16922 | |||
| isBuggyAndroid = /android/i.test(navigator.userAgent.toLowerCase()); | |||
| // The actual plugin constructor | |||
| function BootstrapDualListbox(element, options) { | |||
| this.element = $(element); | |||
| // jQuery has an extend method which merges the contents of two or | |||
| // more objects, storing the result in the first object. The first object | |||
| // is generally empty as we don't want to alter the default options for | |||
| // future instances of the plugin | |||
| this.settings = $.extend({}, defaults, options); | |||
| this._defaults = defaults; | |||
| this._name = pluginName; | |||
| this.init(); | |||
| } | |||
| function triggerChangeEvent(dualListbox) { | |||
| dualListbox.element.trigger('change'); | |||
| } | |||
| function updateSelectionStates(dualListbox) { | |||
| dualListbox.element.find('option').each(function(index, item) { | |||
| var $item = $(item); | |||
| if (typeof($item.data('original-index')) === 'undefined') { | |||
| $item.data('original-index', dualListbox.elementCount++); | |||
| } | |||
| if (typeof($item.data('_selected')) === 'undefined') { | |||
| $item.data('_selected', false); | |||
| } | |||
| }); | |||
| } | |||
| function changeSelectionState(dualListbox, original_index, selected) { | |||
| dualListbox.element.find('option').each(function(index, item) { | |||
| var $item = $(item); | |||
| if ($item.data('original-index') === original_index) { | |||
| $item.prop('selected', selected); | |||
| if(selected){ | |||
| $item.attr('data-sortindex', dualListbox.sortIndex); | |||
| dualListbox.sortIndex++; | |||
| } else { | |||
| $item.removeAttr('data-sortindex'); | |||
| } | |||
| } | |||
| }); | |||
| } | |||
| function formatString(s, args) { | |||
| console.log(s, args); | |||
| return s.replace(/{(\d+)}/g, function(match, number) { | |||
| return typeof args[number] !== 'undefined' ? args[number] : match; | |||
| }); | |||
| } | |||
| function refreshInfo(dualListbox) { | |||
| if (!dualListbox.settings.infoText) { | |||
| return; | |||
| } | |||
| var visible1 = dualListbox.elements.select1.find('option').length, | |||
| visible2 = dualListbox.elements.select2.find('option').length, | |||
| all1 = dualListbox.element.find('option').length - dualListbox.selectedElements, | |||
| all2 = dualListbox.selectedElements, | |||
| content = ''; | |||
| if (all1 === 0) { | |||
| content = dualListbox.settings.infoTextEmpty; | |||
| } else if (visible1 === all1) { | |||
| content = formatString(dualListbox.settings.infoText, [visible1, all1]); | |||
| } else { | |||
| content = formatString(dualListbox.settings.infoTextFiltered, [visible1, all1]); | |||
| } | |||
| dualListbox.elements.info1.html(content); | |||
| dualListbox.elements.box1.toggleClass('filtered', !(visible1 === all1 || all1 === 0)); | |||
| if (all2 === 0) { | |||
| content = dualListbox.settings.infoTextEmpty; | |||
| } else if (visible2 === all2) { | |||
| content = formatString(dualListbox.settings.infoText, [visible2, all2]); | |||
| } else { | |||
| content = formatString(dualListbox.settings.infoTextFiltered, [visible2, all2]); | |||
| } | |||
| dualListbox.elements.info2.html(content); | |||
| dualListbox.elements.box2.toggleClass('filtered', !(visible2 === all2 || all2 === 0)); | |||
| } | |||
| function refreshSelects(dualListbox) { | |||
| dualListbox.selectedElements = 0; | |||
| dualListbox.elements.select1.empty(); | |||
| dualListbox.elements.select2.empty(); | |||
| dualListbox.element.find('option').each(function(index, item) { | |||
| var $item = $(item); | |||
| if ($item.prop('selected')) { | |||
| dualListbox.selectedElements++; | |||
| dualListbox.elements.select2.append($item.clone(true).prop('selected', $item.data('_selected'))); | |||
| } else { | |||
| dualListbox.elements.select1.append($item.clone(true).prop('selected', $item.data('_selected'))); | |||
| } | |||
| }); | |||
| if (dualListbox.settings.showFilterInputs) { | |||
| filter(dualListbox, 1); | |||
| filter(dualListbox, 2); | |||
| } | |||
| refreshInfo(dualListbox); | |||
| } | |||
| function filter(dualListbox, selectIndex) { | |||
| if (!dualListbox.settings.showFilterInputs) { | |||
| return; | |||
| } | |||
| saveSelections(dualListbox, selectIndex); | |||
| dualListbox.elements['select'+selectIndex].empty().scrollTop(0); | |||
| var regex, | |||
| allOptions = dualListbox.element.find('option'), | |||
| options = dualListbox.element; | |||
| if (selectIndex === 1) { | |||
| options = allOptions.not(':selected'); | |||
| } else { | |||
| options = options.find('option:selected'); | |||
| } | |||
| try { | |||
| regex = new RegExp($.trim(dualListbox.elements['filterInput'+selectIndex].val()), 'gi'); | |||
| } | |||
| catch(e) { | |||
| // a regex to match nothing | |||
| regex = new RegExp('/a^/', 'gi'); | |||
| } | |||
| options.each(function(index, item) { | |||
| var $item = $(item), | |||
| isFiltered = true; | |||
| if (item.text.match(regex) || (dualListbox.settings.filterOnValues && $item.attr('value').match(regex) ) ) { | |||
| isFiltered = false; | |||
| dualListbox.elements['select'+selectIndex].append($item.clone(true).prop('selected', $item.data('_selected'))); | |||
| } | |||
| allOptions.eq($item.data('original-index')).data('filtered'+selectIndex, isFiltered); | |||
| }); | |||
| refreshInfo(dualListbox); | |||
| } | |||
| function saveSelections(dualListbox, selectIndex) { | |||
| var options = dualListbox.element.find('option'); | |||
| dualListbox.elements['select'+selectIndex].find('option').each(function(index, item) { | |||
| var $item = $(item); | |||
| options.eq($item.data('original-index')).data('_selected', $item.prop('selected')); | |||
| }); | |||
| } | |||
| function sortOptionsByInputOrder(select){ | |||
| var selectopt = select.children('option'); | |||
| selectopt.sort(function(a,b){ | |||
| var an = parseInt(a.getAttribute('data-sortindex')), | |||
| bn = parseInt(b.getAttribute('data-sortindex')); | |||
| if(an > bn) { | |||
| return 1; | |||
| } | |||
| if(an < bn) { | |||
| return -1; | |||
| } | |||
| return 0; | |||
| }); | |||
| selectopt.detach().appendTo(select); | |||
| } | |||
| function sortOptions(select, dualListbox) { | |||
| select.find('option').sort(function(a, b) { | |||
| return ($(a).data('original-index') > $(b).data('original-index')) ? 1 : -1; | |||
| }).appendTo(select); | |||
| // workaround for chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1072475 | |||
| refreshSelects(dualListbox); | |||
| } | |||
| function clearSelections(dualListbox) { | |||
| dualListbox.elements.select1.find('option').each(function() { | |||
| dualListbox.element.find('option').data('_selected', false); | |||
| }); | |||
| } | |||
| function move(dualListbox) { | |||
| if (dualListbox.settings.preserveSelectionOnMove === 'all' && !dualListbox.settings.moveOnSelect) { | |||
| saveSelections(dualListbox, 1); | |||
| saveSelections(dualListbox, 2); | |||
| } else if (dualListbox.settings.preserveSelectionOnMove === 'moved' && !dualListbox.settings.moveOnSelect) { | |||
| saveSelections(dualListbox, 1); | |||
| } | |||
| dualListbox.elements.select1.find('option:selected').each(function(index, item) { | |||
| var $item = $(item); | |||
| if (!$item.data('filtered1')) { | |||
| changeSelectionState(dualListbox, $item.data('original-index'), true); | |||
| } | |||
| }); | |||
| refreshSelects(dualListbox); | |||
| triggerChangeEvent(dualListbox); | |||
| if(dualListbox.settings.sortByInputOrder){ | |||
| sortOptionsByInputOrder(dualListbox.elements.select2); | |||
| } else { | |||
| sortOptions(dualListbox.elements.select2, dualListbox); | |||
| } | |||
| } | |||
| function remove(dualListbox) { | |||
| if (dualListbox.settings.preserveSelectionOnMove === 'all' && !dualListbox.settings.moveOnSelect) { | |||
| saveSelections(dualListbox, 1); | |||
| saveSelections(dualListbox, 2); | |||
| } else if (dualListbox.settings.preserveSelectionOnMove === 'moved' && !dualListbox.settings.moveOnSelect) { | |||
| saveSelections(dualListbox, 2); | |||
| } | |||
| dualListbox.elements.select2.find('option:selected').each(function(index, item) { | |||
| var $item = $(item); | |||
| if (!$item.data('filtered2')) { | |||
| changeSelectionState(dualListbox, $item.data('original-index'), false); | |||
| } | |||
| }); | |||
| refreshSelects(dualListbox); | |||
| triggerChangeEvent(dualListbox); | |||
| sortOptions(dualListbox.elements.select1, dualListbox); | |||
| if(dualListbox.settings.sortByInputOrder){ | |||
| sortOptionsByInputOrder(dualListbox.elements.select2); | |||
| } | |||
| } | |||
| function moveAll(dualListbox) { | |||
| if (dualListbox.settings.preserveSelectionOnMove === 'all' && !dualListbox.settings.moveOnSelect) { | |||
| saveSelections(dualListbox, 1); | |||
| saveSelections(dualListbox, 2); | |||
| } else if (dualListbox.settings.preserveSelectionOnMove === 'moved' && !dualListbox.settings.moveOnSelect) { | |||
| saveSelections(dualListbox, 1); | |||
| } | |||
| dualListbox.element.find('option').each(function(index, item) { | |||
| var $item = $(item); | |||
| if (!$item.data('filtered1')) { | |||
| $item.prop('selected', true); | |||
| $item.attr('data-sortindex', dualListbox.sortIndex); | |||
| dualListbox.sortIndex++; | |||
| } | |||
| }); | |||
| refreshSelects(dualListbox); | |||
| triggerChangeEvent(dualListbox); | |||
| } | |||
| function removeAll(dualListbox) { | |||
| if (dualListbox.settings.preserveSelectionOnMove === 'all' && !dualListbox.settings.moveOnSelect) { | |||
| saveSelections(dualListbox, 1); | |||
| saveSelections(dualListbox, 2); | |||
| } else if (dualListbox.settings.preserveSelectionOnMove === 'moved' && !dualListbox.settings.moveOnSelect) { | |||
| saveSelections(dualListbox, 2); | |||
| } | |||
| dualListbox.element.find('option').each(function(index, item) { | |||
| var $item = $(item); | |||
| if (!$item.data('filtered2')) { | |||
| $item.prop('selected', false); | |||
| $item.removeAttr('data-sortindex'); | |||
| } | |||
| }); | |||
| refreshSelects(dualListbox); | |||
| triggerChangeEvent(dualListbox); | |||
| } | |||
| function bindEvents(dualListbox) { | |||
| dualListbox.elements.form.submit(function(e) { | |||
| if (dualListbox.elements.filterInput1.is(':focus')) { | |||
| e.preventDefault(); | |||
| dualListbox.elements.filterInput1.focusout(); | |||
| } else if (dualListbox.elements.filterInput2.is(':focus')) { | |||
| e.preventDefault(); | |||
| dualListbox.elements.filterInput2.focusout(); | |||
| } | |||
| }); | |||
| dualListbox.element.on('bootstrapDualListbox.refresh', function(e, mustClearSelections){ | |||
| dualListbox.refresh(mustClearSelections); | |||
| }); | |||
| dualListbox.elements.filterClear1.on('click', function() { | |||
| dualListbox.setNonSelectedFilter('', true); | |||
| }); | |||
| dualListbox.elements.filterClear2.on('click', function() { | |||
| dualListbox.setSelectedFilter('', true); | |||
| }); | |||
| if (dualListbox.settings.eventMoveOverride === false) { | |||
| dualListbox.elements.moveButton.on('click', function() { | |||
| move(dualListbox); | |||
| }); | |||
| } | |||
| if (dualListbox.settings.eventMoveAllOverride === false) { | |||
| dualListbox.elements.moveAllButton.on('click', function() { | |||
| moveAll(dualListbox); | |||
| }); | |||
| } | |||
| if (dualListbox.settings.eventRemoveOverride === false) { | |||
| dualListbox.elements.removeButton.on('click', function() { | |||
| remove(dualListbox); | |||
| }); | |||
| } | |||
| if (dualListbox.settings.eventRemoveAllOverride === false) { | |||
| dualListbox.elements.removeAllButton.on('click', function() { | |||
| removeAll(dualListbox); | |||
| }); | |||
| } | |||
| dualListbox.elements.filterInput1.on('change keyup', function() { | |||
| filter(dualListbox, 1); | |||
| }); | |||
| dualListbox.elements.filterInput2.on('change keyup', function() { | |||
| filter(dualListbox, 2); | |||
| }); | |||
| } | |||
| BootstrapDualListbox.prototype = { | |||
| init: function () { | |||
| // Add the custom HTML template | |||
| this.container = $('' + | |||
| '<div class="bootstrap-duallistbox-container row">' + | |||
| ' <div class="box1 col-md-6">' + | |||
| ' <label></label>' + | |||
| ' <span class="info-container">' + | |||
| ' <span class="info"></span>' + | |||
| ' <button type="button" class="btn btn-sm clear1" style="float:right!important;"></button>' + | |||
| ' </span>' + | |||
| ' <input class="form-control filter" type="text">' + | |||
| ' <div class="btn-group buttons">' + | |||
| ' <button type="button" class="btn moveall"></button>' + | |||
| ' <button type="button" class="btn move"></button>' + | |||
| ' </div>' + | |||
| ' <select multiple="multiple"></select>' + | |||
| ' </div>' + | |||
| ' <div class="box2 col-md-6">' + | |||
| ' <label></label>' + | |||
| ' <span class="info-container">' + | |||
| ' <span class="info"></span>' + | |||
| ' <button type="button" class="btn btn-sm clear2" style="float:right!important;"></button>' + | |||
| ' </span>' + | |||
| ' <input class="form-control filter" type="text">' + | |||
| ' <div class="btn-group buttons">' + | |||
| ' <button type="button" class="btn remove"></button>' + | |||
| ' <button type="button" class="btn removeall"></button>' + | |||
| ' </div>' + | |||
| ' <select multiple="multiple"></select>' + | |||
| ' </div>' + | |||
| '</div>') | |||
| .insertBefore(this.element); | |||
| // Cache the inner elements | |||
| this.elements = { | |||
| originalSelect: this.element, | |||
| box1: $('.box1', this.container), | |||
| box2: $('.box2', this.container), | |||
| filterInput1: $('.box1 .filter', this.container), | |||
| filterInput2: $('.box2 .filter', this.container), | |||
| filterClear1: $('.box1 .clear1', this.container), | |||
| filterClear2: $('.box2 .clear2', this.container), | |||
| label1: $('.box1 > label', this.container), | |||
| label2: $('.box2 > label', this.container), | |||
| info1: $('.box1 .info', this.container), | |||
| info2: $('.box2 .info', this.container), | |||
| select1: $('.box1 select', this.container), | |||
| select2: $('.box2 select', this.container), | |||
| moveButton: $('.box1 .move', this.container), | |||
| removeButton: $('.box2 .remove', this.container), | |||
| moveAllButton: $('.box1 .moveall', this.container), | |||
| removeAllButton: $('.box2 .removeall', this.container), | |||
| form: $($('.box1 .filter', this.container)[0].form) | |||
| }; | |||
| // Set select IDs | |||
| this.originalSelectName = this.element.attr('name') || ''; | |||
| var select1Id = 'bootstrap-duallistbox-nonselected-list_' + this.originalSelectName, | |||
| select2Id = 'bootstrap-duallistbox-selected-list_' + this.originalSelectName; | |||
| this.elements.select1.attr('id', select1Id); | |||
| this.elements.select2.attr('id', select2Id); | |||
| this.elements.label1.attr('for', select1Id); | |||
| this.elements.label2.attr('for', select2Id); | |||
| // Apply all settings | |||
| this.selectedElements = 0; | |||
| this.sortIndex = 0; | |||
| this.elementCount = 0; | |||
| this.setFilterTextClear(this.settings.filterTextClear); | |||
| this.setFilterPlaceHolder(this.settings.filterPlaceHolder); | |||
| this.setMoveSelectedLabel(this.settings.moveSelectedLabel); | |||
| this.setMoveAllLabel(this.settings.moveAllLabel); | |||
| this.setRemoveSelectedLabel(this.settings.removeSelectedLabel); | |||
| this.setRemoveAllLabel(this.settings.removeAllLabel); | |||
| this.setMoveOnSelect(this.settings.moveOnSelect); | |||
| this.setMoveOnDoubleClick(this.settings.moveOnDoubleClick); | |||
| this.setPreserveSelectionOnMove(this.settings.preserveSelectionOnMove); | |||
| this.setSelectedListLabel(this.settings.selectedListLabel); | |||
| this.setNonSelectedListLabel(this.settings.nonSelectedListLabel); | |||
| this.setHelperSelectNamePostfix(this.settings.helperSelectNamePostfix); | |||
| this.setSelectOrMinimalHeight(this.settings.selectorMinimalHeight); | |||
| updateSelectionStates(this); | |||
| this.setShowFilterInputs(this.settings.showFilterInputs); | |||
| this.setNonSelectedFilter(this.settings.nonSelectedFilter); | |||
| this.setSelectedFilter(this.settings.selectedFilter); | |||
| this.setInfoText(this.settings.infoText); | |||
| this.setInfoTextFiltered(this.settings.infoTextFiltered); | |||
| this.setInfoTextEmpty(this.settings.infoTextEmpty); | |||
| this.setFilterOnValues(this.settings.filterOnValues); | |||
| this.setSortByInputOrder(this.settings.sortByInputOrder); | |||
| this.setEventMoveOverride(this.settings.eventMoveOverride); | |||
| this.setEventMoveAllOverride(this.settings.eventMoveAllOverride); | |||
| this.setEventRemoveOverride(this.settings.eventRemoveOverride); | |||
| this.setEventRemoveAllOverride(this.settings.eventRemoveAllOverride); | |||
| this.setBtnClass(this.settings.btnClass); | |||
| this.setBtnMoveText(this.settings.btnMoveText); | |||
| this.setBtnRemoveText(this.settings.btnRemoveText); | |||
| this.setBtnMoveAllText(this.settings.btnMoveAllText); | |||
| this.setBtnRemoveAllText(this.settings.btnRemoveAllText); | |||
| // Hide the original select | |||
| this.element.hide(); | |||
| bindEvents(this); | |||
| refreshSelects(this); | |||
| return this.element; | |||
| }, | |||
| setFilterTextClear: function(value, refresh) { | |||
| this.settings.filterTextClear = value; | |||
| this.elements.filterClear1.html(value); | |||
| this.elements.filterClear2.html(value); | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setFilterPlaceHolder: function(value, refresh) { | |||
| this.settings.filterPlaceHolder = value; | |||
| this.elements.filterInput1.attr('placeholder', value); | |||
| this.elements.filterInput2.attr('placeholder', value); | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setMoveSelectedLabel: function(value, refresh) { | |||
| this.settings.moveSelectedLabel = value; | |||
| this.elements.moveButton.attr('title', value); | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setMoveAllLabel: function(value, refresh) { | |||
| this.settings.moveAllLabel = value; | |||
| this.elements.moveAllButton.attr('title', value); | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setRemoveSelectedLabel: function(value, refresh) { | |||
| this.settings.removeSelectedLabel = value; | |||
| this.elements.removeButton.attr('title', value); | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setRemoveAllLabel: function(value, refresh) { | |||
| this.settings.removeAllLabel = value; | |||
| this.elements.removeAllButton.attr('title', value); | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setMoveOnSelect: function(value, refresh) { | |||
| if (isBuggyAndroid) { | |||
| value = true; | |||
| } | |||
| this.settings.moveOnSelect = value; | |||
| if (this.settings.moveOnSelect) { | |||
| this.container.addClass('moveonselect'); | |||
| var self = this; | |||
| this.elements.select1.on('change', function() { | |||
| move(self); | |||
| }); | |||
| this.elements.select2.on('change', function() { | |||
| remove(self); | |||
| }); | |||
| this.elements.moveButton.detach(); | |||
| this.elements.removeButton.detach(); | |||
| } else { | |||
| this.container.removeClass('moveonselect'); | |||
| this.elements.select1.off('change'); | |||
| this.elements.select2.off('change'); | |||
| this.elements.moveButton.insertAfter(this.elements.moveAllButton); | |||
| this.elements.removeButton.insertBefore(this.elements.removeAllButton); | |||
| } | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setMoveOnDoubleClick: function(value, refresh) { | |||
| if (isBuggyAndroid) { | |||
| value = false; | |||
| } | |||
| this.settings.moveOnDoubleClick = value; | |||
| if (this.settings.moveOnDoubleClick) { | |||
| this.container.addClass('moveondoubleclick'); | |||
| var self = this; | |||
| this.elements.select1.on('dblclick', function() { | |||
| move(self); | |||
| }); | |||
| this.elements.select2.on('dblclick', function() { | |||
| remove(self); | |||
| }); | |||
| } else { | |||
| this.container.removeClass('moveondoubleclick'); | |||
| this.elements.select1.off('dblclick'); | |||
| this.elements.select2.off('dblclick'); | |||
| } | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setPreserveSelectionOnMove: function(value, refresh) { | |||
| // We are forcing to move on select and disabling preserveSelectionOnMove on Android | |||
| if (isBuggyAndroid) { | |||
| value = false; | |||
| } | |||
| this.settings.preserveSelectionOnMove = value; | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setSelectedListLabel: function(value, refresh) { | |||
| this.settings.selectedListLabel = value; | |||
| if (value) { | |||
| this.elements.label2.show().html(value); | |||
| } else { | |||
| this.elements.label2.hide().html(value); | |||
| } | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setNonSelectedListLabel: function(value, refresh) { | |||
| this.settings.nonSelectedListLabel = value; | |||
| if (value) { | |||
| this.elements.label1.show().html(value); | |||
| } else { | |||
| this.elements.label1.hide().html(value); | |||
| } | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setHelperSelectNamePostfix: function(value, refresh) { | |||
| this.settings.helperSelectNamePostfix = value; | |||
| if (value) { | |||
| this.elements.select1.attr('name', this.originalSelectName + value + '1'); | |||
| this.elements.select2.attr('name', this.originalSelectName + value + '2'); | |||
| } else { | |||
| this.elements.select1.removeAttr('name'); | |||
| this.elements.select2.removeAttr('name'); | |||
| } | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setSelectOrMinimalHeight: function(value, refresh) { | |||
| this.settings.selectorMinimalHeight = value; | |||
| var height = this.element.height(); | |||
| if (this.element.height() < value) { | |||
| height = value; | |||
| } | |||
| this.elements.select1.height(height); | |||
| this.elements.select2.height(height); | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setShowFilterInputs: function(value, refresh) { | |||
| if (!value) { | |||
| this.setNonSelectedFilter(''); | |||
| this.setSelectedFilter(''); | |||
| refreshSelects(this); | |||
| this.elements.filterInput1.hide(); | |||
| this.elements.filterInput2.hide(); | |||
| } else { | |||
| this.elements.filterInput1.show(); | |||
| this.elements.filterInput2.show(); | |||
| } | |||
| this.settings.showFilterInputs = value; | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setNonSelectedFilter: function(value, refresh) { | |||
| if (this.settings.showFilterInputs) { | |||
| this.settings.nonSelectedFilter = value; | |||
| this.elements.filterInput1.val(value); | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| } | |||
| }, | |||
| setSelectedFilter: function(value, refresh) { | |||
| if (this.settings.showFilterInputs) { | |||
| this.settings.selectedFilter = value; | |||
| this.elements.filterInput2.val(value); | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| } | |||
| }, | |||
| setInfoText: function(value, refresh) { | |||
| this.settings.infoText = value; | |||
| if (value) { | |||
| this.elements.info1.show(); | |||
| this.elements.info2.show(); | |||
| } else { | |||
| this.elements.info1.hide(); | |||
| this.elements.info2.hide(); | |||
| } | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setInfoTextFiltered: function(value, refresh) { | |||
| this.settings.infoTextFiltered = value; | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setInfoTextEmpty: function(value, refresh) { | |||
| this.settings.infoTextEmpty = value; | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setFilterOnValues: function(value, refresh) { | |||
| this.settings.filterOnValues = value; | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setSortByInputOrder: function(value, refresh){ | |||
| this.settings.sortByInputOrder = value; | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setEventMoveOverride: function(value, refresh) { | |||
| this.settings.eventMoveOverride = value; | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setEventMoveAllOverride: function(value, refresh) { | |||
| this.settings.eventMoveAllOverride = value; | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setEventRemoveOverride: function(value, refresh) { | |||
| this.settings.eventRemoveOverride = value; | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setEventRemoveAllOverride: function(value, refresh) { | |||
| this.settings.eventRemoveAllOverride = value; | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setBtnClass: function(value, refresh) { | |||
| this.settings.btnClass = value; | |||
| this.elements.moveButton.attr('class', 'btn move').addClass(value); | |||
| this.elements.removeButton.attr('class', 'btn remove').addClass(value); | |||
| this.elements.moveAllButton.attr('class', 'btn moveall').addClass(value); | |||
| this.elements.removeAllButton.attr('class', 'btn removeall').addClass(value); | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setBtnMoveText: function(value, refresh) { | |||
| this.settings.btnMoveText = value; | |||
| this.elements.moveButton.html(value); | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setBtnRemoveText: function(value, refresh) { | |||
| this.settings.btnMoveText = value; | |||
| this.elements.removeButton.html(value); | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setBtnMoveAllText: function(value, refresh) { | |||
| this.settings.btnMoveText = value; | |||
| this.elements.moveAllButton.html(value); | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| setBtnRemoveAllText: function(value, refresh) { | |||
| this.settings.btnMoveText = value; | |||
| this.elements.removeAllButton.html(value); | |||
| if (refresh) { | |||
| refreshSelects(this); | |||
| } | |||
| return this.element; | |||
| }, | |||
| getContainer: function() { | |||
| return this.container; | |||
| }, | |||
| refresh: function(mustClearSelections) { | |||
| updateSelectionStates(this); | |||
| if (!mustClearSelections) { | |||
| saveSelections(this, 1); | |||
| saveSelections(this, 2); | |||
| } else { | |||
| clearSelections(this); | |||
| } | |||
| refreshSelects(this); | |||
| }, | |||
| destroy: function() { | |||
| this.container.remove(); | |||
| this.element.show(); | |||
| $.data(this, 'plugin_' + pluginName, null); | |||
| return this.element; | |||
| } | |||
| }; | |||
| // A really lightweight plugin wrapper around the constructor, | |||
| // preventing against multiple instantiations | |||
| $.fn[ pluginName ] = function (options) { | |||
| var args = arguments; | |||
| // Is the first parameter an object (options), or was omitted, instantiate a new instance of the plugin. | |||
| if (options === undefined || typeof options === 'object') { | |||
| return this.each(function () { | |||
| // If this is not a select | |||
| if (!$(this).is('select')) { | |||
| $(this).find('select').each(function(index, item) { | |||
| // For each nested select, instantiate the Dual List Box | |||
| $(item).bootstrapDualListbox(options); | |||
| }); | |||
| } else if (!$.data(this, 'plugin_' + pluginName)) { | |||
| // Only allow the plugin to be instantiated once so we check that the element has no plugin instantiation yet | |||
| // if it has no instance, create a new one, pass options to our plugin constructor, | |||
| // and store the plugin instance in the elements jQuery data object. | |||
| $.data(this, 'plugin_' + pluginName, new BootstrapDualListbox(this, options)); | |||
| } | |||
| }); | |||
| // If the first parameter is a string and it doesn't start with an underscore or "contains" the `init`-function, | |||
| // treat this as a call to a public method. | |||
| } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') { | |||
| // Cache the method call to make it possible to return a value | |||
| var returns; | |||
| this.each(function () { | |||
| var instance = $.data(this, 'plugin_' + pluginName); | |||
| // Tests that there's already a plugin-instance and checks that the requested public method exists | |||
| if (instance instanceof BootstrapDualListbox && typeof instance[options] === 'function') { | |||
| // Call the method of our plugin instance, and pass it the supplied arguments. | |||
| returns = instance[options].apply(instance, Array.prototype.slice.call(args, 1)); | |||
| } | |||
| }); | |||
| // If the earlier cached method gives a value back return the value, | |||
| // otherwise return this to preserve chainability. | |||
| return returns !== undefined ? returns : this; | |||
| } | |||
| }; | |||
| })); | |||