/* * Copyright © 2006 by JammerMedia, Inc., All Rights Reserved. * * template.js * * $Source: /tmp/cvsrepo/webapps/binder/public/javascripts/lib/template.js,v $ * $Id: template.js,v 1.18 2007-07-17 04:46:38 kens Exp $ */ // Template cache var jmi_templateCache = [ // Blank {'body': false, 'frames': 1, 'media': 0, 'defaultTemplate': [jmi_defaultBlankHTML]}, // Title {'body': false, 'frames': 2, 'media': 0, 'defaultTemplate': [jmi_defaultTemplateTitleHTML, jmi_defaultTemplateSubtitleHTML]}, // Bullet List {'body': false, 'frames': 2, 'media': 0, 'defaultTemplate': [jmi_defaultTemplateTitleHTML, jmi_defaultTemplateOutlineHTML]}, // 2 Column Text {'body': false, 'frames': 3, 'media': 0, 'defaultTemplate': [jmi_defaultTemplateTitleHTML, jmi_defaultTemplateOutlineHTML, jmi_defaultTemplateOutlineHTML]}, // Table {'body': false, 'frames': 2, 'media': 0, 'defaultTemplate': [jmi_defaultTemplateTitleHTML, jmi_defaultTemplateTableHTML]}, // Text Media {'body': false, 'frames': 2, 'media': 1, 'defaultTemplate': [jmi_defaultTemplateTitleHTML, jmi_defaultTemplateOutlineHTML]}, // Media Text {'body': false, 'frames': 2, 'media': 1, 'defaultTemplate': [jmi_defaultTemplateTitleHTML, jmi_defaultTemplateOutlineHTML]}, // Title Media {'body': false, 'frames': 1, 'media': 1, 'defaultTemplate': [jmi_defaultTemplateTitleHTML]}, // Large Media {'body': false, 'frames': 0, 'media': 1}, // 2 Media {'body': false, 'frames': 0, 'media': 2}, // Text Large Media {'body': false, 'frames': 2, 'media': 1, 'defaultTemplate': [jmi_defaultTemplateTitleHTML, jmi_defaultTemplateOutlineHTML]}, // Large Media Text {'body': false, 'frames': 2, 'media': 1, 'defaultTemplate': [jmi_defaultTemplateTitleHTML, jmi_defaultTemplateOutlineHTML]}, // Credits {'body': false, 'frames': 0, 'media': 1} ]; // Prototype object has no access to 'this' pointer on ajax responses so we cache it var jmi_template; // Insert a template // originalRequest - ajax response containing body HTML of template // function jmi_insertTemplate(originalRequest) { if (originalRequest != null) { // Cache the template jmi_templateCache[jmi_template.type].body = originalRequest.responseText; } // Insert the template $('binder-content').innerHTML = jmi_templateCache[jmi_template.type].body; if (jmi_template.type == 0) { $('if0').contentWindow.document.open(); $('if0').contentWindow.document.write( "" + jmi_template.framesHTML[0] + "" ); $('if0').contentWindow.document.close(); } else { for (var i = 0; i < jmi_templateCache[jmi_template.type].frames; i++) { // Remove blank template text in everything but edit mode if (mode != "edit") { if (jmi_template.framesHTML[i].indexOf("Click to add") != -1) { jmi_template.framesHTML[i] = ""; } } // Write the content $('if'+i).contentWindow.document.open(); $('if'+i).contentWindow.document.write( "" + jmi_template.framesHTML[i] + "" ); $('if'+i).contentWindow.document.close(); } for (var i = 0; i < jmi_templateCache[jmi_template.type].media; i++) { jmi_template.media[i].insert(); } } // Hook to resize content jmi_template.resize(); } function update_dimensions(type, dimensions) { var j = 0; // Set the dimensions for the div wrappers around // any iframes (if or media) that have been // resized or repositioned // for (var i = 0; i < jmi_templateCache[type].frames; i++) { ifdiv = $('if'+i+'-div'); ifstr = 'if' + i; if (ifdiv && dimensions[j] && (dimensions[j].id == ifstr)) { ifdiv.style.position = "absolute"; ifdiv.style.float = "none"; ifdiv.style.left = dimensions[j].l; ifdiv.style.top = dimensions[j].t; ifdiv.style.width = dimensions[j].w; ifdiv.style.height = dimensions[j].h; j++; } } for (var i = 0; i < jmi_templateCache[type].media; i++) { mdiv = $('m'+i+'-div'); mstr = 'm' + i; if (mdiv && dimensions[j] && (dimensions[j].id == mstr)) { mdiv.style.position = "absolute"; mdiv.style.float = "none"; mdiv.style.left = dimensions[j].l; mdiv.style.top = dimensions[j].t; mdiv.style.width = dimensions[j].w; mdiv.style.height = dimensions[j].h; j++; } } } // Our dimension object: top, left, width, height // function Dimension(id, l,t,w,h) { this.id = id ? id : -1; this.l = l ? l : -1; this.t = t ? t : -1; this.w = w ? w : -1; this.h = h ? h : -1; } // Template constructor // arguments: // params - parameters object // function Template(params) { for (var prop in params) { if (prop == 'type') this.type = params[prop]; else if (prop == 'framesHTML') this.framesHTML = params[prop]; else if (prop == 'media') { var m = params[prop]; this.media = new Array(); for (var i = 0; i < m.length; i++) { this.media[i] = new Media(m[i]); } } // This should probably look like media above else if (prop == 'dimensions') { this.dimensions = params[prop]; if (this.dimensions.id) { } else this.dimensions.id = -1; } } if (typeof this.type == 'undefined') this.type = 8; if (typeof this.framesHTML == 'undefined') { this.framesHTML = new Array(); for (var i = 0; i < jmi_templateCache[this.type].frames; i++) { this.framesHTML[i] = jmi_templateCache[this.type].defaultTemplate[i]; } } if (jmi_templateCache[this.type].media && typeof this.media == 'undefined') { this.media = new Array(); for (var i = 0; i < jmi_templateCache[this.type].media; i++) { this.media[i] = new Media(eval("({'idx':" + i + "})")); } } // Create dimensions - if need be if (typeof this.dimensions == 'undefined') { this.dimensions = new Array(); for (var i = 0; i < 4; i++) { // this.dimensions[i] = new Dimension(); } } } // Template prototype // Template.prototype = { 'insert': function(sync) { jmi_template = this; if (!jmi_templateCache[this.type].body) { if (!sync) ajax_request('/edit/template', 'mode='+mode+'&type=t'+this.type, jmi_insertTemplate); else sjax_request('/edit/template', 'mode='+mode+'&type=t'+this.type, jmi_insertTemplate); } else { jmi_insertTemplate(null); } }, 'sync': function() { var j = 0; for (var i = 0; i < jmi_templateCache[this.type].frames; i++) { // Save html from iframe - make sure it exists if ($('if'+i)) { var ihtml = $('if'+i).contentWindow.document.body.innerHTML; // Clean html for MSWord metadata // ihtml = cleanWordHTML(ihtml); //if (ihtml.length > 10000) // alert("You've entered too much text: " + ihtml.length + " Total binder size is: " + binder_size()); this.framesHTML[i] = ihtml; } // Get div ifdiv = $('if'+i+'-div'); ifstr = 'if' + i; // If the div has been moved/resized - then save // the dimensions if (ifdiv && ifdiv.style.position == 'absolute') { this.dimensions[j] = new Dimension(); this.dimensions[j].id = ifstr; this.dimensions[j].l = ifdiv.style.left; this.dimensions[j].t = ifdiv.style.top; this.dimensions[j].w = ifdiv.style.width; this.dimensions[j].h = ifdiv.style.height; j++; } // We could set this.dimensions[j].l,t,w,h = -1 // just to be safe else { } } // Save our dimensional (tlwh) info per frame in template for (var i = 0; i < jmi_templateCache[this.type].media; i++) { this.media[i].sync(); mdiv = $('m'+i+'-div'); mstr = 'm' + i; if (mdiv && mdiv.style.position == 'absolute') { this.dimensions[j] = new Dimension(); this.dimensions[j].id = mstr; this.dimensions[j].l = mdiv.style.left; this.dimensions[j].t = mdiv.style.top; this.dimensions[j].w = mdiv.style.width; this.dimensions[j].h = mdiv.style.height; j++; } else { } } }, 'write': function() { if (!jmi_templateCache[this.type].body) { this.insert(); update_dimensions(this.type, this.dimensions); } else { $('binder-content').innerHTML = jmi_templateCache[this.type].body; if (this.type == 0) { $('if0').contentWindow.document.open(); $('if0').contentWindow.document.write( "" + this.framesHTML[0] + "" ); $('if0').contentWindow.document.close(); } else { for (var i = 0; i < jmi_templateCache[this.type].frames; i++) { $('if'+i).contentWindow.document.open(); $('if'+i).contentWindow.document.write( "" + this.framesHTML[i] + ""); $('if'+i).contentWindow.document.close(); } for (var i = 0; i < jmi_templateCache[this.type].media; i++) { this.media[i].write(); } } update_dimensions(this.type, this.dimensions); this.resize(); } }, 'resize': function() { if (this.type > 0) { if ($('if0')) { var my_if = document.getElementById('if0'); var my_body = isIE ? my_if.document.body : my_if.contentDocument.body; var titleHeight = my_if.clientHeight; var scaleTitle = parseInt(parseFloat(titleHeight) * 0.6); if (my_if) { var st = my_if.contentWindow.document.getElementById('slide-title'); // Strip trailing and leading white space if (st) { var myhtml = st.innerHTML; var mystr = trim_str(myhtml); st.innerHTML = mystr; st.style.fontSize = scaleTitle+'px'; } // Looks like slide-title was deleted - set on body else { var ibstr = 'if-body-0'; var ib = my_if.contentWindow.document.getElementById(ibstr); if (ib) ib.style.fontSize = scaleTitle+'px'; } } } if ($('if1') && typeof scaleTitle != 'undefined') { var my_doc = isIE ? $('if1').document : $('if1').contentDocument; var scaleFont = (scaleTitle >= 25) ? parseInt(scaleTitle) - 25 : 0; if (my_doc.getElementById('slide-subtitle')) { my_doc.getElementById('slide-subtitle').style.fontSize = scaleFont+'px'; } // Turn off for now - notice 0 if (0 && my_doc.getElementById('slide-text')) { my_doc.getElementById('slide-text').style.fontSize = scaleFont+'px'; } // Turn off for now - notice 0 if (0 && my_doc.getElementById('slide-outline')) { my_doc.getElementById('slide-outline').style.fontSize = scaleFont+'px'; } } if ($('if2') && typeof scaleTitle != 'undefined') { var scaleFont = (scaleTitle >= 25) ? parseInt(scaleTitle) - 25 : 0; var my_doc = isIE ? $('if2').document : $('if2').contentDocument; if (my_doc.getElementById('slide-subtitle')) { my_doc.getElementById('slide-subtitle').style.fontSize = scaleFont+'px'; } // Turn off for now - notice 0 if (0 && my_doc.getElementById('slide-text')) { my_doc.getElementById('slide-text').style.fontSize = scaleFont+'px'; } // Turn off for now - notice 0 if (0 && my_doc.getElementById('slide-outline')) { my_doc.getElementById('slide-outline').style.fontSize = scaleFont+'px'; } } update_dimensions(this.type, this.dimensions); } }, 'cache': function(user) { for (var i = 0; i < jmi_templateCache[this.type].media; i++) { this.media[i].cache(user); } }, 'refactor': function() { if (jmi_templateCache[this.type].frames && typeof this.framesHTML == 'undefined') { this.framesHTML = new Array(); } for (var i = 0; i < jmi_templateCache[this.type].frames; i++) { if (typeof this.framesHTML[i] == 'undefined') { this.framesHTML[i] = jmi_templateCache[this.type].defaultTemplate[i]; } else if (this.framesHTML[i].indexOf("Click to add") >= 0) { this.framesHTML[i] = jmi_templateCache[this.type].defaultTemplate[i]; } } if (jmi_templateCache[this.type].media && typeof this.media == 'undefined') { this.media = new Array(); } for (var i = 0; i < jmi_templateCache[this.type].media; i++) { if (typeof this.media[i] == 'undefined') { this.media[i] = new Media(eval("({'idx':" + i + "})")); } } }, 'appendCreditsInfo': function() { for (var i = 0; i < jmi_templateCache[this.type].media; i++) { this.media[i].appendCreditsInfo(); } }, 'startDrag': function(event) { var src = Event.element(event); if (src.getAttribute("class") == "content-dnd") { for (var i = 0; i < jmi_templateCache[this.type].media; i++) { Droppables.add('media'+i, {onDrop: onDropImpl}); } } else if (src.getAttribute("class") == "template-dnd") { Droppables.add('binder-content', {onDrop: onDropImpl}); } }, 'finishDrag': function(event, success) { var src = Event.element(event); if (src.getAttribute("class") == "content-dnd") { for (var i = 0; i < jmi_templateCache[this.type].media; i++) { Droppables.remove('media'+i); } } else if (src.getAttribute("class") == "template-dnd") { Droppables.remove('binder-content'); } }, 'dragChange': function(draggable) { }, 'onDrop': function(draggable, droppable, event) { if (draggable.getAttribute("class") == "content-dnd") { var content = SidebarMenu.getSearch(); var offset = SHOW; if (content.results.total == content.results.idx) { if (content.results.total%SHOW > 0) offset = content.results.total%SHOW; } var match = content.results.images[content.results.idx - offset + selection_]; // Instrument for undo var midx = parseInt(droppable.getAttribute("id").substring(5)); push_command("bind_media " + midx); savemedia.push(this.media[midx]); try { var media = new Media(0); media.unmarshall(match); media.idx = parseInt(droppable.getAttribute("id").substring(5)); this.media[media.idx] = media; media.bind(); } catch(e) { $('status').innerHTML = e; } results = null; match = null; } else if (draggable.getAttribute("class") == "template-dnd") { this.type = draggable.getAttribute("id").substring(1); this.refactor(); this.insert(); } }, 'onClick': function(my_id,sync) { this.type = my_id.substring(1); this.refactor(); this.insert(sync); } }