tenon 1.0.56 → 1.0.57

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 3d25f0289d0204d15f98fd5cdee6f4eb20c02d57
-  data.tar.gz: addc833b08b5718662d201b4eef53661f291cba8
+  metadata.gz: 2fa377e208a93cb3c4055726e4426d6c19071b95
+  data.tar.gz: 4a579c1c5d84967166901b55a7f4b99f64e6c7a2
 SHA512:
-  metadata.gz: e752b86e68bcb4f30a3b209f7fc48145f2eab331f0840db60b5ca6f137d850b4a06064a755bf123e01b2d209d2f92d6e707da23b2fb425250f730a50dc737e19
-  data.tar.gz: 84ea75bbfd4a959d4f3075a889508f4e52ef7958813cc1ebc66aad6c1f4b1636d996cc0c2dedcd0a7181f0cb5b313bb732a9a3970247695da9c521ca20d8e029
+  metadata.gz: e40afd867429f2e8022e558b10817730a56371cbb28fa678a86e07bca8c47f7ae474cabdbbbad876bd7868fd8f38a7637ce4c03baa3bc35164b1860bb9cfa9d7
+  data.tar.gz: 18ad631a0e525d60ee8397df3eacf4b5e9c936d85de9d59879a0f69b75d97332b1a49c1d8ce18eac0c9e0215af079df1495f3f86bda7b00ba77ae0492512fc03

data/app/assets/javascripts/tenon/features/tenon_content/column_sizing.js.coffee

@@ -28,7 +28,7 @@ class Tenon.features.tenonContent.ColumnSizing
       @_setSizes(word, newClass, siblingClass, newSiblingClass)
 
   _decreaseFrom: (word, num) =>
-    unless num <= 2
+    unless num <= 1
       siblingClass = @_numberToWord(@_words.length - num)
       newSiblingClass = @_numberToWord(@_words.length - num + 1)
       newClass = @_numberToWord(num - 1)

data/app/decorators/tenon/asset_decorator.rb

@@ -4,6 +4,10 @@ module Tenon
       h.asset_icon(object)
     end
 
+    def tile
+      h.asset_tile(object)
+    end
+
     def human_size
       h.number_to_human_size(object.attachment_file_size)
     end

data/app/helpers/tenon/asset_helper.rb

@@ -2,11 +2,11 @@ module Tenon
   module AssetHelper
     def asset_icon(asset)
       if asset.attachment.exists?(:thumbnail)
-        i = image_tag(asset.attachment.url(:thumbnail))
+        image = image_tag(asset.attachment.url(:thumbnail))
       else
-        i = image_tag(default_asset_thumbnail(asset))
+        image = image_tag(default_asset_thumbnail(asset))
       end
-      asset_icon_link(asset, i)
+      asset_icon_link(asset, image)
     end
 
     def asset_icon_link(asset, icon)
@@ -17,6 +17,23 @@ module Tenon
       end
     end
 
+    def asset_tile(asset)
+      if asset.attachment.exists?(:tile)
+        image = image_tag(asset.attachment.url(:tile))
+      else
+        image = image_tag(default_asset_thumbnail(asset))
+      end
+      asset_tile_link(asset, image)
+    end
+
+    def asset_tile_link(asset, icon)
+      if asset.is_image?
+        link_to(icon, [:crop, asset], crop_options(asset))
+      else
+        link_to(icon, asset.attachment.url, target: '_')
+      end
+    end
+
     def default_asset_thumbnail(asset)
       if asset && asset.attachment_content_type.match('video')
         'tenon/thumb-video.png'
@@ -26,22 +43,21 @@ module Tenon
     end
 
     private
-
-    def crop_options(asset)
-      {
-        class: 'asset-crop',
-        data: {
-          'asset-id' => asset.id,
-          'post-crop-handler' => 'Tenon.features.AssetListPostCropHandler'
+      def crop_options(asset)
+        {
+          class: 'asset-crop',
+          data: {
+            'asset-id' => asset.id,
+            'post-crop-handler' => 'Tenon.features.AssetListPostCropHandler'
+          }
         }
-      }
-    end
+      end
 
-    def default_options
-      {
-        'data-modal-remote' => true,
-        'data-modal-title' => 'Edit Asset'
-      }
+      def default_options
+        {
+          'data-modal-remote' => true,
+          'data-modal-title' => 'Edit Asset'
+        }
+      end
     end
-  end
 end

data/app/helpers/tenon/piece_helper.rb

@@ -0,0 +1,77 @@
+module Tenon
+  module PieceHelper
+    def piece_image_tag(piece, options = {})
+      responsive_image_tag(piece, options, Tenon.config.breakpoints.front_end)
+    end
+
+    def backend_piece_image_tag(piece, options = {})
+      responsive_image_tag(piece, options, Tenon.config.breakpoints.back_end)
+    end
+
+    private
+      # Returns the actual image_tag
+      def responsive_image_tag(piece, options = {}, breakpoints)
+        srcset = generate_srcset(piece)
+        sizes = generate_sizes(piece, breakpoints)
+        # Let's just use an plain image_tag if responsive styles haven't been
+        # generated. We'll test for :x2000 to determine if that's the case
+        if piece.image.attachment.exists?(computed_style(piece, 'x2000'))
+          image_tag(piece.image.url(default_style(piece, breakpoints)), options.merge(srcset: srcset, sizes: sizes))
+        else
+          image_tag(piece.image.url(:_medium), options)
+        end
+      end
+
+      # Figure out the default style based on the largest size at the largest
+      # breakpoint for browsers that don't support srcset. This is at least
+      # better than always serving the largest style (:x2000).
+      def default_style(piece, breakpoints)
+        sizes = breakpoints[:full]
+
+        # calculate the image size at :full breakpoint based on the piece width
+        image_size = (piece.sizes[piece_size(piece).to_sym] / 12 * content_size(sizes, piece)).to_i
+
+        # round up to nearest 200
+        image_size = image_size.round(-2)
+        image_size += 100 if (image_size / 100).odd?
+
+        default_style = computed_style(piece, "x#{image_size}").to_sym
+
+        piece.image.attachment.exists?(default_style) ? default_style : :_medium
+      end
+
+      # Iterate through the defined breakpoints and lookup the tenon_content
+      # sizes for the piece's row's item type. Use sizes[:default] width if
+      # item_type-specific tenon_content width not defined.
+      def generate_sizes(piece, breakpoints)
+        breakpoints.map do |name, sizes|
+          "(min-width: #{sizes[:browser]}px) #{(piece.sizes[piece_size(piece).to_sym] / 12 * 100 * content_size(sizes, piece) / sizes[:browser]).to_i}vw"
+        end.join(', ')
+      end
+
+      # Build the srcset values from the list of piece styles (2000px-200px)
+      def generate_srcset(piece)
+        piece.styles.map do |name, width|
+          if piece.image.attachment.exists?(computed_style(piece, name).to_sym)
+            "#{piece.image.attachment.url(computed_style(piece, name).to_sym)} #{width}w"
+          else
+            "#{piece.image.attachment.url(:original)} #{width}w"
+          end
+        end.join(', ')
+      end
+
+      # Handle 'twelve' pieces that have size set to '' in the db
+      def piece_size(piece)
+        piece_size = piece.size == '' ? 'twelve' : piece.size
+      end
+
+      def computed_style(piece, style)
+        computed_style = "#{piece.image.style_prefix}_#{style}"
+      end
+
+      # Return the width of tenon_content for this piece, or the :default size
+      def content_size(sizes, piece)
+        sizes[piece.row.item_type.demodulize.downcase.to_sym] || sizes[:default]
+      end
+  end
+end

data/app/helpers/tenon/tenon_content_helper.rb

@@ -28,18 +28,18 @@ module Tenon
 
     def tenon_content_sizes
       links = []
-      Tenon.config.front_end[:breakpoints].each do |name, size|
-        links << link_to(name.to_s.titleize, '#', class: 'btn btn-white', data: { size: size_for_breakpoint(size) })
+      Tenon.config.breakpoints.front_end.each do |name, widths|
+        links << link_to(name.to_s.titleize, '#', class: 'btn btn-white', data: { size: size_for_breakpoint(widths[:default]) })
       end
-      last = Tenon.config.front_end[:breakpoints].values.last
+      last = Tenon.config.breakpoints.front_end.values.last
       links << link_to('Mobile', '#', class: 'btn btn-white', data: { size: 320, mobile: true })
       links.join('').html_safe
     end
 
     def size_for_breakpoint(breakpoint)
-      content_cols = Tenon.config.front_end[:content_columns][:default]
-      gutter_width = Tenon.config.front_end[:gutter]
-      columns = Tenon.config.front_end[:columns]
+      content_cols = Tenon.config.grid.content_columns[:default]
+      gutter_width = Tenon.config.grid.gutter
+      columns = Tenon.config.grid.columns
       (((breakpoint + gutter_width) / columns.to_f) * content_cols) - gutter_width
     end
   end

data/app/models/tenon/asset.rb

@@ -1,6 +1,7 @@
 module Tenon
   class Asset < ActiveRecord::Base
     attr_accessor :crop_x, :crop_y, :crop_w, :crop_h, :duplicate
+
     # Scopes
     default_scope -> { order('created_at DESC').includes(:item_assets) }
 

data/app/models/tenon/photo.rb

@@ -1,7 +1,10 @@
 module Tenon
   class Photo < ActiveRecord::Base
     belongs_to :gallery, class_name: 'Gallery', foreign_key: 'gallery_id', inverse_of: :photos
-    has_asset :file, styles: { original: '800x800>', thumbnail: '300x300#' }
+    has_asset :file, styles: {
+      original: '800x800>',
+      thumbnail: '300x300#' # DEPRECATED
+    }
     default_scope { order(:list_order) }
   end
 end

data/app/models/tenon/tenon_content/piece.rb

@@ -2,9 +2,43 @@ module Tenon
   module TenonContent
     class Piece < ActiveRecord::Base
       self.table_name = 'tenon_tenon_content_pieces'
+      attr_reader :sizes, :styles
+
+      def sizes
+        # to translate between the stored piece size in words and a number for math
+        {
+          :one => 1.0,
+          :two => 2.0,
+          :three => 3.0,
+          :four => 4.0,
+          :five => 5.0,
+          :six => 6.0,
+          :seven => 7.0,
+          :eight => 8.0,
+          :nine => 9.0,
+          :ten => 10.0,
+          :eleven => 11.0,
+          :twelve => 12.0
+        }
+      end
+
+      def styles
+        Hash[(1..10).map{|n| ["x#{n*200}", (n*200).to_s]}]
+      end
 
       # Scopes, attachments, etc.
-      has_asset :image, styles: { wrap: '400', half: '600', full: '1400' }
+      has_asset :image, styles: {
+        x2000: '2000>',
+        x1800: '1800>',
+        x1600: '1600>',
+        x1400: '1400>',
+        x1200: '1200>',
+        x1000: '1000>',
+        x800: '800>',
+        x600: '600>',
+        x400: '400>',
+        x200: '200>'
+      }
 
       # Relationships
       belongs_to :row, class_name: '::Tenon::TenonContent::Row'

data/app/views/tenon/assets/_asset.json.jbuilder

@@ -1,5 +1,5 @@
 json.extract!(asset,
-  :id, :display_name, :icon, :to_param, :human_size,
+  :id, :display_name, :icon, :tile, :to_param, :human_size,
   :attachment_content_type, :edit_link, :delete_link,
   :crop_link, :download_link
 )

data/app/views/tenon/tenon_content/piece_types/display/_image.html.haml

@@ -1,9 +1,9 @@
 .tn-tc-image{class: piece.stretch_to_fill? ? 'stretch' : ''}
   - if piece.image.present?
     - if piece.link_url.blank?
-      = image_tag(piece.image.url(:_medium))
+      = piece_image_tag(piece)
     - else
-      = link_to image_tag(piece.image.url(:_medium)), piece.link_url, target: '_'
+      = link_to piece_image_tag(piece), piece.link_url, target: '_'
   - else
     = image_tag('tenon/thumb-doc.png')
 - if piece.show_caption

data/app/views/tenon/tenon_content/piece_types/form/_image.html.haml

@@ -4,7 +4,7 @@
 = f.hidden_field :stretch_to_fill
 .image{class: f.object.stretch_to_fill? ? 'stretch' : ''}
   - if f.object.image
-    = image_tag(f.object.image.url(:_medium))
+    = backend_piece_image_tag(f.object)
   - else
     = link_to(new_item_asset_path, class: 'add-image', data: {'modal-remote' => true, 'modal-title' => "Select Image", 'modal-handler' => 'Tenon.features.tenonContent.AssetAttachment'}) do
       %span Add Image

data/config/initializers/tenon.rb

@@ -2,21 +2,43 @@
 # by the site developer.  There is a Settings module built into Tenon
 # where you can expose other settings to your client.
 Tenon.configure do |config|
-  # Set up grid config for the front end.  This is done here so that we can
-  # present accurate sizing
-  config.front_end = {
-    breakpoints: {
-      desktop: 1400,
-      laptop: 960,
-      tablet: 768
-    },
-    columns: 24,
-    gutter: 20,
+  # Define all your breakpoints and associated tenon_content widths.
+  # This is necessary because you may have multiple models with tenon_content
+  # with different maximum widths and therefore different widths at various
+  # breakpoints. By getting more precise with these widths we can serve the
+  # most efficient responsive images to the front end.
+  # config.breakpoints.front_end = {
+  #   full: {
+  #     browser: 1920, # the width of the browser for this breakpoint
+  #     default: 1920, # default tenon_content width for piece's without specific widths
+  #     page: 1920, # the width of tenon_content for Pages
+  #     post: 1920 # the width of tenon_content for Posts
+  #   },
+  #   desktop: {
+  #     browser: 1400,
+  #     default: 1400,
+  #     page: 1400,
+  #     post: 1400
+  #   },
+  #   laptop: {
+  #     browser: 960,
+  #     default: 960,
+  #     page: 960,
+  #     post: 960
+  #   },
+  #   tablet: {
+  #     browser: 768,
+  #     default: 768,
+  #     page: 768,
+  #     post: 768
+  #   }
+  # }
 
-    content_columns: {
-      default: 18
-    }
-  }
+  # config.grid.columns = 24
+  # config.grid.gutter = 20
+  # config.grid.content_columns = {
+  #     default: 18
+  #   }
 
   # Set platform hints color(s)
   config.client_color = '#9c0f17'
@@ -47,4 +69,19 @@ Tenon.configure do |config|
 
   # If you need to add further config options you can add them
   # in lib/tenon.rb as attr_accessors to Tenon::Configuration
+
+  # config.front_end is DEPRECATED as of 1.0.57
+  config.front_end = {
+    breakpoints: {
+      desktop: 1400,
+      laptop: 960,
+      tablet: 768
+    },
+    columns: 24,
+    gutter: 20,
+
+    content_columns: {
+      default: 18
+    }
+  }
 end

data/lib/tasks/tenon_tasks.rake

@@ -1,4 +1,43 @@
-# desc "Explaining what the task does"
-# task :tenon do
-#   # Task goes here
-# end
+namespace :tenon do
+  desc "Generate Asset responsive styles"
+  task :generate_responsive_styles  => :environment do
+    styles = [
+      :tenon_tenon_content_piece_image_x2000,
+      :tenon_tenon_content_piece_image_x1800,
+      :tenon_tenon_content_piece_image_x1600,
+      :tenon_tenon_content_piece_image_x1400,
+      :tenon_tenon_content_piece_image_x1200,
+      :tenon_tenon_content_piece_image_x1000,
+      :tenon_tenon_content_piece_image_x800,
+      :tenon_tenon_content_piece_image_x600,
+      :tenon_tenon_content_piece_image_x400,
+      :tenon_tenon_content_piece_image_x200
+    ]
+
+    item_assets = Tenon::ItemAsset.where(item_type: 'Tenon::TenonContent::Piece').pluck(:asset_id).uniq
+
+    # only reprocess assets that are referenced by Pieces, and only do them once each even if they are referenced by multiple pieces
+    Tenon::Asset.find(item_assets).each_with_index do |asset, i|
+      print "(#{i+1}/#{item_assets.count}) #{asset.attachment_file_name} "
+      styles.each do |style|
+        asset.attachment.reprocess! style
+        print '.'
+        $stdout.flush
+      end
+      puts ''
+    end
+    puts 'Done!'
+  end
+
+  desc "Regenerate all Asset styles"
+  task :regenerate_asset_styles  => :environment do
+    total_assets = Tenon::Asset.all.count
+
+    Tenon::Asset.all.each_with_index do |asset, i|
+      puts "(#{i+1}/#{total_assets}) #{asset.attachment_file_name} "
+      asset.attachment.reprocess!
+    end
+    puts 'Done!'
+  end
+
+end

data/lib/tenon/asset_style_generator.rb

@@ -22,7 +22,8 @@ module Tenon
       {
         original: { processors: ['cropper'], geometry: '' },
         thumbnail: '200x200#',
-        medium: '1400>'
+        medium: '1400>', # DEPRECATED
+        tile: '350x350#',
       }
     end
 

data/lib/tenon/config/breakpoints.rb

@@ -0,0 +1,77 @@
+module Tenon
+  class Configuration
+    attr_accessor :breakpoints
+
+    def breakpoints
+      @breakpoints ||= BreakpointConfiguration.new
+    end
+
+    class BreakpointConfiguration
+      attr_accessor :front_end, :back_end, :grid
+
+      def initialize
+        # Define all your breakpoints and associated tenon_content widths.
+        # This is necessary because you may have multiple models with tenon_content
+        # with different maximum widths and therefore different widths at various
+        # breakpoints. By getting more precise with these widths we can serve the
+        # most efficient responsive images to the front end.
+        @front_end = {
+          full: {
+            browser: 1920, # the width of the browser for this breakpoint
+            default: 1920, # default tenon_content width for piece's without specific widths
+            page: 1920, # the width of tenon_content for Pages
+            post: 1920 # the width of tenon_content for Posts
+          },
+          desktop: {
+            browser: 1400,
+            default: 1400,
+            page: 1400,
+            post: 1400
+          },
+          laptop: {
+            browser: 960,
+            default: 960,
+            page: 960,
+            post: 960
+          },
+          tablet: {
+            browser: 768,
+            default: 768,
+            page: 768,
+            post: 768
+          }
+        }
+
+        # set up the back-end breakpoints and associated tenon_content widths since
+        # we know what they always are
+        @back_end = {
+          full: {
+            browser: 1920,
+            default: 1225
+          },
+          desktop: {
+            browser: 1400,
+            default: 740
+          },
+          laptop: {
+            browser: 960,
+            default: 680
+          },
+          tablet: {
+            browser: 768,
+            default: 750
+          }
+        }
+
+        @grid = {
+          columns: 24,
+          gutter: 20,
+
+          content_columns: {
+            default: 18
+          }
+        }
+      end
+    end
+  end
+end

data/lib/tenon/config/grid.rb

@@ -0,0 +1,21 @@
+module Tenon
+  class Configuration
+    attr_accessor :grid
+
+    def grid
+      @grid ||= GridConfiguration.new
+    end
+
+    class GridConfiguration
+      attr_accessor :columns, :gutter, :content_columns
+
+      def initialize
+        @columns = 24
+        @gutter = 20
+        @content_columns = {
+          default: 18
+        }
+      end
+    end
+  end
+end

data/lib/tenon/proxy_attachment.rb

@@ -1,6 +1,6 @@
 module Tenon
   class ProxyAttachment
-    attr_reader :attachment, :asset
+    attr_reader :attachment, :asset, :style_prefix
 
     def initialize(attachment, klass, asset_name)
       @attachment = attachment.try(:attachment) || attachment

data/lib/tenon/version.rb

@@ -1,3 +1,3 @@
 module Tenon
-  VERSION = '1.0.56'
+  VERSION = '1.0.57'
 end

data/lib/tenon.rb

@@ -1,5 +1,7 @@
 require 'tenon/engine'
+require 'tenon/config/breakpoints.rb'
 require 'tenon/config/events.rb'
+require 'tenon/config/grid.rb'
 require 'tenon/can_be_foreign.rb'
 require 'tenon/can_have_comments.rb'
 require 'tenon/has_asset.rb'

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: tenon
 version: !ruby/object:Gem::Version
-  version: 1.0.56
+  version: 1.0.57
 platform: ruby
 authors:
 - factor[e] design initiative
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-01-28 00:00:00.000000000 Z
+date: 2015-02-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: better_errors
@@ -1110,6 +1110,7 @@ files:
 - app/helpers/tenon/i18n_helper.rb
 - app/helpers/tenon/item_version_helper.rb
 - app/helpers/tenon/nav_helper.rb
+- app/helpers/tenon/piece_helper.rb
 - app/helpers/tenon/platform_hints_helper.rb
 - app/helpers/tenon/tenon_content_helper.rb
 - app/helpers/tenon/tenon_helper.rb
@@ -1378,7 +1379,9 @@ files:
 - lib/tenon/asset_style_generator.rb
 - lib/tenon/can_be_foreign.rb
 - lib/tenon/can_have_comments.rb
+- lib/tenon/config/breakpoints.rb
 - lib/tenon/config/events.rb
+- lib/tenon/config/grid.rb
 - lib/tenon/engine.rb
 - lib/tenon/factories/assets.rb
 - lib/tenon/factories/comments.rb