basic lightbox support

SamSaffron · SamSaffron · commit d9531d94d56e · 2013-02-19T17:57:14.000+11:00
diff --git a/app/assets/images/border1.png b/app/assets/images/border1.png
diff --git a/app/assets/images/border2.png b/app/assets/images/border2.png
diff --git a/app/assets/images/loading.gif b/app/assets/images/loading.gif
diff --git a/app/assets/javascripts/discourse.js.coffee b/app/assets/javascripts/discourse.js.coffee
@@ -134,6 +134,7 @@ window.Discourse = Ember.Application.createWithMixins
       return if href is '#'
       return if $currentTarget.attr('target')
       return if $currentTarget.data('auto-route')
+      return if $currentTarget.hasClass('lightbox')
       return if href.indexOf("mailto:") is 0
 
       if href.match(/^http[s]?:\/\//i) && !href.match new RegExp("^http:\\/\\/" + window.location.hostname,"i")
diff --git a/app/assets/javascripts/discourse/components/click_track.js.coffee b/app/assets/javascripts/discourse/components/click_track.js.coffee
@@ -6,6 +6,8 @@ window.Discourse.ClickTrack =
 
     $a = $(e.currentTarget)
 
+    return if $a.hasClass('lightbox')
+
     e.preventDefault()
 
     # We don't track clicks on quote back buttons
diff --git a/app/assets/javascripts/discourse/components/lightbox.js.coffee b/app/assets/javascripts/discourse/components/lightbox.js.coffee
@@ -0,0 +1,8 @@
+# Helper object for light boxes. Uses highlight.js which is loaded
+# on demand.
+window.Discourse.Lightbox =
+
+  apply: ($elem) ->
+    $('a.lightbox', $elem).each (i, e) =>
+      $LAB.script("/javascripts/jquery.colorbox-min.js").wait ->
+        $(e).colorbox()
diff --git a/app/assets/javascripts/discourse/views/post_view.js.coffee b/app/assets/javascripts/discourse/views/post_view.js.coffee
@@ -212,6 +212,7 @@ window.Discourse.PostView = Ember.View.extend
 
     # Add syntax highlighting
     Discourse.SyntaxHighlighting.apply($post)
+    Discourse.Lightbox.apply($post)
 
     # If we're scrolling upwards, adjust the scroll position accordingly
     if scrollTo = @get('post.scrollTo')
diff --git a/app/assets/stylesheets/application/lightbox.scss b/app/assets/stylesheets/application/lightbox.scss
@@ -0,0 +1,50 @@
+/*
+    ColorBox Core Style:
+    The following CSS is consistent between example themes and should not be altered.
+*/
+#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
+#cboxOverlay{position:fixed; width:100%; height:100%;}
+#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
+#cboxContent{position:relative;}
+#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
+#cboxTitle{margin:0;}
+#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
+#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
+.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
+.cboxIframe{width:100%; height:100%; display:block; border:0;}
+#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
+
+/* 
+    User Style:
+    Change the following styles to modify the appearance of ColorBox.  They are
+    ordered & tabbed in a way that represents the nesting of the generated HTML.
+*/
+#cboxOverlay{background:#fff;}
+#colorbox{outline:0;}
+    #cboxTopLeft{width:25px; height:25px; background:image-url("images/border1.png") no-repeat 0 0;}
+    #cboxTopCenter{height:25px; background:image-url("images/border1.png") repeat-x 0 -50px;}
+    #cboxTopRight{width:25px; height:25px; background:image-url("images/border1.png") no-repeat -25px 0;}
+    #cboxBottomLeft{width:25px; height:25px; background:image-url("images/border1.png") no-repeat 0 -25px;}
+    #cboxBottomCenter{height:25px; background:image-url("images/border1.png") repeat-x 0 -75px;}
+    #cboxBottomRight{width:25px; height:25px; background:image-url("images/border1.png") no-repeat -25px -25px;}
+    #cboxMiddleLeft{width:25px; background:image-url("images/border2.png") repeat-y 0 0;}
+    #cboxMiddleRight{width:25px; background:image-url("images/border2.png") repeat-y -25px 0;}
+    #cboxContent{background:#fff; overflow:hidden;}
+        .cboxIframe{background:#fff;}
+        #cboxError{padding:50px; border:1px solid #ccc;}
+        #cboxLoadedContent{margin-bottom:20px;}
+        #cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#999;}
+        #cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;}
+        #cboxLoadingOverlay{background:#fff image-url("images/loading.gif") no-repeat 5px 5px;}
+
+        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
+        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
+        
+        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
+        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
+
+        #cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
+        #cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;}
+        #cboxNext{position:absolute; bottom:0px; left:63px; color:#444;}
+        #cboxClose{position:absolute; bottom:0; right:0; display:block; color:#444;}
+
diff --git a/app/models/post.rb b/app/models/post.rb
@@ -14,12 +14,10 @@ module HiddenReason
     FLAG_THRESHOLD_REACHED_AGAIN = 2
   end
 
-
   versioned
-
   rate_limit
-
   acts_as_paranoid
+
   after_recover :update_flagged_posts_count
   after_destroy :update_flagged_posts_count
 
diff --git a/app/models/site_customization.rb b/app/models/site_customization.rb
@@ -107,7 +107,7 @@ def self.lookup_style(key)
 
     @lock.synchronize do
       style = self.where(key: key).first
-      style.ensure_stylesheet_on_disk!
+      style.ensure_stylesheet_on_disk! if style
       @cache[key] = style
     end
   end
diff --git a/app/models/site_setting.rb b/app/models/site_setting.rb
@@ -81,7 +81,7 @@ class SiteSetting < ActiveRecord::Base
   setting(:max_flags_per_day, 20)
   setting(:max_edits_per_day, 30)
   setting(:max_favorites_per_day, 20)
-
+  setting(:auto_link_images_wider_than, 50)
 
   setting(:email_time_window_mins, 5)
 
diff --git a/config/locales/server.en.yml b/config/locales/server.en.yml
@@ -338,6 +338,8 @@ en:
     basic_requires_read_posts: "How many posts a user needs to have read to be promoted to basic level"
     basic_requires_time_spent_mins: "How many mins a user needs to have spent reading posts to be promoted to basic level"
 
+    auto_link_images_wider_than: "How wide does an image need to be, to be considered for auto link and lightbox treatment"
+
     email_time_window_mins: "How many minutes we wait before sending a user mail, to give them a chance to see it first."
     flush_timings_secs: "How frequently we flush timing data to the server, in seconds."
 
diff --git a/lib/cooked_post_processor.rb b/lib/cooked_post_processor.rb
@@ -5,11 +5,13 @@
 
 class CookedPostProcessor
 
+
   def initialize(post, opts={})
     @dirty = false
     @opts = opts
     @post = post
     @doc = Nokogiri::HTML(post.cooked)
+    @size_cache = {}
   end
 
   def dirty?
@@ -33,42 +35,82 @@ def post_process_oneboxes
   # First let's consider the images       
   def post_process_images    
     images = @doc.search("img")
-    if images.present?
+    return unless images.present? 
 
-      # Extract the first image from the first post and use it as the 'topic image'
-      if @post.post_number == 1
-        img = images.first
-        @post.topic.update_column :image_url, img['src'] if img['src'].present?
-      end
+    # Extract the first image from the first post and use it as the 'topic image'
+    if @post.post_number == 1
+      img = images.first
+      @post.topic.update_column :image_url, img['src'] if img['src'].present?
+    end
+
+    images.each do |img|
+      src = img['src']
+      src = Discourse.base_url + src if src[0] == "/"
 
-      images.each do |img|
-        if img['src'].present?
-
-          # If we provided some image sizes, look those up first
-          if @opts[:image_sizes].present?
-            if dim = @opts[:image_sizes][img['src']]
-              w, h = ImageSizer.resize(dim['width'], dim['height'])
-              img.set_attribute 'width', w.to_s
-              img.set_attribute 'height', h.to_s
-              @dirty = true
-            end
-          end
-
-          # If the image has no width or height, figure them out.
-          if img['width'].blank? or img['height'].blank?               
-            dim = CookedPostProcessor.image_dimensions(img['src'])
-            if dim.present?
-              img.set_attribute 'width', dim[0].to_s
-              img.set_attribute 'height', dim[1].to_s
-              @dirty = true
-            end
-          end
+      if src.present? && (img['width'].blank? || img['height'].blank?)
 
+        w,h = 
+          get_size_from_image_sizes(src, @opts[:image_sizes]) || 
+          image_dimensions(src)
+
+        if w && h
+          img['width'] = w.to_s
+          img['height'] = h.to_s
+          @dirty = true
+        end
+      end
+      
+      if src.present? 
+        if src != img['src']
+          img['src'] = src
+          @dirty = true
         end
+        convert_to_link!(img) 
+        img.set_attribute('src', optimize_image(src))
       end
-    end      
+
+    end
+  end
+
+  def optimize_image(src)
+    src
+  end
+
+  def convert_to_link!(img)
+    src = img["src"]
+    width = img["width"].to_i
+    height = img["height"].to_i
+
+    return unless src.present? && width > SiteSetting.auto_link_images_wider_than
+
+    original_width, original_height  = get_size(src)
+
+    return unless original_width.to_i > width && original_height.to_i > height
+
+    parent = img.parent
+    while parent
+      return if parent.name == "a"
+      break unless parent.respond_to? :parent
+      parent = parent.parent
+    end
+
+    # not a hyperlink so we can apply 
+    a = Nokogiri::XML::Node.new "a", @doc
+    img.add_next_sibling(a)
+    a["href"] = src
+    a["class"] = "lightbox"
+    a.add_child(img)
+    @dirty = true
+
   end
 
+  def get_size_from_image_sizes(src, image_sizes)
+    if image_sizes.present?
+      if dim = image_sizes[src]
+        ImageSizer.resize(dim['width'], dim['height'])
+      end
+    end
+  end
 
   def post_process
     return unless @doc.present?
@@ -80,14 +122,18 @@ def html
     @doc.try(:to_html)
   end
 
+  def get_size(url)
+    return nil unless SiteSetting.crawl_images? || url.start_with?(Discourse.base_url)
+    @size_cache[url] ||= FastImage.size(url)
+  end
+
   # Retrieve the image dimensions for a url
-  def self.image_dimensions(url)
-    return nil unless SiteSetting.crawl_images?
+  def image_dimensions(url)
     uri = URI.parse(url)
+    
     return nil unless %w(http https).include?(uri.scheme)
-    w, h = FastImage.size(url)
-
-    ImageSizer.resize(w, h)
+    w, h = get_size(url)
+    ImageSizer.resize(w, h) if w && h
   end
 
 end
diff --git a/public/javascripts/jquery.colorbox-min.js b/public/javascripts/jquery.colorbox-min.js
diff --git a/spec/components/cooked_post_processor_spec.rb b/spec/components/cooked_post_processor_spec.rb
