Skip to content

Commit

Permalink
rudimentary flyout and button with hover style and some icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@hn3000
hn3000 committed Jul 7, 2014
1 parent 5e99512 commit 50585ba
Show file tree
Hide file tree
Showing 7 changed files with 180 additions and 0 deletions.
45 changes: 45 additions & 0 deletions dom.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@



var DOM = {};

DOM._element = function(name) {
var elem = document.createElement(name);
for (var i = 1, n = arguments.length; i < n; ++i) {
var thisOne = arguments[i];
if (typeof thisOne == 'string') {
elem.appendChild(document.createTextNode(thisOne));
} else if (null != thisOne.nodeName) {
elem.appendChild(thisOne);
} else if (typeof thisOne == 'object') {
for (var x in thisOne) {
if (thisOne.hasOwnProperty(x)) {
elem.setAttribute(x, thisOne[x]);
}
}
}
}
return elem;
};

var tags = "div span input style script link button input textarea h1 h2 h3 h4".split(' ');
for (var i = 0, n = tags.length; i < n; ++i) {
var thisOne = tags[i];
DOM[thisOne] = DOM._element.bind(DOM, thisOne);
}

DOM.append = function (to, elem) {
to.appendChild(elem);
};
DOM.appendToBody = function(elem) {
DOM.append(document.body, elem);
};
DOM.appendToHead = function(elem) {
DOM.append(document.head, elem);
};
DOM.byId = function(id) {
return document.getElementById(id);
};


module.exports = DOM;
Binary file added resource/Leaning-Pencil.graffle
View file
Binary file not shown.
Binary file added resource/leaning-pencil-1b.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resource/leaning-pencil-2b.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 40 additions & 0 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
div.lean-in-tab {
position: absolute;
top:15%;
left:0;
z-index: 1;
}
div.lean-in-tab .icon {
background-image: url(resource/leaning-pencil-2b.png);
position: absolute;
top:15%;
left:0;
z-index:2;
height: 32px;
width: 32px;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.3);
background-size: cover;
}
div.lean-in-tab:hover .icon {
background-image: url('resource/leaning-pencil-1b.png');
}
div.lean-in-tab .content {
position: absolute;
width: 75%;
left: -100%;
top: 15%;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.3);
z-index:3;
background: #fff;
height: 300px;
overflow:auto;
transition: left,height 1s ease 0;
}
div.lean-in-tab:hover .content {
position: absolute;
top: 0;
width: 70%;
left: 30px;
transition-duration: 0.5s;
display:block;
}
69 changes: 69 additions & 0 deletions test/dummy.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html>
<head>
<title>Lean-In UI Test</title>
<style>
body div {
width:90%;
margin: 5% auto;
}
div.lean-in-tab {
position: absolute;
top:15%;
left:0;
z-index: 1;
}
div.lean-in-tab .icon {
position: absolute;
top:15%;
left:0;
z-index:2;
height: 32px;
width: 32px;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.3);
background-size: cover;
background-image: url(../resource/leaning-pencil-2b.png);
}
div.lean-in-tab:hover .icon {
background-image: url(../resource/leaning-pencil-1b.png);
}
div.lean-in-tab .content {
position: absolute;
width: 75%;
left: -100%;
top: 15%;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.3);
z-index:3;
background: #fff;
transition: left 1s ease 0;
}
div.lean-in-tab:hover .content {
position: absolute;
top: 0;
width: 70%;
left: 30px;
transition-duration: 0.5s;
}
</style>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>

<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. </p>

<p>Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <b>Aenean quam</b>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. </p>

<p><b>Fusce ac turpis quis ligula lacinia aliquet</b>. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. <b>Etiam ultrices</b>. Sed non quam. In vel mi sit amet augue congue elementum. </p>

<p>Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. <i>Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam</i>. Cras metus. Sed aliquet risus a tortor. <b>Donec lacus nunc, viverra nec, blandit vel, egestas et, augue</b>. Integer id quam. Morbi mi. <b>Morbi in dui quis est pulvinar ullamcorper</b>. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. </p>
</div>
<div class="lean-in-tab">
<div class="icon">
</div>
<div class="content">
<p>Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. <i>Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam</i>. Cras metus. Sed aliquet risus a tortor. <b>Donec lacus nunc, viverra nec, blandit vel, egestas et, augue</b>. Integer id quam. Morbi mi. <b>Morbi in dui quis est pulvinar ullamcorper</b>. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. </p>
</div>
</div>
</body>
</html>
26 changes: 26 additions & 0 deletions test/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<title>Lean-In UI Test</title>
<style>
body div {
width:90%;
margin: 5% auto;
}
</style>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>

<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. </p>

<p>Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <b>Aenean quam</b>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. </p>

<p><b>Fusce ac turpis quis ligula lacinia aliquet</b>. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. <b>Etiam ultrices</b>. Sed non quam. In vel mi sit amet augue congue elementum. </p>

<p>Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. <i>Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam</i>. Cras metus. Sed aliquet risus a tortor. <b>Donec lacus nunc, viverra nec, blandit vel, egestas et, augue</b>. Integer id quam. Morbi mi. <b>Morbi in dui quis est pulvinar ullamcorper</b>. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. </p>
</div>
<script src="../build/bundle.js"></script>
</body>
</html>

1 comment on commit 50585ba

@regular
Copy link
Member

@regular regular commented on 50585ba Jul 8, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

DOM.js really should go into its own npm package, with docs and tests and everything. Otherwise we are probably better of using something that already has tests and docs and everything.

Please sign in to comment.