Enough Fun and Games

3:50 PM , , 0 Comments

Ok, So I am taking a short break from the game to do some real work. Sort of.

In learning Javascript, I decided it would be worth my while to learn some jQuery as well. Turns out it is super-easy and useful for making simple applications that have "real work" uses.

I developed two small tools that could be used in a number of ways. One is just a big-old table of contents style drop down, complete with link descriptions.

The other is what I call a "workflow" that could be used for giving instructions or even trouble-shooting common issues. Check it out here.

Both are easily adaptable and open source. So feel free to pilfer the code. Feel free to ask me questions if you need help using it.

Table of Contents

For this little app, I just needed a list that I could easily add links to and would fold itself up, so there wouldn't be too many on a page to look at at once. You can just look at the relevant section and ignore the rest.

First, each "category" is listed inside  list tag with class "slide". Then underneath, we create a list of links with class "articles". You can make unlimited categories. 
 
<ul class='slide'>
<li><h3>Category 1</H3></li>
    <ul class="articles">
 +Each line is split at the plus
 +type "#plus" if you want to actually see a plus sign as text
 +It automatically parses addresses as links that are listed with http:
 +the script parses out the part after "Description:" for the mouseover
 +download the code here! http://games.codeandcompose.com/WorkApps/sourcecode.zip
                Description:The best code ever written! Or not.
    </ul>
...

The app splits each line in the "articles" list by the +. Then it creates a link with an address (if there is one starting with http:// or https://). If there is a description (split at "Description:"), that will show up when you hover.

There is a tiny cosmetic glitch with the hover descriptions. I haven't yet come up with a great fix, but it's not too noticeable.

The string parsing was pretty simple. It uses some regular expressions and Javascript string.replace() function. After breaking the strings, it puts them into list elements and links (when used).

 
$.fn.extend({
    stringSplitToList: function() //this function parses the html body into a list for the jquery
    {
        var htmlList = '', aclass = 'none';
        $.each($(this).html().split('+'), function(i, v) {
            v = v.replace(/#plus/g,"+");//put plusses back in
            var tempSplit = v.split("Description:");
            v = tempSplit[0];

            //makes sure the description not undefined.
            var description = (tempSplit[1]) ? tempSplit[1] : "No description."; 

            if (v.match(/(https:\/\/|http:\/\/)\S+/igm)) {
                var alink = v.match(/(https:\/\/|http:\/\/)\S+/igm)[0];
                var title = v.replace(alink,"");
                if (title.match(/\*/gm)){
                    title = title.replace("*","");
                    aclass = 'internal';
                } else if (title.match(/\^/gm)){
                    title = title.replace("^","");
                    aclass = 'archive';
                } else {
                    aclass = 'none';
                }
                htmlList += '<li><a href="' + alink + '" class="' + aclass + '">' + title + '</a><div class="des">' + description + '</div></li>';

            //handle categories header
            } else if (v.match(/(href=)\S+/igm)) {
                var alink = v.match(/(href=)\S+/igm)[0];
                var title = v.replace(alink,"");
                alink = alink.replace("href=","");
    
                if (title.match(/\*/gm)){
                    title = title.replace("*","");
                    aclass = 'internal';
                } else {
                    aclass = 'none';
                }
                htmlList += '<li><a href="' + alink + '" class="' + aclass + '">' + title + '</a><div class="des">' + description + '</div></li>';

                //handle categories header
                } else {
                    htmlList += '<li><div class="category">' + v + '</div></li>';
                }
        });
        $(this).html(htmlList);
    }
});

Each link can also be marked as "internal" with a * or "archived" with a ^. You can even use internal links marked by href=

Just call this line once the page loads and it parses the text for you.

$('.articles').each(function(index){$(this).stringSplitToList();});

Workflow App

The workflow app can take very complex paths. By following the formula in each js file, you can add unlimited questions and answers. As the user chooses their answers, links, pictures and tips are given to help them out. The logic can be created to direct to a certain path based on previous answers form one or multiple questions.

I used it to make a wi-fi router trouble-shooting guide. The example given on this website is just for fun though.

Here is a graffle showing how the questions are programmed.



Each question is loaded in the following format:

addQuestion(1, //the question number
         //the question
    "This is workflow 1. Use this workflow?",
        //answer options (as many as you want)
    ["Maybe","No","Yes"],
        //answer direction, either a question number or LOGIC or RESET
    [1,"LOGIC",1],1, // the extra number is default
        //tips text
    "This area will show helpful tips. Or not...",
        //image urls (as many as you want) or null
    ["image1.png","image2.png"],
        // url and text for helpful links
    [{"url":"http://tagsounds.com","title":"A Link to TAGSOUNDS.COM"}],
       // callback function for when the direction of an answer is LOGIC
    function(){
        if (AA[0] === "Red"){
            nextQuestion(201);
            return;
        } else loadWorkflow("workflow2.js");
    }
);

If you like it, or would like to know more about how to adapt it for your needs, please contact me using the contact form at tagsounds.com.


0 comments:

Subscribe to: Posts (Atom)