sculptor 0.0.6 → 0.0.7
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +2 -1
- data/lib/sculptor/extensions/outliner.rb +43 -0
- data/lib/sculptor/extensions.rb +3 -0
- data/lib/sculptor/templates/glyptotheque/config.tt +1 -0
- data/lib/sculptor/templates/glyptotheque/source/assets/styles/glyptotheque/_model.scss +2 -2
- data/lib/sculptor/templates/glyptotheque/source/assets/styles/glyptotheque/_outliner.scss +127 -0
- data/lib/sculptor/templates/glyptotheque/source/assets/styles/glyptotheque.scss +1 -0
- data/lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/_model-outline-element.slim +18 -0
- data/lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/_model-outline.slim +7 -0
- data/lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/_model.slim +1 -0
- data/lib/sculptor/version.rb +1 -1
- metadata +6 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1700b62e9b8f772f57b57a0bf01475f1ed14acf8
|
|
4
|
+
data.tar.gz: 4ecf6836c02fa60b05045d6f40eb6feb7ef0e272
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: bbc1fa5399709bfcfc1bc9daa212d013b97935d74fadd5f559aebebe25981d9a1dcdf60766dbaf99b87943c3589b113a2fa60c9346aba3277a9358500cf3f817
|
|
7
|
+
data.tar.gz: c41dc48eeed2fe726dddcf40aa6babb10729ef6b6614accb5561d407d79eab030246d49dc3fa9969559ea29f05d2250ad1fef46e4cc0ed98b01378a3bf9f8b25
|
data/README.md
CHANGED
|
@@ -97,7 +97,8 @@ Sculptor is using Slim templates internally but should work with other templates
|
|
|
97
97
|
- `source_type` {string} default `html`
|
|
98
98
|
type of source code used for code highlighting
|
|
99
99
|
* `model_iframe`
|
|
100
|
-
* `model_source`
|
|
100
|
+
* `model_source` - Generate highlighted source code for HTML
|
|
101
|
+
* `outline` - Generate outline of HTML structure
|
|
101
102
|
|
|
102
103
|
### Resource helpers
|
|
103
104
|
* `include_stylesheets`
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
class Middleman::Extensions::Outliner < ::Middleman::Extension
|
|
2
|
+
def initialize(app, options_hash={})
|
|
3
|
+
super
|
|
4
|
+
|
|
5
|
+
require 'open-uri'
|
|
6
|
+
require 'nokogiri'
|
|
7
|
+
end
|
|
8
|
+
|
|
9
|
+
helpers do
|
|
10
|
+
def outline(html)
|
|
11
|
+
doc = Nokogiri::HTML.fragment(html, encoding='utf-8')
|
|
12
|
+
|
|
13
|
+
elements = parse_elements(doc.children)
|
|
14
|
+
|
|
15
|
+
partial('partials/glyptotheque/model-outline', locals: { elements: elements })
|
|
16
|
+
end
|
|
17
|
+
|
|
18
|
+
private
|
|
19
|
+
|
|
20
|
+
def parse_elements(elements)
|
|
21
|
+
result = []
|
|
22
|
+
|
|
23
|
+
elements.each do |e|
|
|
24
|
+
text = e.xpath('text()').text
|
|
25
|
+
|
|
26
|
+
next unless e.element?
|
|
27
|
+
|
|
28
|
+
class_name = e.attributes['class'] && e.attributes['class'].value
|
|
29
|
+
attributes = e.attributes.reject {|k| k == 'class' }
|
|
30
|
+
|
|
31
|
+
result << {
|
|
32
|
+
el_name: e.name,
|
|
33
|
+
class_name: class_name,
|
|
34
|
+
attrs: attributes.values.map { |a| { name: a.name, value: a.value } },
|
|
35
|
+
children: parse_elements(e.children),
|
|
36
|
+
text: text
|
|
37
|
+
}
|
|
38
|
+
end
|
|
39
|
+
|
|
40
|
+
return result
|
|
41
|
+
end
|
|
42
|
+
end
|
|
43
|
+
end
|
data/lib/sculptor/extensions.rb
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
@import 'pygments/github';
|
|
3
3
|
|
|
4
4
|
.glypto-model {
|
|
5
|
-
overflow: hidden;
|
|
6
5
|
box-shadow: 0 1px 0 0 rgba(black, .02), 0 1px 1px rgba(black, .1);
|
|
7
6
|
margin-bottom: 35px;
|
|
8
7
|
|
|
@@ -102,7 +101,8 @@
|
|
|
102
101
|
}
|
|
103
102
|
}
|
|
104
103
|
|
|
105
|
-
> .glypto-model-source
|
|
104
|
+
> .glypto-model-source,
|
|
105
|
+
> .glypto-model-outline {
|
|
106
106
|
background: rgba(black, .03);
|
|
107
107
|
box-shadow: inset 0 1px darken($light-grey, 5);
|
|
108
108
|
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
.glypto-model-outline {
|
|
2
|
+
@mixin _item($color: null, $before: none, $after: none) {
|
|
3
|
+
$pres-color: #aaa;
|
|
4
|
+
|
|
5
|
+
display: inline-block;
|
|
6
|
+
vertical-align: top;
|
|
7
|
+
white-space: nowrap;
|
|
8
|
+
overflow: hidden;
|
|
9
|
+
|
|
10
|
+
@if $color {
|
|
11
|
+
color: $color;
|
|
12
|
+
}
|
|
13
|
+
&:before {
|
|
14
|
+
content: $before;
|
|
15
|
+
color: $pres-color;
|
|
16
|
+
}
|
|
17
|
+
&:after {
|
|
18
|
+
content: $after;
|
|
19
|
+
color: $pres-color;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
._elements {
|
|
24
|
+
padding: 10px 15px;
|
|
25
|
+
font: 600 11px Menlo, monospace;
|
|
26
|
+
cursor: default;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
._element {
|
|
30
|
+
@include transition(100ms);
|
|
31
|
+
margin: 1px 0 0;
|
|
32
|
+
padding: 2px;
|
|
33
|
+
border-radius: 3px;
|
|
34
|
+
|
|
35
|
+
&:hover {
|
|
36
|
+
box-shadow: inset 0 0 0 1px rgba(black, .07);
|
|
37
|
+
background: rgba(white, .2);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
._element {
|
|
41
|
+
margin-left: 10px;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
._element {
|
|
46
|
+
> ._name,
|
|
47
|
+
._classes,
|
|
48
|
+
._class {
|
|
49
|
+
padding: 2px 5px;
|
|
50
|
+
border-radius: 3px;
|
|
51
|
+
background: rgba(white, .2);
|
|
52
|
+
margin-right: 1px;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
._classes {
|
|
57
|
+
@include _item;
|
|
58
|
+
box-shadow: inset 0 0 0 1px rgba(#cc3333, .1);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
._element > ._name {
|
|
62
|
+
@include _item(#003366);
|
|
63
|
+
box-shadow: inset 0 0 0 1px rgba(#003366, .1);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
._element ._class {
|
|
67
|
+
@include _item(#cc3333, $before: '.');
|
|
68
|
+
margin: -2px 0 -2px -1px;
|
|
69
|
+
border-left: 1px solid #ddd;
|
|
70
|
+
background: none;
|
|
71
|
+
|
|
72
|
+
&:first-child {
|
|
73
|
+
margin-left: -4px;
|
|
74
|
+
border: 0;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
&:before {
|
|
78
|
+
font-family: serif;
|
|
79
|
+
font-weight: bold;
|
|
80
|
+
font-size: 12px;
|
|
81
|
+
margin: 0 2px 0 -2px;
|
|
82
|
+
color: inherit;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
._attributes {
|
|
87
|
+
@include _item;
|
|
88
|
+
padding: 2px 5px;
|
|
89
|
+
box-shadow: inset 0 0 0 1px rgba(#aaa, .2);
|
|
90
|
+
border-radius: 3px;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
._attr {
|
|
94
|
+
margin: 0 3px;
|
|
95
|
+
|
|
96
|
+
&:last-of-type:after {
|
|
97
|
+
content: none;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
> ._name {
|
|
101
|
+
@include _item(#3366cc, $after: '=');
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
> ._value {
|
|
105
|
+
@include _item(#339900, $before: '"', $after: '"');
|
|
106
|
+
position: relative;
|
|
107
|
+
padding-right: 7px;
|
|
108
|
+
text-overflow: ellipsis;
|
|
109
|
+
max-width: 200px;
|
|
110
|
+
|
|
111
|
+
&:after {
|
|
112
|
+
position: absolute;
|
|
113
|
+
right: 0;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
._text {
|
|
119
|
+
@include _item(#aaa);
|
|
120
|
+
font-weight: normal;
|
|
121
|
+
padding: 2px 5px;
|
|
122
|
+
font-size: 13px;
|
|
123
|
+
font-family: Helvetica, Arial, sans-serif;
|
|
124
|
+
text-overflow: ellipsis;
|
|
125
|
+
max-width: 200px;
|
|
126
|
+
}
|
|
127
|
+
}
|
data/lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/_model-outline-element.slim
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
._element
|
|
2
|
+
span._name = item.el_name
|
|
3
|
+
- if item.class_name.present?
|
|
4
|
+
span._classes
|
|
5
|
+
- item.class_name.split(/\s+/).each do |c|
|
|
6
|
+
span._class = c
|
|
7
|
+
- if item.attrs.any?
|
|
8
|
+
span._attributes
|
|
9
|
+
- item.attrs.each do |a|
|
|
10
|
+
span._attr
|
|
11
|
+
span._name = a.name
|
|
12
|
+
span._value title="#{a.value.length > 27 ? a.value.strip : nil}" = a.value
|
|
13
|
+
- if item.text
|
|
14
|
+
span._text title="#{item.text.length > 27 ? item.text.strip : nil}" = item.text
|
|
15
|
+
|
|
16
|
+
- if item.children.any?
|
|
17
|
+
- item.children.each do | child |
|
|
18
|
+
= partial 'partials/glyptotheque/model-outline-element', locals: { item: child }
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
section.glypto-model-outline ng-class="{'__expanded': outline_expanded}"
|
|
2
|
+
header
|
|
3
|
+
button._toggle(ng-class="{'__toggled': outline_expanded}" ng-click="outline_expanded = !outline_expanded") Outline
|
|
4
|
+
._container
|
|
5
|
+
._elements
|
|
6
|
+
- elements.each do |item|
|
|
7
|
+
= partial 'partials/glyptotheque/model-outline-element', locals: { item: item }
|
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
figure = html
|
|
30
30
|
|
|
31
31
|
= model_source(source_type) { source_code }
|
|
32
|
+
= outline(html)
|
|
32
33
|
|
|
33
34
|
- unless locals[:iframe]
|
|
34
35
|
- stylesheets = current_page.metadata.page[:stylesheet] || current_page.metadata.page[:stylesheets] || current_page.data[:stylesheet] || current_page.data[:stylesheets]
|
data/lib/sculptor/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: sculptor
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.7
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Tyom Semonov
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2014-11-
|
|
11
|
+
date: 2014-11-03 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: bundler
|
|
@@ -265,6 +265,7 @@ files:
|
|
|
265
265
|
- lib/sculptor/extensions.rb
|
|
266
266
|
- lib/sculptor/extensions/data_loaders.rb
|
|
267
267
|
- lib/sculptor/extensions/model.rb
|
|
268
|
+
- lib/sculptor/extensions/outliner.rb
|
|
268
269
|
- lib/sculptor/extensions/resource_helpers.rb
|
|
269
270
|
- lib/sculptor/load_paths.rb
|
|
270
271
|
- lib/sculptor/method_missing.rb
|
|
@@ -289,6 +290,7 @@ files:
|
|
|
289
290
|
- lib/sculptor/templates/glyptotheque/source/assets/styles/glyptotheque/_base.scss
|
|
290
291
|
- lib/sculptor/templates/glyptotheque/source/assets/styles/glyptotheque/_model.scss
|
|
291
292
|
- lib/sculptor/templates/glyptotheque/source/assets/styles/glyptotheque/_nav.scss
|
|
293
|
+
- lib/sculptor/templates/glyptotheque/source/assets/styles/glyptotheque/_outliner.scss
|
|
292
294
|
- lib/sculptor/templates/glyptotheque/source/assets/styles/main.scss
|
|
293
295
|
- lib/sculptor/templates/glyptotheque/source/assets/styles/pygments/borland.css
|
|
294
296
|
- lib/sculptor/templates/glyptotheque/source/assets/styles/pygments/colorful.css
|
|
@@ -299,6 +301,8 @@ files:
|
|
|
299
301
|
- lib/sculptor/templates/glyptotheque/source/layouts/layout.slim
|
|
300
302
|
- lib/sculptor/templates/glyptotheque/source/layouts/standalone.slim
|
|
301
303
|
- lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/_model-index.slim
|
|
304
|
+
- lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/_model-outline-element.slim
|
|
305
|
+
- lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/_model-outline.slim
|
|
302
306
|
- lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/_model-source.slim
|
|
303
307
|
- lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/_model.slim
|
|
304
308
|
- lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/_nav.slim
|