styleus 0.0.6 → 0.0.7

data/app/assets/javascripts/styleus/base.js.coffee

@@ -1,3 +1,9 @@
 jQuery($(document).ready ->
-  styleus.toggle.install()
+  install = ->
+    styleus.toggle.install()
+    styleus.sampleContent.install()
+
+  $(document).on 'dom:changed', install
+
+  install()
 )

data/app/assets/javascripts/styleus/behaviors/sampleContent.js.coffee

@@ -0,0 +1,82 @@
+namespace 'styleus.sampleContent', (exports) ->
+  # TODO: replace all sample graphics with SVG
+  class Shape
+    constructor: ->
+      @view = $('<div></div>')
+
+    withClass: (classAttribute) =>
+      @view.addClass(classAttribute)
+      this
+
+    render: => @view
+
+
+  class Diagonal extends Shape
+    constructor: (@width, @height, @direction) ->
+      super()
+      @view.addClass('diagonal')
+      console.log(@height)
+
+    expand: () =>
+      @expandWidth()
+      @rotate()
+      @correctXPosition()
+
+    expandWidth: =>
+      @diagonalLength = Math.sqrt(Math.pow(@width, 2) + Math.pow(@height, 2))
+      @view.width(@diagonalLength)
+
+
+    # ##########################################################
+    #   ______                                                 #
+    #  |\    | We compute angular Beta here, in an orthogonal  #
+    #  | \   | rectangular. So we solve tan(B) = a/b with      #
+    # a|  \c | Angular B = atan(a/b).                          #
+    #  |   \ |                                                 #
+    #  |___B\| We multiply wit (180/PI) to get degrees.        #
+    #     b                                                    #
+    # ##########################################################
+    computeRotationAngle: ->
+      @angular_rad = Math.atan(@height / @width)
+      @angular_deg = (180 / Math.PI) * @angular_rad
+
+    rotate: =>
+      @computeRotationAngle()
+      rotation_angle = @angular_deg
+      rotation_angle = 360 - rotation_angle if @direction is 'inverted'
+      rotation = "rotate(#{rotation_angle}deg)"
+      for platform in ['', '-webkit-', '-moz-', '-o-', '-ms-']
+        @view.css("#{platform}transform", rotation)
+
+    # because the rotation center is based on the width of an
+    # element, we have to adjust the x-position dependent to
+    # the with of the element, we placed the diagonals in.
+    # !! We assume here relative positioning for diagonals. !!
+    correctXPosition: ->
+      offset = (@diagonalLength - @width) / 2
+      @view.css('left', -offset)
+
+  class SampleBox
+    constructor: (@view) ->
+      @expand()
+      @addDiagonals() if @view.data('diagonals')
+
+    expand: ->
+      console.log @boxWidth, @boxHeight
+      @boxWidth = @view.data('width') ? @view.innerWidth()
+      @boxHeight = @view.data('height') ? @view.innerHeight()
+      @view.css('width', @boxWidth)
+      @view.css('height', @boxHeight)
+
+
+    addDiagonals: =>
+      diagonals = [new Diagonal(@boxWidth, @boxHeight), new Diagonal(@boxWidth, @boxHeight, 'inverted')]
+      diagonal.expand() and @view.append(diagonal.render()) for diagonal in diagonals
+
+
+  exports.install = (root) ->
+    $root = $(root or document)
+    boxes = $root.find('.styleus_sample.box')
+    new SampleBox($(box)) for box in boxes
+
+

data/app/assets/stylesheets/styleus.css

@@ -11,5 +11,6 @@
  * # Requiring a basic theme for the styleus layout frame
  * # TODO (fh): think about moving this "decision" to the app.
  *= require styleus/default_dimensions
+ *= require styleus/themes/fonts
  *= require styleus/themes/base
  */

data/app/assets/stylesheets/styleus/themes/base.css.scss

@@ -1,5 +1,3 @@
-@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700|Oleo+Script:400,700|Source+Code+Pro:400,700);
-
 @import "compass";
 @import "compass/reset";
 @import "compass/css3";
@@ -19,3 +17,4 @@
 @import 'base/components/article';
 @import 'base/components/option_bar';
 @import 'base/components/component_index';
+@import 'base/components/dummy_content';

data/app/assets/stylesheets/styleus/themes/base/components/_dummy_content.css.scss

@@ -0,0 +1,22 @@
+// TODO: has to be discovered via js, later.
+$diagonals_default_size: 100%;
+$diagonals_multiplier: 2;
+
+.styleus_sample.box {
+  //@include component;
+  display: block;
+  border: 1px solid black;
+  height: 100px;
+  margin: 3px;
+  width: 100px;
+
+  & > .diagonal {
+    display: block;
+    height: 1px;
+    position: relative;
+    //left: -($diagonals_default_size / $diagonals_multiplier);
+    left: 0;
+    top: $diagonals_default_size / $diagonals_multiplier;
+    background: #000;
+  }
+}

data/app/assets/stylesheets/styleus/themes/fonts.css

@@ -0,0 +1 @@
+@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700|Oleo+Script:400,700|Source+Code+Pro:400,700);

data/app/helpers/external_helper.rb

@@ -0,0 +1,38 @@
+require 'styleus_helper'
+
+module ExternalHelper
+  def display(&block)
+    @view_flow.set(:representation, '')
+    content_for :representation, _styleus_component_wrap(&block)
+  end
+
+  def html(&block)
+    @view_flow.set(:html, '')
+    content_for :html, _html_representation(&block)
+  end
+
+  def helper(&block)
+    @view_flow.set(:helper, '')
+    content_for :helper, _helper_representation(&block)
+  end
+
+  def styleus_page(comp_list = [])
+    return if comp_list.empty?
+    index      = styleus_index(comp_list)
+    components = styleus_components(comp_list)
+    index.concat(components)
+  end
+
+  def styleus_components(comp_list)
+    build_view_components(comp_list)
+
+    @component_list = @components.map { |component| wrap_component component }
+
+    @component_list.join.html_safe
+  end
+
+  def styleus_index(comp_list)
+    build_view_components(comp_list)
+    _component_index(components_category, @components)
+  end
+end

data/app/helpers/sample_box_helper.rb

@@ -0,0 +1,5 @@
+module SampleBoxHelper
+  def sample_box(options = {})
+    content_tag('div', '', class: 'styleus_sample box', data: options)
+  end
+end

data/app/helpers/styleus_helper.rb

@@ -1,14 +1,8 @@
 require 'styleus_representer_helper'
 
 module StyleusHelper
-  def styleus(comp_list = [])
-    @components = Styleus::ViewComponent.from_hashes(comp_list)
-
-    @component_list = @components.map do |component|
-      wrap_component component
-    end
-
-    component_index(components_category).concat(_joined_component_list)
+  def build_view_components(comp_list)
+    @components ||= Styleus::ViewComponent.from_hashes(comp_list)
   end
 
   def wrap_component(component)
@@ -19,23 +13,27 @@ module StyleusHelper
   end
 
   def styleus_partials(partial_path, options = { })
-    sample_template = _styleus_component_wrap(class: '__boxed') { render partial: "#{partial_path}_sample" }
+    #sample_template = _styleus_component_wrap(class: '__boxed') { render partial: "#{partial_path}_sample" }
+    #
+    #plain_template = _html_representation("#{partial_path}.html.erb") { render partial: "#{partial_path}" }
+    #
+    #helper_template = _helper_representation { render partial: "#{partial_path}_helper" } if options[:helper]
+
+    #sample_template.concat(plain_template).concat(helper_template || _safe_empty)
 
-    plain_template = _html_representation("#{partial_path}.html.erb") { render partial: "#{partial_path}" }
 
-    helper_template = _helper_representation { render partial: "#{partial_path}_helper" } if options[:helper]
+    # execute application partial without responding it directly,
+    # so only the given content_for methods will help.
+    render partial: "#{partial_path}"
 
-    sample_template.concat(plain_template).concat(helper_template || _safe_empty)
+    # returning concatenating responder partial, which consists of content_for blocks only.
+    render(layout: 'styleus/styleus_partials') {  ''.html_safe }
   end
 
   def option_bar(component)
     _option_bar(component)
   end
 
-  def component_index(headline)
-    _component_index(headline, @components)
-  end
-
   def _styleus_article_wrap(options = { }, &block)
     captured_block = capture(&block)
     _article(options) { captured_block }
@@ -66,10 +64,6 @@ module StyleusHelper
     _code(code_with_note, type)
   end
 
-  def _joined_component_list
-    @component_list.join.html_safe
-  end
-
   def _highlight(code, type)
     CodeRay.scan(code, type).div(:css => :class, line_numbers: :table).html_safe
   end

data/app/helpers/styleus_representer_helper.rb

@@ -16,14 +16,13 @@ module StyleusRepresenterHelper
   end
 
   def _code_note(note)
-    note ? _render_styleus('code_note', object: note) : safe_empty
+    note ? _render_styleus('code_note', object: note) : _safe_empty
   end
 
   def _code(code, type)
     _render_styleus 'code', object: code, locals: { type: type }
   end
 
-
   def _render_styleus(styleus_partial, options = { }, &block)
     render_type    = block_given? ? 'layout' : 'partial'
     partial_path   = "styleus/#{styleus_partial}"

data/app/views/styleus/_styleus_partials.html.erb

@@ -0,0 +1,3 @@
+<%= content_for(:representation).html_safe %>
+<%= content_for(:html).html_safe %>
+<%= content_for(:helper).html_safe %>

data/lib/styleus/version.rb

@@ -1,3 +1,3 @@
 module Styleus
-  VERSION = "0.0.6"
+  VERSION = "0.0.7"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: styleus
 version: !ruby/object:Gem::Version
-  version: 0.0.6
+  version: 0.0.7
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-12-10 00:00:00.000000000 Z
+date: 2012-12-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -77,6 +77,7 @@ files:
 - app/assets/javascripts/modernizr.custom.js
 - app/assets/javascripts/namespace.js.coffee
 - app/assets/javascripts/styleus/base.js.coffee
+- app/assets/javascripts/styleus/behaviors/sampleContent.js.coffee
 - app/assets/javascripts/styleus/behaviors/toggle.js.coffee
 - app/assets/javascripts/styleus.js
 - app/assets/javascripts/styleus_prerender.js
@@ -88,14 +89,18 @@ files:
 - app/assets/stylesheets/styleus/themes/base/coderay.css.scss
 - app/assets/stylesheets/styleus/themes/base/components/_article.css.scss
 - app/assets/stylesheets/styleus/themes/base/components/_component_index.css.scss
+- app/assets/stylesheets/styleus/themes/base/components/_dummy_content.css.scss
 - app/assets/stylesheets/styleus/themes/base/components/_option_bar.css.scss
 - app/assets/stylesheets/styleus/themes/base/fonts/raphael.css.scss
 - app/assets/stylesheets/styleus/themes/base/layout/main.css.scss
 - app/assets/stylesheets/styleus/themes/base/settings/_colors.css.scss
 - app/assets/stylesheets/styleus/themes/base.css.scss
+- app/assets/stylesheets/styleus/themes/fonts.css
 - app/assets/stylesheets/styleus.css
 - app/controllers/components_controller.rb
+- app/helpers/external_helper.rb
 - app/helpers/path_helper.rb
+- app/helpers/sample_box_helper.rb
 - app/helpers/styleus_helper.rb
 - app/helpers/styleus_representer_helper.rb
 - app/models/styleus/base.rb
@@ -112,6 +117,7 @@ files:
 - app/views/styleus/_component_index.html.erb
 - app/views/styleus/_option_bar.html.erb
 - app/views/styleus/_screen_size_viewer.html.erb
+- app/views/styleus/_styleus_partials.html.erb
 - config/initializers/01_styleus_config.rb
 - config/initializers/02_init_container_routes.rb
 - config/locales/en.yml