card-mod-script 0.13.1 → 0.14.0

data/assets/script/decko/slot.js.coffee

@@ -0,0 +1,182 @@
+$.extend decko,
+  snakeCase: (str)->
+    str.replace /([a-z])([A-Z])/g, (match) -> match[0] + '_' +
+                match[1].toLowerCase()
+
+  # returns full path with slot parameters
+  slotPath: (path, slot)->
+    params = decko.slotData(slot)
+    decko.path(path) + ( (if path.match /\?/ then '&' else '?') + $.param(params) )
+
+  slotData: (slot) ->
+    xtra = {}
+    main = $('#main').children('.card-slot').data 'cardName'
+    xtra['main'] = main if main?
+
+    if slot
+      xtra['is_main'] = true if slot.isMain()
+      slotdata = slot.data 'slot'
+      if slotdata?
+        decko.slotParams slotdata, xtra, 'slot'
+        xtra['type'] = slotdata['type'] if slotdata['type']
+    xtra
+
+  slotEditView: (slot) ->
+    data = decko.slotData(slot)
+    switch data["slot[edit]"]
+      when "inline" then "edit_inline"
+      when "full"   then "bridge"
+      else "edit"
+
+  slotEditLink: (slot) ->
+    edit_links =
+      slot.find(".edit-link").filter (i, el) ->
+        $(el).slot().data('slotId') == slot.data('slotId')
+
+    if edit_links[0] then $(edit_links[0]) else false
+
+  slotParams: (raw, processed, prefix)->
+    $.each raw, (key, value)->
+      cgiKey = prefix + '[' + decko.snakeCase(key) + ']'
+      if key == 'items'
+        decko.slotParams value, processed, cgiKey
+      else
+        processed[cgiKey] = value
+
+  contentLoaded: (el, slotter)->
+    decko.initializeEditors(el)
+    notice = slotter.attr('notify-success')
+    if notice?
+      el.notify notice, "success"
+    el.triggerSlotReady(slotter)
+
+  slotReady: (func)->
+    $('document').ready ->
+      $('body').on 'slotReady', '.card-slot', (e, slotter) ->
+        e.stopPropagation()
+        if slotter?
+          func.call this, $(this), $(slotter)
+        else
+          func.call this, $(this)
+
+  slotDestroy: (func)->
+    $('document').ready ->
+      $('body').on 'slotDestroy', '.card-slot, ._modal-slot', (e) ->
+        e.stopPropagation()
+        func.call this, $(this)
+
+jQuery.fn.extend
+  slot: (status="success", mode="replace") ->
+    if mode == "modal"
+      @modalSlot()
+    else
+      @selectSlot("slot-#{status}-selector") ||
+        @selectSlot("slot-selector") ||
+        @closest(".card-slot")
+
+  selectSlot: (selectorName) ->
+    if selector = @data(selectorName)
+      slot = @findSlot selector
+      slot && slot[0] && slot
+
+  isSlot: ->
+    $(this).hasClass "card-slot"
+
+  isMain: ->
+    @slot().parent('#main')[0]
+
+  isMainOrMainModal: ->
+    el = $(this)
+    el = el.findOriginSlot("modal") if el.closest(".modal")[0]
+    el && el.isMain()
+
+  findSlot: (selector) ->
+    if selector == "modal-origin"
+      @findOriginSlot("modal")
+    else if selector == "overlay-origin"
+      @findOriginSlot("overlay")
+    else
+      target_slot = @closest(selector)
+      parent_slot = @closest '.card-slot'
+
+      # if slot-selector doesn't apply to a child, search in all parent slots and finally in the body
+      while target_slot.length == 0 and parent_slot.length > 0
+        target_slot = $(parent_slot).find(selector)
+        parent_slot = $(parent_slot).parent().closest '.card-slot'
+      if target_slot.length == 0
+        $(selector)
+      else
+        target_slot
+
+  # type can be "modal" or "overlay"
+  findOriginSlot: (type) ->
+    overlaySlot = @closest("[data-#{type}-origin-slot-id]")
+    origin_slot_id = overlaySlot.data("#{type}-origin-slot-id")
+    origin_slot = $("[data-slot-id=#{origin_slot_id}]")
+    if origin_slot[0]?
+      origin_slot
+    else
+      console.log "couldn't find origin with slot id #{origin_slot_id}"
+
+  reloadSlot: (url) ->
+    $slot = $(this)
+    if $slot.length > 1
+      $slot.each ->
+        $(this).reloadSlot url
+      return
+
+    $slot = $slot.slot() unless $slot.isSlot
+    return unless $slot[0]
+
+    unless url?
+      url = $slot.slotUrl()
+    $slot.addClass 'slotter'
+    $slot.attr 'href', url
+    $slot.data "url", url
+    this[0].href = url # that's where handleRemote gets the url from
+                       # .attr(href, url) only works for anchors
+    $slot.data "remote", true
+    $.rails.handleRemote($slot)
+
+  clearSlot: () ->
+    @triggerSlotDestroy()
+    @empty()
+
+  slotUrl: ->
+    decko.slotPath "#{this.slotMark()}?view=#{@data("slot")["view"]}"
+
+  slotMark: ->
+    if @data('cardId') then "~#{@data('cardId')}" else @data("cardName")
+
+  setSlotContent: (newContent, mode, $slotter) ->
+    v = $(newContent)[0] && $(newContent) || newContent
+
+    if typeof(v) == "string"
+      # Needed to support "TEXT: result" pattern in success (eg deleting nested cards)
+      @slot("success", mode).replaceWith v
+    else
+      if v.hasClass("_overlay")
+        mode = "overlay"
+      else if v.hasClass("_modal")
+        mode = "modal"
+      @slot("success", mode).setSlotContentFromElement v, mode, $slotter
+    v
+
+  setSlotContentFromElement: (el, mode, $slotter) ->
+    if mode == "overlay"
+      @addOverlay(el, $slotter)
+    else if el.hasClass("_modal-slot") or mode == "modal"
+      el.showAsModal($slotter)
+    else
+      slot_id = @data("slot-id")
+      el.attr("data-slot-id", slot_id) if slot_id
+      @triggerSlotDestroy()
+      @replaceWith el
+      decko.contentLoaded(el, $slotter)
+
+  triggerSlotReady: (slotter) ->
+    @trigger "slotReady", slotter if @isSlot()
+    @find(".card-slot").trigger "slotReady", slotter
+
+  triggerSlotDestroy: () ->
+    @trigger "slotDestroy"

data/assets/script/decko/slot_ready.js.coffee

@@ -0,0 +1,12 @@
+decko.slotReady (slot) ->
+  slot.find('._disappear').delay(5000).animate(
+    height: 0, 1000, -> $(this).hide())
+
+  if slot.hasClass("_refresh-timer")
+    setTimeout(
+      -> slot.reloadSlot(slot.data("refresh-url")),
+      2000
+    )
+
+
+

data/assets/script/decko/slotter.js.coffee

@@ -0,0 +1,268 @@
+# There are three places that can control what happens after an ajax request
+#  1. the element that triggered the request (eg. a link or a button)
+#  2. the closest ".slotter" element
+#      (if the trigger itself isn't a slotter,
+#       a common example is that a form is a slotter but the form buttons aren't)
+#  3. the slot returned by the request
+#
+# A slot is an element marked with "card-slot" class, a slotter has a "slotter" class.
+# By the default, the closest slot of the slotter is replaced with the new slot that the
+# request returned. The behavior can be changed with css classes and data attributes.
+#
+#  To 1. The trigger element has only a few options to override the slotter.
+#    classes:
+#    "_close-modal-on-success"
+#    "_close-overlay-on-success"
+#    "_update-origin"
+#
+#  To 2. The slotter is the standard way to define what happens with request result
+#    data:
+#    slot-selector
+#        a css selector that defines which slot will be replaced.
+#        You can also use "modal-origin" and "overlay-origin" to refer to the origin slots.
+#    slot-success-selector/slot-error-selector
+#        the same as slot-selector but only used
+#        for success case or error case, respectively
+#    update-foreign-slot
+#        a css selector to specify an additional slot that will be
+#        updated after the request.
+#    update-foreign-slot-url
+#        a url to fetch the new content for the additional slot
+#        if not given the slot is updated with the same card and view that was used before
+#    update-origin
+#        if present then the slot from where the current modal or overlay slot was opened
+#        will be updated
+#    slotter-mode
+#        possible values are
+#          replace (default)
+#             replace the closest slot with new slot
+#          modal
+#             show new slot in modal; if there is already a modal then put it on top
+#           modal-replace
+#             replace existing modal
+#          overlay
+#             show new slot in overlay
+#          update-origin
+#             update closest slot of the slotter that opened the modal or overlay
+#             (assumes that the request was triggered from a modal or overlay)
+#             If you need the update-origin mode together with another mode then use
+#             data-update-origin="true".
+#          silent-success
+#             do nothing
+#
+#    classes:
+#    _close-overlay
+#    _close-modal
+#
+#   To 3. Similar as 1, the slot has only overlay and modal options.
+#     classes:
+#     _modal
+#        show slot in modal
+#     _overlay
+#        show slot in overlay
+#
+#
+$(window).ready ->
+  $('body').on 'ajax:success', '.slotter', (event, data) ->
+    $(this).slotterSuccess event, data
+
+  $('body').on 'ajax:error', '.slotter', (event, xhr) ->
+    $(this).showErrorResponse xhr.status, xhr.responseText
+
+  $('body').on 'click', 'button.slotter', (event)->
+    return false if !$.rails.allowAction $(this)
+    $.rails.handleRemote $(this)
+
+  $('body').on 'click', '._clickable.slotter', (event)->
+    $(this)[0].href = $(this).attr("href") # that's where rails.handleRemote
+                                           # expects the url
+    $.rails.handleRemote $(this)
+
+  $('body').on 'click', '[data-dismiss="overlay"]', (event) ->
+    $(this).findSlot(".card-slot._overlay").removeOverlay()
+
+  $('body').on 'click', '._close-overlay-on-success', (event) ->
+    $(this).closeOnSuccess("overlay")
+
+  $('body').on 'click', '._close-modal-on-success', (event) ->
+    $(this).closeOnSuccess("modal")
+
+  $('body').on 'click', '._close-on-success', (event) ->
+    $(this).closeOnSuccess()
+
+  $('body').on 'click', '._update-origin', (event) ->
+    $(this).closest('.slotter').data("slotter-mode", "update-origin")
+
+  $('body').on 'submit', 'form.slotter', (event)->
+    form = $(this)
+    if form.data("main-success") and form.isMainOrMainModal()
+      form.mainSuccess()
+    if form.data('recaptcha') == 'on'
+      return form.handleRecaptchaBeforeSubmit(event)
+
+  $('body').on 'ajax:beforeSend', '.slotter', (event, xhr, opt)->
+    $(this).slotterBeforeSend opt
+
+jQuery.fn.extend
+  mainSuccess: ()->
+    form = $(this)
+    $.each form.data("main-success"), (key, value)->
+      inputSelector = "[name=success\\[" + key + "\\]]"
+      input = form.find inputSelector
+      unless input[0]
+        input = $('<input type="hidden" name="success[' + key + ']"/>')
+        form.append input
+      input.val value
+
+  slotterSuccess: (event, responseData) ->
+    debugger
+    unless @hasClass("slotter")
+      console.log "warning: slotterSuccess called on non-slotter element #{this}"
+      return
+
+    return if event.slotSuccessful
+
+    @showSuccessResponse responseData, @data("slotter-mode")
+
+    if @hasClass "_close-overlay"
+      @removeOverlay()
+    if @hasClass "_close-modal"
+      @closest('.modal').modal('hide')
+
+    # should scroll to top after clicking on new page
+    if @hasClass "card-paging-link"
+      slot_top_pos = @slot().offset().top
+      $("body").scrollTop slot_top_pos
+    if @data("update-foreign-slot")
+      $slot = @findSlot @data("update-foreign-slot")
+      reload_url = @data("update-foreign-slot-url")
+      $slot.reloadSlot reload_url
+
+    if @data('original-slotter-mode')
+      @attr 'data-slotter-mode', @data('original-slotter-mode')
+    if @data('original-slot-selector')
+      @attr 'data-slot-selector', @data('original-slot-selector')
+
+    event.slotSuccessful = true
+
+  showSuccessResponse: (responseData, mode) ->
+    if responseData.redirect
+      window.location = responseData.redirect
+    else if responseData.reload
+      window.location.reload(true)
+    else
+      switch mode
+        when "silent-success" then return
+        when "update-modal-origin" then @updateModalOrigin()
+        when "update-origin" then @updateOrigin()
+        else @updateSlot responseData, mode
+
+  showErrorResponse: (status, result) ->
+    if status == 403 #permission denied
+      $(result).showAsModal $(this)
+    else if status == 900
+      $(result).showAsModal $(this)
+    else
+      @notify result, "error"
+
+      if status == 409 #edit conflict
+        @slot().find('.current_revision_id').val(
+          @slot().find('.new-current-revision-id').text()
+        )
+
+  updateModalOrigin: () ->
+    if @overlaySlot()
+      overlayOrigin = @findOriginSlot("overlay")
+      overlayOrigin.updateOrigin()
+    else if @closest("#modal-container")[0]
+      @updateOrigin()
+
+  updateOrigin: () ->
+    type = if @overlaySlot()
+      "overlay"
+    else if @closest("#modal-container")[0]
+      "modal"
+
+    return unless type?
+
+    origin = @findOriginSlot(type)
+    if origin && origin[0]?
+      origin.reloadSlot()
+
+  registerAsOrigin: (type, slot) ->
+    if slot.hasClass("_modal-slot")
+      slot = slot.find(".modal-body")  # put the origin slot id on the modal-body instead
+                                        # of on the slot, so that it survives slot reloads
+    slot.attr("data-#{type}-origin-slot-id", @closest(".card-slot").data("slot-id"))
+
+  updateSlot: (newContent, mode) ->
+    mode ||= "replace"
+    @setSlotContent newContent, mode, $(this)
+
+  # close modal or overlay
+  closeOnSuccess: (type) ->
+    slotter = @closest('.slotter')
+    if !type?
+      type = if @isInOverlay() then "overlay" else "modal"
+    slotter.addClass "_close-#{type}"
+
+  slotterBeforeSend: (opt) ->
+    return if opt.skip_before_send
+
+    # avoiding duplication. could be better test?
+    unless (opt.url.match(/home_view/) or @data("slotter-mode") == "modal")
+      opt.url = decko.slotPath opt.url, @slot()
+
+    if @is('form')
+      if data = @data 'file-data'
+# NOTE - this entire solution is temporary.
+        @uploadWithBlueimp(data, opt)
+        false
+
+  uploadWithBlueimp: (data, opt) ->
+    input = @find '.file-upload'
+    if input[1]
+      @notify(
+        "Decko does not yet support multiple files in a single form.",
+        "error"
+      )
+      return false
+
+    widget = input.data 'wblueimpFileupload' #jQuery UI widget
+
+    # browsers that can't do ajax uploads use iframe
+    unless widget._isXHRUpload(widget.options)
+      # can't do normal redirects.
+      @find('[name=success]').val('_self')
+      # iframe response not passed back;
+      # all responses treated as success.  boo
+      opt.url += '&simulate_xhr=true'
+      # iframe is not xhr request,
+      # so would otherwise get full response with layout
+      iframeUploadFilter = (data)-> data.find('body').html()
+      opt.dataFilter = iframeUploadFilter
+    # gets rid of default html and body tags
+
+    args = $.extend opt, (widget._getAJAXSettings data), url: opt.url
+    # combines settings from decko's slotter and jQuery UI's upload widget
+    args.skip_before_send = true #avoid looping through this method again
+
+    $.ajax( args )
+
+  handleRecaptchaBeforeSubmit: (event) ->
+    recaptcha = @find("input._recaptcha-token")
+
+    if !recaptcha[0]?
+      # monkey error (bad form)
+      recaptcha.val "recaptcha-token-field-missing"
+    else if recaptcha.hasClass "_token-updated"
+      # recaptcha token is fine - continue submitting
+      recaptcha.removeClass "_token-updated"
+    else if !grecaptcha?
+      # shark error (probably recaptcha keys of pre v3 version)
+      recaptcha.val "grecaptcha-undefined"
+    else
+      @updateRecaptchaToken(event)
+      # this stops the submit here
+      # and submits again when the token is ready
+

data/assets/script/decko/type_editor.js.coffee

@@ -0,0 +1,21 @@
+$(window).ready ->
+  $('body').on  "change", '._live-type-field', ->
+    $this = $(this)
+
+    setSlotMode($this)
+    debugger
+    $this.data 'params', $this.closest('form').serialize()
+    $this.data 'url', $this.attr 'href'
+
+  $('body').on 'change', '.edit-type-field', ->
+    $(this).closest('form').submit()
+
+setSlotMode = ($el, mode=null) ->
+  $slotter =  $el.closest(".slotter")
+  if $slotter.length
+    if $slotter.attr('data-slotter-mode')
+      $slotter.attr 'data-original-slotter-mode', $slotter.attr('data-slotter-mode')
+      $slotter.attr 'data-slotter-mode', mode
+    if $slotter.attr('data-slot-selector')
+      $slotter.attr 'data-original-slot-selector', $slotter.attr('data-slot-selector')
+      $slotter.removeAttr 'data-slot-selector'

data/assets/script/decko/upload.js.coffee

@@ -0,0 +1,64 @@
+$.extend decko,
+  upload_file: (fileupload) ->
+    # for file as a subcard in a form,
+    # excess parameters are included in the request which cause errors.
+    # only the file, type_id and attachment_card_name are needed
+    # attachment_card_name is the original card name,
+    # ex: card[subcards][+logo][image], card[file]
+    $(fileupload).on 'fileuploadsubmit', (e,data) ->
+      $_this = $(this)
+      card_name = $_this.siblings(".attachment_card_name:first").attr("name")
+      type_id = $_this.siblings("#attachment_type_id").val()
+      data.formData = {
+        "card[type_id]": type_id,
+        "attachment_upload": card_name
+      }
+    $_fileupload = $(fileupload)
+    if $_fileupload.closest("form").attr("action").indexOf("update") > -1
+      url = "card/update/"+$(fileupload).siblings("#file_card_name").val()
+    else
+      url = "card/create"
+    $(fileupload).fileupload(
+      url: decko.path(url),
+      dataType: 'html',
+      done: decko.doneFile,
+      add: decko.chooseFile,
+      progressall: decko.progressallFile
+    )#, forceIframeTransport: true )
+
+  chooseFile: (e, data) ->
+    data.form.find('button[type=submit]').attr('disabled',true)
+    editor = $(this).closest '.card-editor'
+    $('#progress').show()
+    editor.append '<input type="hidden" class="extra_upload_param" ' +
+                  'value="true" name="attachment_upload">'
+    editor.append '<input type="hidden" class="extra_upload_param" ' +
+                  'value="preview_editor" name="view">'
+    data.submit()
+    editor.find('.choose-file').hide()
+    # editor.find(".file-upload").prop "disabled", true
+    editor.find('.extra_upload_param').remove()
+
+  progressallFile: (e, data) ->
+    progress = parseInt(data.loaded / data.total * 100, 10)
+    $('#progress .progress-bar').css('width', progress + '%')
+
+  doneFile: (e, data) ->
+    editor = $(this).closest '.card-editor'
+    editor.find('.chosen-file').replaceWith data.result
+    data.form.find('button[type=submit]').attr('disabled',false)
+
+$(window).ready ->
+  $('body').on 'click', '.cancel-upload', ->
+    editor = $(this).closest '.card-editor'
+    editor.find('.choose-file').show()
+    # editor.find(".file-upload").prop "disabled", false
+    editor.find('.chosen-file').empty()
+    editor.find('.progress').show()
+    editor.find('#progress .progress-bar').css('width', '0%')
+    editor.find('#progress').hide()
+
+  $('body').on "submit", "form", ->
+    uploader = $(this).find ".file-upload[type=file]"
+    if uploader[0]
+      uploader.prop "disabled", true