Croucherdigital 119

.gitignore

@@ -9,4 +9,5 @@ spec/dummy/tmp/
 /spec/dummy/public/system/*
 /spec/dummy/webdav/*
 
-/.idea/
+/.idea/
+.ruby-version

app/assets/javascripts/droom.js.coffee

@@ -8,6 +8,7 @@
 #= require sortablejs/Sortable
 #= require jquery.cookie/jquery.cookie
 #= require ep-jquery-tokeninput/src/jquery.tokeninput
+#= require imagesloaded/imagesloaded.pkgd
 
 #= require droom/lib/jquery.datepicker
 #= require droom/lib/jquery.animate-colors
@@ -67,8 +68,10 @@ jQuery ($) ->
     @find_including_self('[data-action="toggle"]').toggle()
     @find_including_self('[data-action="alternate"]').alternator()
     @find_including_self('[data-action="replace"]').replace_with_remote_content()
+    @find_including_self('[data-action="update_content"]').update_main_content()
     @find_including_self('[data-action="autofetch"]').replace_with_remote_content ".holder", {force: true}
     @find_including_self('[data-action="slide"]').sliding_link()
+    @find_including_self('[data-action="proxy"]').click_proxy()
     @find_including_self('[data-action="fit"]').self_sizes()
     @find_including_self('form[data-action="filter"]').filter_form()
     @find_including_self('form[data-action="quick_search"]').quick_search_form()
@@ -116,8 +119,11 @@ jQuery ($) ->
     @find_including_self('.sortable_files').sortable_files()
     @find_including_self('[data-draggable]').draggable()
     @find_including_self('.gridbox:not(.notice)').gridBox()
-    @find_including_self('.notice').notice()
     @find_including_self('.tagger').tagger()
     @find_including_self('form.search.quick').quick_search_form()
 
+    @find_including_self('#noticeboard').imagesLoaded =>
+      console.log "imagesLoaded ", @
+      $('.notice').notice()
+
     @

app/assets/javascripts/droom/actions.js.coffee

@@ -4,18 +4,18 @@
 # The basic approach here is PJAX: our remote calls always return chunks of html. There are no client-side templates
 # or model classes. Instead we have defined a set of actions, by which page elements can interact with the server in
 # structured ways. A tag will declare that it triggers an action, and may also declare that the action will replace or
-# affect other elements. 
+# affect other elements.
 #
 # Many elements are refreshable, and an action that affects them will trigger their refreshment. Editing an event is
 # a simple remote form operation with several consequences for the page:
 #
 #   link_to t(:edit_event), edit_event_url(event), :class => 'edit minimal', :data => {
-#      :action => "popup", 
-#      :replaced => "#event_#{event.id}", 
+#      :action => "popup",
+#      :replaced => "#event_#{event.id}",
 #      :affected => ".minimonth"
 #   }
 #
-# When the `popup` action is complete - that is, the server returns a response with no form in it - the final response 
+# When the `popup` action is complete - that is, the server returns a response with no form in it - the final response
 # will replace the original event container and the small calendar display will be refreshed to show the possibly revised
 # date of the event.
 #
@@ -50,7 +50,7 @@ jQuery ($) ->
 
       if @_url
         @_container.addClass('working')
-        params = 
+        params =
           dataType: "html"
           beforeSend: @prep
           success: @replace
@@ -87,7 +87,7 @@ jQuery ($) ->
   # attribute. The delete link next to an event, for example:
   #
   #   link_to t(:remove), event_url(event), :method => 'delete', :data => {
-  #     :confirm => t(:confirm_delete_event, :name => event.name), 
+  #     :confirm => t(:confirm_delete_event, :name => event.name),
   #     :removes => ".holder",
   #     :affected => ".minimonth"}
   #
@@ -99,9 +99,13 @@ jQuery ($) ->
       affected = $(@).attr('data-affected')
       $(@).remote
         on_success: (response) =>
-          $(@).parents(removed).first().fadeOut 'fast', () ->
-            $(@).remove()
-            $(affected).trigger "refresh"
+          if $(@).parents('.menu').first().length == 1
+            $(@).parents('.menu').first().fadeOut 'fast', () ->
+            $(removed).remove()
+          else
+            $(@).parents(removed).first().fadeOut 'fast', () ->
+              $(@).remove()
+              $(affected).trigger "refresh"
 
 
   # The 'remove_all' action takes out on success anything matching the given selector:
@@ -114,7 +118,7 @@ jQuery ($) ->
     @each ->
       removed = $(@).attr('data-removed')
       affected = $(@).attr('data-affected')
-      
+
       $(@).remote
         on_success: (response) =>
           $(removed).fadeOut 'fast', () ->
@@ -156,6 +160,9 @@ jQuery ($) ->
           response ?= e
           replaced = if container is "self" then $el else $el.self_or_ancestor(container).last()
           replacement = $(response).insertAfter(replaced)
+          console.log 'response', response
+          console.log 'replaced', replaced
+          console.log 'replacement', replacement
           replaced?.remove()
           replacement.activate()
           replacement.hide().slideDown() if options.slide
@@ -166,6 +173,24 @@ jQuery ($) ->
         $.rails.handleRemote($el)
 
 
+  # *update_main_content* is used in services page, action from popup and effected on main content
+  $.fn.update_main_content = (selector, opts) ->
+    selector ?= '.holder'
+    options = $.extend { force: false, confirm: false, slide: false, pjax: true, credentials: false }, opts
+    @each ->
+      $el = $(@)
+      container = selector
+      $el.remote
+        credentials: options.credentials
+        pjax: options.pjax
+        on_success: (e, response) =>
+          response ?= e
+          className = $(response).attr "class"
+          id = $(response).attr "id"
+          @_selector = $("[data-menu=\"#{id}\"]")
+          $(@_selector).removeClass().addClass(className)
+          $(".menu").hide()
+
 
   # The reinviter is an ordinary remote link.
   #
@@ -258,7 +283,7 @@ jQuery ($) ->
   $.fn.setter = () ->
     @each ->
       new Setter(@)
-  
+
   class Setter
     constructor: (element, @_root, @_property) ->
       @_link = $(element)
@@ -273,7 +298,7 @@ jQuery ($) ->
       data = {}
       value = if @_link.hasClass('yes') then @_negative else @_positive
       data[@_root] = {}
-      data[@_root][@_property] = value 
+      data[@_root][@_property] = value
       data['_method'] = "PUT"
       data
 
@@ -328,7 +353,7 @@ jQuery ($) ->
       else
         @_showing = $(@_selector).is(":visible")
         @store()
-      
+
     apply: (e) =>
       e.preventDefault() if e
       if @_showing then @show() else @hide()
@@ -349,19 +374,19 @@ jQuery ($) ->
       @_container.text(@_showing_text)
       @_showing = true
       @store()
-    
+
     slideUp: =>
       $(@_selector).slideUp () =>
         @hide()
         @_container.trigger('toggled')
-      
+
     hide: =>
       $(@_selector).hide()
       @_container.removeClass('showing')
       @_container.text(@_hiding_text)
       @_showing = false
       @store()
-      
+
     store: () =>
       if @_remembered
         value = if @_showing then "showing" else "hidden"
@@ -390,18 +415,18 @@ jQuery ($) ->
       @preview = @container.find(@options.preview)
       @switch.click @toggle
       @set()
-      
+
     set: () =>
       if @container.hasClass("open") then @show() else @hide()
-      
+
     toggle: (e) =>
       e.preventDefault() if e
       if @container.hasClass("open") then @hide() else @show()
 
     hide: () =>
       @container.removeClass('open')
       @preview.show().css('position', 'relative')
-      @body.stop().slideUp 
+      @body.stop().slideUp
         duration: 'slow'
         easing: 'glide'
         complete: =>
@@ -448,7 +473,7 @@ jQuery ($) ->
 
 
 
-  # The *alternator* action is a more extreme toggle. It allows an element to declare its alternate: 
+  # The *alternator* action is a more extreme toggle. It allows an element to declare its alternate:
   # when a link within the element is clicked, it will be removed from the DOM and its alternate
   # inserted. Usually the relation is reciprocal, so that another link in the alternate will bring
   # the original element back.
@@ -468,13 +493,13 @@ jQuery ($) ->
       @_container.after(@_alternate)
       @_container.remove()
       @_alternate.find('a').click @revert
-      
+
     revert: (e) =>
       e.preventDefault() if e
       @_alternate.before(@_container)
       @_alternate.remove()
       @_container.find('a').click @flip
-      
+
   $.fn.alternator = ->
     @each ->
       new Alternator(@)
@@ -484,7 +509,7 @@ jQuery ($) ->
   $.fn.hover_table = ->
     @each ->
       $(@).find('td').hover_cell()
-    
+
   $.fn.hover_cell = ->
     @each ->
       classes = @className.split(' ').join('.')
@@ -554,14 +579,14 @@ jQuery ($) ->
         @_defilter.show()
       else
         @_defilter.hide()
-      
+
     setQuery: (e) =>
       kc = e.which
       #   delete,     backspace,    alphanumerics,    number pad,        punctuation
       if (kc is 8) or (kc is 46) or (47 < kc < 91) or (96 < kc < 112) or (kc > 145)
         @setDefilter()
         @filter()
-        
+
     clearQuery: (e) =>
       e.preventDefault() if e
       @_container.val("")
@@ -576,7 +601,7 @@ jQuery ($) ->
 
 
   # A text input that sizes to fit will adjust its font size to suit the length of its content.
-  # At the moment this is done just by fitting a curve, but it ought really to be based on a 
+  # At the moment this is done just by fitting a curve, but it ought really to be based on a
   # calculation of area occupied.
 
   $.size_to_fit = (e) ->
@@ -587,10 +612,10 @@ jQuery ($) ->
       'font-size': "#{size}em"
       width: 532
       height: 290
-    , 
+    ,
       queue: false
       duration: 100
-        
+
   $.fn.self_sizes = () ->
     @each ->
       $(@).bind "keyup", $.size_to_fit

app/assets/javascripts/droom/ajax.js.coffee

@@ -58,6 +58,8 @@ jQuery ($) ->
       @_control.trigger "remote:progress", prog
 
     fail: (event, xhr, status) =>
+      if xhr.status == 401
+        window.location.reload()
       event.stopPropagation()
       @_control.removeClass('waiting').addClass('erratic')
       @_control.find('input[type=submit]').removeClass('waiting')

app/assets/javascripts/droom/editors.js.coffee

@@ -25,27 +25,45 @@ jQuery ($) ->
         allowMultiParagraphSelection: true
         buttons: [
           name: 'bold'
-          contentDefault: '<svg><use xlink:href="#bold_button"></use></svg>'
+          contentDefault: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-bold" viewBox="0 0 16 16">
+            <path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/>
+          </svg>'
         ,
           name: 'italic'
-          contentDefault: '<svg><use xlink:href="#italic_button"></use></svg>'
+          contentDefault: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-italic" viewBox="0 0 16 16">
+            <path d="M7.991 11.674 9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"/>
+          </svg>'
         ,
           name: 'anchor'
-          contentDefault: '<svg><use xlink:href="#anchor_button"></use></svg>'
+          contentDefault: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
+            <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
+            <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
+          </svg>'
         ,
           name: 'orderedlist'
-          contentDefault: '<svg><use xlink:href="#ol_button"></use></svg>'
+          contentDefault: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-ol" viewBox="0 0 16 16">
+            <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5z"/>
+            <path d="M1.713 11.865v-.474H2c.217 0 .363-.137.363-.317 0-.185-.158-.31-.361-.31-.223 0-.367.152-.373.31h-.59c.016-.467.373-.787.986-.787.588-.002.954.291.957.703a.595.595 0 0 1-.492.594v.033a.615.615 0 0 1 .569.631c.003.533-.502.8-1.051.8-.656 0-1-.37-1.008-.794h.582c.008.178.186.306.422.309.254 0 .424-.145.422-.35-.002-.195-.155-.348-.414-.348h-.3zm-.004-4.699h-.604v-.035c0-.408.295-.844.958-.844.583 0 .96.326.96.756 0 .389-.257.617-.476.848l-.537.572v.03h1.054V9H1.143v-.395l.957-.99c.138-.142.293-.304.293-.508 0-.18-.147-.32-.342-.32a.33.33 0 0 0-.342.338v.041zM2.564 5h-.635V2.924h-.031l-.598.42v-.567l.629-.443h.635V5z"/>
+          </svg>'
         ,
           name: 'unorderedlist'
-          contentDefault: '<svg><use xlink:href="#ul_button"></use></svg>'
+          contentDefault: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-ul" viewBox="0 0 16 16">
+            <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
+          </svg>'
         ,
           name: 'h2'
-          contentDefault: '<svg><use xlink:href="#h1_button"></use></svg>'
+          contentDefault: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h2" viewBox="0 0 16 16">
+            <path d="M7.638 13V3.669H6.38V7.62H1.759V3.67H.5V13h1.258V8.728h4.62V13h1.259zm3.022-6.733v-.048c0-.889.63-1.668 1.716-1.668.957 0 1.675.608 1.675 1.572 0 .855-.554 1.504-1.067 2.085l-3.513 3.999V13H15.5v-1.094h-4.245v-.075l2.481-2.844c.875-.998 1.586-1.784 1.586-2.953 0-1.463-1.155-2.556-2.919-2.556-1.941 0-2.966 1.326-2.966 2.74v.049h1.223z"/>
+          </svg>'
         ,
           name: 'h3'
-          contentDefault: '<svg><use xlink:href="#h2_button"></use></svg>'
+          contentDefault: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h3" viewBox="0 0 16 16">
+            <path d="M7.637 13V3.669H6.379V7.62H1.758V3.67H.5V13h1.258V8.728h4.62V13h1.259zm3.625-4.272h1.018c1.142 0 1.935.67 1.949 1.674.013 1.005-.78 1.737-2.01 1.73-1.08-.007-1.853-.588-1.935-1.32H9.108c.069 1.327 1.224 2.386 3.083 2.386 1.935 0 3.343-1.155 3.309-2.789-.027-1.51-1.251-2.16-2.037-2.249v-.068c.704-.123 1.764-.91 1.723-2.229-.035-1.353-1.176-2.4-2.954-2.385-1.873.006-2.857 1.162-2.898 2.358h1.196c.062-.69.711-1.299 1.696-1.299.998 0 1.695.622 1.695 1.525.007.922-.718 1.592-1.695 1.592h-.964v1.074z"/>
+          </svg>'
         ,
           name: 'removeFormat'
-          contentDefault: '<svg><use xlink:href="#clear_button"></use></svg>'
+          contentDefault: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
+            <path fill-rule="evenodd" d="M13.854 2.146a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708-.708l11-11a.5.5 0 0 1 .708 0Z"/>
+            <path fill-rule="evenodd" d="M2.146 2.146a.5.5 0 0 0 0 .708l11 11a.5.5 0 0 0 .708-.708l-11-11a.5.5 0 0 0-.708 0Z"/>
+          </svg>'
         ]
-

app/assets/javascripts/droom/grid.js.coffee

@@ -5,12 +5,19 @@ $.fn.autoGrid = ->
 $.fn.gridBox = ->
   @each ->
     $el = $(@)
-    contents = $el.find('.content')
     row = 20
     space = 20
-    rows_touched = Math.ceil(contents.outerHeight() / (row + space))
-    $el.css "grid-row-end", "span #{rows_touched}"
-    $el.addClass('ready')
+    sizer = ->
+      contents = $el.find('.content')
+      console.log "sizer!", contents, contents.outerHeight()
+      rows_touched = Math.ceil(contents.outerHeight() / (row + space)) + 2
+      $el.css "grid-row-end", "span #{rows_touched}"
+      $el.addClass('ready')
+    sizer()
+    $el.find('img').on 'load', =>
+      console.log "resizer!"
+      sizer()
+
 
 $.fn.highlight = ->
   if @offset()

app/assets/javascripts/droom/lib/assets.js.coffee.erb

@@ -1,5 +1,7 @@
 jQuery ($) ->
 
   $.withZxcbvn = (fn) ->
-    url = "<%= URI.join(Settings.url, asset_path('droom/zxcvbn.js')) %>"
-    $.getScript(url).done (response) => fn?(response)
+    based_url = 'https://data.croucher.org.hk/'
+    asset_path = based_url + "<%=asset_path('droom/zxcvbn.js')%>"
+
+    $.getScript(asset_path).done (response) => fn?(response)