sculptor 0.0.7 → 0.0.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 1700b62e9b8f772f57b57a0bf01475f1ed14acf8
-  data.tar.gz: 4ecf6836c02fa60b05045d6f40eb6feb7ef0e272
+  metadata.gz: 3164bc0dfe0381346ca31499b7787fbcde22fc31
+  data.tar.gz: 1e9982649e25cc2a89ecc2e948ddcf2a0c26cbf7
 SHA512:
-  metadata.gz: bbc1fa5399709bfcfc1bc9daa212d013b97935d74fadd5f559aebebe25981d9a1dcdf60766dbaf99b87943c3589b113a2fa60c9346aba3277a9358500cf3f817
-  data.tar.gz: c41dc48eeed2fe726dddcf40aa6babb10729ef6b6614accb5561d407d79eab030246d49dc3fa9969559ea29f05d2250ad1fef46e4cc0ed98b01378a3bf9f8b25
+  metadata.gz: a12755347ae082df09e2282107b92c7d3d9ae515e1ad9c92fdbc9ecf78baec80e58676674ff467b7e7fc996ea46147fc25b52bb0ff2d00d1b4da9eebac4b7e01
+  data.tar.gz: 11e4c9eb686e09fdeac11d51f3e01b00cfa59ab9a4217e36eb3a80274843a46b105bfcd83aeb045cb66c0aade72a3301e591403a27407187b072122a63e8bcf9

data/README.md

@@ -94,10 +94,9 @@ Sculptor is using Slim templates internally but should work with other templates
     whether to try to reformat the HTML (e.g. if remote HTML is minified)
   - `css` - CSS selector to extract from the remote page. If specific element is required it can be selected by providing `#<0-based index>` at the end of selector separated by space. e.g. `img #0` will select the first image.
   - `data` - local data that can be injected in a local component (partial with `.component.slim` extension)
-  - `source_type` {string} default `html`
     type of source code used for code highlighting
 * `model_iframe`
-* `model_source` - Generate highlighted source code for HTML
+* `html` - Generate source code for HTML
 * `outline` - Generate outline of HTML structure
 
 ### Resource helpers

data/features/create.feature

@@ -35,6 +35,6 @@ Feature: Run `create` command
     And a directory named "source/test" should exist
     Then the file "source/test/test.html.slim" should contain "Hello World"
     And the file "source/test/test.html.slim" should contain "My model description"
-    And the file "source/test/index.html.slim" should contain "'partials/glyptotheque/model-index'"
+    And the file "source/test/index.html.slim" should contain "'glyptotheque/model-index'"
     And the file "source/test/test.yaml" should contain "hello: World"
     And the file "source/test/styles.scss" should contain "@import 'bourbon'"

data/lib/sculptor/extensions/model.rb

@@ -43,14 +43,11 @@ class Middleman::Extensions::Model < ::Middleman::Extension
 
       options[:title] = options[:title] || data.page.title
       options[:description] = options[:description] || data.page.description
+      options[:html] = html
 
       current_page.add_metadata({ page: { iframe: options[:iframe] || false }})
 
-      options[:html] = html
-      options[:source_code] = html
-      options[:source_type] ||= 'html'
-
-      partial('partials/glyptotheque/model', locals: options)
+      partial('glyptotheque/model', locals: options)
     end
 
     def model_iframe(location=nil, options={}, &block)
@@ -60,7 +57,7 @@ class Middleman::Extensions::Model < ::Middleman::Extension
 
     def model_source(type, &block)
       source_code = capture_html(&block)
-      partial('partials/glyptotheque/model-source', locals: { source_type: type, source_code: source_code })
+      partial('glyptotheque/model-source', locals: { source_type: type, source_code: source_code })
     end
 
     private

data/lib/sculptor/extensions/outliner.rb

@@ -12,7 +12,7 @@ class Middleman::Extensions::Outliner < ::Middleman::Extension
 
       elements = parse_elements(doc.children)
 
-      partial('partials/glyptotheque/model-outline', locals: { elements: elements })
+      partial('glyptotheque/model-outline', locals: { elements: elements })
     end
 
     private

data/lib/sculptor/extensions/resource_helpers.rb

@@ -21,14 +21,13 @@ class Middleman::Extensions::ResourceHelpers < ::Middleman::Extension
       resource.url.split('/').last
     end
 
-    def resources_for(dir, ext: 'html', exclude_indexes: false, sort_by: nil, ignore: nil)
+    def resources_for(dir, ext: 'html', exclude_indexes: false, sort_by: nil, ignore: nil, allow_hidden: false)
       filtered = sitemap.resources
         .reject  {|r| r.url == dir}                      # Exclude main directory index
-        .reject  {|r| r.data.hidden}                     # reject hidden (Front matter)
         .select  {|r| r.url.start_with?(dir)}            # Select files in the given dir
 
       collect_resources(filtered,
-        { ext: ext, exclude_indexes: exclude_indexes, sort_by: sort_by, ignore: ignore}
+        { ext: ext, exclude_indexes: exclude_indexes, sort_by: sort_by, ignore: ignore, allow_hidden: allow_hidden}
       )
     end
 
@@ -97,12 +96,15 @@ class Middleman::Extensions::ResourceHelpers < ::Middleman::Extension
         .select  {|r| r.ext == ".#{options[:ext]}"}      # Select files only HTML files
         .sort_by {|r| r.url }                            # Sort by url (default)
         .sort_by {|r| r.data[options[:sort_by]] || -1}   # Sort by `sort_by` param
+        .reject  {|r|                                    # Reject hidden (Front matter)
+          r.data.hidden unless options[:allow_hidden]
+        }
         .reject  {|r|                                    # Exclude all directory indexes
           options[:exclude_indexes] ? r.directory_index? : false
         }
         .reject  {|r| ignore ? r.url.match(options[:ignore]) : false }  # Ignore URLs matching pattern (if provided)
         .reject  {|r| r.path.end_with? ("-standalone#{r.ext}")}         # Ignore proxied '-standalone' mode pages
-        .reject  {|r| r.path.start_with? ("partials/")}                 # Ignore partials
+        .reject  {|r| r.path.start_with? ("glyptotheque/")}             # Ignore Sculptor’s partials
     end
 
     def parse_resource(r, options)

data/lib/sculptor/templates/glyptotheque/config.tt

@@ -6,7 +6,7 @@
 page '/**', :layout => 'glyptotheque'
 # With no layout
 page "*.component", :layout => false
-page "/partials/*", :layout => false, directory_index: false
+page "/glyptotheque/*", :layout => false, directory_index: false
 page '*.css', :layout => false
 page '*.js', :layout => false
 page '*.json', :layout => false
@@ -21,10 +21,10 @@ page '*.json', :layout => false
 
 ready do
   # Create mappings for standalone (implementation) pages (iframe embeddable)
-  resources_for('/', exclude_indexes: true).each do |r|
+  resources_for('/', exclude_indexes: true, allow_hidden: true).each do |r|
     proxy "#{r.path.sub(r.ext, '')}-standalone.html", r.path, layout: 'standalone'
   end
-  resources_for('/').each do |r|
+  resources_for('/', allow_hidden: true).each do |r|
     proxy "#{r.path.sub(r.ext, '')}/standalone", r.path, layout: 'standalone'
   end
 end

data/lib/sculptor/templates/glyptotheque/source/assets/js/glyptotheque/directives.js

@@ -32,7 +32,7 @@ angular.module('directives', [])
       replace: true,
       scope: true,
       templateUrl: function() {
-        return relativePathToRoot() + 'partials/glyptotheque/menu.html';
+        return relativePathToRoot() + 'glyptotheque/menu.html';
       },
       controller: function($scope) {
         $scope.items = window.APP_CONTEXT.sitemap;
@@ -54,7 +54,7 @@ angular.module('directives', [])
         filter: '='
       },
       templateUrl: function() {
-        return relativePathToRoot() + 'partials/glyptotheque/menu-tree.html';
+        return relativePathToRoot() + 'glyptotheque/menu-tree.html';
       },
       link: function($scope, $element, $attrs) {
         $scope.relativeUrl = function(url) {
@@ -69,7 +69,7 @@ angular.module('directives', [])
       restrict: 'E',
       replace: true,
       templateUrl: function() {
-        return relativePathToRoot() + 'partials/glyptotheque/menu-node.html';
+        return relativePathToRoot() + 'glyptotheque/menu-node.html';
       },
       link: function($scope, $element, $attrs) {
         $scope.relativeUrl = function(url) {

data/lib/sculptor/templates/glyptotheque/source/assets/styles/glyptotheque/_model-utils.scss

@@ -0,0 +1,61 @@
+.glypto-model-utils {
+  > menu {
+    margin: 0;
+    padding: 8px;
+  }
+
+  ._tab-toggle {
+    display: inline-block;
+    font-size: 10px;
+    font-weight: 600;
+    color: rgba(black, .3);
+    text-transform: uppercase;
+    padding: 4px 8px;
+    background: none;
+    border-radius: 3px;
+    border: none;
+    outline: none;
+    margin-right: 3px;
+
+    &:hover {
+      color: rgba(black, .4);
+      background: rgba(white, .7);
+    }
+    &:active {
+      color: rgba(black, .5);
+      background: white;
+    }
+
+    &.__active {
+      background: rgba(black, .3);
+      color: rgba(white, .9);
+
+      &:active {
+        background: rgba(black, .5);
+        color: white;
+      }
+    }
+  }
+
+  ._container {
+    max-height: 40rem;
+    overflow: auto;
+  }
+
+  ._panel {
+    border-top: 1px solid rgba(black, .05);
+    padding: 10px 15px;
+    background: rgba(black, .05);
+    display: none;
+
+    &.__shown {
+      display: block;
+    }
+  }
+
+  pre {
+    font: 12px/1.4 Menlo, monospace;
+    white-space: pre-wrap;
+    margin: 0;
+  }
+}

data/lib/sculptor/templates/glyptotheque/source/assets/styles/glyptotheque/_model.scss

@@ -54,24 +54,15 @@
     background: white;
     padding: $_padding;
 
-    &:before {
-      @include transition(300ms);
-      @include position(absolute, $_padding $_padding $_padding $_padding);
-      margin: -1px;
-      box-shadow: 0 0 0 1px transparent;
-      content: '';
-    }
-
-    &:hover:before {
-      box-shadow: 0 0 0 1px rgba(black, .1);
-    }
-
     > figure,
     > iframe {
-      @include box-sizing(content-box);
+      @include transition(300ms);
       display: block;
       margin: 0;
-      position: relative;
+
+      &:hover {
+        box-shadow: 0 0 0 1px white, 0 0 0 2px rgba(black, .1);
+      }
     }
 
     > figure {
@@ -100,69 +91,4 @@
       }
     }
   }
-
-  > .glypto-model-source,
-  > .glypto-model-outline  {
-    background: rgba(black, .03);
-    box-shadow: inset 0 1px darken($light-grey, 5);
-
-    > header {
-      padding: 8px 15px;
-    }
-
-    ._toggle {
-      display: block;
-      font-size: 10px;
-      font-weight: 600;
-      line-height: 1rem;
-      letter-spacing: 1px;
-      color: rgba(black, .3);
-      text-transform: uppercase;
-      padding: 0;
-      background: none;
-      border: none;
-      outline: none;
-
-      &:before {
-        @include transition(120ms);
-        content: '▶';
-        display: inline-block;
-        margin-right: 4px;
-      }
-
-      &:hover {
-        color: rgba(black, .4);
-      }
-      &:active {
-        color: rgba(black, .6);
-      }
-
-      &.__toggled:before {
-        @include transform(rotate(90deg));
-      }
-    }
-
-    > ._container {
-      @include transition(120ms);
-      max-height: 0;
-      overflow: auto;
-    }
-
-    pre {
-      font: 12px/1.4 Menlo, monospace;
-      padding: 10px 15px;
-      margin: 0;
-      white-space: pre-wrap;
-    }
-
-    &.__expanded {
-      > header {
-        border-bottom: 1px solid darken($light-grey, 3);
-      }
-
-      > ._container {
-        max-height: 20rem;
-      }
-    }
-  }
 }

data/lib/sculptor/templates/glyptotheque/source/assets/styles/glyptotheque/_outliner.scss

@@ -4,7 +4,6 @@
 
     display: inline-block;
     vertical-align: top;
-    white-space: nowrap;
     overflow: hidden;
 
     @if $color {
@@ -20,53 +19,57 @@
     }
   }
 
-  ._elements {
-    padding: 10px 15px;
-    font: 600 11px Menlo, monospace;
-    cursor: default;
-  }
+  font: 600 11px Menlo, monospace;
+  cursor: default;
 
   ._element {
     @include transition(100ms);
-    margin: 1px 0 0;
-    padding: 2px;
+    padding: 1px 2px 2px;
     border-radius: 3px;
+    margin: 1px 1px 1px;
 
     &:hover {
       box-shadow: inset 0 0 0 1px rgba(black, .07);
       background: rgba(white, .2);
     }
 
+    > span {
+      margin-top: 1px;
+    }
+
     ._element {
       margin-left: 10px;
     }
-  }
 
-  ._element {
+    > ._name,
+    ._classes {
+      border-radius: 3px;
+      background: rgba(white, .2);
+    }
+
     > ._name,
     ._classes,
     ._class {
       padding: 2px 5px;
-      border-radius: 3px;
-      background: rgba(white, .2);
       margin-right: 1px;
+      white-space: nowrap;
     }
   }
 
   ._classes {
     @include _item;
-    box-shadow: inset 0 0 0 1px rgba(#cc3333, .1);
+    box-shadow: inset 0 0 0 1px rgba(#cc3333, .2);
   }
 
   ._element > ._name {
     @include _item(#003366);
-    box-shadow: inset 0 0 0 1px rgba(#003366, .1);
+    box-shadow: inset 0 0 0 1px rgba(#003366, .2);
   }
 
   ._element ._class {
     @include _item(#cc3333, $before: '.');
     margin: -2px 0 -2px -1px;
-    border-left: 1px solid #ddd;
+    border-left: 1px solid rgba(#cc3333, .1);
     background: none;
 
     &:first-child {
@@ -85,18 +88,15 @@
 
   ._attributes {
     @include _item;
-    padding: 2px 5px;
-    box-shadow: inset 0 0 0 1px rgba(#aaa, .2);
+    padding: 2px;
+    // box-shadow: inset 0 0 0 1px rgba(#aaa, .2);
     border-radius: 3px;
+    word-break: break-word;
   }
 
   ._attr {
     margin: 0 3px;
 
-    &:last-of-type:after {
-      content: none;
-    }
-
     > ._name {
       @include _item(#3366cc, $after: '=');
     }
@@ -106,7 +106,8 @@
       position: relative;
       padding-right: 7px;
       text-overflow: ellipsis;
-      max-width: 200px;
+      white-space: nowrap;
+      max-width: 400px;
 
       &:after {
         position: absolute;
@@ -117,11 +118,9 @@
 
   ._text {
     @include _item(#aaa);
-    font-weight: normal;
-    padding: 2px 5px;
-    font-size: 13px;
-    font-family: Helvetica, Arial, sans-serif;
-    text-overflow: ellipsis;
-    max-width: 200px;
+    font: normal 13px/15px Helvetica, Arial, sans-serif;
+    padding: 2px 5px 0;
+    max-width: 360px;
+    word-break: break-word;
   }
 }

data/lib/sculptor/templates/glyptotheque/source/assets/styles/glyptotheque.scss

@@ -4,4 +4,5 @@
 @import 'glyptotheque/base';
 @import 'glyptotheque/nav';
 @import 'glyptotheque/model';
+@import 'glyptotheque/model-utils';
 @import 'glyptotheque/outliner';

data/lib/sculptor/templates/glyptotheque/source/{partials/glyptotheque → glyptotheque}/_model-outline-element.slim

@@ -10,9 +10,9 @@
         span._attr
           span._name = a.name
           span._value title="#{a.value.length > 27 ? a.value.strip : nil}" = a.value
-  - if item.text
+  - if item.text.present?
     span._text title="#{item.text.length > 27 ? item.text.strip : nil}" = item.text
 
   - if item.children.any?
     - item.children.each do | child |
-      = partial 'partials/glyptotheque/model-outline-element', locals: { item: child }
+      = partial 'glyptotheque/model-outline-element', locals: { item: child }

data/lib/sculptor/templates/glyptotheque/source/glyptotheque/_model-outline.slim

@@ -0,0 +1,2 @@
+- elements.each do |item|
+  = partial 'glyptotheque/model-outline-element', locals: { item: item }

data/lib/sculptor/templates/glyptotheque/source/glyptotheque/_model-utils.slim

@@ -0,0 +1,7 @@
+section.glypto-model-utils
+  menu
+    button._tab-toggle(ng-class="{'__active': show == 'source'}" ng-click="show = show === 'source' ? null : 'source'") HTML source
+    button._tab-toggle(ng-class="{'__active': show == 'outline'}" ng-click="show = show === 'outline' ? null : 'outline'") Outline
+  ._container
+    ._panel.glypto-model-source ng-class="{'__shown': show == 'source'}" = code('html') { html }
+    ._panel.glypto-model-outline ng-class="{'__shown': show == 'outline'}" = outline(html)

data/lib/sculptor/templates/glyptotheque/source/{partials/glyptotheque → glyptotheque}/_model.slim

@@ -28,8 +28,7 @@
       - else
         figure = html
 
-    = model_source(source_type) { source_code }
-    = outline(html)
+    = partial 'glyptotheque/model-utils', locals: { html: html }
 
   - unless locals[:iframe]
     - stylesheets = current_page.metadata.page[:stylesheet] || current_page.metadata.page[:stylesheets] || current_page.data[:stylesheet] || current_page.data[:stylesheets]

data/lib/sculptor/templates/glyptotheque/source/index.html.slim

@@ -2,4 +2,4 @@
   h1 Go ahead, create some models
   p: code sculptor create hello
 - else
-  = partial 'partials/glyptotheque/model-index'
+  = partial 'glyptotheque/model-index'

data/lib/sculptor/templates/model/index-template.tt

@@ -2,4 +2,4 @@
 title: <%= @dir %>
 ---
 
-= partial 'partials/glyptotheque/model-index'
+= partial 'glyptotheque/model-index'

data/lib/sculptor/version.rb

@@ -1,3 +1,3 @@
 module Sculptor
-  VERSION = "0.0.7"
+  VERSION = "0.0.8"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sculptor
 version: !ruby/object:Gem::Version
-  version: 0.0.7
+  version: 0.0.8
 platform: ruby
 authors:
 - Tyom Semonov
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-11-03 00:00:00.000000000 Z
+date: 2014-11-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -288,6 +288,7 @@ files:
 - lib/sculptor/templates/glyptotheque/source/assets/styles/glyptotheque.scss
 - lib/sculptor/templates/glyptotheque/source/assets/styles/glyptotheque/_$variables.scss
 - lib/sculptor/templates/glyptotheque/source/assets/styles/glyptotheque/_base.scss
+- lib/sculptor/templates/glyptotheque/source/assets/styles/glyptotheque/_model-utils.scss
 - lib/sculptor/templates/glyptotheque/source/assets/styles/glyptotheque/_model.scss
 - lib/sculptor/templates/glyptotheque/source/assets/styles/glyptotheque/_nav.scss
 - lib/sculptor/templates/glyptotheque/source/assets/styles/glyptotheque/_outliner.scss
@@ -296,19 +297,19 @@ files:
 - lib/sculptor/templates/glyptotheque/source/assets/styles/pygments/colorful.css
 - lib/sculptor/templates/glyptotheque/source/assets/styles/pygments/github.css
 - lib/sculptor/templates/glyptotheque/source/assets/styles/pygments/trac.css
+- lib/sculptor/templates/glyptotheque/source/glyptotheque/_model-index.slim
+- lib/sculptor/templates/glyptotheque/source/glyptotheque/_model-outline-element.slim
+- lib/sculptor/templates/glyptotheque/source/glyptotheque/_model-outline.slim
+- lib/sculptor/templates/glyptotheque/source/glyptotheque/_model-utils.slim
+- lib/sculptor/templates/glyptotheque/source/glyptotheque/_model.slim
+- lib/sculptor/templates/glyptotheque/source/glyptotheque/_nav.slim
+- lib/sculptor/templates/glyptotheque/source/glyptotheque/menu-node.html.slim
+- lib/sculptor/templates/glyptotheque/source/glyptotheque/menu-tree.html.slim
+- lib/sculptor/templates/glyptotheque/source/glyptotheque/menu.html.slim
 - lib/sculptor/templates/glyptotheque/source/index.html.slim
 - lib/sculptor/templates/glyptotheque/source/layouts/glyptotheque.slim
 - lib/sculptor/templates/glyptotheque/source/layouts/layout.slim
 - lib/sculptor/templates/glyptotheque/source/layouts/standalone.slim
-- lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/_model-index.slim
-- lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/_model-outline-element.slim
-- lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/_model-outline.slim
-- lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/_model-source.slim
-- lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/_model.slim
-- lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/_nav.slim
-- lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/menu-node.html.slim
-- lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/menu-tree.html.slim
-- lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/menu.html.slim
 - lib/sculptor/templates/glyptotheque/source/sitemap.json.erb
 - lib/sculptor/templates/model/data.tt
 - lib/sculptor/templates/model/index-template.tt

data/lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/_model-outline.slim

@@ -1,7 +0,0 @@
-section.glypto-model-outline ng-class="{'__expanded': outline_expanded}"
-  header
-    button._toggle(ng-class="{'__toggled': outline_expanded}" ng-click="outline_expanded = !outline_expanded") Outline
-  ._container
-    ._elements
-      - elements.each do |item|
-        = partial 'partials/glyptotheque/model-outline-element', locals: { item: item }

data/lib/sculptor/templates/glyptotheque/source/partials/glyptotheque/_model-source.slim

@@ -1,5 +0,0 @@
-section.glypto-model-source ng-class="{'__expanded': expanded}"
-  header
-    button._toggle(ng-class="{'__toggled': expanded}" ng-click="expanded = !expanded") #{source_type} source
-  ._container
-    = code(source_type) { source_code }