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.
- data/app/assets/javascripts/styleus/base.js.coffee +7 -1
- data/app/assets/javascripts/styleus/behaviors/sampleContent.js.coffee +82 -0
- data/app/assets/stylesheets/styleus.css +1 -0
- data/app/assets/stylesheets/styleus/themes/base.css.scss +1 -2
- data/app/assets/stylesheets/styleus/themes/base/components/_dummy_content.css.scss +22 -0
- data/app/assets/stylesheets/styleus/themes/fonts.css +1 -0
- data/app/helpers/external_helper.rb +38 -0
- data/app/helpers/sample_box_helper.rb +5 -0
- data/app/helpers/styleus_helper.rb +14 -20
- data/app/helpers/styleus_representer_helper.rb +1 -2
- data/app/views/styleus/_styleus_partials.html.erb +3 -0
- data/lib/styleus/version.rb +1 -1
- metadata +8 -2
@@ -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
|
+
|
@@ -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
|
@@ -1,14 +1,8 @@
|
|
1
1
|
require 'styleus_representer_helper'
|
2
2
|
|
3
3
|
module StyleusHelper
|
4
|
-
def
|
5
|
-
@components
|
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
|
-
|
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
|
-
|
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) :
|
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}"
|
data/lib/styleus/version.rb
CHANGED
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.
|
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-
|
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
|