add popup box
This commit is contained in:
chiu
parent
3ab5a1aeee
commit
487e666374
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,443 @@
|
|||
/* !
|
||||
* tingle.js
|
||||
* @author robin_parisi
|
||||
* @version 0.15.2
|
||||
* @url
|
||||
*/
|
||||
|
||||
/* global define,module */
|
||||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(factory)
|
||||
} else if (typeof exports === 'object') {
|
||||
module.exports = factory()
|
||||
} else {
|
||||
root.tingle = factory()
|
||||
}
|
||||
}(this, function () {
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == modal */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
var isBusy = false
|
||||
|
||||
function Modal (options) {
|
||||
var defaults = {
|
||||
onClose: null,
|
||||
onOpen: null,
|
||||
beforeOpen: null,
|
||||
beforeClose: null,
|
||||
stickyFooter: false,
|
||||
footer: false,
|
||||
cssClass: [],
|
||||
closeLabel: 'Close',
|
||||
closeMethods: ['overlay', 'button', 'escape']
|
||||
}
|
||||
|
||||
// extends config
|
||||
this.opts = extend({}, defaults, options)
|
||||
|
||||
// init modal
|
||||
this.init()
|
||||
}
|
||||
|
||||
Modal.prototype.init = function () {
|
||||
if (this.modal) {
|
||||
return
|
||||
}
|
||||
|
||||
_build.call(this)
|
||||
_bindEvents.call(this)
|
||||
|
||||
// insert modal in dom
|
||||
document.body.appendChild(this.modal, document.body.firstChild)
|
||||
|
||||
if (this.opts.footer) {
|
||||
this.addFooter()
|
||||
}
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
Modal.prototype._busy = function (state) {
|
||||
isBusy = state
|
||||
}
|
||||
|
||||
Modal.prototype._isBusy = function () {
|
||||
return isBusy
|
||||
}
|
||||
|
||||
Modal.prototype.destroy = function () {
|
||||
if (this.modal === null) {
|
||||
return
|
||||
}
|
||||
|
||||
// restore scrolling
|
||||
if (this.isOpen()) {
|
||||
this.close(true)
|
||||
}
|
||||
|
||||
// unbind all events
|
||||
_unbindEvents.call(this)
|
||||
|
||||
// remove modal from dom
|
||||
this.modal.parentNode.removeChild(this.modal)
|
||||
|
||||
this.modal = null
|
||||
}
|
||||
|
||||
Modal.prototype.isOpen = function () {
|
||||
return !!this.modal.classList.contains('tingle-modal--visible')
|
||||
}
|
||||
|
||||
Modal.prototype.open = function () {
|
||||
if (this._isBusy()) return
|
||||
this._busy(true)
|
||||
|
||||
var self = this
|
||||
|
||||
// before open callback
|
||||
if (typeof self.opts.beforeOpen === 'function') {
|
||||
self.opts.beforeOpen()
|
||||
}
|
||||
|
||||
if (this.modal.style.removeProperty) {
|
||||
this.modal.style.removeProperty('display')
|
||||
} else {
|
||||
this.modal.style.removeAttribute('display')
|
||||
}
|
||||
|
||||
// prevent double scroll
|
||||
this._scrollPosition = window.pageYOffset
|
||||
document.body.classList.add('tingle-enabled')
|
||||
document.body.style.top = -this._scrollPosition + 'px'
|
||||
|
||||
// sticky footer
|
||||
this.setStickyFooter(this.opts.stickyFooter)
|
||||
|
||||
// show modal
|
||||
this.modal.classList.add('tingle-modal--visible')
|
||||
|
||||
// onOpen callback
|
||||
if (typeof self.opts.onOpen === 'function') {
|
||||
self.opts.onOpen.call(self)
|
||||
}
|
||||
|
||||
self._busy(false)
|
||||
|
||||
// check if modal is bigger than screen height
|
||||
this.checkOverflow()
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
Modal.prototype.close = function (force) {
|
||||
if (this._isBusy()) return
|
||||
this._busy(true)
|
||||
force = force || false
|
||||
|
||||
// before close
|
||||
if (typeof this.opts.beforeClose === 'function') {
|
||||
var close = this.opts.beforeClose.call(this)
|
||||
if (!close) {
|
||||
this._busy(false)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
document.body.classList.remove('tingle-enabled')
|
||||
document.body.style.top = null
|
||||
window.scrollTo({
|
||||
top: this._scrollPosition,
|
||||
behavior: 'instant'
|
||||
})
|
||||
|
||||
this.modal.classList.remove('tingle-modal--visible')
|
||||
|
||||
// using similar setup as onOpen
|
||||
var self = this
|
||||
|
||||
self.modal.style.display = 'none'
|
||||
|
||||
// onClose callback
|
||||
if (typeof self.opts.onClose === 'function') {
|
||||
self.opts.onClose.call(this)
|
||||
}
|
||||
|
||||
// release modal
|
||||
self._busy(false)
|
||||
}
|
||||
|
||||
Modal.prototype.setContent = function (content) {
|
||||
// check type of content : String or Node
|
||||
if (typeof content === 'string') {
|
||||
this.modalBoxContent.innerHTML = content
|
||||
} else {
|
||||
this.modalBoxContent.innerHTML = ''
|
||||
this.modalBoxContent.appendChild(content)
|
||||
}
|
||||
|
||||
if (this.isOpen()) {
|
||||
// check if modal is bigger than screen height
|
||||
this.checkOverflow()
|
||||
}
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
Modal.prototype.getContent = function () {
|
||||
return this.modalBoxContent
|
||||
}
|
||||
|
||||
Modal.prototype.addFooter = function () {
|
||||
// add footer to modal
|
||||
_buildFooter.call(this)
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
Modal.prototype.setFooterContent = function (content) {
|
||||
// set footer content
|
||||
this.modalBoxFooter.innerHTML = content
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
Modal.prototype.getFooterContent = function () {
|
||||
return this.modalBoxFooter
|
||||
}
|
||||
|
||||
Modal.prototype.setStickyFooter = function (isSticky) {
|
||||
// if the modal is smaller than the viewport height, we don't need sticky
|
||||
if (!this.isOverflow()) {
|
||||
isSticky = false
|
||||
}
|
||||
|
||||
if (isSticky) {
|
||||
if (this.modalBox.contains(this.modalBoxFooter)) {
|
||||
this.modalBox.removeChild(this.modalBoxFooter)
|
||||
this.modal.appendChild(this.modalBoxFooter)
|
||||
this.modalBoxFooter.classList.add('tingle-modal-box__footer--sticky')
|
||||
_recalculateFooterPosition.call(this)
|
||||
this.modalBoxContent.style['padding-bottom'] = this.modalBoxFooter.clientHeight + 20 + 'px'
|
||||
}
|
||||
} else if (this.modalBoxFooter) {
|
||||
if (!this.modalBox.contains(this.modalBoxFooter)) {
|
||||
this.modal.removeChild(this.modalBoxFooter)
|
||||
this.modalBox.appendChild(this.modalBoxFooter)
|
||||
this.modalBoxFooter.style.width = 'auto'
|
||||
this.modalBoxFooter.style.left = ''
|
||||
this.modalBoxContent.style['padding-bottom'] = ''
|
||||
this.modalBoxFooter.classList.remove('tingle-modal-box__footer--sticky')
|
||||
}
|
||||
}
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
Modal.prototype.addFooterBtn = function (label, cssClass, callback) {
|
||||
var btn = document.createElement('button')
|
||||
|
||||
// set label
|
||||
btn.innerHTML = label
|
||||
|
||||
// bind callback
|
||||
btn.addEventListener('click', callback)
|
||||
|
||||
if (typeof cssClass === 'string' && cssClass.length) {
|
||||
// add classes to btn
|
||||
cssClass.split(' ').forEach(function (item) {
|
||||
btn.classList.add(item)
|
||||
})
|
||||
}
|
||||
|
||||
this.modalBoxFooter.appendChild(btn)
|
||||
|
||||
return btn
|
||||
}
|
||||
|
||||
Modal.prototype.resize = function () {
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn('Resize is deprecated and will be removed in version 1.0')
|
||||
}
|
||||
|
||||
Modal.prototype.isOverflow = function () {
|
||||
var viewportHeight = window.innerHeight
|
||||
var modalHeight = this.modalBox.clientHeight
|
||||
|
||||
return modalHeight >= viewportHeight
|
||||
}
|
||||
|
||||
Modal.prototype.checkOverflow = function () {
|
||||
// only if the modal is currently shown
|
||||
if (this.modal.classList.contains('tingle-modal--visible')) {
|
||||
if (this.isOverflow()) {
|
||||
this.modal.classList.add('tingle-modal--overflow')
|
||||
} else {
|
||||
this.modal.classList.remove('tingle-modal--overflow')
|
||||
}
|
||||
|
||||
// tODO: remove offset
|
||||
// _offset.call(this);
|
||||
if (!this.isOverflow() && this.opts.stickyFooter) {
|
||||
this.setStickyFooter(false)
|
||||
} else if (this.isOverflow() && this.opts.stickyFooter) {
|
||||
_recalculateFooterPosition.call(this)
|
||||
this.setStickyFooter(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == private methods */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
function closeIcon () {
|
||||
return '<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><path d="M.3 9.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3L5 6.4l3.3 3.3c.2.2.5.3.7.3.2 0 .5-.1.7-.3.4-.4.4-1 0-1.4L6.4 5l3.3-3.3c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0L5 3.6 1.7.3C1.3-.1.7-.1.3.3c-.4.4-.4 1 0 1.4L3.6 5 .3 8.3c-.4.4-.4 1 0 1.4z" fill="#000" fill-rule="nonzero"/></svg>'
|
||||
}
|
||||
|
||||
function _recalculateFooterPosition () {
|
||||
if (!this.modalBoxFooter) {
|
||||
return
|
||||
}
|
||||
this.modalBoxFooter.style.width = this.modalBox.clientWidth + 'px'
|
||||
this.modalBoxFooter.style.left = this.modalBox.offsetLeft + 'px'
|
||||
}
|
||||
|
||||
function _build () {
|
||||
// wrapper
|
||||
this.modal = document.createElement('div')
|
||||
this.modal.classList.add('tingle-modal')
|
||||
|
||||
// remove cusor if no overlay close method
|
||||
if (this.opts.closeMethods.length === 0 || this.opts.closeMethods.indexOf('overlay') === -1) {
|
||||
this.modal.classList.add('tingle-modal--noOverlayClose')
|
||||
}
|
||||
|
||||
this.modal.style.display = 'none'
|
||||
|
||||
// custom class
|
||||
this.opts.cssClass.forEach(function (item) {
|
||||
if (typeof item === 'string') {
|
||||
this.modal.classList.add(item)
|
||||
}
|
||||
}, this)
|
||||
|
||||
// close btn
|
||||
if (this.opts.closeMethods.indexOf('button') !== -1) {
|
||||
this.modalCloseBtn = document.createElement('button')
|
||||
this.modalCloseBtn.type = 'button'
|
||||
this.modalCloseBtn.classList.add('tingle-modal__close')
|
||||
|
||||
this.modalCloseBtnIcon = document.createElement('span')
|
||||
this.modalCloseBtnIcon.classList.add('tingle-modal__closeIcon')
|
||||
this.modalCloseBtnIcon.innerHTML = closeIcon()
|
||||
|
||||
this.modalCloseBtnLabel = document.createElement('span')
|
||||
this.modalCloseBtnLabel.classList.add('tingle-modal__closeLabel')
|
||||
this.modalCloseBtnLabel.innerHTML = this.opts.closeLabel
|
||||
|
||||
this.modalCloseBtn.appendChild(this.modalCloseBtnIcon)
|
||||
this.modalCloseBtn.appendChild(this.modalCloseBtnLabel)
|
||||
}
|
||||
|
||||
// modal
|
||||
this.modalBox = document.createElement('div')
|
||||
this.modalBox.classList.add('tingle-modal-box')
|
||||
|
||||
// modal box content
|
||||
this.modalBoxContent = document.createElement('div')
|
||||
this.modalBoxContent.classList.add('tingle-modal-box__content')
|
||||
|
||||
this.modalBox.appendChild(this.modalBoxContent)
|
||||
|
||||
if (this.opts.closeMethods.indexOf('button') !== -1) {
|
||||
this.modal.appendChild(this.modalCloseBtn)
|
||||
}
|
||||
|
||||
this.modal.appendChild(this.modalBox)
|
||||
}
|
||||
|
||||
function _buildFooter () {
|
||||
this.modalBoxFooter = document.createElement('div')
|
||||
this.modalBoxFooter.classList.add('tingle-modal-box__footer')
|
||||
this.modalBox.appendChild(this.modalBoxFooter)
|
||||
}
|
||||
|
||||
function _bindEvents () {
|
||||
this._events = {
|
||||
clickCloseBtn: this.close.bind(this),
|
||||
clickOverlay: _handleClickOutside.bind(this),
|
||||
resize: this.checkOverflow.bind(this),
|
||||
keyboardNav: _handleKeyboardNav.bind(this)
|
||||
}
|
||||
|
||||
if (this.opts.closeMethods.indexOf('button') !== -1) {
|
||||
this.modalCloseBtn.addEventListener('click', this._events.clickCloseBtn)
|
||||
}
|
||||
|
||||
this.modal.addEventListener('mousedown', this._events.clickOverlay)
|
||||
window.addEventListener('resize', this._events.resize)
|
||||
document.addEventListener('keydown', this._events.keyboardNav)
|
||||
}
|
||||
|
||||
function _handleKeyboardNav (event) {
|
||||
// escape key
|
||||
if (this.opts.closeMethods.indexOf('escape') !== -1 && event.which === 27 && this.isOpen()) {
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
|
||||
function _handleClickOutside (event) {
|
||||
// on macOS, click on scrollbar (hidden mode) will trigger close event so we need to bypass this behavior by detecting scrollbar mode
|
||||
var scrollbarWidth = this.modal.offsetWidth - this.modal.clientWidth
|
||||
var clickedOnScrollbar = event.clientX >= this.modal.offsetWidth - 15 // 15px is macOS scrollbar default width
|
||||
var isScrollable = this.modal.scrollHeight !== this.modal.offsetHeight
|
||||
if (navigator.platform === 'MacIntel' && scrollbarWidth === 0 && clickedOnScrollbar && isScrollable) {
|
||||
return
|
||||
}
|
||||
|
||||
// if click is outside the modal
|
||||
if (this.opts.closeMethods.indexOf('overlay') !== -1 && !_findAncestor(event.target, 'tingle-modal') &&
|
||||
event.clientX < this.modal.clientWidth) {
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
|
||||
function _findAncestor (el, cls) {
|
||||
while ((el = el.parentElement) && !el.classList.contains(cls));
|
||||
return el
|
||||
}
|
||||
|
||||
function _unbindEvents () {
|
||||
if (this.opts.closeMethods.indexOf('button') !== -1) {
|
||||
this.modalCloseBtn.removeEventListener('click', this._events.clickCloseBtn)
|
||||
}
|
||||
this.modal.removeEventListener('mousedown', this._events.clickOverlay)
|
||||
window.removeEventListener('resize', this._events.resize)
|
||||
document.removeEventListener('keydown', this._events.keyboardNav)
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == helpers */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
function extend () {
|
||||
for (var i = 1; i < arguments.length; i++) {
|
||||
for (var key in arguments[i]) {
|
||||
if (arguments[i].hasOwnProperty(key)) {
|
||||
arguments[0][key] = arguments[i][key]
|
||||
}
|
||||
}
|
||||
}
|
||||
return arguments[0]
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------- */
|
||||
/* == return */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
return {
|
||||
modal: Modal
|
||||
}
|
||||
}))
|
||||
|
|
@ -6,6 +6,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
outline: 0;
|
||||
}
|
||||
.s-space.show-space .selection-box-label{
|
||||
display: none;
|
||||
|
|
@ -14,6 +15,13 @@
|
|||
font-size: 8vw;
|
||||
position: relative;
|
||||
}
|
||||
.popup{
|
||||
color: inherit !important;
|
||||
margin-left: 2em;
|
||||
@media (min-width: $screen-sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.anchor{
|
||||
position: absolute;
|
||||
left: 0.2em;
|
||||
|
|
@ -32,13 +40,14 @@
|
|||
left: 0%;
|
||||
background: #2196F3;
|
||||
color: white;
|
||||
width: 650%;
|
||||
width: 8em;
|
||||
width: max-content;
|
||||
min-width: 4em;
|
||||
padding: 0.2em;
|
||||
font-size: 0.6em;
|
||||
@media (min-width: $screen-sm) {
|
||||
width: 450%;
|
||||
font-size: 0.3em;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
a.s-space__pin-link{
|
||||
position: relative;
|
||||
}
|
||||
#full-layout-canvas {
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,782 @@
|
|||
/*!
|
||||
Modaal - accessible modals - v0.4.4
|
||||
by Humaan, for all humans.
|
||||
http://humaan.com
|
||||
*/
|
||||
|
||||
.modaal-noscroll {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modaal-accessible-hide {
|
||||
position: absolute !important;
|
||||
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modaal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modaal-wrapper {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9999;
|
||||
overflow: auto;
|
||||
opacity: 1;
|
||||
box-sizing: border-box;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.modaal-wrapper * {
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.modaal-wrapper .modaal-close {
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.modaal-wrapper.modaal-start_none {
|
||||
display: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.modaal-wrapper.modaal-start_fade {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modaal-wrapper *[tabindex="0"] {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.modaal-wrapper.modaal-fullscreen {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modaal-outer-wrapper {
|
||||
display: table;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.modaal-fullscreen .modaal-outer-wrapper {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.modaal-inner-wrapper {
|
||||
display: table-cell;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
padding: 80px 25px;
|
||||
}
|
||||
|
||||
.modaal-fullscreen .modaal-inner-wrapper {
|
||||
padding: 0;
|
||||
display: block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.modaal-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
color: #000;
|
||||
max-width: 1000px;
|
||||
border-radius: 0px;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.modaal-container.is_loading {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modaal-fullscreen .modaal-container {
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.modaal-close {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border-radius: 100%;
|
||||
-webkit-transition: all 0.2s ease-in-out;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.modaal-close:focus,
|
||||
.modaal-close:hover {
|
||||
outline: none;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.modaal-close:focus:before,
|
||||
.modaal-close:focus:after,
|
||||
.modaal-close:hover:before,
|
||||
.modaal-close:hover:after {
|
||||
background: #b93d0c;
|
||||
}
|
||||
|
||||
.modaal-close span {
|
||||
position: absolute !important;
|
||||
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modaal-close:before,
|
||||
.modaal-close:after {
|
||||
display: block;
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 23px;
|
||||
width: 4px;
|
||||
height: 22px;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
-webkit-transition: background 0.2s ease-in-out;
|
||||
transition: background 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.modaal-close:before {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.modaal-close:after {
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.modaal-fullscreen .modaal-close {
|
||||
background: #afb7bc;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.modaal-content-container {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.modaal-confirm-wrap {
|
||||
padding: 30px 0 0;
|
||||
text-align: center;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.modaal-confirm-btn {
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.modaal-confirm-btn.modaal-ok {
|
||||
padding: 10px 15px;
|
||||
color: #fff;
|
||||
background: #555;
|
||||
border-radius: 3px;
|
||||
-webkit-transition: background 0.2s ease-in-out;
|
||||
transition: background 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.modaal-confirm-btn.modaal-ok:hover {
|
||||
background: #2f2f2f;
|
||||
}
|
||||
|
||||
.modaal-confirm-btn.modaal-cancel {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.modaal-confirm-btn.modaal-cancel:hover {
|
||||
text-decoration: none;
|
||||
color: #2f2f2f;
|
||||
}
|
||||
|
||||
.modaal-instagram .modaal-container {
|
||||
width: auto;
|
||||
background: transparent;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.modaal-instagram .modaal-content-container {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.modaal-instagram .modaal-content-container > blockquote {
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.modaal-instagram iframe {
|
||||
opacity: 0;
|
||||
margin: -6px !important;
|
||||
border-radius: 0 !important;
|
||||
width: 1000px !important;
|
||||
max-width: 800px !important;
|
||||
box-shadow: none !important;
|
||||
-webkit-animation: instaReveal 1s linear forwards;
|
||||
animation: instaReveal 1s linear forwards;
|
||||
}
|
||||
|
||||
.modaal-image .modaal-inner-wrapper {
|
||||
padding-left: 140px;
|
||||
padding-right: 140px;
|
||||
}
|
||||
|
||||
.modaal-image .modaal-container {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.modaal-gallery-wrap {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.modaal-gallery-item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.modaal-gallery-item img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.modaal-gallery-item.is_active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.modaal-gallery-label {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
margin: 20px 0 0;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.modaal-gallery-label:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.modaal-gallery-control {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
-webkit-transition: all 0.2s ease-in-out;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.modaal-gallery-control.is_hidden {
|
||||
opacity: 0;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.modaal-gallery-control:focus,
|
||||
.modaal-gallery-control:hover {
|
||||
outline: none;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.modaal-gallery-control:focus:before,
|
||||
.modaal-gallery-control:focus:after,
|
||||
.modaal-gallery-control:hover:before,
|
||||
.modaal-gallery-control:hover:after {
|
||||
background: #afb7bc;
|
||||
}
|
||||
|
||||
.modaal-gallery-control span {
|
||||
position: absolute !important;
|
||||
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modaal-gallery-control:before,
|
||||
.modaal-gallery-control:after {
|
||||
display: block;
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 25px;
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
-webkit-transition: background 0.2s ease-in-out;
|
||||
transition: background 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.modaal-gallery-control:before {
|
||||
margin: -5px 0 0;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.modaal-gallery-control:after {
|
||||
margin: 5px 0 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.modaal-gallery-next-inner {
|
||||
left: 100%;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.modaal-gallery-next-outer {
|
||||
right: 45px;
|
||||
}
|
||||
|
||||
.modaal-gallery-prev:before,
|
||||
.modaal-gallery-prev:after {
|
||||
left: 22px;
|
||||
}
|
||||
|
||||
.modaal-gallery-prev:before {
|
||||
margin: 5px 0 0;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.modaal-gallery-prev:after {
|
||||
margin: -5px 0 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.modaal-gallery-prev-inner {
|
||||
right: 100%;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.modaal-gallery-prev-outer {
|
||||
left: 45px;
|
||||
}
|
||||
|
||||
.modaal-video-wrap {
|
||||
margin: auto 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modaal-video-container {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
background: #000;
|
||||
max-width: 1300px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.modaal-video-container iframe,
|
||||
.modaal-video-container object,
|
||||
.modaal-video-container embed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.modaal-iframe .modaal-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.modaal-iframe-elem {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.modaal-loading-spinner {
|
||||
background: none;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -100px 0 0 -100px;
|
||||
-webkit-transform: scale(0.25);
|
||||
-ms-transform: scale(0.25);
|
||||
transform: scale(0.25);
|
||||
}
|
||||
|
||||
.modaal-loading-spinner > div {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-left: 4px;
|
||||
margin-top: 4px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.modaal-loading-spinner > div > div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 15px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.modaal-loading-spinner > div:nth-of-type(1) > div {
|
||||
-webkit-animation: modaal-loading-spinner 1s linear infinite;
|
||||
animation: modaal-loading-spinner 1s linear infinite;
|
||||
-webkit-animation-delay: 0s;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.modaal-loading-spinner > div:nth-of-type(2) > div,
|
||||
.modaal-loading-spinner > div:nth-of-type(3) > div {
|
||||
-ms-animation: modaal-loading-spinner 1s linear infinite;
|
||||
-moz-animation: modaal-loading-spinner 1s linear infinite;
|
||||
-webkit-animation: modaal-loading-spinner 1s linear infinite;
|
||||
-o-animation: modaal-loading-spinner 1s linear infinite;
|
||||
}
|
||||
|
||||
.modaal-loading-spinner > div:nth-of-type(1) {
|
||||
-ms-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
|
||||
-webkit-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
|
||||
transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
|
||||
}
|
||||
|
||||
.modaal-loading-spinner > div:nth-of-type(2) > div {
|
||||
-webkit-animation: modaal-loading-spinner 1s linear infinite;
|
||||
animation: modaal-loading-spinner 1s linear infinite;
|
||||
-webkit-animation-delay: .12s;
|
||||
animation-delay: .12s;
|
||||
}
|
||||
|
||||
.modaal-loading-spinner > div:nth-of-type(2) {
|
||||
-ms-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
|
||||
-webkit-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
|
||||
transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
|
||||
}
|
||||
|
||||
.modaal-loading-spinner > div:nth-of-type(3) > div {
|
||||
-webkit-animation: modaal-loading-spinner 1s linear infinite;
|
||||
animation: modaal-loading-spinner 1s linear infinite;
|
||||
-webkit-animation-delay: .25s;
|
||||
animation-delay: .25s;
|
||||
}
|
||||
|
||||
.modaal-loading-spinner > div:nth-of-type(4) > div,
|
||||
.modaal-loading-spinner > div:nth-of-type(5) > div {
|
||||
-ms-animation: modaal-loading-spinner 1s linear infinite;
|
||||
-moz-animation: modaal-loading-spinner 1s linear infinite;
|
||||
-webkit-animation: modaal-loading-spinner 1s linear infinite;
|
||||
-o-animation: modaal-loading-spinner 1s linear infinite;
|
||||
}
|
||||
|
||||
.modaal-loading-spinner > div:nth-of-type(3) {
|
||||
-ms-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
|
||||
-webkit-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
|
||||
transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
|
||||
}
|
||||
|
||||
.modaal-loading-spinner > div:nth-of-type(4) > div {
|
||||
-webkit-animation: modaal-loading-spinner 1s linear infinite;
|
||||
animation: modaal-loading-spinner 1s linear infinite;
|
||||
-webkit-animation-delay: .37s;
|
||||
animation-delay: .37s;
|
||||
}
|
||||
|
||||
.modaal-loading-spinner > div:nth-of-type(4) {
|
||||
-ms-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
|
||||
-webkit-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
|
||||
transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
|
||||
}
|
||||
|
||||
.modaal-loading-spinner > div:nth-of-type(5) > div {
|
||||
-webkit-animation: modaal-loading-spinner 1s linear infinite;
|
||||
animation: modaal-loading-spinner 1s linear infinite;
|
||||
-webkit-animation-delay: .5s;
|
||||
animation-delay: .5s;
|
||||
}
|
||||
|
||||
.modaal-loading-spinner > div:nth-of-type(6) > div,
|
||||
.modaal-loading-spinner > div:nth-of-type(7) > div {
|
||||
-ms-animation: modaal-loading-spinner 1s linear infinite;
|
||||
-moz-animation: modaal-loading-spinner 1s linear infinite;
|
||||
-webkit-animation: modaal-loading-spinner 1s linear infinite;
|
||||
-o-animation: modaal-loading-spinner 1s linear infinite;
|
||||
}
|
||||
|
||||
.modaal-loading-spinner > div:nth-of-type(5) {
|
||||
-ms-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
|
||||
-webkit-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
|
||||
transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
|
||||
}
|
||||
|
||||
.modaal-loading-spinner > div:nth-of-type(6) > div {
|
||||
-webkit-animation: modaal-loading-spinner 1s linear infinite;
|
||||
animation: modaal-loading-spinner 1s linear infinite;
|
||||
-webkit-animation-delay: .62s;
|
||||
animation-delay: .62s;
|
||||
}
|
||||
|
||||
.modaal-loading-spinner > div:nth-of-type(6) {
|
||||
-ms-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
|
||||
-webkit-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
|
||||
transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
|
||||
}
|
||||
|
||||
.modaal-loading-spinner > div:nth-of-type(7) > div {
|
||||
-webkit-animation: modaal-loading-spinner 1s linear infinite;
|
||||
animation: modaal-loading-spinner 1s linear infinite;
|
||||
-webkit-animation-delay: .75s;
|
||||
animation-delay: .75s;
|
||||
}
|
||||
|
||||
.modaal-loading-spinner > div:nth-of-type(7) {
|
||||
-ms-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
|
||||
-webkit-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
|
||||
transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
|
||||
}
|
||||
|
||||
.modaal-loading-spinner > div:nth-of-type(8) > div {
|
||||
-webkit-animation: modaal-loading-spinner 1s linear infinite;
|
||||
animation: modaal-loading-spinner 1s linear infinite;
|
||||
-webkit-animation-delay: .87s;
|
||||
animation-delay: .87s;
|
||||
}
|
||||
|
||||
.modaal-loading-spinner > div:nth-of-type(8) {
|
||||
-ms-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
|
||||
-webkit-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
|
||||
transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1400px) {
|
||||
|
||||
.modaal-video-container {
|
||||
padding-bottom: 0;
|
||||
height: 731px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1140px) {
|
||||
|
||||
.modaal-image .modaal-inner-wrapper {
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.modaal-gallery-control {
|
||||
top: auto;
|
||||
bottom: 20px;
|
||||
-webkit-transform: none;
|
||||
-ms-transform: none;
|
||||
transform: none;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.modaal-gallery-control:before,
|
||||
.modaal-gallery-control:after {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.modaal-gallery-next {
|
||||
left: auto;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.modaal-gallery-prev {
|
||||
left: 20px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
|
||||
.modaal-instagram iframe {
|
||||
width: 500px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
|
||||
.modaal-instagram iframe {
|
||||
width: 280px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-height: 1100px) {
|
||||
|
||||
.modaal-instagram iframe {
|
||||
width: 700px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-height: 1000px) {
|
||||
|
||||
.modaal-inner-wrapper {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.modaal-instagram iframe {
|
||||
width: 600px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-height: 900px) {
|
||||
|
||||
.modaal-instagram iframe {
|
||||
width: 500px !important;
|
||||
}
|
||||
|
||||
.modaal-video-container {
|
||||
max-width: 900px;
|
||||
max-height: 510px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 820px) {
|
||||
|
||||
.modaal-gallery-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes instaReveal {
|
||||
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@-webkit-keyframes instaReveal {
|
||||
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@-webkit-keyframes modaal-loading-spinner {
|
||||
|
||||
0% {
|
||||
opacity: 1;
|
||||
-ms-transform: scale(1.5);
|
||||
-webkit-transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: .1;
|
||||
-ms-transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes modaal-loading-spinner {
|
||||
|
||||
0% {
|
||||
opacity: 1;
|
||||
-ms-transform: scale(1.5);
|
||||
-webkit-transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: .1;
|
||||
-ms-transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,278 @@
|
|||
/* ----------------------------------------------------------- */
|
||||
/* == tingle v0.15.2 */
|
||||
/* ----------------------------------------------------------- */
|
||||
|
||||
.tingle-modal * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tingle-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
visibility: hidden;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background: rgba(0, 0, 0, .85);
|
||||
opacity: 0;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* confirm and alerts
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.tingle-modal--confirm .tingle-modal-box {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* modal
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.tingle-modal--noOverlayClose {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.tingle-modal--noClose .tingle-modal__close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tingle-modal__close {
|
||||
position: fixed;
|
||||
top: 2.5rem;
|
||||
right: 2.5rem;
|
||||
z-index: 1000;
|
||||
padding: 0;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tingle-modal__close svg * {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.tingle-modal__closeLabel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tingle-modal__close:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tingle-modal-box {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
width: 60%;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
opacity: 1;
|
||||
cursor: auto;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.tingle-modal-box__content {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.tingle-modal-box__footer {
|
||||
padding: 1.5rem 2rem;
|
||||
width: auto;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: #f5f5f5;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.tingle-modal-box__footer::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.tingle-modal-box__footer--sticky {
|
||||
position: fixed;
|
||||
bottom: -200px; /* TODO : find a better way */
|
||||
z-index: 10001;
|
||||
opacity: 1;
|
||||
transition: bottom .3s ease-in-out .3s;
|
||||
}
|
||||
|
||||
/* state
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.tingle-enabled {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tingle-modal--visible .tingle-modal-box__footer {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.tingle-enabled .tingle-content-wrapper {
|
||||
filter: blur(8px);
|
||||
}
|
||||
|
||||
.tingle-modal--visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tingle-modal--visible .tingle-modal-box {
|
||||
animation: scale .2s cubic-bezier(.68, -.55, .265, 1.55) forwards;
|
||||
}
|
||||
|
||||
.tingle-modal--overflow {
|
||||
overflow-y: scroll;
|
||||
padding-top: 8vh;
|
||||
}
|
||||
|
||||
/* btn
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
.tingle-btn {
|
||||
display: inline-block;
|
||||
margin: 0 .5rem;
|
||||
padding: 1rem 2rem;
|
||||
border: none;
|
||||
background-color: grey;
|
||||
box-shadow: none;
|
||||
color: #fff;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
line-height: normal;
|
||||
cursor: pointer;
|
||||
transition: background-color .4s ease;
|
||||
}
|
||||
|
||||
.tingle-btn--primary {
|
||||
background-color: #3498db;
|
||||
}
|
||||
|
||||
.tingle-btn--danger {
|
||||
background-color: #e74c3c;
|
||||
}
|
||||
|
||||
.tingle-btn--default {
|
||||
background-color: #34495e;
|
||||
}
|
||||
|
||||
.tingle-btn--pull-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.tingle-btn--pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* responsive
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
@media (max-width : 540px) {
|
||||
.tingle-modal {
|
||||
top: 0px;
|
||||
display: block;
|
||||
padding-top: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tingle-modal-box {
|
||||
width: auto;
|
||||
border-radius: 0;
|
||||
margin-top: 45px;
|
||||
}
|
||||
|
||||
.tingle-modal-box__content {
|
||||
overflow-y: scroll;
|
||||
max-height: 80vh;
|
||||
}
|
||||
|
||||
.tingle-modal--noClose {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.tingle-modal--noOverlayClose {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.tingle-modal-box__footer .tingle-btn {
|
||||
display: block;
|
||||
float: none;
|
||||
margin-bottom: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tingle-modal__close {
|
||||
right: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
border: none;
|
||||
background-color: #2c3e50;
|
||||
box-shadow: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tingle-modal__closeLabel {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: 1.6rem;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
.tingle-modal__closeIcon {
|
||||
display: inline-block;
|
||||
margin-right: .8rem;
|
||||
width: 1.6rem;
|
||||
vertical-align: middle;
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (backdrop-filter: blur(12px)) {
|
||||
.tingle-modal:before {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
backdrop-filter: blur(18px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tingle-enabled .tingle-content-wrapper {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* animations
|
||||
-------------------------------------------------------------- */
|
||||
|
||||
@keyframes scale {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(.9);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
|
@ -363,6 +363,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
outline: 0;
|
||||
.selection-box-label.absolute-center{
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -388,15 +389,15 @@
|
|||
left: 0%;
|
||||
background: #2196F3;
|
||||
color: white;
|
||||
width: 650%;
|
||||
width: 8em;
|
||||
width: max-content;
|
||||
min-width: 4em;
|
||||
padding: 0.2em;
|
||||
font-size: 0.6em;
|
||||
@media (min-width: $screen-sm) {
|
||||
width: 450%;
|
||||
font-size: 0.3em;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
a.s-space__pin-link{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Page specific styles
|
||||
.building-showcase {
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
var text = $(this).find('.selection-box-label')
|
||||
text.append('<div class="anchor"></div>')
|
||||
temp.prepend('<i class="fa fa-map-marker"></i>')
|
||||
temp.find('.fa-map-marker').append(text)
|
||||
temp.prepend(text)
|
||||
temp.find('.fa-map-marker').css('color',map_color)
|
||||
$(this).on('mouseover',function(){
|
||||
$(this).css('background-color',block_color)
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
<script type="text/javascript" src="/assets/space/tingle.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/assets/space/tingle.css">
|
||||
<article class="s-space show-space">
|
||||
<div class="loading-cover loading-hide">
|
||||
<div class="loading"></div>
|
||||
|
|
@ -11,15 +13,16 @@
|
|||
<a href="{{floor-back-link}}" class="s-space__back-btn btn btn-primary"><i class="fa fa-arrow-left"></i></a>
|
||||
</div>
|
||||
</article>
|
||||
<div id="space-for-ad-banner"></div>
|
||||
<div id="space-for-ad-banner-unit"></div>
|
||||
{{style_label}}
|
||||
<script>
|
||||
(function() {
|
||||
var touch_flag = 'ontouchstart' in window || navigator.msMaxTouchPoints;
|
||||
var layout = $(".s-space__apartment-layout").eq(-1)
|
||||
var canvas = layout.find("#full-layout-canvas");
|
||||
var layoutImage = layout.find("#layout-image");
|
||||
var cover = canvas.eq(-1).find(".image-cover");
|
||||
var pxToDeduct = (Modernizr.touch ? 157 : 257);
|
||||
var pxToDeduct = (touch_flag ? 157 : 257);
|
||||
var windowHeight = ($(window).height() - pxToDeduct);
|
||||
var coverImageHeight = (parseInt(windowHeight));
|
||||
var tmpImg = new Image();
|
||||
|
|
@ -29,7 +32,7 @@
|
|||
var $closeBtn = $('<div class="s-space__close-btn btn-close"><i class="fa fa-times"></i></div>');
|
||||
var unitId = "{{unit-id}}";
|
||||
var pageId = "{{page-id}}";
|
||||
var spaceForAdBanner = layout.parents('.s-space.show-space').next('#space-for-ad-banner');
|
||||
var spaceForAdBanner = layout.parents('.s-space.show-space').next('#space-for-ad-banner-unit');
|
||||
var loading = $("div.loading-cover");
|
||||
var $controlBtn = null;
|
||||
var $controlIcon = null;
|
||||
|
|
@ -42,7 +45,25 @@
|
|||
cover.css('width','');
|
||||
layoutImage.css('height','');
|
||||
layoutImage.css('width','100%');
|
||||
|
||||
var modal = new tingle.modal({
|
||||
footer: false,
|
||||
stickyFooter: false,
|
||||
closeMethods: ['overlay', 'button', 'escape'],
|
||||
closeLabel: "Close",
|
||||
//cssClass: ['custom-class-1', 'custom-class-2'],
|
||||
onOpen: function() {
|
||||
console.log('modal open');
|
||||
},
|
||||
onClose: function() {
|
||||
destroyAdbanner()
|
||||
},
|
||||
beforeClose: function() {
|
||||
// here's goes some logic
|
||||
// e.g. save content before closing the modal
|
||||
return true; // close the modal
|
||||
return false; // nothing happens
|
||||
}
|
||||
});
|
||||
tmpImg.src = layoutImage.attr('src') ;
|
||||
cover.css('width','');
|
||||
spaceForAdBanner.hide()
|
||||
|
|
@ -54,6 +75,7 @@
|
|||
dataType: 'JSON'
|
||||
}).done(function(data) {
|
||||
$box.each(function(i) {
|
||||
$(this).attr('tabindex','0')
|
||||
var id = $(this).data('unit-id');
|
||||
var obj = data.sub_units.filter(function(x) {
|
||||
return x.id == id;
|
||||
|
|
@ -63,13 +85,15 @@
|
|||
}
|
||||
var temp = $pin.clone();
|
||||
temp.attr('href', obj[0].url);
|
||||
var text = $(this).find('.selection-box-label')
|
||||
if (obj[0].url == "#") {
|
||||
temp.find('.pulse').remove();
|
||||
}else{
|
||||
text.append('<a class="popup" href="'+obj[0].url+'">></a>')
|
||||
}
|
||||
var text = $(this).find('.selection-box-label')
|
||||
text.append('<div class="anchor"></div>')
|
||||
temp.prepend('<i class="fa fa-map-marker"></i>')
|
||||
temp.find('.fa-map-marker').append(text)
|
||||
temp.prepend(text)
|
||||
temp.find('.fa-map-marker').css('color',map_color)
|
||||
$(this).find('.selection-box.overlay')
|
||||
$(this).on('mouseover',function(){
|
||||
|
|
@ -84,15 +108,16 @@
|
|||
})
|
||||
temp.on('focus',function(){
|
||||
$(this).parents('.selection-box.overlay').find('.selection-box-label').addClass('active')
|
||||
$(this).parents('.selection-box.overlay').focus()
|
||||
active_map(this)
|
||||
})
|
||||
temp.on('mouseover',function(){
|
||||
$(this).parents('.selection-box.overlay').find('.selection-box-label').addClass('active')
|
||||
active_map(this)
|
||||
})
|
||||
temp.on('blur',function(){
|
||||
$(this).parents('.selection-box.overlay').find('.selection-box-label').removeClass('active')
|
||||
inactive_map(this)
|
||||
temp.parents('.selection-box.overlay').on('blur',function(){
|
||||
$(this).find('.selection-box-label').removeClass('active')
|
||||
inactive_map($(this).find('a.s-space__pin-link'))
|
||||
})
|
||||
temp.on('mouseleave',function(){
|
||||
if (!$(this).is(':focus')){
|
||||
|
|
@ -103,7 +128,15 @@
|
|||
//temp.prepend($(this).find('.selection-box-label.absolute-center'))
|
||||
$(this).append(temp);
|
||||
});
|
||||
canvas.find(".s-space__pin-link").on("click",pinLinkClickHandler);
|
||||
if (touch_flag){
|
||||
canvas.find(".s-space__pin-link .popup").on("click",pinLinkClickHandler)
|
||||
canvas.find(".s-space__pin-link").on("click",function(){
|
||||
return false;
|
||||
})
|
||||
}else{
|
||||
canvas.find(".s-space__pin-link").on("click",pinLinkClickHandler)
|
||||
canvas.find(".s-space__pin-link .popup").on("click",pinLinkClickHandler)
|
||||
}
|
||||
});
|
||||
|
||||
var pinLinkClickHandler = function(){
|
||||
|
|
@ -118,15 +151,22 @@
|
|||
var template = $(data)
|
||||
createAdbanner(template);
|
||||
spaceForAdBanner.show()
|
||||
$closeBtn
|
||||
/*$closeBtn
|
||||
.on('click', destroyAdbanner)
|
||||
.prependTo(template);
|
||||
*/
|
||||
});
|
||||
window.setTimeout(function(){
|
||||
$(modal.modalBoxContent).html(spaceForAdBanner)
|
||||
modal.open()
|
||||
},1)
|
||||
|
||||
}
|
||||
else{
|
||||
destroyAdbanner()
|
||||
}
|
||||
return false;
|
||||
|
||||
};
|
||||
|
||||
function createAdbanner(data) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue