This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
public:tellmaps_url_and_seo [2014/04/25 13:14] honzik [Path component] |
public:tellmaps_url_and_seo [2014/05/05 07:27] (current) honzik |
||
---|---|---|---|
Line 21: | Line 21: | ||
* a **local hash**, ''#local-hash'' - this is used as a normal hash, i.e. to scroll to a given part of document (top / bottom etc). | * a **local hash**, ''#local-hash'' - this is used as a normal hash, i.e. to scroll to a given part of document (top / bottom etc). | ||
- | [Implementation] code to retriveve params from hash part: https://gist.github.com/miohtama/1570295 | + | [Implementation details] code to retriveve params from hash part: https://gist.github.com/miohtama/1570295 |
===== URLs for Tellmaps ===== | ===== URLs for Tellmaps ===== | ||
Line 35: | Line 35: | ||
* ...some more? | * ...some more? | ||
- | The general rule of thumb is: if we have a content we want to serve to search index as static, it should have an unique path. | + | The general rule of thumb is: if we have a content we want to serve to search engine as a static document, it should have an unique path component. |
==== Param set ==== | ==== Param set ==== | ||
Line 48: | Line 48: | ||
Advantages of param set over path set (such as ''/tellmap/WDAWORLD01/date/1974/focus/BRA/cartogram/true''): | Advantages of param set over path set (such as ''/tellmap/WDAWORLD01/date/1974/focus/BRA/cartogram/true''): | ||
- | * params are simpler to parse / assemble | + | * params are simpler to parse / assemble, it's much harder to make a mistake as would be in the above if we remove one part of component, such as ''date'' |
* we can distinguish between what is a path to resource, and what is only a different way to display it | * we can distinguish between what is a path to resource, and what is only a different way to display it | ||
Line 58: | Line 58: | ||
===== Javascript implementation ===== | ===== Javascript implementation ===== | ||
- | |||
- | The main idea is to create a Javascript service which can be called from existing system modules to perform URL-based operations. We shall call it ''TellmapsURIService''. | ||
- | |||
- | API should provide: | ||
<code javascript> | <code javascript> | ||
/** | /** | ||
- | * Register a given path. | + | * revised version with one settings object and multiple callback definitions |
- | * @param uri_string string with path. May contain variables in the format of '':variable'' - will be passed to callback on request. | + | * @param settings - collection {}, specify these properties: |
- | * @param callback - a function in the form of function(passed_vars, get_vars, path_not_changed) | + | * - path - string - define a path component with possible :variable notation |
- | * passed_vars is a collection of { variable_name: variable_value } | + | * - onPathSet - function(variables) - pass in a callback to be called whenever a path changes |
- | * get_vars is a collection of param set (GET) in form of { param_name: param_value } with automatic completion from default_params_object | + | * - @param variables - collection of passed :variable values |
- | * path_not_changed is true if path component changed from last state, false if only params / local hash changed | + | * in format { variable_name: variable_value } |
- | * function will be called whenever URI matches on URI change | + | * - onPathOut - function() - pass in a callback to as destructor function |
- | * @param default_params_object - contains default GET values in form of { param_name: param_def_value } | + | * - is called whenever path components change from this path |
+ | * - onParamsChange - function(params) - pass in a callback to be called whenever a param string changes | ||
+ | * - @param params - collections of passed GET params | ||
+ | * in format { param_name: param_value } | ||
+ | * - defaultParams - collection - define an array of default GET values - they automatically pre-fill the | ||
+ | * params in onParamsChange callback if not provided from GET | ||
+ | * - onHashChange - function(local_hash) - pass in a callback to be called whenever a local hash part changes | ||
+ | * - @param local_hash - provides new value of local_hash | ||
+ | * - @default if not defined, will perform a scroll to page top / element of ID #local_hash, | ||
+ | * as standard hash does | ||
+ | * - debug - boolean - provide console.log outputs on various operations of this registerURI block | ||
* @return none | * @return none | ||
+ | * | ||
+ | * notes: | ||
+ | * - all callbacks have "this" set which can access the following: | ||
+ | * getHash(), getParams(), getParamString(), getPath() | ||
+ | * please do not use their "set" counterparts directly. | ||
**/ | **/ | ||
- | function registerURI( uri_string, callback, default_params_object ) { | + | function registerUri( settings ) { |
... | ... | ||
Line 86: | Line 97: | ||
* function will be called on URI parse failed | * function will be called on URI parse failed | ||
* @return none | * @return none | ||
+ | * | ||
+ | * notes: | ||
+ | * - callback has "this" set which can access the following: | ||
+ | * getHash(), getParams(), getParamString(), getPath() | ||
+ | * please do not use their "set" counterparts directly. | ||
**/ | **/ | ||
- | function onURIFail( callback ) { | + | function onUriFail( callback ) { |
... | ... | ||
/** | /** | ||
- | * Manual call to path change | + | * Get proper URI string to be used in parts of the app |
* @param path - string, path component part | * @param path - string, path component part | ||
* @param get_params - get param collection in the form of { param_name : param_value } | * @param get_params - get param collection in the form of { param_name : param_value } | ||
* @param local_hash - string, local hash part | * @param local_hash - string, local hash part | ||
- | * @return true/false on success / fail | + | * @return string final string |
**/ | **/ | ||
- | function changeURI( path, get_params, local_hash ) { | + | function getUriString( path, get_params, local_hash ) { |
... | ... | ||
+ | |||
</code> | </code> | ||
- | So, on the side of implementor into existing system, the role is to: call the ''TellmapsURIService.registerURI'' in the setup phase of the application and register a callback to provide given task. | + | This solution has these advantages: |
- | + | * destructor on path component change - can be used to free memory-intensive resouces, kill dialogs etc. | |
- | Whenever somebody clicks on a link with the hashbang syntax, uses browser history or manually changes the location, callbacks should trigger. | + | * separate GET params / path component / local hash change callbacks - better, isolated events. The event order is as follows: |
- | + | ||
- | ''TellmapsURIService'' should handle events of location change and/or parse the [variable, get, local hash] data before use. | + | |
+ | <code> | ||
+ | (change a path component) -> trigger onPathSet -> trigger onParamChange -> trigger onHashChange | ||
+ | (change a params part) -> trigger onParamChange only | ||
+ | (change a local hash part) -> trigger onHashChange only | ||
+ | </code> | ||
===== Server-side implementation ===== | ===== Server-side implementation ===== | ||