Class: R2::Swapper

Inherits:
Object
  • Object
show all
Defined in:
lib/r2.rb

Overview

Reuable class for CSS alterations

Constant Summary collapse

PROPERTY_MAP = 
{
  'margin-left' => 'margin-right',
  'margin-right' => 'margin-left',

  'padding-left' => 'padding-right',
  'padding-right' => 'padding-left',

  'border-left' => 'border-right',
  'border-right' => 'border-left',

  'border-left-width' => 'border-right-width',
  'border-right-width' => 'border-left-width',

  'border-radius-bottomleft' => 'border-radius-bottomright',
  'border-radius-bottomright' => 'border-radius-bottomleft',
  'border-radius-topleft' => 'border-radius-topright',
  'border-radius-topright' => 'border-radius-topleft',

  '-moz-border-radius-bottomright' => '-moz-border-radius-bottomleft',
  '-moz-border-radius-bottomleft' => '-moz-border-radius-bottomright',
  '-moz-border-radius-topright' => '-moz-border-radius-topleft',
  '-moz-border-radius-topleft' => '-moz-border-radius-topright',

  '-webkit-border-top-right-radius' => '-webkit-border-top-left-radius',
  '-webkit-border-top-left-radius' => '-webkit-border-top-right-radius',
  '-webkit-border-bottom-right-radius' => '-webkit-border-bottom-left-radius',
  '-webkit-border-bottom-left-radius' => '-webkit-border-bottom-right-radius',

  'left' => 'right',
  'right' => 'left'
}
VALUE_PROCS = 
{
  'padding'    => lambda {|obj,val| obj.quad_swap(val) },
  'margin'     => lambda {|obj,val| obj.quad_swap(val) },
  'border-radius' => lambda {|obj,val| obj.border_radius_swap(val) },
  '-moz-border-radius' => lambda {|obj,val| obj.border_radius_swap(val) },
  '-webkit-border-radius' => lambda {|obj,val| obj.border_radius_swap(val) },
  'text-align' => lambda {|obj,val| obj.side_swap(val) },
  'float'      => lambda {|obj,val| obj.side_swap(val) },
  'box-shadow' => lambda {|obj,val| obj.quad_swap(val) },
  '-webkit-box-shadow' => lambda {|obj,val| obj.quad_swap(val) },
  '-moz-box-shadow' => lambda {|obj,val| obj.quad_swap(val) },
  'direction'  => lambda {|obj,val| obj.direction_swap(val) },
  'clear' => lambda {|obj,val| obj.side_swap(val) },
  'background-position' => lambda {|obj,val| obj.background_position_swap(val) }
}

Instance Method Summary collapse

Instance Method Details

#background_position_swap(val) ⇒ Object

Given a background-position such as left center or 0% 50% return the opposing value e.g right center or 100% 50%



170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
 
# File 'lib/r2.rb', line 170

def background_position_swap(val)

  if val =~ /left/
    val.gsub!('left', 'right')
  elsif val =~ /right/
    val.gsub!('right', 'left')
  end

  points = val.strip.split(/\s+/)

  # If first point is a percentage-value
  if match = points[0].match(/(\d+)%/)
    inv = 100 - match[1].to_i # 30% => 70% (100 - x)
    val = ["#{inv}%", points[1]].compact.join(' ')
  end

  # If first point is a unit-value
  if match = points[0].match(/^(\d+[a-z]{2,3})/)
    val = ["right", match[1], points[1] || "center"].compact.join(' ')
  end

  val
end

#border_radius_swap(val) ⇒ Object

Border radius uses top-left, top-right, bottom-left, bottom-right, so all values need to be swapped. Additionally, two and three value border-radius declarations need to be swapped as well. Vertical radius, specified with a /, should be left alone.



150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
 
# File 'lib/r2.rb', line 150

def border_radius_swap(val)
  # 1px 2px 3px 4px => 1px 4px 3px 2px
  points = val.to_s.split(/\s+/)

  if points && points.length > 1 && !val.to_s.include?('/')
    case points.length
    when 4
      [points[1], points[0], points[3], points[2]].join(' ')
    when 3
      [points[1], points[0], points[1], points[2]].join(' ')
    when 2
      [points[1], points[0]].join(' ')
    else val
    end
  else
    val
  end
end

#declaration_swap(decl) ⇒ Object

Given a single CSS declaration rule (e.g. padding-left: 4px) return the opposing rule (so, padding-right:4px; in this example)



97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
# File 'lib/r2.rb', line 97

def declaration_swap(decl)
  return '' unless decl

  matched = decl.match(/([^:]+):(.+)$/)
  return '' unless matched

  property = matched[1]
  value = matched[2]

  property = PROPERTY_MAP[property] if PROPERTY_MAP.has_key?(property)
  value = VALUE_PROCS[property].call(self, value) if VALUE_PROCS.has_key?(property)

  return property + ':' + value + ';'
end

#direction_swap(val) ⇒ Object

Given a value of rtl or ltr return the opposing value. All other arguments are ignored and returned unmolested.



113
114
115
116
117
118
119
120
121
 
# File 'lib/r2.rb', line 113

def direction_swap(val)
  if val == "rtl"
    "ltr"
  elsif val == "ltr"
    "rtl"
  else
    val
  end
end

#minimize(css) ⇒ Object

Minimize the provided CSS by removing comments, and extra specs



87
88
89
90
91
92
93
94
 
# File 'lib/r2.rb', line 87

def minimize(css)
  return '' unless css

  css.gsub(/\/\*[\s\S]+?\*\//, '').   # comments
     gsub(/[\n\r]/, '').              # line breaks and carriage returns
     gsub(/\s*([:;,\{\}])\s*/, '\1'). # space between selectors, declarations, properties and values
     gsub(/\s+/, ' ')                 # replace multiple spaces with single spaces
end

#quad_swap(val) ⇒ Object

Given a 4-argument CSS declaration value (like that of padding or margin) return the opposing value. The opposing value swaps the left and right but not the top or bottom. Any unrecognized argument is returned unmolested (for example, 2-argument values)



137
138
139
140
141
142
143
144
145
146
 
# File 'lib/r2.rb', line 137

def quad_swap(val)
  # 1px 2px 3px 4px => 1px 4px 3px 2px
  points = val.to_s.split(/\s+/)

  if points && points.length == 4
    [points[0], points[3], points[2], points[1]].join(' ')
  else
    val
  end
end

#r2(original_css) ⇒ Object

Given a String of CSS perform the full directionality change



66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
# File 'lib/r2.rb', line 66

def r2(original_css)
  css = minimize(original_css)

  result = css.gsub(/([^\{]+\{[^\}]+\})+?/) do |rule|
    # break rule into selector|declaration parts
    parts = rule.match(/([^\{]+)\{([^\}]+)/)
    selector = parts[1]
    declarations = parts[2]

    rule_str = selector + '{'
    declarations.split(/;(?!base64)/).each do |decl|
      rule_str << declaration_swap(decl)
    end
    rule_str << "}"
    rule_str
  end

  return result
end

#side_swap(val) ⇒ Object

Given a value of right or left return the opposing value. All other arguments are ignored and returned unmolested.



124
125
126
127
128
129
130
131
132
 
# File 'lib/r2.rb', line 124

def side_swap(val)
  if val == "right"
    "left"
  elsif val == "left"
    "right"
  else
    val
  end
end