Skip to content

Commit

Permalink
eh
Browse files Browse the repository at this point in the history
  • Loading branch information
@markhuot
markhuot committed Feb 29, 2012
1 parent 7022343 commit 74a0203
Show file tree
Hide file tree
Showing 15 changed files with 148 additions and 79 deletions.
20 changes: 11 additions & 9 deletions test12/README.md
View file
@@ -1,11 +1,13 @@
* http://en.wikipedia.org/wiki/Hierarchy_of_life

organism
organ
tissue
cell
organelle
molecule
atom
particle
quark
Classifications

* organism
* organ
* tissue
* cell
* organelle
* molecule
* atom
* particle
* quark
7 changes: 7 additions & 0 deletions test12/css/fields/blockquote.css
View file
@@ -0,0 +1,7 @@
.atom[data-type="blockquote"] .content {
padding: 0 0 0 100px;
}

.atom[data-type="blockquote"] [name="author"] {
font-style: italic;
}
5 changes: 5 additions & 0 deletions test12/css/fields/heading.css
View file
@@ -1,3 +1,8 @@
.atom[data-type="heading"] td {
font-weight: bold;
font-size: 24px;
}

.atom[data-type="heading"] .content {
padding: 1em 10px 10px;
}
1 change: 1 addition & 0 deletions test12/css/fields/list.css
View file
@@ -1,6 +1,7 @@
.atom[data-type="list"] td {
position: relative;
padding-left: 20px;
font-size: 12px;
}
.atom[data-type="list"] td:before {
content: "•";
Expand Down
90 changes: 58 additions & 32 deletions test12/css/style.css
View file
@@ -1,60 +1,86 @@
/** {
.stack * {
margin: 0;
padding: 0;
}*/
}

.table {
width: 100%;
.stack {
margin: 0 0 10px;
font-family: "Lucida Grande", sans-serif;
}

.atoms {
width: 50%;
.stack .molecule {
border: 1px solid #ccc;
margin-bottom: 10px;
text-align: left;
}

*:focus {
background: red;
.stack .table {
border-collapse: collapse;
border: none;
width: 100%;
}

.cell {
vertical-align: top;
.stack .cell {
border: none;
}

.content {
height: 100%;
.stack *:focus {
background: #fffde8;
outline: none;
}

/*.table {
border-collapse: collapse;
.stack .atom:focus {
outline: 3px solid #CFE4FF;
}

.table, .cell {
border: none;
.stack .content {
height: 100%;
padding: 10px;
}

.cell {
border-bottom: 1px solid transparent;
border-right: 1px solid transparent;
.stack .add {
opacity: 0.25;
}

.atom .cell:last-child {
border-right: none;
.stack .add:hover {
opacity: 1;
}

.atom:last-child tr:last-child .cell {
border-bottom: none;
.stack > .add a {
display: block;
border-radius: 5px;
text-decoration: none;
color: #999;
padding: 5px 10px;
font-size: 12px;
background: whiteSmoke;
text-shadow: 0 1px 0 #fff;
}

.molecule:hover .cell {
border-color: #ccc;
.stack .molecule > .add:before {
content: "Add content: ";
padding: 5px 5px 5px 0;
display: inline-block;
}

*:focus {
outline: none;
.stack .molecule > .add {
background: whiteSmoke;
margin: 5px;
padding: 5px;
border-radius: 5px;
list-style: none;
color: #ccc;
font-size: 12px;
}

.content {
line-height: 1.4;
font-size: 18px;
padding: 10px;
}*/
.stack .molecule > .add li {
display: inline-block;
}

.stack .molecule > .add a {
display: inline-block;
padding: 5px 10px 5px 0;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
color: #999;
}
Binary file added test12/img/px_by_Gre3g.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
42 changes: 18 additions & 24 deletions test12/index.html
View file
Expand Up @@ -12,40 +12,32 @@
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="pictos/pictos.css" type="text/css">
<link rel="stylesheet" href="css/fields/list.css">
<link rel="stylesheet" href="css/fields/blockquote.css">
<link rel="stylesheet" href="css/fields/heading.css">
<link rel="stylesheet" href="css/fields/rule.css">
<!-- end CSS-->
</head>

<body>

<ul class="nav">
<li><a class="logo" href="#">Dashboard</a></li>
<li><a class="logo" href="#">Content</a></li>
<li><a class="logo" href="#">Structure</a></li>
<li><a class="logo" href="#">Users</a></li>
<li><a class="logo" href="#">Admin</a></li>
</ul>

<div id="main" role="main">
<div class="">
<div class="stack">
<h1 class="title">Body</h1>
<div class="molecule">
<div class="atoms">
<div class="atom" tabindex="0" data-type="paragraph"></div>
<div class="atom" tabindex="0" data-type="list"></div>
<div class="atom" tabindex="0" data-type="blockquote"></div>
<div class="atom" tabindex="0" data-type="rule"></div>
<div class="atom" tabindex="0" data-type="list"></div>
</div>
<ul class="add">
<li><a href="#" data-type="heading">Heading</a></option>
<li><a href="#" data-type="paragraph">Paragraph</a></option>
<li><a href="#" data-type="blockquote">Blockquote</a></option>
<li><a href="#" data-type="list">List</a></option>
<li><a href="#" data-type="image">Image</a></option>
<li><a href="#" data-type="rule">Rule</a></option>
</ul>
<div class="molecule"></div>
<div class="add">
<a href="#">Add another block</a>
</div>
</div>
</div>

<div id="sub">
Output
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>

Expand All @@ -55,14 +47,16 @@ <h1 class="title">Body</h1>

<!-- scripts concatenated and minified via ant build script-->
<script defer src="js/fields/paragraph.js"></script>
<script defer src="js/fields/heading.js"></script>
<script defer src="js/fields/list.js"></script>
<script defer src="js/fields/image.js"></script>
<script defer src="js/fields/blockquote.js"></script>
<script defer src="js/fields/rule.js"></script>
<script defer src="js/core/molecule.js"></script>
<script defer src="js/core/atom.js"></script>
<script defer src="js/core/row.js"></script>
<script defer src="js/core/cell.js"></script>
<script defer src="js/core/row.js"></script>
<script defer src="js/core/atom.js"></script>
<script defer src="js/core/molecule.js"></script>
<script defer src="js/core/stack.js"></script>
<script defer src="js/script.js"></script>
<!-- end scripts-->

Expand Down
6 changes: 5 additions & 1 deletion test12/js/core/atom.js
View file
Expand Up @@ -3,6 +3,10 @@ $(document).on('render.stacks', '.atom', function(e) {
if (!$this.data('cols')) { $this.data('cols', 1); }
if (!$this.data('rows')) { $this.data('rows', 1); }

if ($this.is('[data-focusable!="false"]')) {
$(this).attr('tabindex', 0);
}

$table = $('<table border="1" class="table" />');
$this.append($table);
for (i=0; i<$this.data('rows'); i++) {
Expand All @@ -24,7 +28,7 @@ $(document).on('render.stacks', '.atom', function(e) {

$(document).on('add-atom.stacks', '.molecule', function(e, o) {
if (!o.type) { o.type = 'paragraph'; }
var $atom = $('<div class="atom" data-type="'+(o.type)+'" tabindex="0" />');
var $atom = $('<div class="atom" data-type="'+(o.type)+'" />');
if (o && o.after) {
(o.after).after($atom);
}
Expand Down
32 changes: 20 additions & 12 deletions test12/js/core/molecule.js
View file
Expand Up @@ -2,6 +2,24 @@ $(document).on('render.stacks', '.cell', function(e) {
e.stopPropagation();
});

$(document).on('render.stacks', '.molecule', function(e) {
$(this).append('<div class="atoms"><div class="atom" data-type="paragraph" /></div>');
$(this).append($('<ul />', {"class":"add"}));
$(this).find('.add').trigger('render.stacks');
$(this).find('.atom').trigger('render.stacks');
e.stopPropagation();
});

$(document).on('render.stacks', '.molecule > .add', function(e) {
$(this).append('<li><a href="#" data-type="heading">Heading</a></option>');
$(this).append('<li><a href="#" data-type="paragraph">Paragraph</a></option>');
$(this).append('<li><a href="#" data-type="blockquote">Blockquote</a></option>');
$(this).append('<li><a href="#" data-type="list">List</a></option>');
$(this).append('<li><a href="#" data-type="image">Image</a></option>');
$(this).append('<li><a href="#" data-type="rule">Rule</a></option>');
e.stopPropagation();
});

$(document).on('click', '.molecule .add a', function(e) {
var $molecule = $(e.srcElement).parents('.molecule').eq(0);
$molecule.trigger('add-atom', {
Expand Down Expand Up @@ -34,17 +52,15 @@ $(document).on('keydown.stacks', '.molecule', function(e) {
else if (!$atom.data('multiple') && $row.prevAll('.row:has(.cell[data-focusable!="false"])').size()) {
$row.prevAll('.row:has(.cell[data-focusable!="false"])').eq(0).trigger('foci.stacks', -1);
}
else if (!$src.hasClass('atom')) {
else if (!$src.hasClass('atom') && $atom.is('[data-focusable!="false"]')) {
$atom.find(':focus').blur();
//$atom.attr('tabindex', 0);
$atom.focus();
}
else if ($atom.prev('.atom').find('.row:has(.cell[data-focusable!="false"])').size()) {
$atom.prev('.atom').trigger('foci.stacks', -1);
$atom.trigger('remove.stacks');
}
else {
//$atom.prev('.atom').attr('tabindex', 0);
$atom.prev('.atom').focus();
$atom.trigger('remove.stacks');
}
Expand Down Expand Up @@ -106,9 +122,8 @@ $(document).on('keyup.stacks', '.molecule', function(e) {
}
});

$(document).on('focus', '.molecule [data-focusable="false"]', function(e) {
$(document).on('focus', '.molecule .cell[data-focusable="false"]', function(e) {
$(e.srcElement).blur();
//$(e.srcElement).parents('.atom').attr('tabindex', 0);
$(e.srcElement).parents('.atom').focus();
});

Expand Down Expand Up @@ -137,13 +152,6 @@ $(document).on('foci.stacks', '.molecule', function(e, index) {
e.stopPropagation();
});

// $(document).on('blur.stacks', '.molecule', function(e) {
// var $src = $(e.srcElement);
// if ($src.hasClass('atom')) {
// $src.removeAttr('tabindex');
// }
// });

$(document).on('remove.stacks', '.molecule', function(e) {
var $target = $(e.target);
var $molecule = $target.parents('.molecule').eq(0);
Expand Down
11 changes: 11 additions & 0 deletions test12/js/core/stack.js
View file
@@ -0,0 +1,11 @@
$(document).on('click', '.stack > .add a', function(e) {
var $stack = $(this).parents('.stack').eq(0);
$stack.trigger('add-molecule.stacks');
e.preventDefault();
});

$(document).on('add-molecule.stacks', '.stack', function(e) {
var $molecule = $('<div class="molecule" />');
$(this).find('> .add').before($molecule);
$molecule.trigger('render.stacks');
});
4 changes: 4 additions & 0 deletions test12/js/fields/blockquote.js
View file
Expand Up @@ -4,6 +4,10 @@ $(document).on('render.stacks', '.atom[data-type="blockquote"]', function(e) {

$(document).on('render.stacks', '.atom[data-type="blockquote"] .cell', function(e, o) {
if (o.row == 0) {
$(this).attr('name', 'quote');
$(this).css('height', '4em');
}
else if (o.row == 1) {
$(this).attr('name', 'author');
}
});
3 changes: 3 additions & 0 deletions test12/js/fields/heading.js
View file
@@ -0,0 +1,3 @@
$(document).on('render.stacks', '.atom[data-type="heading"]', function(e) {
$(this).attr('data-focusable', false);
});
1 change: 1 addition & 0 deletions test12/js/fields/list.js
View file
@@ -1,3 +1,4 @@
$(document).on('render.stacks', '.atom[data-type="list"]', function(e) {
$(this).data('multiple', true);
$(this).attr('data-focusable', false);
});
3 changes: 3 additions & 0 deletions test12/js/fields/paragraph.js
View file
@@ -0,0 +1,3 @@
$(document).on('render.stacks', '.atom[data-type="paragraph"]', function(e) {
$(this).attr('data-focusable', false);
});
2 changes: 1 addition & 1 deletion test12/js/script.js
View file
@@ -1,3 +1,3 @@
$(function() {
$('.atom').trigger('render.stacks');
$('.molecule').trigger('render.stacks');
});

0 comments on commit 74a0203

Please sign in to comment.