Permalink
Browse files

Made major changes to structure of program, a document-object model i…

…s starting to take form, add Chriss Coyers tooltip with the ps element, added comment ability in the p element, restructed how elements are parsed, ect
  • Loading branch information...
1 parent 72cf130 commit 06e36d90ff8142efedd747b8ede03b2ee97b2a85 @tomleo committed Nov 17, 2011
Showing with 348 additions and 66 deletions.
  1. +90 −59 parse.py
  2. +94 −3 sample.n
  3. +36 −4 style.css
  4. +60 −0 tooltips.css
  5. +68 −0 tooltips.js
View
149 parse.py
@@ -10,13 +10,22 @@
get_lexer_for_mimetype)
from pygments.formatters import HtmlFormatter
+class DOM(list):
+
+ def __init__(self, title=None):
+ self.title=title
+ self.objects=[]
+
+ def append(self, obj):
+ self.objects.append(obj)
+
class Element(object):
def __init__(self, name_):
#self.type_=type_
self.name_=name_
-class Headers(element):
+class Header(Element):
def __init__(self, name_, type_):
self.type_=type_
@@ -36,58 +45,99 @@ def get_html(self, andChildren=False):
else:
return head
-class P(element):
+class P(Element):
- def __init__(self, name_, content_):
+ def __init__(self, content_, br_=True):
self.content_=content_
- super().__init__(name_)
+ self.comments_=[]
+ self.br_=br_
+ super().__init__(name_="")
def get_html(self):
- return "<p>{0}</p>".format(self.content_)
-
+ html=['<p>']
+ if self.br_:
+ lines=self.content_.split('\n')
+ for line in lines:
+ if '//#' in line:
+ l=line.split('//#')
+ temp='{0} <span class="comments">{1}</span>'.format(l[0],l[1])
+ html.append(temp)
+ else:
+ html.append(line)
+ html.append('<br />\n')
+ #No support for comments in paragraphs that are not seperated by \n's
+ #unless everything after //# should be interpreted as a comment...
+ html.append('</p>')
+ return '\n'.join(html)
+ else:
+ html.append(self.content_)
+ html.append('</p>')
+ return '\n'.join(html)
-class Ps(element):
+class Ps(Element):
- def __init__(self, name_, content_):
- self.content=content_
+ def __init__(self, content_=None, comments_=None):
+ if content_:
+ self.content_=content_
+ else:
+ self.content_=[]
+ if comments_:
+ self.comments_=comments_
+ else:
+ self.comments_=[]
+ name_=""
super().__init__(name_)
+ def add_line(self, line, comment=None):
+ self.content_.append(line)
+ if comment:
+ self.comments_.append(comment)
+ else:
+ self.comments_.append(None)
+
def get_html(self):
html=[]
- for line in content:
- html.append('<p class="ps">{0}</p>'.format(line))
+ for i, line in enumerate(self.content_):
+ if self.comments_[i]:
+ #html.append('<p class="ps">{0} <span class="comments">{1}</span></p>'.format(line,
+ # self.comments_[i]))
+ #html.append('<p class="ps"> {0} <a href="#" title="Comment">{1}</a></p>'.format(line, self.comments_[i]))
+ html.append('<p class="ps"><a href="#" title="{1}">{0}</a></p>'.format(line, self.comments_[i]))
+ else:
+ html.append('<p class="ps"> {0} </p>'.format(line))
return '\n'.join(html)
-class Code(element):
+class Code(Element):
- def __init__(self, name_="", lang_, code_):
+ def __init__(self, lang_, code_, name_=""):
self.lang_=lang_
self.code_=code_
super().__init__(name_)
- def get_html(self, style='colorful'):
+ def get_html(self, style_='colorful'):
lex=get_lexer_by_name(self.lang_.lower())
- htmlFormat=HtmlFormatter(style)
+ htmlFormat=HtmlFormatter(style=style_)
htmlFormat.noclasses=False
htmlFormat.cssclass='code'
htmlFormat.cssfile='code.css'
return highlight(self.code_, lex, htmlFormat)
class parseNotes(object):
- def __init__(self, file, *args, **kargs):
- self.elements=None
- self.main(file)
+ def __init__(self, file_, *args, **kargs):
+ self.elements_=None
+ self.main(file_)
+
self.BR=None
self.master=None
- self.struct
+ self.DOM_=None
def main(self, file_in):
- print ("file_in: ", file_in)
- file_out = '{0}.html'.format(file_in.split('.')[0])
- print ("File out is: ", file_out)
+ file_=file_in.split('.')[0]
+ file_out='{0}.html'.format(file_)
self.BR=1
+ self.DOM_=DOM()
with open(file_in) as file_in_obj:
self.make_sections(file_in_obj)
with open(file_out, "w") as file_out_obj:
@@ -98,6 +148,12 @@ def main(self, file_in):
<title>PyParsed Note</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="code.css">
+<link rel="stylesheet" href="tooltips.css">
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
+<script src="tooltips.js"></script>
+<script>
+$(function() { $(".ps a[title]").tooltips(); });
+</script>
</head>
<body>
<div role="main" id="wrap">
@@ -107,10 +163,6 @@ def main(self, file_in):
def make_sections(self, file_in_obj):
file_string = file_in_obj.read()
- # http://www.pythonregex.com/
- # http://docs.python.org/library/re.html
- # http://bytebaker.com/2008/11/03/switch-case-statement-in-python/
- #regex = re.compile("([h]{1}[1-9]{1}[:]{1}[\w\s\d]{1,};$)",re.MULTILINE)
regex = re.compile("[h]{1}[1-9]{1}[:]|[p]{1}[s]{1}[:]|[p]{1}[:]|[c][o][d][e][<]")
values = re.split(regex, file_string)
values.pop(0) #this might be a bad idea...
@@ -125,49 +177,28 @@ def make_html(self, file_out_obj):
def format_html(self, bun, meat):
html_headers = ('h1','h2','h2','h3','h4','h5','h6','h7','h8','h9')
if bun in html_headers:
- #struct.add_header(meat)
- return "<{0}>{1}</{2}>\n".format(bun, meat, bun)
+ head=Header(meat,bun)
+ self.DOM_.append(head)
+ return head.get_html()
elif 'ps' in bun:
- #child=struct.get_last(header).add_title(bun)
- ##ps=struct.get_last(header).append_ps(bun)
- ret = ""
+ ps=Ps()
for line in meat.split('\n'):
if '//#' in line:
l=line.split('//#')
- #child.add_element(l[0], comment=l[1])
- ##ps.append(l[0])
- ret+='<p class="ps">{0}<span class="comment">{1}</span></p>\n'.format(l[0],l[1])
+ ps.add_line(l[0], comment=l[1])
else:
- #child.add_element(line)
- ##ps.append(l[0])
- ret+='<p class="ps">{0}</p>\n'.format(line)
- return ret
+ ps.add_line(line)
+ return ps.get_html()
elif 'p' in bun:
- #struct.get_last(header).append_p(meat)
- if self.BR:
- meat=meat.split('\n')
- ret='<p>'
- for line in meat:
- ret+=line+'<br />'
- ret+='</p>\n'
- return ret
- else:
- return '<p>{0}</p>'.format(meat)
+ return P(meat).get_html()
elif 'code' in bun:
i = meat.find('>')
lang = meat[:i]
code = meat[i+2:-7] #-7 to remove endcode...
- #struct.get_last(header).append_code(lang, code)
- print ("Get lexer by name")
- lang_=get_lexer_by_name(lang.lower())
- print (lang_)
-
- style_=HtmlFormatter(style='colorful').style
- format_=HtmlFormatter(style=style_)
- format_.noclasses = False
- format_.cssclass='code'
- format_.cssfile='code.css'
- return highlight(code, lang_, format_)
+ #style_=HtmlFormatter(style='colorful').style
+ #format_=HtmlFormatter(style=style_)
+ c=Code(lang, code)
+ return c.get_html()
else:
print ('bun value was: ', bun)
View
97 sample.n
@@ -1,5 +1,95 @@
+h1:CSS Notes
+h2:Tricks and Tips
+h3:Make container elements play nice with padding and margins
+p:Set width of container, then set margin and padding on the elements within them
+p:My rule of thumb is, if I set a width, I don't set margin or padding. Likewise, if I'm setting a margin or padding, I don't set a width. Dealing with the box model can be such a pain, especially if you're dealing with percentages. Therefore, I set the width on the containers and then set margin and padding on the elements within them. Everything usually turns out swimmingly.
+
+h3:Min-Height in IE
+code<css>:
+selector {
+ min-height:500px;
+ height:auto !important;
+ height:500px;
+}
+endcode
+
+h3:Double Margin Bug (IE6)
+p:The Solution is
+code<css>:
+dispilay:inline
+endcode
+
+h3: Conditional CSS
+code<css>:
+<!--[if IE ]>
+<![endif]-->
+endcode
+
+h2:Floats
+p:Text wraps around block with float attribute.
+p:When float left and right, you must clear so wrapper box does not collapse.
+code<css>:
+clear: both; //#looks bad symanticaly
+overflow: auto; //#creates scroll bar
+overflow: hidden; //#creates float, text hidden can not be gotten
+endcode
+p:don't apply margin in the way your box is floated (double margin bug)
+
+h2:Typography
+ps: &mdash; #// __
+&hellip; #// ...
+&copy; #// (c)
+&ldquo/&rdquo #// ""
+"" #// For Inches
+&lsquo/&rsquo #// ''
+'' #// For Feet
+&hellip #// ...
+h3:Setting EM size to 10px instead of 12px
+code<css>:
+html {font-size:16px; } /* Make sure the default is always 16px */
+body {font-size:62.5%; } /* 16px * 62.5% = 10px : 1em now = 10px*/
+p {font-size:1.2em; } /* 12px */
+endcode
+p: Line Height should have the ratio 150%/1.5em
+p: Testing Contrast - Screen Shot website, make it grey-scale in photoshop
+p:
+- hyphen Jacob Kaplan-Moss
+- en dash 2:00-3:00
+- em dash
+- minus Subtration (20-5=15)
+
+h3:Typography and CSS3!
+h4: @font-face
+code<css>:
+@font-face { font-family: "Fontin-Italic"; src: url('Fontin-Italic.otf') format('opentype'); }
+endcode
+h4: Drop shadow
+code<css>:
+-webkit-box-shadow: 5px 5px 5px #888; /* Adds drop shadow to fonts */
+-moz-box-shadow: 5px 5px 5px #888;
+endcode
+
+h3: The Font attribute
+code<css>:
+font-style: (italic, oblique, normal)
+font-variant: (normal, small-caps)
+font-weight: (lighter, normal, bold, bolder)
+font-size: (lots)
+line-height: (nornal, units)
+font-family: ()
+
+font: (font-style font-variant font-weight font-size/line-height font-family)
+
+parent { font: italic <font-variant> <font-weight> <font-size>/<line-height> <font-family>; }
+child { <font-variant> <font-weight> <font-size>/<line-height> <font-family>; }
+#// NOTE: the child element will not inherit "italic", instead omitted attribues are set to there "default" value which is usually "normal"
+
+font-variant: (small-caps)
+text-transform: (uppercase, lowercase, capitalize, none)
+endcode
+
h1:Unix Notes
-h2:Find
+h2:The Find Command
ps:
find . -name T.java //#look in current directory for T.java
find /etc -name '*conf' //#look for files ending in .conf in the /etc folder
@@ -21,13 +111,11 @@ find . -size +100M //#find with size more than 100MB
h2:Search
p: Nothing to see here atm
Adding another line of text right here!
-
code<C++>:
int main() {
cout << "This is C++ code" << endl;
}
endcode
-
code<python>:
class parseNotes(object):
def __init__(self, file, *args, **kargs):
@@ -36,3 +124,6 @@ class parseNotes(object):
self.BR=None
self.master=None
endcode
+p: This paragraph will have some comments in it!!!
+I know a comment in a paragraph? But why //# This is a paragraph comment
+This is some more text right here also
View
40 style.css
@@ -1,6 +1,38 @@
-html { width: 100%; }
-body { font-family: arial, sans-serif; font-size: 16px; line-height:24px; width:600px; margin: 0 auto; }
+html { width: 100%; }
+
+body { font-family: arial, sans-serif;
+ font-size: 16px;
+ line-height:24px;
+ width:600px;
+ margin: 0 auto; }
+
p { font-family: Georgia, serif; }
-#wrap { display: block;}
-.comment { float: right; clear: left; display: block; border: 1px solid black; padding: 3px 3px 0 3px; background: black; color: white; font-family: arial, sans-serif; font-size: 0.8em; overflow: hidden; clear: right; }
+
+#wrap { display: block; }
+
+.comments { float: right;
+ clear: left;
+ display: block;
+ border: 1px solid black;
+ padding: 3px 3px 0 3px;
+ background: black;
+ color: white;
+ font-family: arial, sans-serif;
+ font-size: 0.8em;
+ overflow: hidden;
+ clear: right; }
+
.ps { border-bottom: 1px dashed black; font-family: arial, sans-serif; }
+
+h1 span {
+ display: inline-block;
+ padding: 10px 20px;
+ background: black;
+ border: 2px solid white;
+ color: white;
+ border-radius: 20px;
+ margin-top: 20px;
+ text-align: center;
+ text-decoration: none;
+ box-shadow: 0 0 7px black;
+}
View
60 tooltips.css
@@ -0,0 +1,60 @@
+.tooltip, .arrow:after {
+ background: black;
+ border: 2px solid white;
+}
+
+.tooltip {
+ pointer-events: none;
+ opacity: 0;
+ display: inline-block;
+ position: absolute;
+ padding: 10px 20px;
+ color: white;
+ border-radius: 20px;
+ margin-top: 20px;
+ text-align: center;
+ font: bold 14px "Helvetica Neue", Sans-Serif;
+ font-stretch: condensed;
+ text-decoration: none;
+ text-transform: uppercase;
+ box-shadow: 0 0 7px black;
+}
+.arrow {
+ width: 70px;
+ height: 16px;
+ overflow: hidden;
+ position: absolute;
+ left: 50%;
+ margin-left: -35px;
+ bottom: -16px;
+}
+.arrow:after {
+ content: "";
+ position: absolute;
+ left: 20px;
+ top: -20px;
+ width: 25px;
+ height: 25px;
+ -webkit-box-shadow: 6px 5px 9px -9px black,
+ 5px 6px 9px -9px black;
+ -moz-box-shadow: 6px 5px 9px -9px black,
+ 5px 6px 9px -9px black;
+ box-shadow: 6px 5px 9px -9px black,
+ 5px 6px 9px -9px black;
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+}
+.tooltip.active {
+ opacity: 1;
+ margin-top: 5px;
+ -webkit-transition: all 0.2s ease;
+ -moz-transition: all 0.2s ease;
+ -ms-transition: all 0.2s ease;
+ -o-transition: all 0.2s ease;
+}
+.tooltip.out {
+ opacity: 0;
+ margin-top: -20px;
+}
View
68 tooltips.js
@@ -0,0 +1,68 @@
+// IIFE to ensure safe use of $
+(function( $ ) {
+
+ // Create plugin
+ $.fn.tooltips = function(el) {
+
+ var $tooltip,
+ $body = $('body'),
+ $el;
+
+ // Ensure chaining works
+ return this.each(function(i, el) {
+
+ $el = $(el).attr("data-tooltip", i);
+
+ // Make DIV and append to page
+ var $tooltip = $('<div class="tooltip" data-tooltip="' + i + '">' + $el.attr('title') + '<div class="arrow"></div></div>').appendTo("body");
+
+ // Position right away, so first appearance is smooth
+ var linkPosition = $el.position();
+
+ $tooltip.css({
+ top: linkPosition.top - $tooltip.outerHeight() - 13,
+ left: linkPosition.left - ($tooltip.width()/2)
+ });
+
+ $el
+ // Get rid of yellow box popup
+ .removeAttr("title")
+
+ // Mouseenter
+ .hover(function() {
+
+ $el = $(this);
+
+ $tooltip = $('div[data-tooltip=' + $el.data('tooltip') + ']');
+
+ // Reposition tooltip, in case of page movement e.g. screen resize
+ var linkPosition = $el.position();
+
+ $tooltip.css({
+ top: linkPosition.top - $tooltip.outerHeight() - 13,
+ left: linkPosition.left - ($tooltip.width()/2)
+ });
+
+ // Adding class handles animation through CSS
+ $tooltip.addClass("active");
+
+ // Mouseleave
+ }, function() {
+
+ $el = $(this);
+
+ // Temporary class for same-direction fadeout
+ $tooltip = $('<div[data-tooltip=' + $el.data('tooltip') + ']').addClass("out");
+
+ // Remove all classes
+ setTimeout(function() {
+ $tooltip.removeClass("active").removeClass("out");
+ }, 300);
+
+ });
+
+ });
+
+ }
+
+})(jQuery);

0 comments on commit 06e36d9

Please sign in to comment.