styleus 0.0.6 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,3 +1,9 @@
1
1
  jQuery($(document).ready ->
2
- styleus.toggle.install()
2
+ install = ->
3
+ styleus.toggle.install()
4
+ styleus.sampleContent.install()
5
+
6
+ $(document).on 'dom:changed', install
7
+
8
+ install()
3
9
  )
@@ -0,0 +1,82 @@
1
+ namespace 'styleus.sampleContent', (exports) ->
2
+ # TODO: replace all sample graphics with SVG
3
+ class Shape
4
+ constructor: ->
5
+ @view = $('<div></div>')
6
+
7
+ withClass: (classAttribute) =>
8
+ @view.addClass(classAttribute)
9
+ this
10
+
11
+ render: => @view
12
+
13
+
14
+ class Diagonal extends Shape
15
+ constructor: (@width, @height, @direction) ->
16
+ super()
17
+ @view.addClass('diagonal')
18
+ console.log(@height)
19
+
20
+ expand: () =>
21
+ @expandWidth()
22
+ @rotate()
23
+ @correctXPosition()
24
+
25
+ expandWidth: =>
26
+ @diagonalLength = Math.sqrt(Math.pow(@width, 2) + Math.pow(@height, 2))
27
+ @view.width(@diagonalLength)
28
+
29
+
30
+ # ##########################################################
31
+ # ______ #
32
+ # |\ | We compute angular Beta here, in an orthogonal #
33
+ # | \ | rectangular. So we solve tan(B) = a/b with #
34
+ # a| \c | Angular B = atan(a/b). #
35
+ # | \ | #
36
+ # |___B\| We multiply wit (180/PI) to get degrees. #
37
+ # b #
38
+ # ##########################################################
39
+ computeRotationAngle: ->
40
+ @angular_rad = Math.atan(@height / @width)
41
+ @angular_deg = (180 / Math.PI) * @angular_rad
42
+
43
+ rotate: =>
44
+ @computeRotationAngle()
45
+ rotation_angle = @angular_deg
46
+ rotation_angle = 360 - rotation_angle if @direction is 'inverted'
47
+ rotation = "rotate(#{rotation_angle}deg)"
48
+ for platform in ['', '-webkit-', '-moz-', '-o-', '-ms-']
49
+ @view.css("#{platform}transform", rotation)
50
+
51
+ # because the rotation center is based on the width of an
52
+ # element, we have to adjust the x-position dependent to
53
+ # the with of the element, we placed the diagonals in.
54
+ # !! We assume here relative positioning for diagonals. !!
55
+ correctXPosition: ->
56
+ offset = (@diagonalLength - @width) / 2
57
+ @view.css('left', -offset)
58
+
59
+ class SampleBox
60
+ constructor: (@view) ->
61
+ @expand()
62
+ @addDiagonals() if @view.data('diagonals')
63
+
64
+ expand: ->
65
+ console.log @boxWidth, @boxHeight
66
+ @boxWidth = @view.data('width') ? @view.innerWidth()
67
+ @boxHeight = @view.data('height') ? @view.innerHeight()
68
+ @view.css('width', @boxWidth)
69
+ @view.css('height', @boxHeight)
70
+
71
+
72
+ addDiagonals: =>
73
+ diagonals = [new Diagonal(@boxWidth, @boxHeight), new Diagonal(@boxWidth, @boxHeight, 'inverted')]
74
+ diagonal.expand() and @view.append(diagonal.render()) for diagonal in diagonals
75
+
76
+
77
+ exports.install = (root) ->
78
+ $root = $(root or document)
79
+ boxes = $root.find('.styleus_sample.box')
80
+ new SampleBox($(box)) for box in boxes
81
+
82
+
@@ -11,5 +11,6 @@
11
11
  * # Requiring a basic theme for the styleus layout frame
12
12
  * # TODO (fh): think about moving this "decision" to the app.
13
13
  *= require styleus/default_dimensions
14
+ *= require styleus/themes/fonts
14
15
  *= require styleus/themes/base
15
16
  */
@@ -1,5 +1,3 @@
1
- @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700|Oleo+Script:400,700|Source+Code+Pro:400,700);
2
-
3
1
  @import "compass";
4
2
  @import "compass/reset";
5
3
  @import "compass/css3";
@@ -19,3 +17,4 @@
19
17
  @import 'base/components/article';
20
18
  @import 'base/components/option_bar';
21
19
  @import 'base/components/component_index';
20
+ @import 'base/components/dummy_content';
@@ -0,0 +1,22 @@
1
+ // TODO: has to be discovered via js, later.
2
+ $diagonals_default_size: 100%;
3
+ $diagonals_multiplier: 2;
4
+
5
+ .styleus_sample.box {
6
+ //@include component;
7
+ display: block;
8
+ border: 1px solid black;
9
+ height: 100px;
10
+ margin: 3px;
11
+ width: 100px;
12
+
13
+ & > .diagonal {
14
+ display: block;
15
+ height: 1px;
16
+ position: relative;
17
+ //left: -($diagonals_default_size / $diagonals_multiplier);
18
+ left: 0;
19
+ top: $diagonals_default_size / $diagonals_multiplier;
20
+ background: #000;
21
+ }
22
+ }
@@ -0,0 +1 @@
1
+ @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700|Oleo+Script:400,700|Source+Code+Pro:400,700);
@@ -0,0 +1,38 @@
1
+ require 'styleus_helper'
2
+
3
+ module ExternalHelper
4
+ def display(&block)
5
+ @view_flow.set(:representation, '')
6
+ content_for :representation, _styleus_component_wrap(&block)
7
+ end
8
+
9
+ def html(&block)
10
+ @view_flow.set(:html, '')
11
+ content_for :html, _html_representation(&block)
12
+ end
13
+
14
+ def helper(&block)
15
+ @view_flow.set(:helper, '')
16
+ content_for :helper, _helper_representation(&block)
17
+ end
18
+
19
+ def styleus_page(comp_list = [])
20
+ return if comp_list.empty?
21
+ index = styleus_index(comp_list)
22
+ components = styleus_components(comp_list)
23
+ index.concat(components)
24
+ end
25
+
26
+ def styleus_components(comp_list)
27
+ build_view_components(comp_list)
28
+
29
+ @component_list = @components.map { |component| wrap_component component }
30
+
31
+ @component_list.join.html_safe
32
+ end
33
+
34
+ def styleus_index(comp_list)
35
+ build_view_components(comp_list)
36
+ _component_index(components_category, @components)
37
+ end
38
+ end
@@ -0,0 +1,5 @@
1
+ module SampleBoxHelper
2
+ def sample_box(options = {})
3
+ content_tag('div', '', class: 'styleus_sample box', data: options)
4
+ end
5
+ end
@@ -1,14 +1,8 @@
1
1
  require 'styleus_representer_helper'
2
2
 
3
3
  module StyleusHelper
4
- def styleus(comp_list = [])
5
- @components = Styleus::ViewComponent.from_hashes(comp_list)
6
-
7
- @component_list = @components.map do |component|
8
- wrap_component component
9
- end
10
-
11
- component_index(components_category).concat(_joined_component_list)
4
+ def build_view_components(comp_list)
5
+ @components ||= Styleus::ViewComponent.from_hashes(comp_list)
12
6
  end
13
7
 
14
8
  def wrap_component(component)
@@ -19,23 +13,27 @@ module StyleusHelper
19
13
  end
20
14
 
21
15
  def styleus_partials(partial_path, options = { })
22
- sample_template = _styleus_component_wrap(class: '__boxed') { render partial: "#{partial_path}_sample" }
16
+ #sample_template = _styleus_component_wrap(class: '__boxed') { render partial: "#{partial_path}_sample" }
17
+ #
18
+ #plain_template = _html_representation("#{partial_path}.html.erb") { render partial: "#{partial_path}" }
19
+ #
20
+ #helper_template = _helper_representation { render partial: "#{partial_path}_helper" } if options[:helper]
21
+
22
+ #sample_template.concat(plain_template).concat(helper_template || _safe_empty)
23
23
 
24
- plain_template = _html_representation("#{partial_path}.html.erb") { render partial: "#{partial_path}" }
25
24
 
26
- helper_template = _helper_representation { render partial: "#{partial_path}_helper" } if options[:helper]
25
+ # execute application partial without responding it directly,
26
+ # so only the given content_for methods will help.
27
+ render partial: "#{partial_path}"
27
28
 
28
- sample_template.concat(plain_template).concat(helper_template || _safe_empty)
29
+ # returning concatenating responder partial, which consists of content_for blocks only.
30
+ render(layout: 'styleus/styleus_partials') { ''.html_safe }
29
31
  end
30
32
 
31
33
  def option_bar(component)
32
34
  _option_bar(component)
33
35
  end
34
36
 
35
- def component_index(headline)
36
- _component_index(headline, @components)
37
- end
38
-
39
37
  def _styleus_article_wrap(options = { }, &block)
40
38
  captured_block = capture(&block)
41
39
  _article(options) { captured_block }
@@ -66,10 +64,6 @@ module StyleusHelper
66
64
  _code(code_with_note, type)
67
65
  end
68
66
 
69
- def _joined_component_list
70
- @component_list.join.html_safe
71
- end
72
-
73
67
  def _highlight(code, type)
74
68
  CodeRay.scan(code, type).div(:css => :class, line_numbers: :table).html_safe
75
69
  end
@@ -16,14 +16,13 @@ module StyleusRepresenterHelper
16
16
  end
17
17
 
18
18
  def _code_note(note)
19
- note ? _render_styleus('code_note', object: note) : safe_empty
19
+ note ? _render_styleus('code_note', object: note) : _safe_empty
20
20
  end
21
21
 
22
22
  def _code(code, type)
23
23
  _render_styleus 'code', object: code, locals: { type: type }
24
24
  end
25
25
 
26
-
27
26
  def _render_styleus(styleus_partial, options = { }, &block)
28
27
  render_type = block_given? ? 'layout' : 'partial'
29
28
  partial_path = "styleus/#{styleus_partial}"
@@ -0,0 +1,3 @@
1
+ <%= content_for(:representation).html_safe %>
2
+ <%= content_for(:html).html_safe %>
3
+ <%= content_for(:helper).html_safe %>
@@ -1,3 +1,3 @@
1
1
  module Styleus
2
- VERSION = "0.0.6"
2
+ VERSION = "0.0.7"
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: styleus
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.6
4
+ version: 0.0.7
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2012-12-10 00:00:00.000000000 Z
12
+ date: 2012-12-11 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: rails
@@ -77,6 +77,7 @@ files:
77
77
  - app/assets/javascripts/modernizr.custom.js
78
78
  - app/assets/javascripts/namespace.js.coffee
79
79
  - app/assets/javascripts/styleus/base.js.coffee
80
+ - app/assets/javascripts/styleus/behaviors/sampleContent.js.coffee
80
81
  - app/assets/javascripts/styleus/behaviors/toggle.js.coffee
81
82
  - app/assets/javascripts/styleus.js
82
83
  - app/assets/javascripts/styleus_prerender.js
@@ -88,14 +89,18 @@ files:
88
89
  - app/assets/stylesheets/styleus/themes/base/coderay.css.scss
89
90
  - app/assets/stylesheets/styleus/themes/base/components/_article.css.scss
90
91
  - app/assets/stylesheets/styleus/themes/base/components/_component_index.css.scss
92
+ - app/assets/stylesheets/styleus/themes/base/components/_dummy_content.css.scss
91
93
  - app/assets/stylesheets/styleus/themes/base/components/_option_bar.css.scss
92
94
  - app/assets/stylesheets/styleus/themes/base/fonts/raphael.css.scss
93
95
  - app/assets/stylesheets/styleus/themes/base/layout/main.css.scss
94
96
  - app/assets/stylesheets/styleus/themes/base/settings/_colors.css.scss
95
97
  - app/assets/stylesheets/styleus/themes/base.css.scss
98
+ - app/assets/stylesheets/styleus/themes/fonts.css
96
99
  - app/assets/stylesheets/styleus.css
97
100
  - app/controllers/components_controller.rb
101
+ - app/helpers/external_helper.rb
98
102
  - app/helpers/path_helper.rb
103
+ - app/helpers/sample_box_helper.rb
99
104
  - app/helpers/styleus_helper.rb
100
105
  - app/helpers/styleus_representer_helper.rb
101
106
  - app/models/styleus/base.rb
@@ -112,6 +117,7 @@ files:
112
117
  - app/views/styleus/_component_index.html.erb
113
118
  - app/views/styleus/_option_bar.html.erb
114
119
  - app/views/styleus/_screen_size_viewer.html.erb
120
+ - app/views/styleus/_styleus_partials.html.erb
115
121
  - config/initializers/01_styleus_config.rb
116
122
  - config/initializers/02_init_container_routes.rb
117
123
  - config/locales/en.yml