Show and hide tags in a single pane.

rgrempel · Mar 7, 2011 · 9edf3a4 · 9edf3a4
1 parent 50d32e5
commit 9edf3a4
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 13 deletions.
diff --git a/app/views/documents/show.teisource.xslt b/app/views/documents/show.teisource.xslt
@@ -8,7 +8,25 @@
                 version="1.0">
 
     <xsl:output omit-xml-declaration="yes" method="html" encoding="UTF-8" version="1.0" indent="yes" />
-
+
+    <xsl:template match="tei:facsimile">
+        <div class="tagOpen">
+            <xsl:text disable-output-escaping="yes">&amp;lt;</xsl:text>
+            <xsl:value-of select="local-name(.)" />
+            <xsl:apply-templates select="@*" mode="source" />
+            <xsl:text disable-output-escaping="yes">&amp;gt;</xsl:text>
+            <xsl:text disable-output-escaping="yes">
+                &amp;lt;!-- Omitting the facsimile ... download the
+                TEI document to see it --&amp;gt;
+            </xsl:text>
+        </div>
+        <div class="tagClose">
+            <xsl:text disable-output-escaping="yes">&amp;lt;/</xsl:text>
+            <xsl:value-of select="local-name(.)" />
+            <xsl:text disable-output-escaping="yes">&amp;gt;</xsl:text>
+        </div>
+    </xsl:template>  
+
     <!-- By default, we just copy and descend -->
     <xsl:template name="copy-and-descend" match="*">
         <!-- Construct a div with a class of our tag name -->

diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
@@ -16,7 +16,7 @@
 
     = javascript_include_tag "/#{isomorphicDir}/skins/EnterpriseBlue/load_skin.js"
 
-    - %w{ seadragon-min RailsDataSource FileUploadForm SeaDragon application }.each do |js|
+    - %w{ seadragon-min CSSRules RailsDataSource FileUploadForm SeaDragon application }.each do |js|
       = javascript_include_tag "/javascripts/#{js}"
 
     = stylesheet_link_tag :all

diff --git a/public/javascripts/CSSRules.js b/public/javascripts/CSSRules.js
@@ -0,0 +1,54 @@
+isc.defineClass("CSSRules").addProperties({
+  legalStyles: ["color", "backgroundColor", "display"],
+
+  init : function() {
+    this.Super("init", arguments);
+
+    // cssRules is a cache of the actual rules in the actual stylesheet
+    this.cssRules = {};
+
+    var head = document.documentElement.firstChild;
+    var title = "Dynamic-Styles";
+    isc.Element.insertAdjacentHTML(head, "afterBegin", "<style type='text/css' title='" + title + "' />", true);
+
+    for (var i = 0; i < document.styleSheets.length; i++) {
+      if (document.styleSheets[i].title == title) {
+        this.stylesheet = document.styleSheets[i];
+        break;
+      }
+    }
+
+    return this;
+  },
+
+  setRule : function(selector, styles) {
+    var cssRule = this.cssRules[selector];
+
+    if (!cssRule) {
+      this.stylesheet.insertRule(selector + " {}", 0);
+      cssRule = this.cssRules[selector] = this.stylesheet.cssRules[0];
+    }
+
+    this.legalStyles.map(function(style) {
+      if (styles[style]) cssRule.style[style] = styles[style];
+    });
+
+    return selector;
+  },
+
+  getRule: function(selector) {
+    var result = {};
+    var rule = this.cssRules[selector];
+    if (rule) {
+      this.legalStyles.map(function(style) {
+        if (rule.style[style]) result[style] = rule.style[style];
+      });
+    }
+    return result;
+  },
+
+  clearRules: function() {
+
+  }
+});
+
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
@@ -108,14 +108,36 @@ isc.defineClass("DocumentContents", isc.VLayout).addProperties({
 
   documentDownloadDefaults: {
     _constructor: isc.HTMLPane,
+    width: "50%",
+    height: "100%",
+    autoParent: "lowerPane"
+  },
+
+  showTagsButtonDefaults: {
+    _constructor: isc.Button,
+    autoFit: true,
+    actionType: "checkbox",
+    title: "Show Tags",
+    autoParent: "lowerPane",
+    action : function () {
+      book5.showTags(this.isSelected());
+      this.setTitle(this.isSelected() ? "Hide Tags" : "Show Tags");
+    }
+  },
+
+  lowerPaneDefaults: {
+    _constructor: isc.HLayout,
     width: "100%",
     height: 20
   },
 
   initWidget : function () {
     this.Super("initWidget");
     this.addAutoChild("documentFlow");
+    this.addAutoChild("lowerPane");
     this.addAutoChild("documentDownload");
+    this.addAutoChild("showTagsButton");
+    this.observe(this.showTagsButton, "action", "observer.markForRedraw()");
   },
 
   setDocument : function (doc) {
@@ -298,12 +320,6 @@ isc.defineClass("AppLayout", isc.HLayout).addProperties({
     width: "100%"
   },
 
-  styledTEIDefaults: {
-    _constructor: isc.DocumentStyled,
-    height: "100%",
-    width: "100%"
-  },
-
   documentTabsDefaults: {
     _constructor: isc.TabSet,
     showResizeBar: true,
@@ -312,9 +328,6 @@ isc.defineClass("AppLayout", isc.HLayout).addProperties({
     tabs: [{
       title: "TEI",
       pane: "autoChild:documentContents"
-    },{
-      title: "Text",
-      pane: "autoChild:styledTEI"
     }]
   },
 
@@ -329,11 +342,18 @@ isc.defineClass("AppLayout", isc.HLayout).addProperties({
     this.addAutoChild("documentLayout");
     this.addAutoChild("documentTabs");
     this.addAutoChild("deepZoom");
+    this.cssRules = isc.CSSRules.create();
+    this.showTags(false);
+  },
+
+  showTags : function (show) {
+    this.cssRules.setRule("div.tagOpen, div.tagClose, div.tagOpenClose", {
+        display: show ? "inline" : "none"
+    });
   },
 
   setDocument : function (doc) {
     this.documentContents.setDocument(doc);
-    this.styledTEI.setDocument(doc);
     this.deepZoom.setDocument(doc);
   }
 });

diff --git a/public/stylesheets/tei-html.css b/public/stylesheets/tei-html.css
@@ -1,7 +1,6 @@
 /* Modified for HTML divs, with classes representing the TEI tags */
 
 div.tagOpen, div.tagClose, div.tagOpenClose {
-    display: inline;
     color: green;
     font-size: 90%;
 }
@@ -796,6 +795,7 @@ div.p {
 
 div.pb {
     display: block;
+    margin-top: 0.25em;
 }
 
 div.pb:after {