Skip to content

P
patternlibrary
Commit 0f8f8560 authored by Björn Bartels's avatar Björn Bartels
Browse files
Options

basic docs layout, update parsing and rendering, clean up

parent 8ee9faea
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 25450 additions and 583 deletions
.gitignore
View file @ 0f8f8560
......@@ -8,4 +8,6 @@ npm-debug.log
.idea/
.buildpath
.project
.settings
\ No newline at end of file
.settings
*_save*
*.save*
data/patternlibrary.json deleted 100644 → 0
View file @ 8ee9faea
{}
\ No newline at end of file
gui/assets/css/font-awesome.min.css 0 → 100644
View file @ 0f8f8560
This diff is collapsed.
gui/assets/css/patternlibrary.css 0 → 100644
View file @ 0f8f8560
This diff is collapsed.
gui/assets/fonts/fontawesome-webfont.svg 0 → 100644
View file @ 0f8f8560
This source diff could not be displayed because it is too large. You can view the blob instead.
gui/assets/js/patternlibrary-frontend.js 0 → 100644
View file @ 0f8f8560
This source diff could not be displayed because it is too large. You can view the blob instead.
gui/assets/js/vendor.js 0 → 100644
View file @ 0f8f8560
This diff is collapsed.
gui/assets/vendor/patternlibrary/css/font-awesome.min.css 0 → 100644
View file @ 0f8f8560
This diff is collapsed.
gui/assets/vendor/patternlibrary/css/patternlibrary.css 0 → 100644
View file @ 0f8f8560
This diff is collapsed.
gui/assets/vendor/patternlibrary/fonts/fontawesome-webfont.svg 0 → 100644
View file @ 0f8f8560
This source diff could not be displayed because it is too large. You can view the blob instead.
gui/assets/vendor/patternlibrary/js/patternlibrary-frontend.js 0 → 100644
View file @ 0f8f8560
This source diff could not be displayed because it is too large. You can view the blob instead.
gui/assets/vendor/patternlibrary/js/vendor.js 0 → 100644
View file @ 0f8f8560
This diff is collapsed.
gui/src/layouts/ajax.html 0 → 100644
View file @ 0f8f8560
{{!-- layout for simple template ajax requests --}}
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
{{> body}}
gui/src/layouts/default.html 0 → 100644
View file @ 0f8f8560
<!DOCTYPE html>
<html>
<head>
<title>[patternlibray-frontend] prototype</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="apple-touch-fullscreen" content="YES">
<link rel="stylesheet" media="screen" type="text/css" href="{{root}}assets/css/patternlibrary.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="{{root}}assets/css/ie8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="{{root}}assets/css/ie9.css" /><![endif]-->
<script src="{{root}}assets/js/vendor.js"></script>
<script src="{{root}}assets/js/patternlibrary-frontend.js"></script>
</head>
<body>
<section id="patternlibrarySection" class="patternlibrary">
<div class="row column small-12">
{{> top-bar}}
{{> body}}
{{> footer}}
</div>
</section>
</body>
</html>
\ No newline at end of file
gui/src/layouts/patternpage.html 0 → 100644
View file @ 0f8f8560
<!DOCTYPE html>
<html>
<head>
<title>[patternlibray-frontend] prototype</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="apple-touch-fullscreen" content="YES">
<link rel="stylesheet" media="screen" type="text/css" href="/assets/vendor/patternlibrary/css/patternlibrary.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="{{root}}assets/css/ie8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="{{root}}assets/css/ie9.css" /><![endif]-->
<script src="/assets/vendor/patternlibrary/js/vendor.js"></script>
<script src="/assets/vendor/patternlibrary/js/patternlibrary-frontend.js"></script>
</head>
<body>
<section id="patternlibrarySection" class="patternlibrary">
<div class="row column small-12">
{{> top-bar}}
{{> body}}
{{> footer}}
</div>
</section>
</body>
</html>
\ No newline at end of file
gui/src/layouts/template.html 0 → 100644
View file @ 0f8f8560
{{!-- layout for simple template ajax requests --}}
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
{{> body}}
gui/src/pages/pl/atoms/index.html 0 → 100644
View file @ 0f8f8560
<header class="hide-for-small show-for-large hide hidden is-hidden">
<div class="small-12 columns">
<h1>Patterns</h1>
</div>
</header>
<div class="small-12 columns">
{{> patterns-list no_demo="true"}}
</div>
gui/src/pages/pl/index.html 0 → 100644
View file @ 0f8f8560
<header class="hide-for-small show-for-large hide hidden is-hidden">
<div class="small-12 columns">
<h1>Patterns</h1>
</div>
</header>
<div class="small-12 columns">
{{> patterns-list no_demo="true"}}
</div>
gui/src/pages/pl/molecules/index.html 0 → 100644
View file @ 0f8f8560
<header class="hide-for-small show-for-large hide hidden is-hidden">
<div class="small-12 columns">
<h1>Patterns</h1>
</div>
</header>
<div class="small-12 columns">
{{> patterns-list no_demo="true"}}
</div>
gui/src/pages/pl/organisms/index.html 0 → 100644
View file @ 0f8f8560
<header class="hide-for-small show-for-large hide hidden is-hidden">
<div class="small-12 columns">
<h1>Patterns</h1>
</div>
</header>
<div class="small-12 columns">
{{> patterns-list no_demo="true"}}
</div>
gui/src/pages/pl/templates/index.html 0 → 100644
View file @ 0f8f8560
<header class="hide-for-small show-for-large hide hidden is-hidden">
<div class="small-12 columns">
<h1>Patterns</h1>
</div>
</header>
<div class="small-12 columns">
<!-- PL:TEMPLATE-LIST -->
</div>
gui/src/pages/template-supercollider.html 0 → 100644
View file @ 0f8f8560
{{> docs-htmlhead}}
{{> docs-body}}
{{> docs-htmlclose}}
gui/src/partials/_demo/_template-supercollider2.html 0 → 100644
View file @ 0f8f8560
This diff is collapsed.
gui/src/partials/_demo/template-supercollider.html 0 → 100644
View file @ 0f8f8560
<h1>{{ title }}</h1>
<p class="lead">{{ description }}</p>
{{ docs }}
<hr>
{{#if sass}}
<! -- section>
{{#heading 2}}Sass Reference{{/heading}}
{{#if sass.variable}}
<section>
{{#heading 3 'sass-variables'}}Variables{{/heading}}
<p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
<table class="docs-variable-table">
<thead>
<tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
</thead>
{{#each sass.variable}}
<tr>
<td class="name"><code>${{this.context.name}}</code></td>
<td>{{formatSassTypes this.type}}</td>
<td class="{{toLower this.type}}"><code>{{formatSassValue this.context.value}}</code></td>
<td>{{md this.description}}</td>
</tr>
{{/each}}
</table>
</section>
{{/if}}
{{#if sass.mixin}}
{{#if sass.variable}}<hr>{{/if}}
<section>
{{#heading 3 'sass-mixins'}}Mixins{{/heading}}
<p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
{{#each sass.mixin}}{{#filter this}}
<section {{#if this.deprecated }}class="docs-deprecated"{{/if}}>
{{#heading 4}}{{this.context.name}}{{/heading}}
{{#if this.since}}
<p class="docs-notice-added">Added in {{this.since.0.version}}</p>
{{/if}}
{{#if this.deprecated}}
<p class="docs-notice-deprecated">Deprecated in {{this.deprecated}}</p>
{{/if}}
<div class="docs-code">
<pre><code>{{writeSassMixin this}}</code></pre>
</div>
{{md this.description}}
{{#if this.aliased}}
<p><strong>Aliases:</strong> {{#each this.aliased}}<code>{{this}}()</code>{{/each}}</p>
{{/if}}
{{writeSassLink this.link}}
{{#if this.parameter}}
<table class="docs-variable-table">
<thead>
<tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
</thead>
{{#each this.parameter}}
<tr>
<td><code>${{this.name}}</code></td>
<td>{{formatSassTypes this.type}}</td>
<td><code>{{formatSassValue this.default}}</code></td>
<td>{{md this.description}}</td>
</tr>
{{/each}}
</table>
{{/if}}
</section>
{{#unless @last}}<hr>{{/unless}}
{{#if sass.function}}
<hr>
{{/if}}
{{/filter}}{{/each}}
</section>
{{/if}}
{{#if sass.function}}
<hr>
<section>
{{#heading 3 'sass-functions'}}Functions{{/heading}}
{{#each sass.function}}{{#filter this}}
<section {{#if this.deprecated }}class="docs-deprecated"{{/if}}>
{{#heading 4}}{{this.context.name}}{{/heading}}
{{#if this.since}}
<p class="docs-notice-added">Added in {{this.since.0.version}}</p>
{{/if}}
{{#if this.deprecated}}
<p class="docs-notice-deprecated">Deprecated in {{this.deprecated.version}}</p>
{{/if}}
<div class="docs-code">
<pre><code>{{writeSassFunction this}}</code></pre>
</div>
{{md this.description}}
{{writeSassLink this.link}}
{{#if this.parameter}}
<table class="docs-variable-table">
<thead>
<tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
</thead>
{{#each this.parameter}}
<tr>
<td><code>${{this.name}}</code></td>
<td>{{formatSassTypes this.type}}</td>
<td><code>{{formatSassValue this.default}}</code></td>
<td>{{md this.description}}</td>
</tr>
{{/each}}
</table>
{{/if}}
</section>
{{#unless @last}}<hr>{{/unless}}
{{/filter}}{{/each}}
</section>
{{/if}}
</section -->
<hr>
{{/if}}
{{#if js}}
<section>
{{#heading 2}}JavaScript Reference{{/heading}}
{{#if js.module}}{{#with js.module.[0]}}
<section>
{{#heading 3 'js-module'}}Initializing{{/heading}}
<p>The file <code>{{meta.filename}}</code> must be included in your JavaScript to use this plugin, along with <code>foundation.core.js</code>.{{#if requires}} <strong>This plugin also requires these utility libraries:</strong>{{/if}}</p>
{{#if requires}}{{#each requires}}
<ul>
<li><code>{{formatJsModule this}}</code></li>
</ul>
{{/each}}{{/if}}
</section>
{{/with}}{{/if}}
{{#each js.class}}
<section>
{{#heading 3 'js-class'}}Foundation.{{this.name}}{{/heading}}
{{md this.description}}
<div class="docs-code"><pre><code>{{writeJsConstructor this.name}}</code></pre></div>
{{#if this.fires}}
<p><strong>Fires these events:</strong>
{{#each this.fires}}
{{this}}
{{/each}}
</p>
{{/if}}
{{#if this.params}}
<table class="docs-variable-table">
<thead>
<tr><th>Name</th><th>Type</th><th>Description</th></tr>
</thead>
{{#each this.params}}
<tr>
<td><code>{{this.name}}</code></td>
<td>{{this.type.names.[0]}}</td>
<td>{{this.description}}</td>
</tr>
{{/each}}
</table>
{{/if}}
</section>
{{/each}}
<hr>
{{#if js.member}}
<section>
{{#heading 3 'js-options'}}Plugin Options{{/heading}}
<p>Use these options to customize an instance of {{title}}. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="javascript.html#initializing">Learn more about how JavaScript plugins are initialized.</a></p>
<table class="docs-variable-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
{{#each js.member}}
<tr>
<td><code>{{formatJsOptionName this.name}}</code></td>
<td><code>{{formatJsOptionTypes this.type}}</code></td>
<td><code>{{formatJsOptionValue this.defaultvalue}}</code></td>
<td>{{this.description}}</td>
</tr>
{{/each}}
</table>
</section>
{{/if}}
<hr>
{{#if js.event}}
<section>
{{#heading 3 'js-events'}}Events{{/heading}}
<p>These events will fire from any element with a {{title}} plugin attached.</p>
<table class="docs-variable-table">
<thead>
<tr><th>Name</th><th>Description</th></tr>
</thead>
{{#each js.event}}
<tr>
<td><code>{{formatJsEventName this.name ../title}}</code></td>
<td>{{this.description}}</td>
</tr>
{{/each}}
</table>
</section>
{{/if}}
<hr>
{{#if js.function}}
<section>
{{#heading 3 'js-functions'}}Methods{{/heading}}
{{#each js.function}}
<section>
{{#heading 4 this.name}}{{this.name}}{{/heading}}
<div class="docs-code">
<pre><code>{{ writeJsFunction this }}</code></pre>
</div>
{{md this.description}}
{{#if this.fires}}
<p><strong>Fires these events:</strong>
{{#each this.fires}}
{{this}}
{{/each}}
</p>
{{/if}}
{{#if this.params}}
<table class="docs-variable-table">
<thead>
<tr><th>Name</th><th>Type</th><th>Description</th></tr>
</thead>
{{#each this.params}}
<tr>
<td><code>{{this.name}}</code></td>
<td>{{this.type.names.[0]}}</td>
<td>{{this.description}}</td>
</tr>
{{/each}}
</table>
{{/if}}
{{#unless @last}}<hr>{{/unless}}
</section>
{{/each}}
</section>
{{/if}}
</section>
<hr>
{{/if}}
{{#if project}}
<p>Used in: <strong>{{ project }}</strong></p>
{{/if}}
gui/src/partials/atoms/atom-link.html 0 → 100644
View file @ 0f8f8560
<a class="{{class}}" href="{{href}}">{{label}}</a>
\ No newline at end of file
gui/src/partials/atoms/atom-modal-close-button.html 0 → 100644
View file @ 0f8f8560
<a class="btn btn-icon btn-cta-xhr cta-xhr-modal-close" href="javascript:return true;" aria-label="Close modal" data-close>
<span aria-hidden="true">&times;</span>
</a>
\ No newline at end of file
gui/src/partials/atoms/text-project-title.html 0 → 100644
View file @ 0f8f8560
[{{project.name}}{{#if project.version}} v{{project.version}}{{/if}}]
\ No newline at end of file
gui/src/partials/docs/docs-body.html 0 → 100644
View file @ 0f8f8560
<section id="patternlibrarySection" class="patternlibrary">
<div class="row column small-12">
{{> top-bar}}
<div class="small-12 columns">
<section class="row panel patternlist">
<div class="small-12 columns">
{{> patterns-list-filter no_demo="true"}}
</div>
<div class="small-12 columns">
<!-- PATTERNLIBRARY_CONTENT -->
<div class="row panel-body">
<div class="row columns large-12">
<ul class="accordion" data-accordion data-multi-expand="true" data-allow-all-closed="true" data-deep-link="true" data-update-history>
<li class="accordion-item row columns is-active" data-accordion-item>
<!-- Accordion tab title {{../root}}/patterns/{{pattern.name}} -->
<a href="{{patternlink title}}" class="accordion-title row columns is-active">
<div class="columns medium-6 small-12">Name: {{title}}</div>
<div class="columns medium-6 hide-for-small show-for-medium categories">Categories:
{{#each pattern.categories as |category|}}
<span class="name">{{category}}</span>
{{/each}}
</div>
</a>
<!-- Accordion tab content: it would start in the open state due to using the `is-active` state class. -->
<div class="accordion-content is-active" data-tab-content>
{{> docs-sections-tabs}}
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
\ No newline at end of file
gui/src/partials/docs/docs-htmlclose.html 0 → 100644
View file @ 0f8f8560
</body>
</html>
\ No newline at end of file
gui/src/partials/docs/docs-htmlhead.html 0 → 100644
View file @ 0f8f8560
<!DOCTYPE html>
<html>
<head>
<title>[{{> text-project-title}}]</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="apple-touch-fullscreen" content="YES">
<link rel="stylesheet" media="screen" type="text/css" href="/assets/vendor/patternlibrary/css/patternlibrary.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="{{root}}assets/css/ie8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="{{root}}assets/css/ie9.css" /><![endif]-->
<script src="/assets/vendor/patternlibrary/js/vendor.js"></script>
<script src="/assets/vendor/patternlibrary/js/patternlibrary-frontend.js"></script>
</head>
<body>
\ No newline at end of file
gui/src/partials/docs/docs-sections-tabs.html 0 → 100644
View file @ 0f8f8560
<div class="row collapse">
<div class="small-12 columns">
<ul class="tabs" data-tabs id="example-tabs">
<li class="tabs-title is-active"><a href="#panel-pattern" aria-selected="true">Pattern</a></li>
<li class="tabs-title"><a href="#panel-readme">ReadMe</a></li>
<li class="tabs-title"><a href="#panel-markup">Markup</a></li>
<li class="tabs-title"><a href="#panel-javascript">JS</a></li>
<li class="tabs-title"><a href="#panel-scss">SCSS</a></li>
<li class="tabs-title"><a href="#panel-specs">Specs</a></li>
<li class="tabs-title"><a href="#panel-tests">Tests</a></li>
<li class="tabs-title"><a href="#panel-changelog">Changelog</a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel-pattern">
{{> docs-section-pattern}}
</div>
<div class="tabs-panel" id="panel-readme">
{{> docs-section-readme}}
</div>
<div class="tabs-panel" id="panel-markup">
{{> docs-section-markup}}
</div>
<div class="tabs-panel" id="panel-javascript">
{{> docs-section-javascript}}
</div>
<div class="tabs-panel" id="panel-scss">
{{> docs-section-scss}}
</div>
<div class="tabs-panel" id="panel-specs">
{{> docs-section-specs}}
</div>
<div class="tabs-panel" id="panel-tests">
{{> docs-section-tests}}
</div>
<div class="tabs-panel" id="panel-changelog">
{{> docs-section-changelog}}
</div>
</div>
</div>
</div>
\ No newline at end of file
gui/src/partials/docs/sections/docs-section-changelog.html 0 → 100644
View file @ 0f8f8560
{{#unless changelog}}
<section>
{{#heading 3}}no change-log info available...{{/heading}}
</section>
{{/unless}}
{{#if changelog}}
<section>
{{#heading 2}}Change-Log{{/heading}}
<article>
{{changelog}}
</article>
</section>
{{/if}}
\ No newline at end of file
gui/src/partials/docs/sections/docs-section-javascript.html 0 → 100644
View file @ 0f8f8560
{{#unless js}}
<section>
{{#heading 3}}no JavaScript reference available...{{/heading}}
</section>
{{/unless}}
{{#if js}}
<section>
{{#heading 2}}JavaScript Reference{{/heading}}
{{#if js.module}}{{#with js.module.[0]}}
<section>
{{#heading 3 'js-module'}}Initializing{{/heading}}
<p>The file <code>{{meta.filename}}</code> must be included in your JavaScript to use this plugin, along with <code>foundation.core.js</code>.{{#if requires}} <strong>This plugin also requires these utility libraries:</strong>{{/if}}</p>
{{#if requires}}{{#each requires}}
<ul>
<li><code>{{formatJsModule this}}</code></li>
</ul>
{{/each}}{{/if}}
</section>
{{/with}}{{/if}}
{{#each js.class}}
<section>
{{#heading 3 'js-class'}}Foundation.{{this.name}}{{/heading}}
{{md this.description}}
<div class="docs-code"><pre><code>{{writeJsConstructor this.name}}</code></pre></div>
{{#if this.fires}}
<p><strong>Fires these events:</strong>
{{#each this.fires}}
{{this}}
{{/each}}
</p>
{{/if}}
{{#if this.params}}
<table class="docs-variable-table">
<thead>
<tr><th>Name</th><th>Type</th><th>Description</th></tr>
</thead>
{{#each this.params}}
<tr>
<td><code>{{this.name}}</code></td>
<td>{{this.type.names.[0]}}</td>
<td>{{this.description}}</td>
</tr>
{{/each}}
</table>
{{/if}}
</section>
{{/each}}
<hr>
{{#if js.member}}
<section>
{{#heading 3 'js-options'}}Plugin Options{{/heading}}
<p>Use these options to customize an instance of {{title}}. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="javascript.html#initializing">Learn more about how JavaScript plugins are initialized.</a></p>
<table class="docs-variable-table">
<thead>
<tr>