github/meteor
1
1
Fork 0
mirror of https://github.com/meteor/meteor.git synced 2026-05-02 03:01:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

"atoms" example

Browse Source 
Demonstrates "components" using the new convention where keyword args with no positional args become the data context.
This commit is contained in:
David Greenspan
2014-01-25 19:44:47 -08:00
parent 635b2c3910
commit 8cafffa82d
6 changed files with 56 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
examples/unfinished/atoms/.meteor/.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
local

9
examples/unfinished/atoms/.meteor/packages Normal file
View File

@@ -0,0 +1,9 @@
# Meteor packages used by this project, one per line.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.
standard-app-packages
autopublish
insecure
underscore

1
examples/unfinished/atoms/.meteor/release Normal file
View File

@@ -0,0 +1 @@
none

12
examples/unfinished/atoms/atoms.css Normal file
View File

@@ -0,0 +1,12 @@
g[class=atom] circle {
stroke: black;
stroke-width: 3px;
}
g[class=atom] text {
font-family: Arial, sans-serif;
font-size: 24px;
fill: black;
font-weight: bold;
text-anchor: middle;
}

28
examples/unfinished/atoms/atoms.html Normal file
View File

@@ -0,0 +1,28 @@
<head>
<title>SVG Clock</title>
</head>
<body>
<div id="atoms">
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
{{#atom x=100 y=100 color="#ffff00"}}O{{/atom}}
{{> hydrogen x=150 y=100}}
{{#giantatom x=250 y=100 color="#ff9999"}}My{{/giantatom}}
</svg>
</div>
</body>
<template name="atom">
<g class="atom">
<circle style="fill: {{#if color}}{{color}}{{else}}white{{/if}}" cx={{x}} cy={{y}} r={{#if r}}{{r}}{{else}}20{{/if}} />
<text x={{x}} y={{textY}}>{{> content}}</text>
</g>
</template>
<template name="hydrogen">
{{#atom x=x y=y r=r color="#00ffff"}}H{{/atom}}
</template>
<template name="giantatom">
{{#atom x=x y=y r=50 color=color}}{{> content}}{{/atom}}
</template>

5
examples/unfinished/atoms/atoms.js Normal file
View File

@@ -0,0 +1,5 @@
if (Meteor.isClient) {
Template.atom.textY = function () {
return this.y + 8;
};
}