Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: cognominal/codeview
base: 4eaec6b898
...
head fork: cognominal/codeview
compare: d1cd6cd7d9
Checking mergeability… Don't worry, you can still create the pull request.
  • 3 commits
  • 8 files changed
  • 0 commit comments
  • 1 contributor
Commits on Jul 05, 2012
@cognominal about time to update REAME.md 889d727
Commits on Jul 06, 2012
@cognominal some code for driving a lite from the surrounding "text" f197638
@cognominal removed crap, added a plugin which will help programmatic scrolling
Now things in lite are mono font
(re?)discovered the css overflow directive
Someday I will start programming instead of learning js, coffeescript,
html, css, sty, git, chrome debugging and doing all the possible
mistakes.  :(
Anyway I start making a headway with lite
d1cd6cd
View
1  .#talk
View
21 README.md
@@ -4,13 +4,19 @@ Tentatively called zbrew.
Note : having no user yet, I play fast and loose.
No git branches when I refactorize. I will probably tag somme "interesting"
versions. This will soon change for the better.
+This file attemps to describe things from a bird view.
+The TBD file evolution shows the micro objectives.
-# Goal : viewing code in web pages
+# Goal : literate everything
-The goal is to embed a zbrew viewport in any web page so that any one can
-see how any code is parsed. In reading mode, no installation is needed.
+zbrew will allow to create material about programming code.
+It relies on a viewport called lite to highlight code.
+We can now have many lite viewports on one page.
-zbrew does classic static highlighting and dynamic highlighting.
+The main focus is now to highlight stuff in a lite from textual material.
+
+
+A lite does classic static highlighting and dynamic highlighting.
With dynamic hightlighting one can understand how code is parsed.
Static highlighting is wrongly dubbed syntax highlighting, in fact
it is just lexical hightlighting.
@@ -24,11 +30,10 @@ to interact with a server even if a disconnected mode is a goal (TBD)
# achievements so far
-
-At this point, we do hilite a single file data/package.json
-Touch interface devices are supported.
-Static hiliting works, dynamic does not yet.
+Static hiliting and dynamic do work.
+Panning in parse path pane does not
Integration in SFW not done.
+Touch interface devices should be supported.
Run make, serve the directory with some web server and access i.html
# Codeview needs both rakudo and nodejs
View
1  TBD
@@ -23,6 +23,7 @@ Need folding too.
## TBD
* Define and work highlighting directed by textual material
+* currentRulePane does not pre formatting. this is currenly nice because it folds p6 rules. should be parameterizable
* Simple click should freeze a lite (done but need a froze indicator). Probably the freezing should be per pane. working the first TBD iterm may help on that. Also using :hover for DH was a bad idea
* esc should go up the parse tree
* Implement a recorder and a demo mode
View
47 css/zbrew.css
@@ -1,3 +1,9 @@
+.liteRegex { color: #000080; }
+.liteRegex:hover { color: #0000FF; }
+.liteText { color: #000080; }
+.liteText:hover { color: #0000FF; }
+
+
.liteViewport {
border-width: 2px;
border-color : #A0A0A0;
@@ -14,36 +20,41 @@ div.text {
}
.parsePathPane {
- border-width : 4px;
- min-height : 15ex;
- overflow: scroll;
- left: 40px; right: 40px; top: 0px;
- background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#dadada));
- background: -moz-linear-gradient(top, #f8f8f8, #dadada);
- border: 1px solid #aaa;
- border-top: 1px solid #bbb;
- border-bottom: 1px solid #888;
- -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
- -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.1);
- -moz-box-shadow: 0 3px 5px rgba(0,0,0,0.1);
- box-shadow: 0 3px 5px rgba(0,0,0,0.1);
+ font-family: monospace;
+ font-size:11px;
+ line-height:15px;
+
+ border-width : 4px;
+ min-height : 15ex;
+ overflow: scroll;
+ left: 40px; right: 40px; top: 0px;
+ background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#dadada));
+ background: -moz-linear-gradient(top, #f8f8f8, #dadada);
+ border: 1px solid #aaa;
+ border-top: 1px solid #bbb;
+ border-bottom: 1px solid #888;
+ border-radius: 3px;
+ box-shadow: 0 3px 5px rgba(0,0,0,0.1);
}
.currentRulePane {
height: 2em;
+ font-family: monospace;
+ font-size:11px;
+ line-height:15px;
background-color: #E0E0E0;
border-width: 2px;
border-color : #A0A0A0;
border-style: solid;
-
}
.codePane {
+ font-family: monospace;
+ font-size:11px;
+ line-height:15px;
background-color: #E0E0E0;
-/* border-width: 2px;
- border-color : #A0A0A0;
- border-style: solid;
-*/
+ max-height: 20ex;
+ overflow: scroll;
}
.opr { color: #ff0000 }
View
5 i.html
@@ -1,6 +1,7 @@
<!doctype html>
<html>
<head>
+
<title>Code Hiliter Early </title>
<link rel="stylesheet" type="text/css" href="css/zbrew.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
@@ -27,5 +28,9 @@
<div id="viewport-dh"></div>
<div class="text">The second portview shows how json is parsed used a Perl 6 grammar. We note a problem when hovering over 666. I don't know how to select a rule after its longname. So using the short name, there is ambiguity and we
peek the wrong rule</div>
+
+This directive will hilite the string <span class="liteText" data='"name"'>"name"</span> and DH stuff in the associate lite accordingly. Need to think escaping in data, and textual representation to generate this directive.
+
+
<div id="viewport-parsed"></div>
</body>
View
23 js/LiteViewport.js
@@ -2,7 +2,7 @@
(function() {
$(function() {
- var cloneLiteViewport, dehilite, dynamicHiliteP, generateLite, generateLitePortviewContent, hilite, insertParseTree, j, liteId, liteNm, liteSel, markupForLiteViewport, paneSel, ruleNm, showParsePath, showRule, toggleLiteViewport, _i, _len, _ref, _results;
+ var cloneLiteViewport, dehilite, dynamicHiliteP, generateLite, generateLitePortviewContent, hilite, insertParseTree, j, liteId, liteNm, litePane, liteSel, markupForLiteViewport, paneSel, ruleNm, showParsePath, showRule, toggleLiteViewport, _i, _len, _ref, _results;
dynamicHiliteP = true;
markupForLiteViewport = function(viewportId) {
var idAndClass;
@@ -10,12 +10,12 @@
idAndClass = function(paneNm) {
return "id=" + (paneNm + '-' + viewportId) + " class=" + paneNm;
};
- return "<div " + (idAndClass('liteViewport')) + ">\n <div " + (idAndClass('ruleSummaryPane')) + "\n <div id=\"mcs_container\">\n <div class=\"customScrollBox\">\n <div class=\"horWrapper\">\n <div class=\"container\">\n <div " + (idAndClass('parsePathPane')) + "/>\n </div>\n <div class=\"dragger_container\">\n <div class=\"dragger\"></div>\n </div>\n </div>\n </div>\n </div>\n <div " + (idAndClass('currentRulePane')) + " />\n <div " + (idAndClass('codePane')) + ">\n</div>";
+ return "<div " + (idAndClass('liteViewport')) + ">\n <div " + (idAndClass('parsePathPane')) + "></div>\n <div " + (idAndClass('currentRulePane')) + "></div>\n <pre><div " + (idAndClass('codePane')) + "></div></pre>\n</div>";
};
cloneLiteViewport = function(topElt, suffix, dest) {
var html, re;
html = topElt.html;
- re = "(ruleSummaryPane|currentRulePane|parsePathPane|codePane|)-(" + suffix + ")";
+ re = "(currentRulePane|parsePathPane|codePane|)-(" + suffix + ")";
html.replace(re, (function() {
return "" + $0 + "-" + $1 + "0";
}), 'g');
@@ -51,9 +51,12 @@
lSel = liteSel(elt);
return toggleLiteViewport(lSel);
});
- $(".parsePathItem").live('vmouseover', function(ev) {
- var elt;
- return elt = ev.currentTarget;
+ $(".liteText").live('vmouseover', function(ev) {
+ var data, elt, re;
+ elt = ev.currentTarget;
+ data = $(elt).attr('data');
+ re = new RegExp(data);
+ return consol.log($("" + (litePane('parsed', 'codePane'))));
});
$(".parsePathSubitem").live('vmouseover', function(ev) {
var elt, id;
@@ -67,7 +70,10 @@
return $('#' + id.substring(4)).addClass("hilitedRuleNm");
});
paneSel = function(elt, paneNm) {
- return "#" + paneNm + "-" + (liteNm(elt));
+ if (paneNm == null) {
+ paneNm = 'liteViewport';
+ }
+ return "#" + paneNm + "-" + (typeof elt === 'string' ? elt : liteNm(elt));
};
liteId = function(elt) {
return $(elt).parents().add($(elt)).filter(".liteViewport").attr('id');
@@ -78,6 +84,9 @@
liteSel = function(elt) {
return paneSel(elt, 'liteViewport');
};
+ litePane = function(liteNm, paneNm) {
+ return $("#liteViewport-" + liteNm + " ." + paneNm)[0];
+ };
ruleNm = function(elt) {
var classNm, m, _i, _len, _ref;
_ref = elt.className.split(' ');
View
215 js/jquery.scrollTo-1.4.2.js
@@ -0,0 +1,215 @@
+/**
+ * jQuery.ScrollTo
+ * Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
+ * Dual licensed under MIT and GPL.
+ * Date: 5/25/2009
+ *
+ * @projectDescription Easy element scrolling using jQuery.
+ * http://flesler.blogspot.com/2007/10/jqueryscrollto.html
+ * Works with jQuery +1.2.6. Tested on FF 2/3, IE 6/7/8, Opera 9.5/6, Safari 3, Chrome 1 on WinXP.
+ *
+ * @author Ariel Flesler
+ * @version 1.4.2
+ *
+ * @id jQuery.scrollTo
+ * @id jQuery.fn.scrollTo
+ * @param {String, Number, DOMElement, jQuery, Object} target Where to scroll the matched elements.
+ * The different options for target are:
+ * - A number position (will be applied to all axes).
+ * - A string position ('44', '100px', '+=90', etc ) will be applied to all axes
+ * - A jQuery/DOM element ( logically, child of the element to scroll )
+ * - A string selector, that will be relative to the element to scroll ( 'li:eq(2)', etc )
+ * - A hash { top:x, left:y }, x and y can be any kind of number/string like above.
+* - A percentage of the container's dimension/s, for example: 50% to go to the middle.
+ * - The string 'max' for go-to-end.
+ * @param {Number} duration The OVERALL length of the animation, this argument can be the settings object instead.
+ * @param {Object,Function} settings Optional set of settings or the onAfter callback.
+ * @option {String} axis Which axis must be scrolled, use 'x', 'y', 'xy' or 'yx'.
+ * @option {Number} duration The OVERALL length of the animation.
+ * @option {String} easing The easing method for the animation.
+ * @option {Boolean} margin If true, the margin of the target element will be deducted from the final position.
+ * @option {Object, Number} offset Add/deduct from the end position. One number for both axes or { top:x, left:y }.
+ * @option {Object, Number} over Add/deduct the height/width multiplied by 'over', can be { top:x, left:y } when using both axes.
+ * @option {Boolean} queue If true, and both axis are given, the 2nd axis will only be animated after the first one ends.
+ * @option {Function} onAfter Function to be called after the scrolling ends.
+ * @option {Function} onAfterFirst If queuing is activated, this function will be called after the first scrolling ends.
+ * @return {jQuery} Returns the same jQuery object, for chaining.
+ *
+ * @desc Scroll to a fixed position
+ * @example $('div').scrollTo( 340 );
+ *
+ * @desc Scroll relatively to the actual position
+ * @example $('div').scrollTo( '+=340px', { axis:'y' } );
+ *
+ * @dec Scroll using a selector (relative to the scrolled element)
+ * @example $('div').scrollTo( 'p.paragraph:eq(2)', 500, { easing:'swing', queue:true, axis:'xy' } );
+ *
+ * @ Scroll to a DOM element (same for jQuery object)
+ * @example var second_child = document.getElementById('container').firstChild.nextSibling;
+ * $('#container').scrollTo( second_child, { duration:500, axis:'x', onAfter:function(){
+ * alert('scrolled!!');
+ * }});
+ *
+ * @desc Scroll on both axes, to different values
+ * @example $('div').scrollTo( { top: 300, left:'+=200' }, { axis:'xy', offset:-20 } );
+ */
+;(function( $ ){
+
+ var $scrollTo = $.scrollTo = function( target, duration, settings ){
+ $(window).scrollTo( target, duration, settings );
+ };
+
+ $scrollTo.defaults = {
+ axis:'xy',
+ duration: parseFloat($.fn.jquery) >= 1.3 ? 0 : 1
+ };
+
+ // Returns the element that needs to be animated to scroll the window.
+ // Kept for backwards compatibility (specially for localScroll & serialScroll)
+ $scrollTo.window = function( scope ){
+ return $(window)._scrollable();
+ };
+
+ // Hack, hack, hack :)
+ // Returns the real elements to scroll (supports window/iframes, documents and regular nodes)
+ $.fn._scrollable = function(){
+ return this.map(function(){
+ var elem = this,
+ isWin = !elem.nodeName || $.inArray( elem.nodeName.toLowerCase(), ['iframe','#document','html','body'] ) != -1;
+
+ if( !isWin )
+ return elem;
+
+ var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem;
+
+ return $.browser.safari || doc.compatMode == 'BackCompat' ?
+ doc.body :
+ doc.documentElement;
+ });
+ };
+
+ $.fn.scrollTo = function( target, duration, settings ){
+ if( typeof duration == 'object' ){
+ settings = duration;
+ duration = 0;
+ }
+ if( typeof settings == 'function' )
+ settings = { onAfter:settings };
+
+ if( target == 'max' )
+ target = 9e9;
+
+ settings = $.extend( {}, $scrollTo.defaults, settings );
+ // Speed is still recognized for backwards compatibility
+ duration = duration || settings.speed || settings.duration;
+ // Make sure the settings are given right
+ settings.queue = settings.queue && settings.axis.length > 1;
+
+ if( settings.queue )
+ // Let's keep the overall duration
+ duration /= 2;
+ settings.offset = both( settings.offset );
+ settings.over = both( settings.over );
+
+ return this._scrollable().each(function(){
+ var elem = this,
+ $elem = $(elem),
+ targ = target, toff, attr = {},
+ win = $elem.is('html,body');
+
+ switch( typeof targ ){
+ // A number will pass the regex
+ case 'number':
+ case 'string':
+ if( /^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(targ) ){
+ targ = both( targ );
+ // We are done
+ break;
+ }
+ // Relative selector, no break!
+ targ = $(targ,this);
+ case 'object':
+ // DOMElement / jQuery
+ if( targ.is || targ.style )
+ // Get the real position of the target
+ toff = (targ = $(targ)).offset();
+ }
+ $.each( settings.axis.split(''), function( i, axis ){
+ var Pos = axis == 'x' ? 'Left' : 'Top',
+ pos = Pos.toLowerCase(),
+ key = 'scroll' + Pos,
+ old = elem[key],
+ max = $scrollTo.max(elem, axis);
+
+ if( toff ){// jQuery / DOMElement
+ attr[key] = toff[pos] + ( win ? 0 : old - $elem.offset()[pos] );
+
+ // If it's a dom element, reduce the margin
+ if( settings.margin ){
+ attr[key] -= parseInt(targ.css('margin'+Pos)) || 0;
+ attr[key] -= parseInt(targ.css('border'+Pos+'Width')) || 0;
+ }
+
+ attr[key] += settings.offset[pos] || 0;
+
+ if( settings.over[pos] )
+ // Scroll to a fraction of its width/height
+ attr[key] += targ[axis=='x'?'width':'height']() * settings.over[pos];
+ }else{
+ var val = targ[pos];
+ // Handle percentage values
+ attr[key] = val.slice && val.slice(-1) == '%' ?
+ parseFloat(val) / 100 * max
+ : val;
+ }
+
+ // Number or 'number'
+ if( /^\d+$/.test(attr[key]) )
+ // Check the limits
+ attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max );
+
+ // Queueing axes
+ if( !i && settings.queue ){
+ // Don't waste time animating, if there's no need.
+ if( old != attr[key] )
+ // Intermediate animation
+ animate( settings.onAfterFirst );
+ // Don't animate this axis again in the next iteration.
+ delete attr[key];
+ }
+ });
+
+ animate( settings.onAfter );
+
+ function animate( callback ){
+ $elem.animate( attr, duration, settings.easing, callback && function(){
+ callback.call(this, target, settings);
+ });
+ };
+
+ }).end();
+ };
+
+ // Max scrolling position, works on quirks mode
+ // It only fails (not too badly) on IE, quirks mode.
+ $scrollTo.max = function( elem, axis ){
+ var Dim = axis == 'x' ? 'Width' : 'Height',
+ scroll = 'scroll'+Dim;
+
+ if( !$(elem).is('html,body') )
+ return elem[scroll] - $(elem)[Dim.toLowerCase()]();
+
+ var size = 'client' + Dim,
+ html = elem.ownerDocument.documentElement,
+ body = elem.ownerDocument.body;
+
+ return Math.max( html[scroll], body[scroll] )
+ - Math.min( html[size] , body[size] );
+
+ };
+
+ function both( val ){
+ return typeof val == 'object' ? val : { top:val, left:val };
+ };
+
+})( jQuery );
View
31 src/LiteViewport.coffee
@@ -23,21 +23,9 @@ $ ->
idAndClass = (paneNm) -> "id=#{paneNm+'-'+viewportId} class=#{paneNm}"
"""
<div #{ idAndClass 'liteViewport'}>
- <div #{ idAndClass 'ruleSummaryPane'}
- <div id="mcs_container">
- <div class="customScrollBox">
- <div class="horWrapper">
- <div class="container">
- <div #{ idAndClass 'parsePathPane'}/>
- </div>
- <div class="dragger_container">
- <div class="dragger"></div>
- </div>
- </div>
- </div>
- </div>
- <div #{ idAndClass 'currentRulePane'} />
- <div #{idAndClass 'codePane'}>
+ <div #{ idAndClass 'parsePathPane'}></div>
+ <div #{ idAndClass 'currentRulePane'}></div>
+ <pre><div #{idAndClass 'codePane'}></div></pre>
</div>
"""
@@ -46,7 +34,7 @@ $ ->
# the element # under which the clone will appear.
cloneLiteViewport = (topElt, suffix, dest) ->
html = topElt.html
- re = "(ruleSummaryPane|currentRulePane|parsePathPane|codePane|)-(#{suffix})"
+ re = "(currentRulePane|parsePathPane|codePane|)-(#{suffix})"
html.replace re, (-> "#{$0}-#{$1}0" ), 'g'
to.html html
@@ -88,8 +76,11 @@ $ ->
lSel = liteSel elt
toggleLiteViewport lSel
- $(".parsePathItem").live 'vmouseover', (ev) ->
+ $(".liteText").live 'vmouseover', (ev) ->
elt = ev.currentTarget
+ data = $(elt).attr 'data'
+ re = new RegExp data
+ consol.log $ "#{litePane('parsed','codePane')}"
$(".parsePathSubitem").live 'vmouseover', (ev) ->
return unless dynamicHiliteP
@@ -124,14 +115,16 @@ $ ->
# A viewport is constituted of panes.
# Each pane of a viewport (including the view port) has an html id of the form
# "paneName-viewPortSpecificSuffix". Each pane has a unique `paneName` within a viewport.
-# so far we have only one viewport type which is "liteViewPort".
+# so far we have only one viewport type which is "liteViewport".
# get the css selector for a pane named `paneNm` that is a parent of `elt`
- paneSel = (elt, paneNm) -> "##{paneNm}-#{liteNm elt}"
+ paneSel = (elt, paneNm = 'liteViewport') ->
+ "##{paneNm}-#{ if typeof elt == 'string' then elt else liteNm elt}"
liteId = (elt) -> $(elt).parents().add($(elt)).filter(".liteViewport").attr('id')
liteNm = (elt) -> /-(\w+)$/.exec(liteId elt)[1]
liteSel = (elt) -> paneSel elt, 'liteViewport'
+ litePane = (liteNm, paneNm) -> $("#liteViewport-#{liteNm} .#{paneNm}")[0]
# given an `elt`, extract the associated rule name
# from the class name of the form rule-*.

No commit comments for this range

Something went wrong with that request. Please try again.