Permalink
Browse files

more work on the page about the lite view port

The first view port is not yet initialized to highlight some code.
It is not static either.
But most of the wiring is there
  • Loading branch information...
cognominal committed Jul 9, 2012
1 parent 9c61656 commit 25ac371bc3454663a14cb77cc9328dfe67aefa76
Showing with 90 additions and 27 deletions.
  1. +2 −0 TBD
  2. +1 −1 css/zbrew.css
  3. +24 −10 i.html
  4. +38 −7 js/LiteViewport.js
  5. +25 −9 src/LiteViewport.coffee
View
2 TBD
@@ -22,7 +22,9 @@ Need folding too.
## TBD
+* should hilite the token under the cursor (necessary for multitoken operators)
* 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.
+* should care of the LOADING element displayed at the bottom (ajax stuff probably)
* 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.
* 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
View
@@ -19,7 +19,7 @@
border-style: solid;
}
-div.text {
+.text {
margin-top: 4em;
margin-bottom: 4em;
font-size:11px;
View
34 i.html
@@ -12,39 +12,53 @@
</head>
<body>
<div class="text">
- <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
+ <h1>Lite portview : a widget for modern literate programming</h1>
+ <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. Eventually it will link
+ to any relevant material.
+ 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.
+ <h2>The pane of a lite portview</h2>
+
+ <p>The <span class="hilite link" dataSel="#liteViewport-dh">lite</span> below is frozen for sake of exposition. We will see later unfrozen lites.<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>The <span class="hilite link" dataSel="#codePane-dh">code pane</span> shows the parsed code.</p>
+ <p>The <span class="hilite link" dataSel="#currentRulePane-dh">middle pane</span> is called the current rule pane. displays the rule used to recognize the highlighted code chunk.</p>
+ <p>the <span class="hilite link" dataSel="#parsePathPane-dh">top pane</span> is called the parse path pane. Going from left to right, it shows the path in the parse tree to reach the said rule. When a sequence of rules reduces to the same string it is shown top to bottom instead of left to
+ right.</p>
+</div>
+
+<div class="text" id="text-id0">This link will highlight the string <span class="liteText link" data='('>(</span> and hilite stuff in the associate lite accordingly.</div>
+<div class="text" id="text-id0">This link will highlight the string <span class="liteText link" data='a'>a</span> and hilite stuff in the associate lite accordingly.</div>
+<div class="text" id="text-id0">This link will highlight the string <span class="liteText link" data=')'>)</span> and hilite stuff in the associate lite accordingly.</div>
+
+
+
+
+ <div id="viewport-dh"></div> <!-- this div will be replaced by a lite viewport -->
+
+<div class="text">
+ Everything below this point is messy. Wait for a further commit.
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>
- <p>The middle pane displays the rule used to recognize the current code.</p>
- <p>the top pane is called the parse path paned. Going from left to right, it shows the path in the parse tree to reach the said rule. When a sequence of rules reduces to the same string it is show top to bottom instead of left to
- right.</p>
- <p>Currently the code pane is readonly.</p>
</div>
-<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 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> <!-- 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>
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -14,8 +14,6 @@
# code for editing is commented out because non functional
$ ->
- dynamicHiliteP = true # false after first click on code/doc
-
markupForLiteViewport = (viewportId) ->
viewportId = escape viewportId
# the dash used between `paneNm` and `viewportId` is used to extract the `viewPortId`
@@ -38,7 +36,8 @@ $ ->
to.html html
$(".code").live 'vmouseover', ( ev) ->
- return unless dynamicHiliteP
+ elt = ev.currentTarget
+ return if liteFrozen elt
ev.stopPropagation()
hilite ev
@@ -86,10 +85,10 @@ $ ->
$(".hilite").hover(
(ev) ->
- sel = $( event.currentTarget).attr("data")
+ sel = $( event.currentTarget).attr("dataSel")
$(sel).addClass 'borderRed'
(ev) ->
- sel = $(event.currentTarget).attr("data")
+ sel = $(event.currentTarget).attr("dataSel")
$(sel).removeClass 'borderRed'
)
@@ -129,8 +128,8 @@ $ ->
$(".parsePathSubitem").live 'vmouseover', (ev) ->
- return unless dynamicHiliteP
elt = ev.currentTarget
+ return unless liteFrozen elt
dehilite liteSel elt
id = elt.id
# $(elt).addClass "hilitedRuleNm" # color the subcomponent
@@ -167,11 +166,27 @@ $ ->
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
+ liteId = (elt) -> $(elt).parents().add($(elt)).filter(".liteViewport").attr('id')
+ liteNm = (elt) -> /-(\w+)$/.exec(liteId elt)[1]
+ liteSel = (elt) -> paneSel elt
litePane = (liteNm, paneNm) -> $("#liteViewport-#{liteNm} .#{paneNm}")[0]
+ liteFrozen = (elt) ->
+ lite = liteSel elt
+ $(lite).hasClass 'frozen' or $(lite).hasClass 'totallyFrozen'
+ liteTotallyFrozen = (elt) -> $(liteSel elt).hasClass 'totallyFrozen'
+
+ liteToggleFreeze = (elt) ->
+ lite = liteSel elt
+ return if liteTotallyFrozen elt
+ if liteFrozen elt
+ lite.removeClass 'frozen'
+ else
+ lite.addClass 'frozen'
+ window.setTimeout ((lite)-> lite.removeClass 'frozen'), 2000, lite
+
+ liteTotalFreeze = (elt) -> $(lite).addClass('totallyFrozen')
+
# we suppose that a lite is a sibling of a div with an id and with "text" as class
nextCodePane = (elt) ->
@@ -207,6 +222,7 @@ $ ->
hilite = (ev_or_elt) ->
elt = if ev_or_elt.tagName then ev_or_elt else ev_or_elt.currentTarget
+ return if liteFrozen elt
lSel = liteSel elt # lsel is the css selector for the relevant lite
dehilite(lSel)
showParsePath(elt, lSel)

0 comments on commit 25ac371

Please sign in to comment.