modules/devel/devel_themer.js

// $Id: devel_themer.js,v 1.21 2009/04/02 21:16:21 weitzman Exp $

(function ($) {
  
  $(document).ready(function () {
    lastObj = false;
    thmrSpanified = false;
    strs = Drupal.settings.thmrStrings;
    $('body').addClass("thmr_call").attr("id", "thmr_" + Drupal.settings.page_id);
    $('body.thmr_call,span.thmr_call')
    .hover(
      function () {
        if (themerEnabled && this.parentNode.nodeName != 'BODY' && $(this).attr('thmr_curr') != 1) {
          $(this).css('outline', 'red solid 1px');
        }
      },
      function () {
        if (themerEnabled && $(this).attr('thmr_curr') != 1) {
          $(this).css('outline', 'none');
        }
      }
    );

    var themerEnabled = 0;
    var themerToggle = function () {
      themerEnabled = 1 - themerEnabled;
      $('#themer-toggle :checkbox').attr('checked', themerEnabled ? 'checked' : '');
      $('#themer-popup').css('display', themerEnabled ? 'block' : 'none');
      if (themerEnabled) {
        document.onclick = themerEvent;
        if (lastObj != false) {
          $(lastObj).css('outline', '3px solid #999');
        }
        if (!thmrSpanified) {
          spanify();
        }
      }
      else {
        document.onclick = null;
        if (lastObj != false) {
          $(lastObj).css('outline', 'none');
        }
      }
    };
    $(Drupal.settings.thmr_popup)
      .appendTo($('body'));

    $('<div id="themer-toggle"><input type="checkbox" />'+ strs.themer_info +'</div>')
      .appendTo($('body'))
      .click(themerToggle);

    $('#themer-popup')
      // .draggable({
      //         opacity: .6,
      //         handle: $('#themer-popup .topper')
      //       })
      //.prepend(strs.toggle_throbber)
    ;

    // close box
    $('#themer-popup .topper .close').click(function() {
      themerToggle();
    });
  });
  
  /**
   * Known issue: IE does NOT support outline css property.
   * Solution: use another browser
   */
  function themerHilight(obj) {
    // hilight the current object (and un-highlight the last)
    if (lastObj != false) {
      $(lastObj).css('outline', 'none').attr('thmr_curr', 0);
    }
    $(obj).css('outline', '#999 solid 3px').attr('thmr_curr', 1);
    lastObj = obj;
  }

  function themerDoIt(obj) {
    if (thmrInPop(obj)) {
      return true;
    }
    // start throbber
    //$('#themer-popup img.throbber').show();
    var objs = thmrFindParents(obj);
    if (objs.length) {
      themerHilight(objs[0]);
      thmrRebuildPopup(objs);
    }
    return false;
  }

  function spanify() {
    $('span.thmr_call')
      .each(function () {
        // make spans around block elements into block elements themselves
        var kids = $(this).children();
        for(i=0;i<kids.length;i++) {
          //console.log(kids[i].style.display);
          if ($(kids[i]).css('display') != 'inline' && $(kids[i]).is('DIV, P, ADDRESS, BLOCKQUOTE, CENTER, DIR, DL, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, ISINDEX, MENU, NOFRAMES, NOSCRIPT, OL, PRE, TABLE, UL,  DD, DT, FRAMESET, LI, TBODY, TD, TFOOT, TH, THEAD, TR')) {
            $(this).css('display', 'block');
          }
        }
      });
    thmrSpanified = true;
    // turn off the throbber
    //$('#themer-toggle img.throbber').hide();
  }

  function thmrInPop(obj) {
    //is the element in either the popup box or the toggle div?
    if (obj.id == "themer-popup" || obj.id == "themer-toggle") return true;
    if (obj.parentNode) {
      while (obj = obj.parentNode) {
        if (obj.id=="themer-popup" || obj.id == "themer-toggle") return true;
      }
    }
    return false;
  }

  function themerEvent(e) {
    if (!e) {
      var e = window.event;
    };
    if (e.target) var tg = e.target;
    else if (e.srcElement) var tg = e.srcElement;
    return themerDoIt(tg);
  }

  /**
   * Find all parents with class="thmr_call"
   */
  function thmrFindParents(obj) {
    var parents = new Array();
    if ($(obj).hasClass('thmr_call')) {
      parents[parents.length] = obj;
    }
    if (obj && obj.parentNode) {
      while (obj = obj.parentNode) {
        if ($(obj).hasClass('thmr_call')) {
          parents[parents.length] = obj;
        }
      }
    }
    return parents;
  }

  /**
   * Check to see if object is a block element
   */
  function thmrIsBlock(obj) {
    if (obj.style.display == 'block') {
      return true;
    }
    else if (obj.style.display == 'inline' || obj.style.display == 'none') {
      return false;
    }
    if (obj.tagName != undefined) {
      var i = blocks.length;
      if (i > 0) {
        do {
          if (blocks[i] === obj.tagName) {
            return true;
          }
        } while (i--);
      }
    }
    return false;
  }

  function thmrRefreshCollapse() {
    $('#themer-popup .devel-obj-output dt').each(function() {
        $(this).toggle(function() {
              $(this).parent().children('dd').show();
            }, function() {
              $(this).parent().children('dd').hide();
            });
      });
  }

  /**
   * Rebuild the popup
   *
   * @param objs
   *   The array of the current object and its parents. Current object is first element of the array
   */
  function thmrRebuildPopup(objs) {
    // rebuild the popup box
    var id = objs[0].id;
    // vars is the settings array element for this theme item
    var vars = Drupal.settings[id];
    // strs is the translatable strings
    var strs = Drupal.settings.thmrStrings;
    var type = vars.type;
    var key = vars.name;

    // clear out the initial "click on any element" starter text
    $('#themer-popup div.starter').empty();

    if (type == 'func') {
      // populate the function name
      $('#themer-popup dd.key').empty().prepend('<a href="'+ strs.api_site +'api/search/'+ strs.drupal_version +'/'+ key +'" title="'+ strs.drupal_api_docs +'">'+ key +'()</a>');
      $('#themer-popup dt.key-type').empty().prepend(strs.function_called);
    }
    else {
      // populate the template name
      $('#themer-popup dd.key').empty().prepend(key);
      $('#themer-popup dt.key-type').empty().prepend(strs.template_called);
    }

    // parents
    var parents = '';
    parents = strs.parents +' <span class="parents">';
    for(i=1;i<objs.length;i++) {
      var pvars = Drupal.settings[objs[i].id];
      parents += i!=1 ? '&lt; ' : '';
      // populate the parents
      // each parent is wrapped with a span containing a 'trig' attribute with the id of the element it represents
      parents += '<span class="parent" trig="'+ objs[i].id +'">'+ pvars.name +'</span> ';
    }
    parents += '</span>';
    // stick the parents spans in the #parents div
    $('#themer-popup #parents').empty().prepend(parents);
    $('#themer-popup span.parent').click(function() {
      // make them clickable
      $('#'+ $(this).attr('trig')).each(function() { themerDoIt(this) });
    })
    .hover(function() {
        // make them highlight their element on mouseover
        $('#'+ $(this).attr('trig')).trigger('mouseover');
      },
      function() {
        // and unhilight on mouseout
        $('#'+ $(this).attr('trig')).trigger('mouseout');
      });

    if (vars == undefined) {
      // if there's no item in the settings array for this element
      $('#themer-popup dd.candidates').empty();
      $('#themer-popup dd.preprocessors').empty();
      $('#themer-popup div.attributes').empty();
      $('#themer-popup div.used').empty();
      $('#themer-popup div.duration').empty();
    }
    else {
      $('#themer-popup div.duration').empty().prepend('<span class="dt">' + strs.duration + '</span>' + vars.duration + ' ms');
      $('#themer-popup dd.candidates').empty().prepend(vars.candidates.join('<span class="delimiter"> < </span>'));
      uri = Drupal.settings.devel_themer_uri + '/' + id;
      if (type == 'func') {
        if (vars.candidates != undefined && vars.candidates.length != 0) {
          // populate the candidates
          $('#themer-popup dt.candidates-type').empty().prepend(strs.candidate_functions);
          // empty the preprocessors - functions don't have them :(
          $('#themer-popup dd.preprocessors').empty();
          $('#themer-popup dt.preprocessors-type').empty();
        }
        $('#themer-popup div.attributes').empty().load(uri).prepend('<h4>'+ strs.function_arguments + '</h4>');
        $('#themer-popup div.used').empty();
      }
      else {
        $('#themer-popup dt.candidates-type').empty().prepend(strs.candidate_files);
        $('#themer-popup dd.preprocessors').empty().prepend(vars.preprocessors.join('<span class="delimiter"> + </span>'));
        $('#themer-popup dt.preprocessors-type').empty().prepend(strs.preprocessors);
        $('#themer-popup div.attributes').empty().load(uri).prepend('<h4>'+ strs.template_variables + '</h4>');
        $('#themer-popup div.used').empty().prepend('<dt>'+ strs.file_used  +'</a></dt><dd><a href="'+ strs.source_link + vars.used +'" title="'+ strs.source_link_title +'">'+ vars.used +'</a></dd>');
      }
      thmrRefreshCollapse();
    }
    // stop throbber
    //$('#themer-popup img.throbber').hide();
  }

})(jQuery);
1	// $Id: devel_themer.js,v 1.21 2009/04/02 21:16:21 weitzman Exp $
2
3	(function ($) {
4
5	$(document).ready(function () {
6	lastObj = false;
7	thmrSpanified = false;
8	strs = Drupal.settings.thmrStrings;
9	$('body').addClass("thmr_call").attr("id", "thmr_" + Drupal.settings.page_id);
10	$('body.thmr_call,span.thmr_call')
11	.hover(
12	function () {
13	if (themerEnabled && this.parentNode.nodeName != 'BODY' && $(this).attr('thmr_curr') != 1) {
14	$(this).css('outline', 'red solid 1px');
15	}
16	},
17	function () {
18	if (themerEnabled && $(this).attr('thmr_curr') != 1) {
19	$(this).css('outline', 'none');
20	}
21	}
22	);
23
24	var themerEnabled = 0;
25	var themerToggle = function () {
26	themerEnabled = 1 - themerEnabled;
27	$('#themer-toggle :checkbox').attr('checked', themerEnabled ? 'checked' : '');
28	$('#themer-popup').css('display', themerEnabled ? 'block' : 'none');
29	if (themerEnabled) {
30	document.onclick = themerEvent;
31	if (lastObj != false) {
32	$(lastObj).css('outline', '3px solid #999');
33	}
34	if (!thmrSpanified) {
35	spanify();
36	}
37	}
38	else {
39	document.onclick = null;
40	if (lastObj != false) {
41	$(lastObj).css('outline', 'none');
42	}
43	}
44	};
45	$(Drupal.settings.thmr_popup)
46	.appendTo($('body'));
47
48	$('<div id="themer-toggle"><input type="checkbox" />'+ strs.themer_info +'</div>')
49	.appendTo($('body'))
50	.click(themerToggle);
51
52	$('#themer-popup')
53	// .draggable({
54	// opacity: .6,
55	// handle: $('#themer-popup .topper')
56	// })
57	//.prepend(strs.toggle_throbber)
58	;
59
60	// close box
61	$('#themer-popup .topper .close').click(function() {
62	themerToggle();
63	});
64	});
65
66	/**
67	* Known issue: IE does NOT support outline css property.
68	* Solution: use another browser
69	*/
70	function themerHilight(obj) {
71	// hilight the current object (and un-highlight the last)
72	if (lastObj != false) {
73	$(lastObj).css('outline', 'none').attr('thmr_curr', 0);
74	}
75	$(obj).css('outline', '#999 solid 3px').attr('thmr_curr', 1);
76	lastObj = obj;
77	}
78
79	function themerDoIt(obj) {
80	if (thmrInPop(obj)) {
81	return true;
82	}
83	// start throbber
84	//$('#themer-popup img.throbber').show();
85	var objs = thmrFindParents(obj);
86	if (objs.length) {
87	themerHilight(objs[0]);
88	thmrRebuildPopup(objs);
89	}
90	return false;
91	}
92
93	function spanify() {
94	$('span.thmr_call')
95	.each(function () {
96	// make spans around block elements into block elements themselves
97	var kids = $(this).children();
98	for(i=0;i<kids.length;i++) {
99	//console.log(kids[i].style.display);
100	if ($(kids[i]).css('display') != 'inline' && $(kids[i]).is('DIV, P, ADDRESS, BLOCKQUOTE, CENTER, DIR, DL, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, ISINDEX, MENU, NOFRAMES, NOSCRIPT, OL, PRE, TABLE, UL, DD, DT, FRAMESET, LI, TBODY, TD, TFOOT, TH, THEAD, TR')) {
101	$(this).css('display', 'block');
102	}
103	}
104	});
105	thmrSpanified = true;
106	// turn off the throbber
107	//$('#themer-toggle img.throbber').hide();
108	}
109
110	function thmrInPop(obj) {
111	//is the element in either the popup box or the toggle div?
112	if (obj.id == "themer-popup" \|\| obj.id == "themer-toggle") return true;
113	if (obj.parentNode) {
114	while (obj = obj.parentNode) {
115	if (obj.id=="themer-popup" \|\| obj.id == "themer-toggle") return true;
116	}
117	}
118	return false;
119	}
120
121	function themerEvent(e) {
122	if (!e) {
123	var e = window.event;
124	};
125	if (e.target) var tg = e.target;
126	else if (e.srcElement) var tg = e.srcElement;
127	return themerDoIt(tg);
128	}
129
130	/**
131	* Find all parents with class="thmr_call"
132	*/
133	function thmrFindParents(obj) {
134	var parents = new Array();
135	if ($(obj).hasClass('thmr_call')) {
136	parents[parents.length] = obj;
137	}
138	if (obj && obj.parentNode) {
139	while (obj = obj.parentNode) {
140	if ($(obj).hasClass('thmr_call')) {
141	parents[parents.length] = obj;
142	}
143	}
144	}
145	return parents;
146	}
147
148	/**
149	* Check to see if object is a block element
150	*/
151	function thmrIsBlock(obj) {
152	if (obj.style.display == 'block') {
153	return true;
154	}
155	else if (obj.style.display == 'inline' \|\| obj.style.display == 'none') {
156	return false;
157	}
158	if (obj.tagName != undefined) {
159	var i = blocks.length;
160	if (i > 0) {
161	do {
162	if (blocks[i] === obj.tagName) {
163	return true;
164	}
165	} while (i--);
166	}
167	}
168	return false;
169	}
170
171	function thmrRefreshCollapse() {
172	$('#themer-popup .devel-obj-output dt').each(function() {
173	$(this).toggle(function() {
174	$(this).parent().children('dd').show();
175	}, function() {
176	$(this).parent().children('dd').hide();
177	});
178	});
179	}
180
181	/**
182	* Rebuild the popup
183	*
184	* @param objs
185	* The array of the current object and its parents. Current object is first element of the array
186	*/
187	function thmrRebuildPopup(objs) {
188	// rebuild the popup box
189	var id = objs[0].id;
190	// vars is the settings array element for this theme item
191	var vars = Drupal.settings[id];
192	// strs is the translatable strings
193	var strs = Drupal.settings.thmrStrings;
194	var type = vars.type;
195	var key = vars.name;
196
197	// clear out the initial "click on any element" starter text
198	$('#themer-popup div.starter').empty();
199
200	if (type == 'func') {
201	// populate the function name
202	$('#themer-popup dd.key').empty().prepend('<a href="'+ strs.api_site +'api/search/'+ strs.drupal_version +'/'+ key +'" title="'+ strs.drupal_api_docs +'">'+ key +'()</a>');
203	$('#themer-popup dt.key-type').empty().prepend(strs.function_called);
204	}
205	else {
206	// populate the template name
207	$('#themer-popup dd.key').empty().prepend(key);
208	$('#themer-popup dt.key-type').empty().prepend(strs.template_called);
209	}
210
211	// parents
212	var parents = '';
213	parents = strs.parents +' <span class="parents">';
214	for(i=1;i<objs.length;i++) {
215	var pvars = Drupal.settings[objs[i].id];
216	parents += i!=1 ? '< ' : '';
217	// populate the parents
218	// each parent is wrapped with a span containing a 'trig' attribute with the id of the element it represents
219	parents += '<span class="parent" trig="'+ objs[i].id +'">'+ pvars.name +'</span> ';
220	}
221	parents += '</span>';
222	// stick the parents spans in the #parents div
223	$('#themer-popup #parents').empty().prepend(parents);
224	$('#themer-popup span.parent').click(function() {
225	// make them clickable
226	$('#'+ $(this).attr('trig')).each(function() { themerDoIt(this) });
227	})
228	.hover(function() {
229	// make them highlight their element on mouseover
230	$('#'+ $(this).attr('trig')).trigger('mouseover');
231	},
232	function() {
233	// and unhilight on mouseout
234	$('#'+ $(this).attr('trig')).trigger('mouseout');
235	});
236
237	if (vars == undefined) {
238	// if there's no item in the settings array for this element
239	$('#themer-popup dd.candidates').empty();
240	$('#themer-popup dd.preprocessors').empty();
241	$('#themer-popup div.attributes').empty();
242	$('#themer-popup div.used').empty();
243	$('#themer-popup div.duration').empty();
244	}
245	else {
246	$('#themer-popup div.duration').empty().prepend('<span class="dt">' + strs.duration + '</span>' + vars.duration + ' ms');
247	$('#themer-popup dd.candidates').empty().prepend(vars.candidates.join('<span class="delimiter"> < </span>'));
248	uri = Drupal.settings.devel_themer_uri + '/' + id;
249	if (type == 'func') {
250	if (vars.candidates != undefined && vars.candidates.length != 0) {
251	// populate the candidates
252	$('#themer-popup dt.candidates-type').empty().prepend(strs.candidate_functions);
253	// empty the preprocessors - functions don't have them :(
254	$('#themer-popup dd.preprocessors').empty();
255	$('#themer-popup dt.preprocessors-type').empty();
256	}
257	$('#themer-popup div.attributes').empty().load(uri).prepend('<h4>'+ strs.function_arguments + '</h4>');
258	$('#themer-popup div.used').empty();
259	}
260	else {
261	$('#themer-popup dt.candidates-type').empty().prepend(strs.candidate_files);
262	$('#themer-popup dd.preprocessors').empty().prepend(vars.preprocessors.join('<span class="delimiter"> + </span>'));
263	$('#themer-popup dt.preprocessors-type').empty().prepend(strs.preprocessors);
264	$('#themer-popup div.attributes').empty().load(uri).prepend('<h4>'+ strs.template_variables + '</h4>');
265	$('#themer-popup div.used').empty().prepend('<dt>'+ strs.file_used +'</a></dt><dd><a href="'+ strs.source_link + vars.used +'" title="'+ strs.source_link_title +'">'+ vars.used +'</a></dd>');
266	}
267	thmrRefreshCollapse();
268	}
269	// stop throbber
270	//$('#themer-popup img.throbber').hide();
271	}
272
273	})(jQuery);