HCMC Blogs

Today I made a start on figuring out the best way to put linked SVG logos on web page. The test document was a new HCMC logo comprising the UVic shield and the HCMC name. This is what I had to do to the SVG image:

• Create a group for each part of the logo, to make it linkable.
• (In Inkscape) right-click on the group, and choose Create Link.
• Right-click again, and choose Link Properties.
• Fill in the @xlink:href, @xlink:title, and @target attributes. If you don't include @target="_top", then the link will replace the SVG image with the linked page. That's usually not what you want.
• Create white boxes (in this case, because the image BG is white) over the top of each group; link them in a similar way, and then send them to the bottom. If you don't do this, the link only work when the mouse is over the actual content of the element (the text, in this case); in between letters, there's no link.
• In the root SVG element, set @viewBox="0, 0, [width], [height]", where [width] and [height] are the original @width and @height attribute values from the same element.
• Add @preserveAspectRatio="xMinYMin meet" to the root <svg> element.
• Set the @width and @height attributes of the root <svg> element to the pixel values you want the image to show up with. These are naked integers (no 'px' or other units). (This is unfortunately necessary.)
• Clean any cruft you can out of the SVG file. I was able to remove some old @style attributes which had font info in them, even though the text had already been converted to paths.

That's it for the SVG. Now, to insert it into the page. In this case, I wanted it centred, which proved annoyingly tricky.

• Create a <div> element with width and height set to the desired pixel-width of the image (as already specified in the SVG file), in the @style attribute, and also include margin-left: auto and margin-right: auto.
• Create an <object> tag inside it, with the same width and height settings, with the @type attribute set to "image/svg+xml" and the @data attribute pointing at the SVG file.
• Include some appropriate fallback content in the <object> tag, in case the image can't be displayed.

The results (for the Map of London project footer) look like this:

  <div style="text-align: center; margin-left: auto; margin-right: auto; width: 237px; height: 40px;">
    <object type="image/svg+xml" data="images/hcmc_logo_linked.svg" style="width: 237px; height: 40px;">
    <a href="http://hcmc.uvic.ca/">
      <img src="images/hcmc_logo.gif" alt="Humanities Computing and Media Centre" width="163" height="39" /></a>      
      <a href="http://www.uvic.ca">
      <img src="images/uvic_logo.gif" alt="University of Victoria" width="104" height="40" /></a>
    </object>
  </div>

This is tested and working on Firefox, Safari, Opera, IE9 and Chrome. Chrome has a bug which changes the linked bit into a black square once it's "visited", but that's a known webkit bug which has just been fixed, so Chrome should inherit the fix soon.

• Make <note> elements display wherever they show up in the structure.
• Make the list of <dicteg>s into an expand/collapse structure if there are more than two of them.

Stats show a noticeable increase in usage through the semester.

On late duty.

Wrote and tested JavaScript regex to constrain input in integer fields, allowing greater-than and less-than:

/^((([\s]*[<]{1,1}[\s]*[-+]{0,1}[\d]+[\s]*[>]{1,1}[\s]*[-+]{0,1}[\d]+[\s]*)|([\s]*[>]{1,1}[\s]*[-+]{0,1}[\d]+[\s]*[<]{0,1}[\s]*[-+]{0,1}[\d]+[\s]*))|([\s]*[<>]{0,1}[\s]*[-+]{0,1}[\d]+[\s]*))$/

Added this validation to the JS code, and also updated the search output to include validation (it was missing for some reason; only previously included in data-entry form).

This feature is now complete, and appears to be working well (tested in Firefox, Opera, Chrome, IE8 and IE9). In making it work, I had to overcome problems relating to recursion. When a call is made to retrieve an entry for embedding inside another entry, my code naturally checks to see if we already have a copy of that entry on the page; if we do, it just makes a copy of it and uses it, rather than pulling it down again from the server via AJAX. However, that naturally means that any id attributes in the original tree need to be changed so that we don't have multiple elements on the page with the same id. I was already doing that with the id of th root node, but I had to make several more similar changes for nested entry lists:

• The nested entry naturally has its own "Other entries" link and container; the container had to be emptied of retrieved <div>s.
• The id of the container had to be changed to a unique id.
• The onclick event of the link had to be changed to point to the new id of the container.

This is a little messy, and in fact the same code appears in two places in the JavaScript, so my next job is to modularize it. It amounts to sanitizing a copied node tree.

For some reason I keep getting tree conflicts in the Moses SVN. This is the only way I've found to resolve them:

svn resolve --accept working -R .

You need to do this from one directory above the level of the actual conflict. I'm still trying to figure out why this keeps happening, but it may be something to do with the fact that the project was dormant for a good while, during which time the SVN remained unchanged, but my working copy was affected by a crash and restore of my home directories.

Finished reviewing the last section, after doing most at the weekend.

I've made the following changes, which are basically working:

• At the end of the last definition, if an item is a single morpheme, a link appears for retrieving all entries containing that morpheme.
• If you click on the link, a list of entries is retrieved, looking exactly like the regular entry list.
• If you click on one of those entries, the content of the entry is retrieved and displayed.

Two problems remain to be solved:

• The content becomes recursive, in that if you click on the tab for the ancestor morpheme inside the parent entry, the ancestor morpheme entry is copied inside itself, including the list of subentries you've already retrieved. They need to be stripped out when copying an entry to a morpheme tab.
• The decision to use a margin-left of -10em when displaying entry lists is causing problems, and needs to be re-thought. It's done in order to achieve a hanging indent, but something subtle will have to be done to override it when processing entry lists retrieved through AJAX and intended for embedding in other lists.

Did the last three PDSA evaluations -- all done now.