###* Pop-up overlays =============== For modal dialogs see [up.modal](/up.modal). @class up.popup ### up.popup = (-> u = up.util config = openAnimation: 'fade-in' closeAnimation: 'fade-out' origin: 'bottom-right' ###* @method up.popup.defaults @param {String} options.animation @param {String} options.origin ### defaults = (options) -> u.extend(config, options) position = ($link, $popup, origin) -> linkBox = u.measure($link, full: true) css = switch origin when "bottom-right" right: linkBox.right top: linkBox.top + linkBox.height when "bottom-left" left: linkBox.left top: linkBox.bottom + linkBox.height when "top-right" right: linkBox.right bottom: linkBox.top when "top-left" left: linkBox.left bottom: linkBox.top else u.error("Unknown origin", origin) $popup.attr('up-origin', origin) $popup.css(css) ensureInViewport($popup) ensureInViewport = ($popup) -> box = u.measure($popup, full: true) errorX = null errorY = null if box.right < 0 errorX = -box.right # errorX is positive if box.bottom < 0 errorY = -box.bottom # errorY is positive if box.left < 0 errorX = box.left # errorX is negative if box.top < 0 errorY = box.top # errorY is negative if errorX # We use parseInt to: # 1) convert "50px" to 50 # 2) convert "auto" to NaN if left = parseInt($popup.css('left')) $popup.css('left', left - errorX) else if right = parseInt($popup.css('right')) $popup.css('right', right + errorX) if errorY if top = parseInt($popup.css('top')) $popup.css('top', top - errorY) else if bottom = parseInt($popup.css('bottom')) $popup.css('bottom', bottom + errorY) createHiddenPopup = ($link, selector, sticky) -> $popup = u.$createElementFromSelector('.up-popup') $popup.attr('up-sticky', '') if sticky $popup.attr('up-previous-url', up.browser.url()) $popup.attr('up-previous-title', document.title) $placeholder = u.$createElementFromSelector(selector) $placeholder.appendTo($popup) $popup.appendTo(document.body) $popup.hide() $popup updated = ($link, $popup, origin, animation) -> $popup.show() position($link, $popup, origin) up.animate($popup, animation) ###* Opens a popup overlay. @method up.popup.open @param {Element|jQuery|String} elementOrSelector @param {String} [options.origin='bottom-right'] @param {String} [options.animation] @param {Boolean} [options.sticky=false] If set to `true`, the popup remains open even if the page changes in the background. @param {Object} [options.history=false] ### open = (linkOrSelector, options) -> $link = $(linkOrSelector) options = u.options(options) url = u.option($link.attr('href')) selector = u.option(options.target, $link.attr('up-popup'), 'body') origin = u.option(options.origin, $link.attr('up-origin'), config.origin) animation = u.option(options.animation, $link.attr('up-animation'), config.openAnimation) sticky = u.option(options.sticky, $link.is('[up-sticky]')) history = u.option(options.history, $link.attr('up-history'), false) close() $popup = createHiddenPopup($link, selector, sticky) # console.log("before replace", $link, $popup) up.replace(selector, url, history: history # source: true insert: -> updated($link, $popup, origin, animation) ) ###* Returns the source URL for the fragment displayed in the current popup overlay, or `undefined` if no popup is open. @method up.popup.source @return {String} the source URL ### source = -> $popup = $('.up-popup') unless $popup.is('.up-destroying') $popup.find('[up-source]').attr('up-source') ###* Closes a currently opened popup overlay. Does nothing if no popup is currently open. @method up.popup.close @param {Object} options See options for [`up.animate`](/up.motion#up.animate). ### close = (options) -> $popup = $('.up-popup') if $popup.length options = u.options(options, animation: config.closeAnimation, url: $popup.attr('up-previous-url'), title: $popup.attr('up-previous-title') ) up.destroy($popup, options) autoclose = -> unless $('.up-popup').is('[up-sticky]') close() ###* Opens the target of this link in a popup overlay: Switch deck If the `up-sticky` attribute is set, the dialog does not auto-close if a page fragment below the popup overlay updates: Switch deck Settings @method a[up-popup] @ujs @param up-target @param [up-sticky] @param [up-origin] ### up.on('click', 'a[up-popup]', (event, $link) -> event.preventDefault() if $link.is('.up-current') close() else open($link) ) # Close the popup when someone clicks outside the popup # (but not on a popup opener). up.on('click', 'body', (event, $body) -> $target = $(event.target) unless $target.closest('.up-popup').length || $target.closest('[up-popup]').length close() ) up.bus.on('fragment:ready', ($fragment) -> unless $fragment.closest('.up-popup').length autoclose() ) # Close the pop-up overlay when the user presses ESC. up.magic.onEscape(-> close()) ###* When an element with this attribute is clicked, a currently open popup is closed. @method [up-close] @ujs ### up.on('click', '[up-close]', (event, $element) -> if $element.closest('.up-popup') close() ) open: open close: close source: source defaults: defaults )()