Jag har skapat ett objekt med Prototype's Class.create och det fungerar bra i FF och Safari, men inte i IE. I IE får jag felmeddelande: 'SaveDialog' är odefinierad.
Så här ser koden ut och jag kan inte se var felet kan tänkas ligga:
Kod:
var SaveDialog = Class.create({
initialize: function(data, options, getContentsOptions, saveContentsOptions, newFolderOptions) {
this.data = data;
this.options = {
name: '',
directory: '',
folder: 0,
list: 'smallIcons',
onFolderClick: Prototype.emptyFunction,
onFileClick: Prototype.emptyFunction,
onSave: Prototype.emptyFunction,
onCancel: Prototype.emptyFunction
};
this.getContentsOptions = {
url: 'ajax.php',
method: 'get',
parameters: '',
};
this.saveContentsOptions = {
url: 'ajax.php',
method: 'post',
parameters: '',
};
this.newFolderOptions = {
url: 'ajax.php',
method: 'post',
parameters: '',
};
this.elements = {
folder: '',
file: ''
};
this.currentID = 0;
this.parentID = 0;
this.xmlDoc;
this.list = new Array();
this.selected;
Object.extend(this.options, options || { });
Object.extend(this.getContentsOptions, getContentsOptions || { });
Object.extend(this.saveContentsOptions, saveContentsOptions || { });
Object.extend(this.newFolderOptions, newFolderOptions || { });
this._print();
},
// Skriv ut gränssnitt
_print: function() {
strContent = '<div id="dialogContainer" style="position:absolute; top:60px; left:400px; border:1px solid #000; width:500px; background:#f0f0f0; padding:5px;">' + "\n" +
' <div id="dialogToolbar" style="padding:3px; text-align:right">' + "\n" +
' <input type="image" id="dialogImgGoBack" name="dialogImgGoBack" src="images/icons/arrow_left.png" /><input type="image" id="dialogImgAddFolder" name="dialogImgAddFolder" src="images/icons/folder_add.png" /><input type="image" id="dialogImgDeleteFolder" name="dialogImgDeleteFolder" src="images/icons/folder_delete.png" /><input type="image" id="dialogImgDeleteFile" name="dialogImgDeleteFile" src="images/icons/page_delete.png" />' + "\n" +
' </div>' + "\n" +
' <div id="dialogPaths" style="padding:5px; border:2px inset #e1f6e6; background:#fff; width:485px; height:250px; overflow:auto;">Hämtar mappar...</div>' + "\n" +
' <div id="dialogFormContainer" style="padding:5px;">' + "\n" +
' <form id="dialogForm" name="dialogForm" style="display:inline;">' + "\n" +
' <label for="dialogName">Namn:</label>' + "\n" +
' <input type="text" id="dialogName" name="dialogName" size="40" />' + "\n" +
' <input type="button" id="dialogBtnSave" name="dialogBtnSave" value="Spara" />' + "\n" +
' <input type="button" id="dialogBtnCancel" name="dialogBtnCancel" value="Avbryt" />' + "\n" +
' </form>' + "\n" +
' </div>' + "\n" +
'</div' + "\n";
$("container").insert(strContent);
this._showFolders("parentID=" + this.options.folder);
Event.observe('dialogName', 'blur', this.onUnfocus.bindAsEventListener(this));
Event.observe('dialogBtnSave', 'click', this.onSave.bindAsEventListener(this));
Event.observe('dialogBtnCancel', 'click', this.onCancel.bindAsEventListener(this));
Event.observe('dialogImgGoBack', 'click', this._onGoBack.bindAsEventListener(this));
Event.observe('dialogImgAddFolder', 'click', this._createNewFolder.bindAsEventListener(this));
Event.observe('dialogImgDeleteFolder', 'click', this._onDelete.bindAsEventListener(this));
Event.observe('dialogImgDeleteFile', 'click', this._onDelete.bindAsEventListener(this));
},
// Hämta kategorier och artiklar och spara dem i list-vektorn
_showFolders: function() {
$A($$("div#dialogContainer input")).each(function(input) {
$(input).disable();
});
var params = this.getContentsOptions.parameters + (arguments[0] ? "&" + arguments[0] : '');
dialog = this;
new Ajax.Request(this.getContentsOptions.url, {
method: this.getContentsOptions.method,
parameters: params,
onLoading: function(transport) {
$("dialogContainer").setStyle({cursor: "wait"});
},
onComplete: function(transport) {
if (transport.status == 200) {
dialog.list.clear();
dialog.xmlDoc = transport.responseXML.documentElement;
dialog.parentID = dialog.xmlDoc.getElementsByTagName('parent')[0].childNodes[0].nodeValue;
dialog._fillList();
dialog._outputList(dialog.options.list);
$A($$("div#dialogContainer input")).each(function(input) {
$(input).enable();
});
$("dialogName").focus();
$("dialogContainer").setStyle({cursor: "auto"});
}
}});
},
// Skapa en vektor av xmldokumentet
_fillList: function() {
folders = this.xmlDoc.getElementsByTagName('folder');
for (i=0; i<folders.length; i++) {
id = folders[i].getElementsByTagName('folderid')[0].childNodes[0].nodeValue;
name = folders[i].getElementsByTagName('name')[0].childNodes[0].nodeValue
this.list[i] = new Array();
this.list[i][0] = true;
this.list[i][1] = id;
this.list[i][2] = name;
}
if (arguments.length > 0) {
listlength = this.list.length;
for (i=0; i<arguments.length; i++) {
parts = arguments[i].split(":");
index = listLength+i;
this.list[index] = new Array();
this.list[index][0] = (parts[0] == 'true' ? true : false);
this.list[index][1] = parts[1];
this.list[index][2] = parts[2];
}
}
if (this.xmlDoc.getElementsByTagName('content')) {
listLength = this.list.length;
folderContents = this.xmlDoc.getElementsByTagName('content');
for (i=0; i<folderContents.length; i++) {
id = folderContents[i].getElementsByTagName('contentid')[0].childNodes[0].nodeValue;
name = folderContents[i].getElementsByTagName('contentname')[0].childNodes[0].nodeValue;
index = listLength+i;
this.list[index] = new Array();
this.list[index][0] = false;
this.list[index][1] = id;
this.list[index][2] = name;
}
}
},
// Hämta id från den klickade foldern
_getParentID: function(folderID) {
id = folderID.slice(7);
return id;
},
// Byt cssklass. Används för hovereffekt
_toggleClass: function(obj, className) {
$(obj).toggleClassName(className);
},
// Kolla om namnet redan finns i list-vektorn...
_nameExists: function() {
var exists = false;
for (i=0; i<this.list.length; i++) {
if ($P.in_array(this.name, this.list[i]) && this.list[i][0] == false) {
exists = true;
break;
}
}
return exists;
},
// Hämta rätt gränsnitt för folder artikel-lista
_outputList: function(type) {
// Type kan vara en av tre:
// - (smallIcons) Små ikoner: Ikon + namn, 1 kolumn
// - (list) Lista: Ikon + namn, x kolumner med 10 rader i varje
// - (summery) Sammanfattning: Ikon + namn + filtyp, 1 kolumn
switch(type) {
case "smallIcons":
this._smallIconsList();
break;
case "list":
this._listList();
break;
case "summery":
this._summeryList();
break;
default:
this._smallIconsList();
}
this.options.list = type;
this._setEvents(type);
},
// Rita upp Sma ikoner-lista
_smallIconsList: function() {
strContents = '<ul id="dialogFoldersFilsList">' + "\n";
for (i=0; i<this.list.length; i++) {
if (this.list[i][0] == true) {
strContents += ' <li class="out" rel="folder"><img id="folder_' + this.list[i][1] + '" src="images/icons/folder.png" border="0" /> <span id="foldername_' + this.list[i][1] + '">' + this.list[i][2] + '</span></li>' + "\n";
} else {
strContents += ' <li class="out" rel="file"><img id="folder_' + this.list[i][1] + '" src="images/icons/page.png" border="0" /> <span id="filename_' + this.list[i][1] + '">' + this.list[i][2] + '</span></li>' + "\n";
}
}
strContents += '</ul>' + "\n";
$("dialogPaths").innerHTML = strContents;
},
// Rita upp Lista-lista
_listList: function() {
var strContents = '<table width="100%" border="0" cellpadding="1" cellspacing="1">' + "\n" +
' <tr>' + "\n" +
' <td valign="top"><ul id="dialogFoldersFilsList">' + "\n";
var rows=0;
for (i=0; i<this.list.length; i++) {
strContents += ' <li class="out">';
if (this.list[i][0] == true) {
strContents += '<img id="folder_' + this.list[i][1] + '" alt="' + this.list[i][2] + '" src="images/icons/folder.png" border="0" /> <span id="foldername_' + this.list[i][1] + '">' + this.list[i][2] + '</span></li>';
} else {
strContents += '<img id="folder_' + this.list[i][1] + '" alt="' + this.list[i][2] + '" src="images/icons/page.png" border="0" /> <span id="filename_' + this.list[i][1] + '">' + this.list[i][2] + '</span></li>';
}
if (rows > 10) {
strContents += ' </ul></td>' + "\n" +
' <td valign="top">' + "\n";
rows=0;
} else {
rows++;
}
}
strContents += ' </td>' + "\n" +
' </tr>' + "\n" +
'</table>' + "\n";
$("dialogPaths").innerHTML = strContents;
},
// Rita upp Sammanfattning-lista
_summeryList: function() {
strContents = '<ul id="dialogFoldersFilsList">' + "\n";
for (i=0; i<this.list.length; i++) {
strContents += ' <li class="out">';
if (this.list[i][0] == true) {
strContents += '<img id="folder_' + this.list[i][1] + '" src="images/icons/folder.png" border="0" /> <span id="foldername_' + this.list[i][1] + '">' + this.list[i][2] + '</span></li>' + "\n";
} else {
strContents += '<img id="folder_' + this.list[i][1] + '" src="images/icons/page.png" border="0" /> <span id="filename_' + this.list[i][1] + '">' + this.list[i][2] + '</span></li>' + "\n";
}
}
strContents += '</ul>' + "\n";
$("dialogPaths").innerHTML = strContents;
},
// Sätt händelser för element i folder artikel-lista
_setEvents: function(type) {
dialog = this;
$$("div#dialogContainer div#dialogPaths li").each(function(li) {
Element.observe($(li), 'mouseover', function() { dialog._toggleClass(li, 'over') });
Element.observe($(li), 'mouseout', function() { dialog._toggleClass(li, 'over') });
});
$$("div#dialogContainer div#dialogPaths li img[src*=folder.png]").each(function(img) {
Element.observe($(img), 'click', dialog.onFolderClick.bindAsEventListener(dialog));
});
$$("div#dialogContainer div#dialogPaths li img[src*=page.png]").each(function(imt) {
Element.observe($(img), 'click', dialog.onFileClick.bindAsEventListener(dialog));
});
$A($$("div#dialogContainer div#dialogPaths li span")).each(function(span) {
Element.observe($(span), 'click', dialog._onSpanClick.bindAsEventListener(dialog));
});
},
// Skapa en ny mapp
_createNewFolder: function() {
// Fyll this.list med data från XML + den nya mappen
this._fillList('true:newfolder:ny mapp');
this._outputList(this.options.list);
dialog = this;
new InlineEditor($("foldername_newfolder"), {saveOnBlur: true,
onSave: function(value) {
$A($$("div#dialogContainer input")).each(function(input) {
$(input).disable();
});
new Ajax.Request(dialog.newFolderOptions.url, {
method: dialog.newFolderOptions.method,
parameters: dialog.newFolderOptions.parameters + "&parentID=" + dialog.currentID + '&value=' + value,
onLoading: function(transport) {
$("dialogContainer").setStyle({cursor: "wait"});
},
onComplete: function(transport) {
if (transport.status == 200) {
if (transport.responseXML) {
dialog.xmlDoc = transport.responseXML.documentElement;
dialog.list.clear();
dialog._fillList();
dialog._outputList(dialog.options.list);
$A($$("div#dialogContainer input")).each(function(input) {
$(input).enable();
});
$("dialogName").focus();
$("dialogContainer").setStyle({cursor: "auto"});
} else {
dialog._fillList();
dialog._outputList(dialog.options.list);
$A($$("div#dialogContainer input")).each(function(input) {
$(input).enable();
});
$("dialogName").focus();
$("dialogContainer").setStyle({cursor: "auto"});
}
}
}});
}});
},
// Eventfunktion för klick på #dialogImgDeleteFolder eller #dialogImgDeleteFile
_onDelete: function(event) {
if (this.selected) {
element = Event.element(event);
switch (element.id) {
case "dialogImgDeleteFolder":
if (this.selected.id.startsWith('folder')) {
$(this.selected.id).ancestors()[0].remove();
this._showFolders("parentID=" + this.currentID + "&type_to_remove=folder&folderID=" + this.selected.id.slice(11));
}
break;
case "dialogImgDeleteFile":
if (this.selected.id.startsWith('file')) {
$(this.selected.id).ancestors()[0].remove();
this._showFolders("parentID=" + this.currentID + "&type_to_remove=file&fileID=" + this.selected.id.slice(9));
}
break;
}
}
},
// Eventfunktion för klick på #dialogImgGoBack
_onGoBack: function(event) {
this._showFolders("parentID=" + this.parentID);
},
// Eventfunktion för klick på span
_onSpanClick: function(event) {
element = Event.element(event);
if (this.selected && $(this.selected.id)) {
if (this.selected.id == element.id && $(this.selected.id).ancestors()[0].hasClassName('selected')) {
$(this.selected.id).ancestors()[0].removeClassName('selected');
this.selected = null;
} else {
$(this.selected.id).ancestors()[0].removeClassName('selected');
$(element).ancestors()[0].addClassName('selected');
this.selected = element;
}
} else {
$(element).ancestors()[0].addClassName('selected');
this.selected = element;
}
},
// Eventfunktion för klick på mapp
onFolderClick: function(event) {
this.elements.folder = Event.element(event);
this.options.onFolderClick(this.elements.folder);
this.currentID = this._getParentID(this.elements.folder.id);
this._showFolders("parentID=" + this.currentID);
},
// Eventfunktion för klick på artikel
onFileClick: function(event) {
this.elements.file = Event.element(event);
this.options.onFileClick(this.elements.file);
$("dialogName").value = this.elements.file.innerHTML;
if (confirm("Vill du skriva över filen?")) {
return this.onSave();
} else {
$("dialogName").focus();
return false;
}
},
// Eventfunktion för lämnande av dialogName-fältet
onUnfocus: function(event) {
this.name = $("dialogName").value;
},
// Eventfunktion för klick på spara-knapp
onSave: function() {
//if ($("dialogName").value.blank()) {
if (this.name.blank()) {
$("dialogName").focus();
return false;
} else {
var overwrite = false;
if (this._nameExists()) {
if (confirm("Det finns redan en fil med namnet " + name + ".\nVill du verkligen skriva över denna?")) {
overwrite = true;
} else {
overwrite = false;
}
}
if (overwrite == false) {
var params;
params = this.options.onSave(this.name, this.currentID);
if (!params) params = this.saveContentsOptions.parameters + "&name=" + this.name + "¤tID=" + this.currentID;
var dialog = this;
new Ajax.Request(this.saveContentsOptions.url, {
method: this.saveContentsOptions.method,
parameters: params,
onLoading: function(transport) {
$("dialogContainer").setStyle({cursor: "wait" });
},
onComplete: function(transport) {
if (transport.status == 200) {
$("dialogContainer").setStyle({cursor: "auto"});
$("dialogContainer").remove();
alert(transport.responseText);
} else {
alert(transport.statusText);
}
}});
} else {
$("dialogName").focus();
return false;
}
}
},
// Eventfunktion för klick på avbryt-knapp
onCancel: function() {
this.options.onCancel();
$("dialogContainer").remove();
}
});
|
