Squiz Matrix Keyword Modifiers Test Suite

Keyword Modifiers are an extremely powerful feature of Squiz Matrix. They can be be used almost everywhere in the system and provide a great deal of keyword customization.

If you have never used keyword modifiers before give it a try, you can even modify they keyword yourself to see how to use it!

Test Keyword Modifiers

See how it works

Try It Yourself

Console Output

$test:

Note: Some of the keyword modifiers don't seem to work correctly when parsed with the JS API such as the data keyword.

In a future post I will talk about complex keyword modifiers which allows you to combine modifiers and use complicated modifiers such as xpath: and xslt:.

Change the Asset Map Sort Order Using Javascript in Squiz Matrix

In a past project I needed a way to change the asset map sort order by dragging items in an asset listing. I figured that it had to be possible, so with a little bit of javascript I wrote up the following function.

Hope it helps someone out!

/**
/**
* Changes the sort order of assets in Squiz Matrix
*
* @param number         id              ID of the asset to move
* @param number         parent          ID of the parent that the asset is under
* @param number         new_position    New position of asset (0 is first in the sort order)
*
* @return string
* @access public
*/
function changeSort(id, parent, new_position) {
        var host_url = location.protocol+'//'+location.host+'?SQ_ACTION=asset_map_request';
        var link_id;
        
        // Construct our XML to send
        var xml_get = '<command action="get assets"><asset assetid="'+parent+'" start="0" limit="150" linkid="10" /></command>';
        
        $.ajax({
                url: host_url,
                type: 'POST',
                processData: false,
                data: xml_get,
                contentType: "text/xml",
                dataType: 'xml',
                success: function(xml) {
                        $(xml).find('asset').each(function() {
                                if ($(this).attr('assetid') == id) {
                                        link_id = $(this).attr('linkid');
                                        $.ajax({
                                                url: host_url,
                                                type: 'POST',
                                                processData: false,
                                                data: '<command action="move asset" to_parent_assetid="'+parent+'" to_parent_pos="'+new_position+'"><asset assetid="'+id+'" linkid="'+link_id+'" parentid="'+parent+'" /></command>',
                                                contentType: "text/xml",
                                                dataType: 'xml',
                                                success: function(xml) {
                                                        //alert(xml);
                                                }
                                        });//end ajax
                                        
                                }//end if
                                
                        });//end each
                        
                }//end success
                
        });//end ajax
        
}//end changeSort()

Remember, this function requires jQuery.

Using the JS API Enhanced Mode in Squiz Matrix

The new Squiz Matrix JS API asset was just released with a great new option, Enhanced Mode. This allows for jQuery like methods for a much more object oriented style of doing things. The great thing is that you don't have to pass all of the parameters like the old version of the API, only the ones that are required and ones you want.

Test Functions

See how it works

Console Output

$test:

Javascript

// Code goes here

There are many more API methods that require more than read access, but those are out of the scope of this post.

Simple JSON Helper Snippet for Squiz Matrix

When first setting up a Design in Squiz Matrix I have started to add a little helper JSON snippet so that I can always reference the current page's info in Javascript if I ever need to. It uses simple MySource design tags along with JSON and is extremely helpful. Just add the following to the bottom of your Design parse file:

<script type="text/javascript">
var page = {id:'<MySource_print var="assetid" />',name:'<mysource_print var="asset_name" escape="yes" />',url:'<mysource_print var="asset_url" escape="yes" />'}
</script>

Note the use of escape="yes", this is important because we don't want to break our javascript if a name or URL containted quotes.

Once added, it will look something like this:

<script type="text/javascript">
var page = {id:'86',name:'Blog',url:'http://www.zedsaid.com/blog'}
</script>

You can then easily reference the page object using normal dot notation:

alert('Page Name: '+page.name+' ID: '+page.id+' URL: '+page.url);

Automatically Expand Squiz Matrix WYSIWYG Editor

I have always hated how the Squiz Matrix WYSIWYG Editor does not expand by itself, so I added a click event to ours so that they will always expend when the page is opened.

The WYSIWYG editor uses an onclick event which is bound to a div. So, we first need to wrap the keywords that print editors, with another div. So, for example, if we have a news item Asset Builder, and we want both the summary and body editors to expand, we would do the following in the Create Layout Form:

<div id="editor1">%details-F_summary%</div>
<div id="editor2">%details-F_body%</div>

Wrapping our keywords in divs ensures that we can more specifically target the element we want to simulate the click on. Now, we add a little jQuery to our page to simulate a click inside each of our divs:

$(function () {
	$('#editor1 div, #editor2 div').trigger('click');
});//end

Now our WYSIWYG Editors expend when we load the page. Hooray!

Squiz Matrix Remap Manager "Never Delete" Bookmarklet

Everyone has wanted a way to remove all checkmarks in the Remaps Managers "Never Deletion" column, so, I wrote a quick script that adds a checkbox for you, which, when clicked adds/removes checks to all the checkboxes in the Never Delete column.

Here is the code that you need, just add it as the Address/URL of your bookmark:

javascript:(function(){var doc=top.sq_main.document;var mainDiv=doc.getElementsByClassName('sq-backend-table-header');for(var i=0;i<mainDiv.length;i++){if(mainDiv[i].innerHTML.replace(/^\s*|\s*$/g,'
')=='Never Delete'){mainDiv[i].innerHTML='<label for="remap_manager_19_never_delete_select_all">Never Delete</label><input type="checkbox" class="sq-form-field" id="remap_manager_19_never_delete_select_all" onclick="check_all(document.main_form, \'remap_manager_19_never_delete_remap\', this.checked); " value="1" name="remap_manager_19_never_delete_select_all">';}}})()

Drag this bookmarlet to your bookmarks bar

If the asset id of your Remap Manager is something other than 19, you must replace 19 with your asset id. Also, this will not work in Internet Explorer.

Tracking file downloads with Google Analytics and jQuery

Since most Squiz Matrix files are served by apache, it is not as easy to log those downloads with Google Analytics. So, I wrote a little jQuery to bind click events to any links that look like files. Just make sure to add the Google tracking code above where you place this code:

$(function () {
    // Documents
    $("a[href*='.pdf'], a[href*='.doc'], a[href*='.xls'], a[href*='.ppt']").click(function () {
    	_gaq.push(['_trackPageview', '/doc/' + $(this).attr('href')]);
	});
	// Video   
    $("a[href*='.mov']").click(function () {
        _gaq.push(['_trackPageview', '/video/' + $(this).attr('href')]);
    });
    // File
    $("a[href*='.zip']").click(function () {
        _gaq.push(['_trackPageview', '/file/' + $(this).attr('href')]);
    });
    // Audio
    $("a[href*='.mp3']").click(function () {
        _gaq.push(['_trackPageview', '/audio/' + $(this).attr('href')]);
    });
});//end

Now, since we have added the file type to the data we send to Google, we just go to Google Analytics, click "Content", then "Top Content", and enter the file type to search for, such as /doc or /audio and it should find all the Matrix files that were downloaded, and their stats.

Javascript Development on a Live Site

8 months ago by Nicholas Hubbard in #Javascript

If you are doing javascript development on a live site, it is sometimes hard to do testing without your users seeing this testing happening. Recently I have been using a handy little function that allows me to add #dev to the url and only test those functions if the hash is in the url, such as http://www.zedsaid.com/home#dev.

/**
* Take functions out of global scope
*
* @version $Revision: 0.1
*/
var zs = {};


/**
 * Checks if we are in dev mode
 *
 * @version $Revision: 0.1
 */
zs.dev = function(){
    var h = document.location.hash.replace('#', '');
    return (h && h == 'dev');
}//end

Then when you are ready to do some work and need to test in "dev" mode just use it in an if statement:

if (zs.dev()) {
	// Do something here 
    
}//end

Very simple and very useful.

Using the MySource Matrix Javascript API - Part 1

I thought that since I am the one that wrote the MySource Matrix Javascript API asset, that I should probably write up a post about it, give it some background, and show some cool examples of its use.

First, the Javascript API is part of the Web Services package. This has been added to 3.22.2 as well as the 3.24.x branch. If you don't have a copy of it, visit the MySource Matrix site to download a new version of Matrix.

This asset come about because I really wanted a way to use javascript to get things like asset attributes, metadata and web paths. I was tired of always having to build asset listings and nest them just for something small. I also wanted the data returned to be in a format that we could easily use in javascript. So, I built the API to return JSON which then gets converted into a javascript object. Below, you will see how to implement the MySource Matrix Javascript API. If you have any questions about this, please post a comment.

Setting the API Key

The first step needed when setting up the Javascript API is to set the API key. This key needs to match the key that you configured on the Details screen of the Javascript API asset. A special function is called that sets the key to a global variable, which can then be used by other API functions.

setApiKey(1057909564);

Using an API function

Almost all of the API functions requires that an asset be specified as the first parameter. Please note that you can use either an asset id OR the web path to the asset. Either of these will work as the first parameter. All of the functions are different and require different pieces of data to be passed in.

Using the returned JSON

When a function from the Javascript API is used, it returns JSON. This can be easily seen when using Firebug, you can watch what the API returns as a response. But, if we want to use that response within our page, we have to utilize the custom callback that is added as the last parameter of each function.

getGeneral(1234, function(data) {
	alert(data.name);                                         
});

The following button will run the getGeneral() function for asset #1234 and return the asset name. If we want to get additional information about the asset, we can do the following:

getGeneral(1234, function(data) {
    alert('Name: '+data.name+'\n'+
        'Short name: '+data.short_name+'\n'+
        'Asset id: '+data.id+'\n'+
        'Type Code: '+data.type_code+'\n'+
        'Status: '+data.status+'\n'+
        'Created user id: '+data.created_userid+'\n'
    );                                        
});

Handling errors

If something goes wrong, the API will return an error. You can set up your callback function to account for this, and show the error if it is returned. We can use a helper function, isset() that is included with the API. This is similar to the isset function in PHP, as it checks to see if a variable in javascript has been set.

getGeneral(50000, function(data) {
    if (isset(data.error)) {
        alert(data.error);                                        
    } else {
        alert(data.name);                                         
    }
});

Conclusion

This is just the first part of my blog series on the MySource Matrix Javascript API and it really only scratches the surface. In my next post, I will show some more intermediate implementations, and how you can use the API to build things like select lists, populate fields and create assets. Stay tuned.

MySource Matrix Javascript API Asset Released in 3.22.2

I am very excited to say that I just got another asset that I built added to MySource Matrix. This time, it is the Javscript API asset that I wrote, and has been added to 3.22.2. The Javascript API asset is now part of the Web Services package, but is itself a GPL asset, so you can download it for free.

  • iphone

Right now the Javascript API asset is at version 1.0 and includes the following features:

  • Returns a JSON object to asset calls.
  • The asset will act as a normal .js file when no data is sent to it, but if key, id, and type are sent it will return JSON based on the function called used.
  • Error checking is included to make sure that the user does not try to send incorrect data, and return incorrect data. Errors are also logged in the normal error log as well as returns a JSON error.
  • Currently, the API has the following core features: Get General Info, Get Attributes, Set Attributes, Trash Asset, Get Metadata, and Set Metadata.
  • A root node can be set, to restrict API calls to a specific location in the tree. Error checking makes sure that this is enforced.
  • Slick new icon. :)
  • API Key is set using the setApiKey() function. e.g., setApiKey('123'); This sets the key as a global variable for all functions to use and is required to use the API.
  • All "get" functions have an optional callback, that is passed as the second parameter in the function.

It is exciting to have yet another asset added to MySource Matrix. I am continuing to work on new features for this asset, as I really feel that it will benefit many!

Feel free to let me know what you think and go download MySource Matrix 3.22.2!