Mercurial > defr > drupal > scald > dnd

annotate js/bt/DEMO/demofiles/demo.js @ 38:9e27e0aca323

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Allow the library to specify a possible legend for the element. This legend will be placed *outside* the atom representation, which means that it's freely editable in the rich text and won't be taken over by Scald.
author Franck Deroche <franck@defr.org>
date Fri, 18 Sep 2009 15:17:05 +0200
parents 0d557e6e73f7
children
rev   line source
eads@18 1 /**
eads@18 2 * Fancy script sets up the page and runs the code in the div.js elements
eads@18 3 */
eads@18 4 $(function(){
eads@18 5 $('div.example').each(function() {
eads@18 6 var target = $('.target, .alt-target', this);
eads@18 7 var htmlSource = $('<div />').append(target.clone()).html();
eads@18 8 htmlSource = $('<div class="html-source">' + escapeHTMLEncode(htmlSource) + '</div>');
eads@18 9 var html = $('<div class="html-link"><a href="#">html</a></div>').click(function(){
eads@18 10 if ($.browser.msie) {
eads@18 11 // ugh!!! effing IE
eads@18 12 $(this).parent().find('.html-source').toggle();
eads@18 13 }
eads@18 14 else {
eads@18 15 $(this).parent().find('.html-source').slideToggle();
eads@18 16 }
eads@18 17 return false;
eads@18 18 });
eads@18 19 var jsLink = $('<div class="html-link"><a href="#">javascript</a></div>').click(function(){
eads@18 20 if ($.browser.msie) {
eads@18 21 $(this).parent().find('.js').toggle();
eads@18 22 }
eads@18 23 else {
eads@18 24 $(this).parent().find('.js').slideToggle();
eads@18 25 }
eads@18 26 return false;
eads@18 27 });
eads@18 28
eads@18 29 var cssSource = $('style', this);
eads@18 30 if (cssSource.length) {
eads@18 31 cssSource = $('<div class="css-source">' + cssSource.html() + '</div>');
eads@18 32 var css = $('<div class="css-link"><a href="#">css</a></div>').click(function(){
eads@18 33 if ($.browser.msie) {
eads@18 34 $(this).parent().find('.css-source').toggle();
eads@18 35 }
eads@18 36 else {
eads@18 37 $(this).parent().find('.css-source').slideToggle();
eads@18 38 }
eads@18 39 return false;
eads@18 40 });
eads@18 41 }
eads@18 42
eads@18 43 var jsSource = $('.js', this);
eads@18 44 $(jsSource).before(html);
eads@18 45 $(jsSource).before(htmlSource);
eads@18 46 textareaWrap(htmlSource);
eads@18 47 $('textarea', htmlSource).data('target', target[0]).change(function(){
eads@18 48 var newTarg = $($(this).val()).get(0);
eads@18 49 $($(this).data('target')).replaceWith(newTarg);
eads@18 50 $(this).data('target', newTarg);
eads@18 51 });
eads@18 52 htmlSource.hide();
eads@18 53
eads@18 54 if (typeof css != 'undefined') {
eads@18 55 $(jsSource).before(css);
eads@18 56 $(jsSource).before(cssSource);
eads@18 57 textareaWrap(cssSource);
eads@18 58 cssSource.hide();
eads@18 59 }
eads@18 60
eads@18 61 $(jsSource).before(jsLink);
eads@18 62 //eval the source!
eads@18 63 eval(jsSource.html());
eads@18 64 textareaWrap(jsSource, true);
eads@18 65 $('textarea', jsSource).change(function(){
eads@18 66 eval($(this).val());
eads@18 67 });
eads@18 68 jsSource.hide();
eads@18 69 });
eads@18 70
eads@18 71 // add BeautyTip to js and html-source textareas
eads@18 72 $('div.js textarea, div.html-source textarea').bt('This is live code. Feel free to edit and try out new options. Click (or tab) out of the textarea to see the results of your edits. If things go awry, reload the page.', {positions: 'right', trigger: ['focus', 'blur'], overlap: 8, width: 150, cssStyles: {fontSize: '11px'}});
eads@18 73 });
eads@18 74
eads@18 75 function textareaWrap(obj, escape) {
eads@18 76 var html = $(obj).html();
eads@18 77 if (escape) {
eads@18 78 html = escapeHTMLEncode(html);
eads@18 79 }
eads@18 80 $(obj).empty().append($('<textarea />').append(html));
eads@18 81 var $textarea = $('textarea', obj);
eads@18 82 $textarea.width('100%');
eads@18 83 var scrollHeight = $textarea.get(0).scrollHeight || 50;
eads@18 84 $('textarea', obj).css({height: scrollHeight});
eads@18 85 }
eads@18 86
eads@18 87 function escapeHTMLEncode(str) {
eads@18 88 var div = document.createElement('div');
eads@18 89 var text = document.createTextNode(str);
eads@18 90 div.appendChild(text);
eads@18 91 return div.innerHTML;
eads@18 92 }