unpoly-rails 0.57.0 → 0.60.0

data/lib/assets/javascripts/unpoly/log.coffee

@@ -4,16 +4,16 @@ Logging
 
 Unpoly can print debugging information to the developer console, e.g.:
 
-- Which [events](/up.bus) are called
+- Which [events](/up.event) are called
 - When we're [making requests to the network](/up.proxy)
 - Which [compilers](/up.syntax) are applied to which elements
 
 You can activate logging by calling [`up.log.enable()`](/up.log.enable).
 The output can be configured using the [`up.log.config`](/up.log.config) property.
 
-@class up.log
+@module up.log
 ###
-up.log = (($) ->
+up.log = do ->
 
   u = up.util
   b = up.browser
@@ -28,7 +28,7 @@ up.log = (($) ->
     Whether Unpoly will print debugging information to the developer console.
 
     Debugging information includes which elements are being [compiled](/up.syntax)
-    and which [events](/up.bus) are being emitted.
+    and which [events](/up.event) are being emitted.
     Note that errors will always be printed, regardless of this setting.
   @param {boolean} [options.collapse=false]
     Whether debugging information is printed as a collapsed tree.
@@ -39,7 +39,7 @@ up.log = (($) ->
     A string to prepend to Unpoly's logging messages so you can distinguish it from your own messages.
   @stable
   ###
-  config = u.config
+  config = new up.Config
     prefix: '[UP] '
     enabled: sessionStore.get('enabled')
     collapse: false
@@ -50,29 +50,107 @@ up.log = (($) ->
   prefix = (message) ->
     "#{config.prefix}#{message}"
 
+  ###**
+  A cross-browser way to interact with `console.log`, `console.error`, etc.
+
+  This function falls back to `console.log` if the output stream is not implemented.
+  It also prints substitution strings (e.g. `console.log("From %o to %o", "a", "b")`)
+  as a single string if the browser console does not support substitution strings.
+
+  \#\#\# Example
+
+      up.browser.puts('log', 'Hi world')
+      up.browser.puts('error', 'There was an error in %o', obj)
+
+  @function up.browser.puts
+  @internal
+  ###
+  callConsole = (stream, args...) ->
+    console[stream](args...)
+
+  CONSOLE_PLACEHOLDERS = /\%[odisf]/g
+
+  stringifyArg = (arg) ->
+    maxLength = 200
+    closer = ''
+
+    if u.isString(arg)
+      string = arg.replace(/[\n\r\t ]+/g, ' ')
+      string = string.replace(/^[\n\r\t ]+/, '')
+      string = string.replace(/[\n\r\t ]$/, '')
+      string = "\"#{string}\""
+      closer = '"'
+    else if u.isUndefined(arg)
+      # JSON.stringify(undefined) is actually undefined
+      string = 'undefined'
+    else if u.isNumber(arg) || u.isFunction(arg)
+      string = arg.toString()
+    else if u.isArray(arg)
+      string = "[#{u.map(arg, stringifyArg).join(', ')}]"
+      closer = ']'
+    else if u.isJQuery(arg)
+      string = "$(#{u.map(arg, stringifyArg).join(', ')})"
+      closer = ')'
+    else if u.isElement(arg)
+      string = "<#{arg.tagName.toLowerCase()}"
+      for attr in ['id', 'name', 'class']
+        if value = arg.getAttribute(attr)
+          string += " #{attr}=\"#{value}\""
+      string += ">"
+      closer = '>'
+    else # object
+      string = JSON.stringify(arg)
+    if string.length > maxLength
+      string = "#{string.substr(0, maxLength)} …"
+      string += closer
+    string
+
+  ###**
+  See https://developer.mozilla.org/en-US/docs/Web/API/Console#Using_string_substitutions
+
+  @function up.browser.sprintf
+  @internal
+  ###
+  sprintf = (message, args...) ->
+    sprintfWithFormattedArgs(u.identity, message, args...)
+
+  ###**
+  @function up.browser.sprintfWithFormattedArgs
+  @internal
+  ###
+  sprintfWithFormattedArgs = (formatter, message, args...) ->
+    return '' if u.isBlank(message)
+
+    i = 0
+    message.replace CONSOLE_PLACEHOLDERS, ->
+      arg = args[i]
+      arg = formatter(stringifyArg(arg))
+      i += 1
+      arg
+
   ###**
   Prints a debugging message to the browser console.
 
   @function up.log.debug
   @param {string} message
-  @param {Array} args...
+  @param {Array} ...args
   @internal
   ###
   debug = (message, args...) ->
     if config.enabled && message
-      b.puts('debug', prefix(message), args...)
+      console.debug(prefix(message), args...)
 
   ###**
   Prints a logging message to the browser console.
 
   @function up.puts
   @param {string} message
-  @param {Array} args...
+  @param {Array} ...args
   @internal
   ###
   puts = (message, args...) ->
     if config.enabled && message
-      b.puts('log', prefix(message), args...)
+      console.log(prefix(message), args...)
 
   ###**
   @function up.warn
@@ -80,7 +158,7 @@ up.log = (($) ->
   ###
   warn = (message, args...) ->
     if message
-      b.puts('warn', prefix(message), args...)
+      console.warn(prefix(message), args...)
 
   ###**
   - Makes sure the group always closes
@@ -92,12 +170,12 @@ up.log = (($) ->
   group = (message, args...) ->
     block = args.pop() # Coffeescript copies the arguments array
     if config.enabled && message
-      stream = if config.collapse then 'groupCollapsed' else 'group'
-      b.puts(stream, prefix(message), args...)
+      fn = if config.collapse then 'groupCollapsed' else 'group'
+      console[fn](prefix(message), args...)
       try
         block()
       finally
-        b.puts('groupEnd') if message
+        console.groupEnd() if message
     else
       block()
 
@@ -107,7 +185,7 @@ up.log = (($) ->
   ###
   error = (message, args...) ->
     if message
-      b.puts('error', prefix(message), args...)
+      console.error(prefix(message), args...)
 
   printBanner = ->
     # The ASCII art looks broken in code since we need to escape backslashes
@@ -120,9 +198,9 @@ up.log = (($) ->
       banner += "Call `up.log.disable()` to disable logging for this session."
     else
       banner += "Call `up.log.enable()` to enable logging for this session."
-    b.puts('log', banner)
+    console.log(banner)
 
-  up.on 'up:framework:boot', printBanner
+  up.on 'up:framework:booted', printBanner
   up.on 'up:framework:reset', reset
 
   setEnabled = (value) ->
@@ -133,7 +211,7 @@ up.log = (($) ->
   Makes future Unpoly events print vast amounts of debugging information to the developer console.
 
   Debugging information includes which elements are being [compiled](/up.syntax)
-  and which [events](/up.bus) are being emitted.
+  and which [events](/up.event) are being emitted.
 
   @function up.log.enable
   @stable
@@ -152,6 +230,9 @@ up.log = (($) ->
   disable = ->
     setEnabled(false)
 
+  puts: puts
+  sprintf: sprintf
+  sprintfWithFormattedArgs: sprintfWithFormattedArgs
   puts: puts
   debug: debug
   error: error
@@ -160,8 +241,7 @@ up.log = (($) ->
   config: config
   enable: enable
   disable: disable
-
-)(jQuery)
+  isEnabled: -> config.enabled
 
 up.puts = up.log.puts
 up.warn = up.log.warn

data/lib/assets/javascripts/unpoly/modal.coffee.erb

@@ -5,7 +5,7 @@ Modal dialogs
 Instead of [linking to a page fragment](/up.link), you can choose to show a fragment
 in a modal dialog. The existing page will remain open in the background.
 
-To open a modal, add an [`up-modal`](/a-up-modal) attribute to a link:
+To open a modal, add an [`[up-modal]`](/a-up-modal) attribute to a link:
 
     <a href="/blogs" up-modal=".blog-list">Switch blog</a>
 
@@ -54,11 +54,12 @@ You can change this structure by setting [`up.modal.config.template`](/up.modal.
 or function.
 
 
-@class up.modal
+@module up.modal
 ###
-up.modal = (($) ->
+up.modal = do ->
 
   u = up.util
+  e = up.element
 
   ###**
   Sets default options for future modals.
@@ -81,7 +82,7 @@ up.modal = (($) ->
   @param {number} [config.height='auto']
     The height of the dialog in pixels.
     Defaults to `undefined`, meaning that the dialog will grow to fit its contents.
-  @param {string|Function(config)} [config.template]
+  @param {string|Function(config): string} [config.template]
     A string containing the HTML structure of the modal.
     You can supply an alternative template string, but make sure that it
     defines tag with the classes `up-modal`, `up-modal-dialog` and  `up-modal-content`.
@@ -120,7 +121,7 @@ up.modal = (($) ->
     The default [flavor](/up.modal.flavors).
   @stable
   ###
-  config = u.config
+  config = new up.Config
     maxWidth: null
     width: null
     height: null
@@ -189,7 +190,7 @@ up.modal = (($) ->
     the values are the respective default configurations.
   @experimental
   ###
-  flavors = u.openConfig
+  flavors = new up.Config
     default: {}
 
   ###**
@@ -210,10 +211,10 @@ up.modal = (($) ->
   @experimental
   ###
   
-  state = u.config ->
+  state = new up.Config
     phase: 'closed'      # can be 'opening', 'opened', 'closing' and 'closed'
-    $anchor: null        # the element to which the tooltip is anchored
-    $modal: null         # the modal container
+    anchorElement: null  # the element to which the tooltip is anchored
+    modalElement: null   # the modal container
     sticky: null
     closable: null
     flavor: null
@@ -221,13 +222,14 @@ up.modal = (($) ->
     coveredUrl: null
     coveredTitle: null
     position: null
-    unshifters: []
 
-  chain = new u.DivertibleChain()
+  bodyShifter = new up.BodyShifter()
+
+  chain = new up.DivertibleChain()
 
   reset = ->
-    state.$modal?.remove()
-    unshiftElements()
+    e.remove(state.modalElement) if state.modalElement
+    bodyShifter.unshift()
     state.reset()
     chain.reset()
     config.reset()
@@ -241,56 +243,32 @@ up.modal = (($) ->
     state.coveredTitle = null
     state.coveredUrl = null
 
+  part = (name) ->
+    selector = ".up-modal-#{name}"
+    state.modalElement.querySelector(selector)
+
   createHiddenFrame = (target, options) ->
-    $modal = $(templateHtml())
-    $modal.attr('up-flavor', state.flavor)
-    $modal.attr('up-position', state.position) if u.isPresent(state.position)
+    html = templateHtml()
+    state.modalElement = modalElement = e.createFromHtml(html)
+    modalElement.setAttribute('up-flavor', state.flavor)
+    modalElement.setAttribute('up-position', state.position) if u.isPresent(state.position)
 
-    $dialog = $modal.find('.up-modal-dialog')
     dialogStyles = u.only(options, 'width', 'maxWidth', 'height')
-    u.writeInlineStyle($dialog, dialogStyles)
+    e.setStyle(part('dialog'), dialogStyles)
 
-    $modal.find('.up-modal-close').remove() unless state.closable
-    $content = $modal.find('.up-modal-content')
+    unless state.closable
+      closeElement = part('close')
+      e.remove(closeElement)
+
+    contentElement = part('content')
     # Create an empty element that will match the
     # selector that is being replaced.
-    u.$createPlaceholder(target, $content)
-    $modal.hide()
-    $modal.appendTo(document.body)
-    state.$modal = $modal
+    up.fragment.createPlaceholder(target, contentElement)
+    e.hide(modalElement)
+    document.body.appendChild(modalElement)
 
   unveilFrame = ->
-    state.$modal.show()
-
-  # Gives `<body>` a right padding in the width of a scrollbar.
-  # Also gives elements anchored to the right side of the screen
-  # an increased `right`.
-  #
-  # This is to prevent the body and elements from jumping when we add the
-  # modal overlay, which has its own scroll bar.
-  # This is screwed up, but Bootstrap does the same.
-  shiftElements = ->
-    if u.documentHasVerticalScrollbar()
-      $body = $('body')
-      scrollbarWidth = u.scrollbarWidth()
-      bodyRightPadding = u.readComputedStyleNumber($body, 'paddingRight')
-      bodyRightShift = scrollbarWidth + bodyRightPadding
-      unshiftBody = u.writeTemporaryStyle($body,
-        paddingRight: bodyRightShift
-        overflowY: 'hidden'
-      )
-      state.unshifters.push(unshiftBody)
-      up.layout.anchoredRight().each ->
-        $element = $(this)
-        elementRight = u.readComputedStyleNumber($element, 'right')
-        elementRightShift = scrollbarWidth + elementRight
-        unshifter = u.writeTemporaryStyle($element, right: elementRightShift)
-        state.unshifters.push(unshifter)
-
-
-  # Reverts the effects of `shiftElements`.
-  unshiftElements = ->
-    unshifter() while unshifter = state.unshifters.pop()
+    e.show(state.modalElement)
 
   ###**
   Returns whether a modal is currently open.
@@ -307,8 +285,8 @@ up.modal = (($) ->
   ###**
   Opens the given link's destination in a modal overlay:
 
-      var $link = $('...');
-      up.modal.follow($link);
+      var link = document.querySelector('a')
+      up.modal.follow(link)
 
   Any option attributes for [`a[up-modal]`](/a.up-modal) will be honored.
 
@@ -356,12 +334,12 @@ up.modal = (($) ->
   ###
   followAsap = (linkOrSelector, options) ->
     options = u.options(options)
-    options.$link = $(linkOrSelector)
+    options.link = e.get(linkOrSelector)
     openAsap(options)
 
-  preloadNow = ($link, options) ->
+  preloadNow = (link, options) ->
     options = u.options(options)
-    options.$link = $link
+    options.link = link
     options.preload = true
     # Use openNow() and not openAsap() so (1) we don't close a currently open modal
     # and (2) our pending AJAX request does not prevent other modals from opening
@@ -372,7 +350,7 @@ up.modal = (($) ->
 
   \#\#\# Example
 
-      up.modal.visit('/foo', { target: '.list' });
+      up.modal.visit('/foo', { target: '.list' })
 
   This will request `/foo`, extract the `.list` selector from the response
   and open the selected container in a modal dialog.
@@ -404,7 +382,7 @@ up.modal = (($) ->
   \#\#\# Example
 
       var html = 'before <div class="content">inner</div> after';
-      up.modal.extract('.content', html);
+      up.modal.extract('.content', html)
 
   The would open a modal with the following contents:
 
@@ -427,7 +405,7 @@ up.modal = (($) ->
   extractAsap = (selector, html, options) ->
     options = u.options(options)
     options.html = html
-    options.history = u.option(options.history, false)
+    options.history ?= false
     options.target = selector
     openAsap(options)
 
@@ -436,35 +414,35 @@ up.modal = (($) ->
 
   openNow = (options) ->
     options = u.options(options)
-    $link = u.option(u.pluckKey(options, '$link'), u.nullJQuery())
-    url = u.option(u.pluckKey(options, 'url'), $link.attr('up-href'), $link.attr('href'))
-    html = u.option(u.pluckKey(options, 'html'))
-    target = u.option(u.pluckKey(options, 'target'), $link.attr('up-modal'))
+    link = u.pluckKey(options, 'link') || e.none()
+    url = u.pluckKey(options, 'url') ? link.getAttribute('up-href') ? link.getAttribute('href')
+    html = u.pluckKey(options, 'html')
+    target = u.pluckKey(options, 'target') ? link.getAttribute('up-modal')
     validateTarget(target)
-    options.flavor = u.option(options.flavor, $link.attr('up-flavor'), config.flavor)
-    options.position = u.option(options.position, $link.attr('up-position'), flavorDefault('position', options.flavor))
-    options.position = u.evalOption(options.position, $link: $link)
-    options.width = u.option(options.width, $link.attr('up-width'), flavorDefault('width', options.flavor))
-    options.maxWidth = u.option(options.maxWidth, $link.attr('up-max-width'), flavorDefault('maxWidth', options.flavor))
-    options.height = u.option(options.height, $link.attr('up-height'), flavorDefault('height'))
-    options.animation = u.option(options.animation, $link.attr('up-animation'), flavorDefault('openAnimation', options.flavor))
+    options.flavor ?= link.getAttribute('up-flavor') ? config.flavor
+    options.position ?= link.getAttribute('up-position') ? flavorDefault('position', options.flavor)
+    options.position = u.evalOption(options.position, { link })
+    options.width ?= link.getAttribute('up-width') ? flavorDefault('width', options.flavor)
+    options.maxWidth ?= link.getAttribute('up-max-width') ? flavorDefault('maxWidth', options.flavor)
+    options.height ?= link.getAttribute('up-height') ? flavorDefault('height')
+    options.animation ?= link.getAttribute('up-animation') ? flavorDefault('openAnimation', options.flavor)
     options.animation = u.evalOption(options.animation, position: options.position)
-    options.backdropAnimation = u.option(options.backdropAnimation, $link.attr('up-backdrop-animation'), flavorDefault('backdropOpenAnimation', options.flavor))
+    options.backdropAnimation ?= link.getAttribute('up-backdrop-animation') ? flavorDefault('backdropOpenAnimation', options.flavor)
     options.backdropAnimation = u.evalOption(options.backdropAnimation, position: options.position)
-    options.sticky = u.option(options.sticky, u.castedAttr($link, 'up-sticky'), flavorDefault('sticky', options.flavor))
-    options.closable = u.option(options.closable, u.castedAttr($link, 'up-closable'), flavorDefault('closable', options.flavor))
-    options.confirm = u.option(options.confirm, $link.attr('up-confirm'))
-    options.method = up.link.followMethod($link, options)
+    options.sticky ?= e.booleanAttr(link, 'up-sticky') ? flavorDefault('sticky', options.flavor)
+    options.closable ?= e.booleanAttr(link, 'up-closable') ? flavorDefault('closable', options.flavor)
+    options.confirm ?= link.getAttribute('up-confirm')
+    options.method = up.link.followMethod(link, options)
     options.layer = 'modal'
-    options.failTarget = u.option(options.failTarget, $link.attr('up-fail-target'))
-    options.failLayer = u.option(options.failLayer, $link.attr('up-fail-layer'), 'auto')
+    options.failTarget ?= link.getAttribute('up-fail-target')
+    options.failLayer ?= link.getAttribute('up-fail-layer') ? 'auto'
 
-    animateOptions = up.motion.animateOptions(options, $link, duration: flavorDefault('openDuration', options.flavor), easing: flavorDefault('openEasing', options.flavor))
+    animateOptions = up.motion.animateOptions(options, link, duration: flavorDefault('openDuration', options.flavor), easing: flavorDefault('openEasing', options.flavor))
 
     # Although we usually fall back to full page loads if a browser doesn't support pushState,
     # in the case of modals we assume that the developer would rather see a dialog
     # without an URL update.
-    options.history = u.option(options.history, u.castedAttr($link, 'up-history'), flavorDefault('history', options.flavor))
+    options.history ?= e.booleanOrStringAttr(link, 'up-history') ? flavorDefault('history', options.flavor)
     options.history = false unless up.browser.canPushState()
 
     # This will prevent up.replace() from looking for fallbacks, since
@@ -475,7 +453,7 @@ up.modal = (($) ->
       return up.replace(target, url, options)
 
     up.browser.whenConfirmed(options).then ->
-      up.bus.whenEmitted('up:modal:open', url: url, message: 'Opening modal').then ->
+      up.event.whenEmitted('up:modal:open', url: url, log: 'Opening modal').then ->
         state.phase = 'opening'
         state.flavor = options.flavor
         state.sticky = options.sticky
@@ -490,12 +468,12 @@ up.modal = (($) ->
         else
           promise = up.replace(target, url, extractOptions)
         promise = promise.then ->
-          shiftElements()
+          bodyShifter.shift()
           unveilFrame()
           animate(options.animation, options.backdropAnimation, animateOptions)
         promise = promise.then ->
           state.phase = 'opened'
-          up.emit('up:modal:opened', message: 'Modal opened')
+          up.emit('up:modal:opened', log: 'Modal opened')
         promise
 
   validateTarget = (target) ->
@@ -544,9 +522,9 @@ up.modal = (($) ->
     unless isOpen()
       return Promise.resolve()
 
-    viewportCloseAnimation = u.option(options.animation, flavorDefault('closeAnimation'))
+    viewportCloseAnimation = options.animation ? flavorDefault('closeAnimation')
     viewportCloseAnimation = u.evalOption(viewportCloseAnimation, position: state.position)
-    backdropCloseAnimation = u.option(options.backdropAnimation, flavorDefault('backdropCloseAnimation'))
+    backdropCloseAnimation = options.backdropAnimation ? flavorDefault('backdropCloseAnimation')
     backdropCloseAnimation = u.evalOption(backdropCloseAnimation, position: state.position)
     animateOptions = up.motion.animateOptions(options, duration: flavorDefault('closeDuration'), easing: flavorDefault('closeEasing'))
 
@@ -556,7 +534,7 @@ up.modal = (($) ->
       title: state.coveredTitle
     )
 
-    up.bus.whenEmitted('up:modal:close', $element: state.$modal, message: 'Closing modal').then ->
+    up.event.whenEmitted(state.modalElement, 'up:modal:close', log: 'Closing modal').then ->
       state.phase = 'closing'
       # the current URL must be deleted *before* calling up.destroy,
       # since up.feedback listens to up:fragment:destroyed and then
@@ -568,22 +546,22 @@ up.modal = (($) ->
       promise = animate(viewportCloseAnimation, backdropCloseAnimation, animateOptions)
 
       promise = promise.then ->
-        up.destroy(state.$modal, destroyOptions)
+        up.destroy(state.modalElement, destroyOptions)
 
       promise = promise.then ->
-        unshiftElements()
+        bodyShifter.unshift()
         state.phase = 'closed'
-        state.$modal = null
+        state.modalElement = null
         state.flavor = null
         state.sticky = null
         state.closable = null
         state.position = null
-        up.emit('up:modal:closed', message: 'Modal closed')
+        up.emit('up:modal:closed', log: 'Modal closed')
 
       promise
 
   markAsAnimating = (isAnimating = true) ->
-    state.$modal.toggleClass('up-modal-animating', isAnimating)
+    e.toggleClass(state.modalElement, 'up-modal-animating', isAnimating)
 
   animate = (viewportAnimation, backdropAnimation, animateOptions) ->
     # If we're not animating the dialog, don't animate the backdrop either
@@ -591,9 +569,10 @@ up.modal = (($) ->
       Promise.resolve()
     else
       markAsAnimating()
+
       promise = Promise.all([
-        up.animate(state.$modal.find('.up-modal-viewport'), viewportAnimation, animateOptions),
-        up.animate(state.$modal.find('.up-modal-backdrop'), backdropAnimation, animateOptions)
+        up.animate(part('viewport'), viewportAnimation, animateOptions),
+        up.animate(part('backdrop'), backdropAnimation, animateOptions)
       ])
       promise = promise.then -> markAsAnimating(false)
       promise
@@ -632,11 +611,11 @@ up.modal = (($) ->
   @stable
   ###
   contains = (elementOrSelector) ->
-    $element = $(elementOrSelector)
-    $element.closest('.up-modal').length > 0
+    element = e.get(elementOrSelector)
+    !!e.closest(element, '.up-modal')
 
   flavor = (name, overrideConfig = {}) ->
-    up.warn 'up.modal.flavor() is deprecated. Use the up.modal.flavors property instead.'
+    up.legacy.warn('up.modal.flavor() is deprecated. Use the up.modal.flavors property instead.')
     u.assign(flavorOverrides(name), overrideConfig)
 
   ###**
@@ -711,8 +690,8 @@ up.modal = (($) ->
   ###
   up.link.addFollowVariant '[up-modal]',
     # Don't just pass the `follow` function reference so we can stub it in tests
-    follow: ($link, options) -> followAsap($link, options)
-    preload: ($link, options) -> preloadNow($link, options)
+    follow: (link, options) -> followAsap(link, options)
+    preload: (link, options) -> preloadNow(link, options)
 
   # Close the modal when someone clicks outside the dialog (but not on a modal opener).
   # We register the event on .up-modal, which covers the *entire* viewport, not just
@@ -724,22 +703,22 @@ up.modal = (($) ->
   up.on('click', '.up-modal', (event) ->
     return unless state.closable
 
-    $target = $(event.target)
-    unless $target.closest('.up-modal-dialog').length || $target.closest('[up-modal]').length
-      up.bus.consumeAction(event)
+    target = event.target
+    unless e.closest(target, '.up-modal-dialog') || e.closest(target, '[up-modal]')
+      up.event.consumeAction(event)
       u.muteRejection closeAsap()
   )
 
-  up.on('up:fragment:inserted', (event, $fragment) ->
-    if contains($fragment)
-      if newSource = $fragment.attr('up-source')
+  up.on('up:fragment:inserted', (event, fragment) ->
+    if contains(fragment)
+      if newSource = fragment.getAttribute('up-source')
         state.url = newSource
-    else if event.origin && contains(event.origin) && !up.popup.contains($fragment)
+    else if event.origin && contains(event.origin) && !up.popup.contains(fragment)
       u.muteRejection autoclose()
   )
 
   # Close the pop-up overlay when the user presses ESC.
-  up.bus.onEscape ->
+  up.event.onEscape ->
     if state.closable
       u.muteRejection closeAsap()
 
@@ -756,13 +735,13 @@ up.modal = (($) ->
   @selector .up-modal [up-close]
   @stable
   ###
-  up.on('click', '.up-modal [up-close]', (event, $element) ->
+  up.on('click', '.up-modal [up-close]', (event) ->
     u.muteRejection closeAsap()
     # If the user closes the modal by clicking on the background, we want to halt the event chain here.
     # The event should not trigger anything else. The user needs to click again for another interaction.
     # Also only prevent the default when we actually closed a modal.
     # This way we can have buttons that close a modal when within a modal, but link to a destination if not.
-    up.bus.consumeAction(event)
+    up.event.consumeAction(event)
   )
 
   ###**
@@ -791,9 +770,9 @@ up.modal = (($) ->
     Otherwise it will slide in from the right.
   @stable
   ###
-  up.macro 'a[up-drawer], [up-href][up-drawer]', ($link) ->
-    target = $link.attr('up-drawer')
-    $link.attr
+  up.macro 'a[up-drawer], [up-href][up-drawer]', (link) ->
+    target = link.getAttribute('up-drawer')
+    e.setAttrs link,
       'up-modal': target
       'up-flavor': 'drawer'
 
@@ -817,8 +796,8 @@ up.modal = (($) ->
         when 'left' then 'move-to-left'
         when 'right' then 'move-to-right'
     position: (options) ->
-      if u.isPresent(options.$link)
-        u.horizontalScreenHalf(options.$link)
+      if u.isPresent(options.link)
+        u.horizontalScreenHalf(options.link)
       else
         # In case the drawer was opened programmatically through Javascript,
         # we might now know the link that was clicked on.
@@ -844,5 +823,3 @@ up.modal = (($) ->
   contains: contains
   isOpen: isOpen
   flavor: flavor # deprecated
-
-)(jQuery)