Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

starting making the page useful for the newcomer

  • Loading branch information...
commit 9c6165650c0feb3fac9a5c31408f474a6ce45547 1 parent 4b2c534
@cognominal authored
View
2  TBD
@@ -22,8 +22,8 @@ Need folding too.
## TBD
+* freezing should be per lite. freezing is useful but confusing. Should last long enough to get the mouse of the lite instead of being permanent.
* Define and work highlighting directed by textual material. What if the textual material denotes many code chunks instead of one? So far deal with the first.
-* freezing is useful but confusing. Should last long enough to get the mouse of the lite instead of being permanent.
* 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
View
13 css/zbrew.css
@@ -1,8 +1,17 @@
.liteRegex { color: #000080; }
.liteRegex:hover { color: #0000FF; }
-.liteText { color: #000080; }
-.liteText:hover { color: #0000FF; }
+.link { color: #000080; }
+.link:hover { color: #0000FF; }
+
+
+.red { color: #FF0000; }
+
+.borderRed {
+ border-width: 2px !important;
+ border-color: #FF0000 !important;
+ border-style: solid;
+}
.liteViewport {
border-width: 2px;
View
26 i.html
@@ -2,7 +2,7 @@
<html>
<head>
-<title>Code Hiliter Early </title>
+<title>Code Hiliter</title>
<link rel="stylesheet" type="text/css" href="css/zbrew.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.0.js"></script>
@@ -12,8 +12,22 @@
</head>
<body>
<div class="text">
- <p>A lite portview has three panes when it is expanded. The lower pane contains code and the two
- top panes contain information about how that code is parsed. When you hover over the code the information displayed over the two top panes changes, as well as the dynamic highlighting in the code pane. We say that the code hovered over is current. The information and hightlighting gives a lot information on how the current code is parsed.</p>
+ <p>This document shows the features of a widget (or portview) called lite. The purpose of a lite is to show how code is parsed. Lites are eventually intended
+ to be used in talks slides, documentation...
+ This document is
+ dynamic. The text contains dark bluish links. Hovering over such a link will highlight an item or demonstrate a feature discussed in text surrounding the said
+ link.
+ <span>Example: hovering over <span class="example link">this link</span> will hilite the present text in red.</p>
+
+ <p>The <span class="hilite link" data="#liteViewport-dh">lite</span> below is frozen for sake of exposition. We will see later unfrozen lites.
+
+ A lite portview has three panes when it is expanded. The lower pane contains code and the two
+ top panes contain information about how that code is parsed. When you hover over the code the information displayed over the two top panes changes, as well as the dynamic highlighting in the code pane. We say that the code hovered over is current. The information and hightlighting gives a lot information on how the current code is parsed.
+
+ Double clicking on a lite expands it or unexpands it according to its current state.
+ Simple cliking froze it for two seconds. It allows to keep the current state while moving the mouse out.
+
+ </p>
<p>Dynamic higlighting in the code pane : the current operator is displayed with a reddish background. If it has operands it is in a blueish background. Whatever the term operator and operands denote here depends very much on the language and the context. You will figure it out.</p>
@@ -27,14 +41,14 @@
<div class="text">The current page contains two lite portviews. The shows the parsing of a simple arithmetic expression</div>
-<div class="text" id="text-id0">This directive will hilite the string <span class="liteText" data='a'>a</span> and DH stuff in the associate lite accordingly. Need to think escaping in data, and textual representation to generate this directive.</div>
+<div class="text" id="text-id0">This directive will hilite the string <span class="liteText link" data='a'>a</span> and DH stuff in the associate lite accordingly. Need to think escaping in data, and textual representation to generate this directive.</div>
-<div id="viewport-dh"></div>
+<div id="viewport-dh"></div> <!-- this div will be replaced by a lite viewport -->
<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>
-<div class="text" id="text-id1">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>
+<div class="text" id="text-id1">This directive will hilite the string <span class="liteText link" 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>
<div id="viewport-parsed"></div>
View
17 js/LiteViewport.js
@@ -51,6 +51,23 @@
lSel = liteSel(elt);
return toggleLiteViewport(lSel);
});
+ $(".example").hover(function(ev) {
+ return $(event.currentTarget.parentNode).addClass('red');
+ }, function(ev) {
+ return $(event.currentTarget.parentNode).removeClass('red');
+ });
+ $(".hilite").hover(function(ev) {
+ var sel;
+ sel = $(event.currentTarget).attr("data");
+ return $(sel).addClass('borderRed');
+ }, function(ev) {
+ var sel;
+ sel = $(event.currentTarget).attr("data");
+ return $(sel).removeClass('borderRed');
+ });
+ $(".link").hover(function(ev) {
+ return $(event.parentNode).addClass('done');
+ });
$(".liteText").live('vmouseover', function(ev) {
var elt, found;
elt = ev.currentTarget;
View
31 src/LiteViewport.coffee
@@ -1,6 +1,6 @@
-# A viewport is a composite widget that contains many pane. Each panes within a viewport
+# A viewport is a composite widget that contains many panes. Each panes within a viewport
# instance is uniquely identified by a string suffixed by "Pane".
-# The code is refactored to support multiple lite viewports on a single page.
+# On candisplat multiple lite viewports on a single page.
# `&MarkupForLiteViewport' generates markup. The inner routine `idAndClass` appends the
# string `viewportId` is appended to the component panes' class names to create an unique id
# $("#{lSel} .code").removeClass "hilitedRuleNm"
@@ -12,11 +12,10 @@
# `hilitedRuleNm`
# `DHReducedCode`
-# code for editing is commented out
+# code for editing is commented out because non functional
$ ->
dynamicHiliteP = true # false after first click on code/doc
- # id is escaped to protect from rogue callers
markupForLiteViewport = (viewportId) ->
viewportId = escape viewportId
# the dash used between `paneNm` and `viewportId` is used to extract the `viewPortId`
@@ -76,6 +75,30 @@ $ ->
lSel = liteSel elt
toggleLiteViewport lSel
+ # $(".hilite").live 'vmouseover',
+ # (ev) -> console.log "in"
+ # (ev) -> console.log "out"
+
+ $(".example").hover(
+ (ev) -> $(event.currentTarget.parentNode).addClass('red')
+ (ev) -> $(event.currentTarget.parentNode).removeClass('red')
+ )
+
+ $(".hilite").hover(
+ (ev) ->
+ sel = $( event.currentTarget).attr("data")
+ $(sel).addClass 'borderRed'
+ (ev) ->
+ sel = $(event.currentTarget).attr("data")
+ $(sel).removeClass 'borderRed'
+ )
+
+
+ # will be used to see if the user reads the doc sequentially
+ $(".link").hover(
+ (ev) -> $(event.parentNode).addClass('done')
+ )
+
$(".liteText").live 'vmouseover', (ev) ->
elt = ev.currentTarget
found = searchText nextCodePane(elt), $(elt).attr 'data'
Please sign in to comment.
Something went wrong with that request. Please try again.