Permalink
Browse files

Pass element in element

  • Loading branch information...
1 parent 78f3c80 commit 07fd7f1c08e0518697efcf8817e49289aabe6f9c @tristen committed May 20, 2012
Showing with 21 additions and 20 deletions.
  1. +1 −2 README.md
  2. +7 −1 demo/index.html
  3. +13 −17 simple-emphasis.js
View
@@ -22,6 +22,5 @@ You need to specify what p tags you would like to target. The minified version o
[http://tristen.github.com/simple-emphasis](http://tristen.github.com/simple-emphasis)
-
###Thanks!
-To Michael Donohoe [(@donohoe)](twitter.com/#!/donohoe) and the Nytimes [@timesopen](https://twitter.com/#!/timesopen)
+To Michael Donohoe [(@donohoe)](twitter.com/#!/donohoe) and the Nytimes [@timesopen](https://twitter.com/#!/timesopen)
View
@@ -6,7 +6,7 @@
<link rel='stylesheet' href='style.css' type='text/css' media='all' />
</head>
-<div class='content limiter'>
+<div id='content' class='limiter'>
<strong>Click a paragraph</strong>
<p>Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem. Ut vitae enim eu est vehicula gravida. Morbi ipsum ipsum, porta nec, tempor id, auctor vitae, purus. Pellentesque neque. Nulla luctus erat vitae libero. Integer nec enim. Phasellus aliquam enim et tortor. Quisque aliquet, quam elementum condimentum feugiat, tellus odio consectetuer wisi, vel nonummy sem neque in elit. Curabitur eleifend wisi iaculis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
@@ -30,5 +30,11 @@
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script src='../simple-emphasis.js'></script>
+<script>
+ $(function () {
+ var content = document.getElementsByTagName('p');
+ new Emphasis(content);
+ });
+</script>
</body>
</html>
View
@@ -36,11 +36,15 @@
-------------------------------------------------- */
-jQuery(function($) {
+!function(context) {
- var Emphasis = {
- init: function() {
- this.config();
+ var Emphasis = function(el) {
+ this.init(el);
+ };
+
+ Emphasis.prototype = {
+ init: function(el) {
+ this.config(el);
this.pl = false; // Paragraph List
this.p = false; // Paragraph Anchor
this.h = false; // Highlighted paragraphs
@@ -53,11 +57,8 @@ jQuery(function($) {
this.vu ? $(document).bind('keydown', this.keydown) : this.paragraphInfo();
},
- config: function() {
- // Eligible Paragraphs
- // This uses some common markup for plain and simple paragraphs - those that are not empty, no classes.
- // We use jQuery for its css selector awesomeness, but your needs might be simpler (getElementsByTagName('p') etc.)
- this.paraSelctors = $('.content p:not(.thumbnail p)');
+ config: function(selector) {
+ this.paraSelctors = selector;
// Class names
this.classReady = 'em-ready';
@@ -70,10 +71,8 @@ jQuery(function($) {
},
addCSS: function() {
- // Inject the minimum styles rules required
var st = document.createElement('style');
st.setAttribute('type', 'text/css');
- // for validation goodness
var stStr = 'p.' + this.classSelectedParagraph + ' { display: block; position: relative; background: #F2F4F5; }' + '@-webkit-keyframes backgroundFade{ 0%{background:#FFF0B3;} 100%{background:transparent;}} p.' + this.classActiveParagraph + ' { display: block; position: relative; background-color: transparent; -webkit-animation:backgroundFade 5s; }';
try {
// try the sensible way
@@ -291,7 +290,7 @@ jQuery(function($) {
goAnchor: function(p) {
// Move view to top of a given Paragraph
if (!p) { return; }
- var pg = (isNaN(p)) ? this.findKey(p)['elm'] : (this.paragraphList().list[p-1] || false);
+ var pg = (isNaN(p)) ? this.findKey(p).elm : (this.paragraphList().list[p-1] || false);
if (pg) {
setTimeout(function(){
@@ -403,8 +402,5 @@ jQuery(function($) {
}
};
-
- $(window).bind('load', function() {
- Emphasis.init();
- });
-});
+ context['Emphasis'] = Emphasis;
+}(this);

0 comments on commit 07fd7f1

Please sign in to comment.