Marshal's Light: Javascript

Showing posts with label Javascript. Show all posts

Tuesday, July 26, 2011

Dynamic Dependency Map using ExtJS 3 and WCF RESTful

Fleetingly time passed. When I was cleaning my archive recently, an interesting project I did last year just reminded me of that. Anyway, that project was aimed to create a dynamic map to maintain and show the dependencies of our applications. Here is a short demo:

Design diagram:

Screenshots if vedio is too slow:

Thursday, July 7, 2011

Extend jQuery.highlight to highlight regular expressions

The jquery.highlight is a succinct and easy-to-use jQuery plugin to highlight texts. The current version can only highlight literary words case insensitively, but I extended it to highlight regular expressions so that you can highlight things like "foo*bar" as well. jquery.myhighlight-3.js:

/*

highlight v3 - Modified by Marshal (beatgates@gmail.com) to add regexp highlight, 2011-6-24

Highlights arbitrary terms.

<http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html>

MIT license.

Johann Burkard
<http://johannburkard.de>
<mailto:jb@eaio.com>

*/

jQuery.fn.highlight = function(pattern) {
    var regex = typeof(pattern) === "string" ? new RegExp(pattern, "i") : pattern; // assume very LOOSELY pattern is regexp if not string
    function innerHighlight(node, pattern) {
        var skip = 0;
        if (node.nodeType === 3) { // 3 - Text node
            var pos = node.data.search(regex);
            if (pos >= 0 && node.data.length > 0) { // .* matching "" causes infinite loop
                var match = node.data.match(regex); // get the match(es), but we would only handle the 1st one, hence /g is not recommended
                var spanNode = document.createElement('span');
                spanNode.className = 'highlight'; // set css
                var middleBit = node.splitText(pos); // split to 2 nodes, node contains the pre-pos text, middleBit has the post-pos
                var endBit = middleBit.splitText(match[0].length); // similarly split middleBit to 2 nodes
                var middleClone = middleBit.cloneNode(true);
                spanNode.appendChild(middleClone);
                // parentNode ie. node, now has 3 nodes by 2 splitText()s, replace the middle with the highlighted spanNode:
                middleBit.parentNode.replaceChild(spanNode, middleBit); 
                skip = 1; // skip this middleBit, but still need to check endBit
            }
        } else if (node.nodeType === 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) { // 1 - Element node
            for (var i = 0; i < node.childNodes.length; i++) { // highlight all children
                i += innerHighlight(node.childNodes[i], pattern); // skip highlighted ones
            }
        }
        return skip;
    }
    
    return this.each(function() {
        innerHighlight(this, pattern);
    });
};

jQuery.fn.removeHighlight = function() {
    return this.find("span.highlight").each(function() {
        this.parentNode.firstChild.nodeName;
        with (this.parentNode) {
            replaceChild(this.firstChild, this);
            normalize();
        }
    }).end();
};

Here is a test file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="lib/jquery-1.6.js"></script>
<script type="text/javascript" src="lib/jquery.myhighlight-3.js"></script>
<style>
.highlight {
    background-color: yellow;
}
</style>
</head>
<body>

<div id="row">
    <div>
        <a class="fullname" href="#"><span class="lastname">Goog</span>, <span class="firstname">Billy</span></a>
        <div id="remove">ServIcE: (click me to remove all highlight)</div>
        <div><span class="section">Pig &amp; Sheep Serv</span>, <span class="department">Cow Administration &amp; Management</span></div>
        <div class="org">Trade Administration, Administration Services</div>
        <div id="email">
            <a class="email" href="mailto:a@abc.com">a@abc.com</a>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function() {
        $("#row").highlight("service");
        $(".lastname").highlight("o");
        $(".section").highlight(/g.*ep/i);
        $(".department").highlight(/.*/i);
        $(".org").highlight(/adm.*(?=, )/i);
        $("#email").highlight(/a.c\./);
        $("#remove").click(function() {$("#row").removeHighlight();});
    });
</script>

</body>
</html>

And the result:

Here are the links for the source code:

Wednesday, May 25, 2011

Type-as-you-go Ajax People Search Web Part using SharePoint 2007 Search Services - Part II

After prototyped and compared both solutions, I found that Content Editor Web Part(CEWP) + Javascript seems more suitable for our needs. It's not only more lightweight, interactive and flexible, but also less administration overhead. The product looks like this:

Here is the design diagram:

Pure Javascript and HTML stuff wrapped in a SharePoint CEWP. The core component here is MyXslt transformer, a small Javascript library I released to transform the search service result (XML) into HTML elements. Below is a list of libraries I used:

Javascript libraries
jQuery	1.5+
MyXslt	XSLT transformer that transforms the search service result XML directly into HTML elements
jQuery UI	UI for dialogs
QTip	jQuery plugin for tip style people's details
Highlight	jQuery plugin for keyword highlighting
MyImgScale	jQuery plugin for Image scaling

The solution layout (for commercial reasons, the full source code is not published at this stage):

PeopleSearch

    +---.hg

    +---clientSideSolution

    |   +---cewp

    |   +---release

    |   +---standalone

    |   +---unitTest

    |   \---_layouts

    |       \---1033

    |           +---images

    |           +---js

    |           +---styles

    |           \---xslt

    +---PeopleSearchWebpart

    +---data

    +---script

    +---UnitTest

    +---UserControlTest

    +---WebTest

    +---LoadTest

    \---TestResults

Another thing worth mention is that the load testing results (see above, using Visual Studio 2010's built-in load testing tool) showed the application was very responsive too.

Tuesday, May 3, 2011

MyXslt v0.2 released

In my previous blog, I provided a temporary fix for jQuery XSLT plugin. However, it is neither complete nor correct due to the plugin's lacking of callback interface during its asynchronous XSLT processing. From David Flanagan's excellent book "JavaScript: The Definitive Guide (5th Edition)", I found a pure Javascript solution and decided to enhance it to suit my needs.

The potential usage of this small Javascript library is calling any web services that return XML then transforming it directly to HTML elements by XSLT. In my case, I created a customized People Search web part in SharePoint 2007 as a replacement for the built-in one, and made complicated search easier, more flexible and interactive. This web part doesn't need any server side programming as it's pure HTML + Javascript contained in SharePoint's provided Content Editor Web Part. For more information about this web part, please stay tuned.

More information here, downloads and source code.