Skip to content

Commit 91af557

Browse files
daedelothdaedeloth
authored
Merge pull request #20 from CatLabInteractive/copilot/update-readme-examples
Add index page and include all example scripts in README and workflows
2 parents 26bd714 + 72f442c commit 91af557

5 files changed

Lines changed: 321 additions & 4 deletions

File tree

‎.github/workflows/deploy-pr.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ jobs:
5050
const owner = context.repo.owner;
5151
const repo = context.repo.repo;
5252
const previewUrl = `https://${owner.toLowerCase()}.github.io/${repo}/pr/${prNumber}/examples/`;
53-
const body = `📦 PR Preview deployed!\n\nExamples are available at:\n- [Controls](${previewUrl}controls.html)\n- [Scroll](${previewUrl}scroll.html)\n- [Float](${previewUrl}float.html)\n- [Alpha Mask](${previewUrl}alphamask.html)`;
53+
const body = `📦 PR Preview deployed!\n\nExamples are available at:\n- [Controls](${previewUrl}controls.html)\n- [Scroll](${previewUrl}scroll.html)\n- [Float](${previewUrl}float.html)\n- [Alpha Mask](${previewUrl}alphamask.html)\n- [Background & Fill](${previewUrl}background.html)\n- [BigText](${previewUrl}bigtext.html)\n- [Emoji Text](${previewUrl}emoji.html)`;
5454
5555
// Check if a preview comment already exists
5656
const comments = await github.rest.issues.listComments({

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ dist/scripts/vendor/
33
.idea
44
node_modules/
55
dist/scripts/main.js
6-
dist/examples
6+
dist/examples
7+
dist/index.html

‎Gruntfile.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,13 @@ module.exports = function (grunt) {
8989
'cwd': './app/',
9090
'src': 'scripts/vendor/**/*',
9191
'dest': 'dist/'
92+
},
93+
94+
{
95+
'expand': true,
96+
'cwd': './app/',
97+
'src': 'index.html',
98+
'dest': 'dist/'
9299
}
93100
]
94101
}

‎README.md‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,16 @@ A GUI engine combining [EaselJS](https://createjs.com/easeljs) and [Backbone.js]
55
## Features
66
- Navigatable views with keyboard and mouse support
77
- UI controls: sliders, checkboxes, selectboxes, and buttons
8-
- Scrollable containers
9-
- Text rendering with auto-sizing
8+
- Scrollable containers with list and float layouts
9+
- Text rendering with auto-sizing and emoji support
1010
- Alpha mask support
11+
- Asset loading and management
1112
- Built on top of AMD modules (RequireJS)
1213

14+
## Documentation
15+
16+
Visit the [documentation and examples page](https://catlabinteractive.github.io/easelbone/) for a full overview of the library and live demos.
17+
1318
## Installation
1419
```bash
1520
npm install easelbone
@@ -28,6 +33,9 @@ Live examples are hosted on GitHub Pages:
2833
- [Scrollable Areas](https://catlabinteractive.github.io/easelbone/examples/scroll.html) — Scrollable container demo
2934
- [Float Layout](https://catlabinteractive.github.io/easelbone/examples/float.html) — Float layout demo
3035
- [Alpha Mask](https://catlabinteractive.github.io/easelbone/examples/alphamask.html) — Alpha mask demo
36+
- [Background & Fill](https://catlabinteractive.github.io/easelbone/examples/background.html) — Background fill and placeholder demo
37+
- [BigText](https://catlabinteractive.github.io/easelbone/examples/bigtext.html) — Auto-sizing text rendering demo
38+
- [Emoji Text](https://catlabinteractive.github.io/easelbone/examples/emoji.html) — Text rendering with emoji support
3139

3240
Pull request previews are automatically deployed to `https://catlabinteractive.github.io/easelbone/pr/<PR_NUMBER>/examples/`.
3341

‎app/index.html‎

Lines changed: 301 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,301 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>EaselBone — GUI Engine for EaselJS + Backbone.js</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
16+
line-height: 1.6;
17+
color: #333;
18+
background: #f8f9fa;
19+
}
20+
21+
header {
22+
background: #2c3e50;
23+
color: #ecf0f1;
24+
padding: 2rem 1rem;
25+
text-align: center;
26+
}
27+
28+
header h1 {
29+
font-size: 2.5rem;
30+
margin-bottom: 0.5rem;
31+
}
32+
33+
header p {
34+
font-size: 1.1rem;
35+
color: #bdc3c7;
36+
max-width: 600px;
37+
margin: 0 auto;
38+
}
39+
40+
.container {
41+
max-width: 960px;
42+
margin: 0 auto;
43+
padding: 2rem 1rem;
44+
}
45+
46+
h2 {
47+
font-size: 1.5rem;
48+
margin-bottom: 1rem;
49+
color: #2c3e50;
50+
border-bottom: 2px solid #ecf0f1;
51+
padding-bottom: 0.5rem;
52+
}
53+
54+
.features {
55+
display: grid;
56+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
57+
gap: 1rem;
58+
margin-bottom: 2rem;
59+
}
60+
61+
.feature {
62+
background: #fff;
63+
border: 1px solid #dee2e6;
64+
border-radius: 6px;
65+
padding: 1.25rem;
66+
}
67+
68+
.feature h3 {
69+
font-size: 1.1rem;
70+
margin-bottom: 0.5rem;
71+
color: #2c3e50;
72+
}
73+
74+
.feature p {
75+
font-size: 0.9rem;
76+
color: #666;
77+
}
78+
79+
.examples {
80+
display: grid;
81+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
82+
gap: 1rem;
83+
margin-bottom: 2rem;
84+
}
85+
86+
.example-card {
87+
background: #fff;
88+
border: 1px solid #dee2e6;
89+
border-radius: 6px;
90+
padding: 1.25rem;
91+
text-decoration: none;
92+
color: inherit;
93+
transition: box-shadow 0.2s, border-color 0.2s;
94+
}
95+
96+
.example-card:hover {
97+
border-color: #3498db;
98+
box-shadow: 0 2px 8px rgba(52, 152, 219, 0.15);
99+
}
100+
101+
.example-card h3 {
102+
font-size: 1.1rem;
103+
margin-bottom: 0.5rem;
104+
color: #3498db;
105+
}
106+
107+
.example-card p {
108+
font-size: 0.9rem;
109+
color: #666;
110+
}
111+
112+
pre {
113+
background: #2c3e50;
114+
color: #ecf0f1;
115+
padding: 1rem;
116+
border-radius: 6px;
117+
overflow-x: auto;
118+
margin-bottom: 1rem;
119+
font-size: 0.9rem;
120+
}
121+
122+
code {
123+
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
124+
}
125+
126+
.inline-code {
127+
background: #e9ecef;
128+
padding: 0.15rem 0.4rem;
129+
border-radius: 3px;
130+
font-size: 0.85rem;
131+
}
132+
133+
section {
134+
margin-bottom: 2.5rem;
135+
}
136+
137+
footer {
138+
text-align: center;
139+
padding: 1.5rem 1rem;
140+
color: #999;
141+
font-size: 0.85rem;
142+
border-top: 1px solid #dee2e6;
143+
}
144+
145+
footer a {
146+
color: #3498db;
147+
text-decoration: none;
148+
}
149+
150+
footer a:hover {
151+
text-decoration: underline;
152+
}
153+
154+
.install-section p {
155+
margin-bottom: 0.5rem;
156+
}
157+
</style>
158+
</head>
159+
<body>
160+
<header>
161+
<h1>EaselBone</h1>
162+
<p>A GUI engine combining EaselJS and Backbone.js for building interactive canvas-based user interfaces.</p>
163+
</header>
164+
165+
<div class="container">
166+
<section>
167+
<h2>Features</h2>
168+
<div class="features">
169+
<div class="feature">
170+
<h3>Navigatable Views</h3>
171+
<p>Keyboard and mouse navigatable views built on Backbone.js, with support for multiple input users.</p>
172+
</div>
173+
<div class="feature">
174+
<h3>UI Controls</h3>
175+
<p>Sliders, checkboxes, selectboxes, and buttons with full keyboard navigation support.</p>
176+
</div>
177+
<div class="feature">
178+
<h3>Scrollable Containers</h3>
179+
<p>Scroll areas with list and float layout support, including programmatic scrolling and focus management.</p>
180+
</div>
181+
<div class="feature">
182+
<h3>Text Rendering</h3>
183+
<p>BigText auto-sizing text rendering with custom font support and emoji rendering via EmojiText.</p>
184+
</div>
185+
<div class="feature">
186+
<h3>Alpha Masks</h3>
187+
<p>Alpha mask support for creating complex visual effects on canvas elements.</p>
188+
</div>
189+
<div class="feature">
190+
<h3>Asset Loading</h3>
191+
<p>Built-in asset loader for managing spritesheets, images, and other resources with AMD/RequireJS modules.</p>
192+
</div>
193+
</div>
194+
</section>
195+
196+
<section>
197+
<h2>Live Examples</h2>
198+
<div class="examples">
199+
<a class="example-card" href="examples/controls.html">
200+
<h3>Controls</h3>
201+
<p>Interactive sliders, checkboxes, selectboxes, and buttons with keyboard navigation.</p>
202+
</a>
203+
<a class="example-card" href="examples/scroll.html">
204+
<h3>Scrollable Areas</h3>
205+
<p>Scrollable container with a list of items and programmatic focus scrolling.</p>
206+
</a>
207+
<a class="example-card" href="examples/float.html">
208+
<h3>Float Layout</h3>
209+
<p>Float container layout for arranging elements in a flexible grid within a scroll area.</p>
210+
</a>
211+
<a class="example-card" href="examples/alphamask.html">
212+
<h3>Alpha Mask</h3>
213+
<p>Demonstrates alpha mask capabilities for creating visual effects on canvas.</p>
214+
</a>
215+
<a class="example-card" href="examples/background.html">
216+
<h3>Background &amp; Fill</h3>
217+
<p>Background fill and placeholder display objects for image rendering in containers.</p>
218+
</a>
219+
<a class="example-card" href="examples/bigtext.html">
220+
<h3>BigText</h3>
221+
<p>Auto-sizing text rendering with custom fonts that fills available container space.</p>
222+
</a>
223+
<a class="example-card" href="examples/emoji.html">
224+
<h3>Emoji Text</h3>
225+
<p>Text rendering with inline emoji support using OpenMoji font rendering.</p>
226+
</a>
227+
</div>
228+
</section>
229+
230+
<section class="install-section">
231+
<h2>Installation</h2>
232+
<p>Install via npm:</p>
233+
<pre><code>npm install easelbone</code></pre>
234+
<p>Or with Bower:</p>
235+
<pre><code>bower install easelbone</code></pre>
236+
</section>
237+
238+
<section>
239+
<h2>Quick Start</h2>
240+
<pre><code>require(['easelbone'], function (easelbone) {
241+
// Create a root view attached to a DOM container
242+
var rootView = new easelbone.Views.Root({
243+
container: document.getElementById('container')
244+
});
245+
246+
// Create a navigatable view
247+
var MyView = easelbone.Views.Navigatable.extend({
248+
initialize: function () {
249+
this.initializeNavigatable({ orientation: 'vertical' });
250+
},
251+
render: function () {
252+
// Add your content here
253+
}
254+
});
255+
256+
var view = new MyView();
257+
rootView.setView(view);
258+
});</code></pre>
259+
</section>
260+
261+
<section>
262+
<h2>API Overview</h2>
263+
<div class="features">
264+
<div class="feature">
265+
<h3>Views</h3>
266+
<p><code class="inline-code">Views.Root</code> — Root stage container<br>
267+
<code class="inline-code">Views.Navigatable</code> — Keyboard/mouse navigatable view<br>
268+
<code class="inline-code">Views.Layer</code> — View layering<br>
269+
<code class="inline-code">Views.LoadingView</code> — Loading state view</p>
270+
</div>
271+
<div class="feature">
272+
<h3>Controls</h3>
273+
<p><code class="inline-code">Controls.Slider</code> — Range slider<br>
274+
<code class="inline-code">Controls.Checkbox</code> — Toggle checkbox<br>
275+
<code class="inline-code">Controls.Button</code> — Clickable button<br>
276+
<code class="inline-code">Controls.Selectbox</code> — Dropdown select<br>
277+
<code class="inline-code">Controls.ScrollArea</code> — Scrollable area<br>
278+
<code class="inline-code">Controls.List</code> — List container<br>
279+
<code class="inline-code">Controls.FloatContainer</code> — Float layout</p>
280+
</div>
281+
<div class="feature">
282+
<h3>Display Objects</h3>
283+
<p><code class="inline-code">EaselJS.BigText</code> — Auto-sizing text<br>
284+
<code class="inline-code">EaselJS.EmojiText</code> — Emoji-enabled text<br>
285+
<code class="inline-code">EaselJS.Placeholder</code> — Placeholder container<br>
286+
<code class="inline-code">EaselJS.Fill</code> — Fill display object<br>
287+
<code class="inline-code">EaselJS.Background</code> — Background renderer</p>
288+
</div>
289+
</div>
290+
</section>
291+
</div>
292+
293+
<footer>
294+
<p>
295+
<a href="https://github.com/CatLabInteractive/easelbone">GitHub Repository</a> ·
296+
Built by <a href="https://github.com/CatLabInteractive">CatLab Interactive</a> ·
297+
Licensed under MIT
298+
</p>
299+
</footer>
300+
</body>
301+
</html>

0 commit comments

Comments
 (0)