← Back to branch summary

~dpb/landscape-buildout-dependencies/landscape-buildout-dependencies-2

« back to all changes in this revision

Viewing changes to dist/smartsprites-0.2.6/test/real-world-example/js/carrot2.layout.js

  • Committer: David Britton
  • Date: 2013-09-16 20:16:07 UTC
  • Revision ID: dpb@canonical.com-20130916201607-4kal26y2j2w8kwcv
First rev of new buildout-dependencies branch, copied from
bzr+ssh://bazaar.launchpad.net/+branch/landscape-buildout-dependencies/ r118,
minus the selenium jars

Show diffs side-by-side

added added

removed removed

Lines of Context:
dist/smartsprites-0.2.6/test/real-world-example/js/carrot2.layout.js
 
1
(function($) {
 
2
  /**
 
3
   * Shows the actual UI elements. If there is no JavaScript enabled, this
 
4
   * function will not be called and the user will see the message shown
 
5
   * in <noscript> rather than the UI which requires JavaScript to run.
 
6
   */
 
7
  jQuery.fn.enableUi = function() {
 
8
    this.find(".disabled-ui").removeClass("disabled-ui");
 
9
  };
 
10
 
 
11
  /**
 
12
   * Dynamically adds markup required by the specific skin.
 
13
   */
 
14
  jQuery.enhanceMarkup = function() {
 
15
    // Extra wrappers for tabs
 
16
    $("#source-tabs li.tab").wrapInner('<div class="tab-left"><div class="tab-right"><div class="tab-inside"></div></div></div>');
 
17
 
 
18
    // A lead-in element for tabs
 
19
    $("#source-tabs").prepend('<div id="tab-lead-in"></div>');
 
20
 
 
21
    // Glows
 
22
    $("#query").glow("glow-small");
 
23
    $("#search").glow("glow-big");
 
24
  };
 
25
 
 
26
  /**
 
27
   * Adds the markup required to create a glow effect.
 
28
   */
 
29
  jQuery.fn.glow = function(glowClass) {
 
30
    this.each(function() {
 
31
      var $this = $(this);
 
32
 
 
33
      // Get content dimensions
 
34
      var contentWidth = $this.outerWidth();
 
35
      var contentHeight = $this.outerHeight();
 
36
    
 
37
      // Add glow markup
 
38
      var $glowDiv = $("<span class='" + glowClass + "'></span>");
 
39
      $this.before($glowDiv);
 
40
      $glowDiv.append("<span class='tl'></span><span class='t'></span><span class='tr'></span><span class='l'></span>");
 
41
      $glowDiv.append($this);
 
42
      $glowDiv.append("<span class='r'></span><span class='bl'></span><span class='b'></span><span class='br'></span>");
 
43
 
 
44
      // Extract border sizes
 
45
      var borderWidth = $glowDiv.find(".tl").width();
 
46
      var borderHeight = $glowDiv.find(".tl").height();
 
47
 
 
48
      // Add appropriate dimensions to the newly created markup
 
49
      $glowDiv.width(contentWidth + borderWidth * 2);
 
50
      $glowDiv.height(contentHeight + borderHeight * 2);
 
51
      $glowDiv.find(".t, .b").width(contentWidth);
 
52
      $glowDiv.find(".l, .r").height(contentHeight);
 
53
    });
 
54
  };
 
55
})(jQuery);