If you are going to work on extending Oomph jQuery overlay, here are some tips and explanations of how to do it:

  1. Download the source code or else connect directly to the Codeplex TFS instance.
  2. Open Oomph\Consume\Client\test.html in your favorite HTML editor. Side note: Mine happens to be Expression Web, which I hadn't used too much until this project but ended up loving. I used Expression Web for all my HTML, CSS and Javascript work on this project.  Things I like: how I can open a web site just by navigating to its directory; how it has intellisense for CSS; how it creates anchors on my Javascript methods, allowing me to bounce around from method to method.  And I like its color coding.  And I like how I can right-click and launch the page working on in any browser on my machine. And I like how it checks for compliance. I could go on...
  3. If you look at the source for test.html, you'll notice a couple things. First, you can see that the <script> tag points to a local copy of oomph.js.  That way, you can make changes to oomph.js and see them reflected in test.html.  In addition, you can see that test.html is formatted with microformats: 1 hCard and 3 hCalendars.  That way, you can actually see something appear in the overlay, including the pagination between the 3 hCalendars.
  4. Now open and start modifying oomph.js. Any changes you make to oomph.js will then be reflected in test.html, which you can keep refreshing in different browsers. 
  5. If you want to play with oomph.css, be sure to change the href location of the CSS to be local in oomph.js!  This is because the CSS for the Oomph overlay is dynamically injected into the DOM from Oomph.js as follows:
            //insert CSS  
            function insertCSS(){
                var head= document.getElementsByTagName('head')[0];
                 if (!head)
                     document.getElementsByTagName('html')[0];
                var css1 = document.createElement('link');
                css1.href = 'http://visitmix.com/labs/oomph/1.0/Client/oomph.css';
    //change to oomph.css for local development
    //css1.href = 'oomph.css';
    css1.type = 'text/css'; css1.rel = 'stylesheet'; head.appendChild(css1); }
  6. Note that we inject the absolute path to the CSS from the javascript because of our injection architecture with the IE Add-in.  If we used a local path to the CSS, we would end up being relative to the website we just were added to instead of to the visitmix.com server.  (This is but one example of some of the mind-altering perspectives we had to face when working on an application that injects javascript into pages which warrants another blog post entirely.) But during development, without changing the path to a local copy of the CSS, you'll never see updates when Oomph runs. There were several occasions where this bit me: I wasn't seeing a change to the overlay after modifying the CSS only to realize that I was pulling the CSS from the server and not my local copy.
  7. At this point, you are ready to rock as far as doing development to oomph.js and oomph.css.  Of course, debugging tools will help your Javascript development.  These days I use the IE Developer Tools that ship as part of Internet Explorer 8.
  8. Another thing you might consider doing, if you need to debug into JQuery, is to change the reference in test.html to a non-minified version of JQuery, which can be downloaded from the JQuery website. That way you can debug into the JQuery library, which I found useful on several occasions.
  9. When you are done, be sure to change the reference in oomph.css back to the absolute path. 

Now, this is all well and good if you are wanting to see how your changes to oomph.js and oomph.css affect test.html.  But what do you do if you want to see how those changes affect things when the script is injected into various web pages on the internet?  In this case, we did the following:

  1. Install IIS on your development machine.
  2. Map a virtual directory on your local machine to where oomph\consume\client is located.
  3. Then, you need to go into the code for the Add-in itself and make a modification to toolbar.cpp, line 143:
        //CComVariant scriptSrc2("http://localhost/oomph/oomph.js";);
        CComVariant scriptSrc2(https://visitmix.com/labs/oomph/1.0/client/oomph.min.js);
  4. Recompile the toolbar. During recompilation, Visual Studio will register your copy of the toolbar for you.

 

By having the toolbar insert the script from localhost, you can then do development to oomph.js and oomph.css and see those changes immediately reflected when the IE Add-in lights up on pages with Microformats.

Incidentally, you may be wondering why we go over https when we inject oomph.js into pages. This is to prevent any possibility of DNS cache poisoning as far as creating a vulnerability of someone attempting to spoof our script coming from the visitmix.com server.