tizen-web-ui-fw/latest/js/src/jquery.mobile.tizen.loadprototype.js

   1
   2 (function($, undefined) {
   3
   4 ensureNS("jQuery.mobile.tizen");
   5
   6 jQuery.extend( jQuery.mobile.tizen,
   7 {
   8     _widgetPrototypes: {},
   9
  10     /*
  11      * load the prototype for a widget.
  12      *
  13      * If @widget is a string, the function looks for @widget.prototype.html in the proto-html/ subdirectory of the
  14      * framework's current theme and loads the file via AJAX into a string. Note that the file will only be loaded via
  15      * AJAX once. If two widget instances based on the same @widget value are to be constructed, the second will be
  16      * constructed from the cached copy of the prototype of the first instance.
  17      *
  18      * If @widget is not a string, it is assumed to be a hash containing at least one key, "proto", the value of which is
  19      * the string to be used for the widget prototype. if another key named "key" is also provided, it will serve as the
  20      * key under which to cache the prototype, so it need not be rendered again in the future.
  21      *
  22      * Given the string for the widget prototype, the following patterns occurring in the string are replaced:
  23      *
  24      *   "${FRAMEWORK_ROOT}" - replaced with the path to the root of the framework
  25      *
  26      * The function then creates a jQuery $("<div>") object containing the prototype from the string.
  27      *
  28      * If @ui is not provided, the jQuery object containing the prototype is returned.
  29      *
  30      * If @ui is provided, it is assumed to be a (possibly multi-level) hash containing CSS selectors. For every level of
  31      * the hash and for each string-valued key at that level, the CSS selector specified as the value is sought in the
  32      * prototype jQuery object and, if found, the value of the key is replaced with the jQuery object resulting from the
  33      * search. Additionally, if the CSS selector is of the form "#widgetid", the "id" attribute will be removed from the
  34      * elements contained within the resulting jQuery object. The resulting hash is returned.
  35      *
  36      * Examples:
  37      *
  38      * 1.
  39      * $.mobile.tizen.loadPrototype("mywidget") => Returns a <div> containing the structure from the file
  40      * mywidget.prototype.html located in the current theme folder of the current framework.
  41      *
  42      * 2. $.mobile.tizen.loadPrototype("mywidget", ui):
  43      * where ui is a hash that looks like this:
  44      * ui = {
  45      *   element1: "<css selector 1>",
  46      *   element2: "<css selector 2>",
  47      *   group1: {
  48      *     group1element1: "<css selector 3>",
  49      *     group1element1: "<css selector 4>"
  50      *   }
  51      *  ...
  52      * }
  53      *
  54      * In this case, after loading the prototype as in Example 1, loadPrototype will traverse @ui and replace the CSS
  55      * selector strings with the result of the search for the selector string upon the prototype. If any of the CSS
  56      * selectors are of the form "#elementid" then the "id" attribute will be stripped from the elements selected. This
  57      * means that they will no longer be accessible via the selector used initially. @ui is then returned thus modified.
  58      */
  59
  60     loadPrototype: function(widget, ui) {
  61         var ret = undefined,
  62             theScriptTag = $("script[data-framework-version][data-framework-root][data-framework-theme]"),
  63             frameworkRootPath = theScriptTag.attr("data-framework-root")    + "/" +
  64                                 theScriptTag.attr("data-framework-version") + "/";
  65
  66         function replaceVariables(s) {
  67             return s.replace(/\$\{FRAMEWORK_ROOT\}/g, frameworkRootPath);
  68         }
  69
  70         function fillObj(obj, uiProto) {
  71             var selector;
  72
  73             for (var key in obj) {
  74                 if (typeof obj[key] === "string") {
  75                     selector = obj[key];
  76                     obj[key] = uiProto.find(obj[key]);
  77                     if (selector.substring(0, 1) === "#")
  78                         obj[key].removeAttr("id");
  79                 }
  80                 else
  81                 if (typeof obj[key] === "object")
  82                     obj[key] = fillObj(obj[key], uiProto);
  83             }
  84             return obj;
  85         }
  86
  87         /* If @widget is a string ... */
  88         if (typeof widget === "string") {
  89             /* ... try to use it as a key into the cached prototype hash ... */
  90             ret = $.mobile.tizen._widgetPrototypes[widget];
  91             if (ret === undefined) {
  92                 /* ... and if the proto was not found, try to load its definition ... */
  93                 var protoPath = frameworkRootPath + "proto-html" + "/" +
  94                                 theScriptTag.attr("data-framework-theme");
  95                 $.ajax({
  96                     url: protoPath + "/" + widget + ".prototype.html",
  97                     async: false,
  98                     dataType: "html"
  99                 })
 100                  .success(function(data, textStatus, jqXHR) {
 101                     /* ... and if loading succeeds, cache it and use a copy of it ... */
 102                     $.mobile.tizen._widgetPrototypes[widget] = $("<div>").html(replaceVariables(data));
 103                     ret = $.mobile.tizen._widgetPrototypes[widget].clone();
 104                 });
 105             }
 106         }
 107         /* Otherwise ... */
 108         else {
 109             /* ... if a key was provided ... */
 110             if (widget.key !== undefined)
 111                 /* ... try to use it as a key into the cached prototype hash ... */
 112                 ret = $.mobile.tizen._widgetPrototypes[widget.key];
 113
 114             /* ... and if the proto was not found in the cache ... */
 115             if (ret === undefined) {
 116                 /* ... and a proto definition string was provided ... */
 117                 if (widget.proto !== undefined) {
 118                     /* ... create a new proto from the definition ... */
 119                     ret = $("<div>").html(replaceVariables(widget.proto));
 120                     /* ... and if a key was provided ... */
 121                     if (widget.key !== undefined)
 122                         /* ... cache a copy of the proto under that key */
 123                         $.mobile.tizen._widgetPrototypes[widget.key] = ret.clone();
 124                 }
 125             }
 126             else
 127                 /* otherwise, if the proto /was/ found in the cache, return a copy of it */
 128                 ret = ret.clone();
 129         }
 130
 131         /* If the prototype was found/created successfully ... */
 132         if (ret != undefined)
 133             /* ... and @ui was provided */
 134             if (ui != undefined)
 135                 /* ... return @ui, but replace the CSS selectors it contains with the elements they select */
 136                 ret = fillObj(ui, ret);
 137
 138         return ret;
 139     }
 140 });
 141 })(jQuery);
 142