playlist.js: Major refactoring. I probably broke something

This commit is contained in:
Anders Betnér 2006-03-29 22:20:12 +00:00
parent 970a75f00e
commit 62f802f218
2 changed files with 90 additions and 95 deletions

View File

@ -50,7 +50,7 @@
</select><br /> </select><br />
<input type="text" id="edit_playlist_name" value="" /> <input type="text" id="edit_playlist_name" value="" />
<div id="busymsg" style="text-align:center;color:red; visibility: hidden;">Busy ...</div> <div id="busymsg" style="text-align:center;color:red; visibility: hidden;">Busy ...</div>
<a href="javascript:EditPlaylistName.add();">Add static playlist</a> <a href="javascript://" id="add_playlist_href">Add static playlist</a>
<br /> <br /> <br /> <br />
<strong>Things that work:</strong><br /> <strong>Things that work:</strong><br />
* Browse Library and playlists<br /> * Browse Library and playlists<br />

View File

@ -19,16 +19,17 @@ Ajax.Responders.register({ onCreate: function () {$('busymsg').style.visibility
function initPlaylist() { function initPlaylist() {
new Ajax.Request('/databases/1/containers?output=xml',{method: 'get',onComplete:rsSource}); new Ajax.Request('/databases/1/containers?output=xml',{method: 'get',onComplete:rsSource});
Query.send('genres'); Query.send('genres');
Event.observe('search','keypress',Search.keyPress); Event.observe('search','keypress',EventHandler.searchKeyPress);
Event.observe('source','change',EventHandler.sourceChange); Event.observe('source','change',EventHandler.sourceChange);
Event.observe('source','click',EventHandler.sourceClick); Event.observe('source','click',EventHandler.sourceClick);
Event.observe('source','keypress',EventHandler.sourceKeyPress); Event.observe('source','keypress',EventHandler.sourceKeyPress);
Event.observe('genres','change',EventHandler.genresChange); Event.observe('genres','change',EventHandler.genresChange);
Event.observe('artists','change',EventHandler.artistsChange); Event.observe('artists','change',EventHandler.artistsChange);
Event.observe('albums','change',EventHandler.albumsChange); Event.observe('albums','change',EventHandler.albumsChange);
Event.observe('add_playlist_href','click',EventHandler.addPlaylistHrefClick);
Event.observe(document,'click',GlobalEvents.click); Event.observe(document,'click',GlobalEvents.click);
Event.observe('edit_playlist_name','keypress',EditPlaylistName.keyPress); Event.observe('edit_playlist_name','keypress',EventHandler.editPlaylistNameKeyPress);
// Firefox remebers the search box value on page reload // Firefox remebers the search box value on page reload
Field.clear('search'); Field.clear('search');
} }
@ -49,37 +50,15 @@ var GlobalEvents = {
} }
} }
var Search = { var Source = {
timeOut: '',
keyPress: function (e) {
if (this.timeOut) {
window.clearTimeout(this.timeOut);
}
if (e.keyCode == Event.KEY_RETURN) {
EventHandler.search();
} else {
this.timeOut = window.setTimeout(EventHandler.search,SEARCH_DELAY);
}
}
};
var EditPlaylistName = {
playlistId: '', playlistId: '',
playlistName: '', playlistName: '',
_getOptionElement: function (id) { _getOptionElement: function (id) {
return option = $A($('source').getElementsByTagName('option')).find(function (el) { return option = $A($('source').getElementsByTagName('option')).find(function (el) {
return (el.value == (id || EditPlaylistName.playlistId)); return (el.value == id);
}); });
}, },
keyPress: function (e) { addPlaylist: function () {
input = $('edit_playlist_name');
if (e.keyCode == Event.KEY_ESC) {
EditPlaylistName.hide();
}
if (e.keyCode == Event.KEY_RETURN) {
EditPlaylistName.save();
}
},
add: function () {
var url = '/databases/1/containers/add?output=xml'; var url = '/databases/1/containers/add?output=xml';
var name= 'untitled playlist'; var name= 'untitled playlist';
if (this._playlistExists(name)) { if (this._playlistExists(name)) {
@ -91,45 +70,45 @@ var EditPlaylistName = {
} }
this.playlistName = name; this.playlistName = name;
url += '&org.mt-daapd.playlist-type=0&dmap.itemname=' + encodeURIComponent(name); url += '&org.mt-daapd.playlist-type=0&dmap.itemname=' + encodeURIComponent(name);
new Ajax.Request(url ,{method: 'get',onComplete:EditPlaylistName.responseAdd}); new Ajax.Request(url ,{method: 'get',onComplete:this.responseAdd});
}, },
_playlistExists: function (name) { _playlistExists: function (name) {
return $A($('source').getElementsByTagName('option')).collect(function (el) { return $A($('source').getElementsByTagName('option')).pluck('firstChild').find(function (el) {
return el.firstChild.nodeValue; return el.nodeValue == name;
}).find(function (el) {
return el == name;
}); });
}, },
remove: function () { removePlaylist: function () {
if (window.confirm('Really delete playlist?')) { if (window.confirm('Really delete playlist?')) {
var url = '/databases/1/containers/del?output=xml'; var url = '/databases/1/containers/del?output=xml';
url += '&dmap.itemid=' + $('source').value; url += '&dmap.itemid=' + $('source').value;
new Ajax.Request(url ,{method: 'get',onComplete:EditPlaylistName.response}); new Ajax.Request(url ,{method: 'get',onComplete:this.response});
var option = EditPlaylistName._getOptionElement($('source').value); var option = this._getOptionElement($('source').value);
Element.remove(option); Element.remove(option);
} }
}, },
save: function () { savePlaylistName: function () {
input = $('edit_playlist_name'); input = $('edit_playlist_name');
var url = '/databases/1/containers/edit?output=xml'; var url = '/databases/1/containers/edit?output=xml';
url += '&dmap.itemid=' + EditPlaylistName.playlistId; url += '&dmap.itemid=' + Source.playlistId;
url += '&dmap.itemname=' + encodeURIComponent(input.value); url += '&dmap.itemname=' + encodeURIComponent(input.value);
new Ajax.Request(url ,{method: 'get',onComplete:EditPlaylistName.response}); new Ajax.Request(url ,{method: 'get',onComplete:this.response});
var option = EditPlaylistName._getOptionElement(); var option = this._getOptionElement(Source.playlistId);
option.text = input.value; option.text = input.value;
EditPlaylistName.hide(); this.hideEditPlaylistName();
}, },
show: function () { editPlaylistName: function () {
input = $('edit_playlist_name'); input = $('edit_playlist_name');
input.style.top = RicoUtil.toDocumentPosition(EditPlaylistName._getOptionElement()).y+ 'px'; Source.playlistId = $('source').value;
input.value = this.playlistName; playlistName = this._getOptionElement(Source.playlistId).firstChild.nodeValue;
input.style.top = RicoUtil.toDocumentPosition(this._getOptionElement(Source.playlistId)).y+ 'px';
input.value = playlistName;
input.style.display = 'block'; input.style.display = 'block';
Field.activate(input); Field.activate(input);
GlobalEvents.addClickListener(this); GlobalEvents.addClickListener(this);
}, },
hide: function () { hideEditPlaylistName: function () {
$('edit_playlist_name').style.display = 'none'; $('edit_playlist_name').style.display = 'none';
EditPlaylistName.playlistId = ''; Source.playlistId = '';
GlobalEvents.removeClickListener(this); GlobalEvents.removeClickListener(this);
}, },
response: function (request) { response: function (request) {
@ -143,14 +122,14 @@ var EditPlaylistName = {
alert('There is a playlist with that name, write some code to handle this'); alert('There is a playlist with that name, write some code to handle this');
return; return;
} }
EditPlaylistName.playlistId = Element.textContent(request.responseXML.getElementsByTagName('dmap.itemid')[0]); Source.playlistId = Element.textContent(request.responseXML.getElementsByTagName('dmap.itemid')[0]);
var o = document.createElement('option'); var o = document.createElement('option');
o.value = EditPlaylistName.playlistId; o.value = Source.playlistId;
o.text = EditPlaylistName.playlistName; o.text = Source.playlistName;
$('static_playlists').appendChild(o); $('static_playlists').appendChild(o);
$('source').value = EditPlaylistName.playlistId; $('source').value = Source.playlistId;
EditPlaylistName.show(); Source.editPlaylistName();
Query.setSource(EditPlaylistName.playlistId); Query.setSource(Source.playlistId);
Query.send('genres'); Query.send('genres');
}, },
click: function (e) { click: function (e) {
@ -163,12 +142,11 @@ var EditPlaylistName = {
// Click was in input box // Click was in input box
return; return;
} }
if (EditPlaylistName.playlistId) { Source.savePlaylistName();
EditPlaylistName.save();
}
} }
} }
var EventHandler = { var EventHandler = {
searchTimeOut: '',
sourceClickCount: [], sourceClickCount: [],
sourceClick: function (e) { sourceClick: function (e) {
var playlistId = Event.element(e).value; var playlistId = Event.element(e).value;
@ -188,9 +166,7 @@ var EventHandler = {
// of the select box // of the select box
return; return;
} }
EditPlaylistName.playlistId = el.value; Source.editPlaylistName();
EditPlaylistName.playlistName = el.text;
EditPlaylistName.show();
} }
}, },
sourceChange: function (e) { sourceChange: function (e) {
@ -202,30 +178,52 @@ var EventHandler = {
}, },
sourceKeyPress: function (e) { sourceKeyPress: function (e) {
if (e.keyCode == Event.KEY_DELETE) { if (e.keyCode == Event.KEY_DELETE) {
EditPlaylistName.remove(); Source.removePlaylist();
} }
if (113 == e.keyCode) { if (113 == e.keyCode) {
// F2 // F2
//TODO edit playist, what is the key on a mac? //TODO edit playist, what is the key on a mac?
} }
}, },
search: function () { editPlaylistNameKeyPress: function (e) {
input = $('edit_playlist_name');
if (e.keyCode == Event.KEY_ESC) {
Source.hideEditPlaylistName();
}
if (e.keyCode == Event.KEY_RETURN) {
Source.savePlaylistName();
}
},
addPlaylistHrefClick: function (e) {
Source.addPlaylist();
},
searchKeyPress: function (e) {
if (EventHandler.searchTimeOut) {
window.clearTimeout(EventHandler.searchTimeOut);
}
if (e.keyCode == Event.KEY_RETURN) {
EventHandler._search();
} else {
EventHandler.searchTimeOut = window.setTimeout(EventHandler._search,SEARCH_DELAY);
}
},
_search: function () {
Query.setSearchString($('search').value); Query.setSearchString($('search').value);
Query.send('genres'); Query.send('genres');
}, },
genresChange: function (e) { genresChange: function (e) {
EventHandler.setSelected('genres'); EventHandler._setSelected('genres');
Query.send('artists'); Query.send('artists');
}, },
artistsChange: function (e) { artistsChange: function (e) {
EventHandler.setSelected('artists'); EventHandler._setSelected('artists');
Query.send('albums'); Query.send('albums');
}, },
albumsChange: function (e) { albumsChange: function (e) {
EventHandler.setSelected('albums'); EventHandler._setSelected('albums');
Query.send('songs'); Query.send('songs');
}, },
setSelected: function (type) { _setSelected: function (type) {
var options = $A($(type).options); var options = $A($(type).options);
Query.clearSelection(type); Query.clearSelection(type);
if ($(type).value != 'all') { if ($(type).value != 'all') {
@ -375,7 +373,7 @@ var ResponseHandler = {
selected[item] = true; selected[item] = true;
}); });
Query.clearSelection(type); Query.clearSelection(type);
if (addOptions(type,items,selected)) { if (ResponseHandler._addOptions(type,items,selected)) {
select.value='all'; select.value='all';
} }
switch (type) { switch (type) {
@ -392,9 +390,8 @@ var ResponseHandler = {
alert("Shouldn't happen 3"); alert("Shouldn't happen 3");
break; break;
} }
} },
}; _addOptions: function (type,options,selected) {
function addOptions(type,options,selected) {
el = $(type); el = $(type);
var nothingSelected = true; var nothingSelected = true;
options.each(function (option) { options.each(function (option) {
@ -420,7 +417,8 @@ function addOptions(type,options,selected) {
el.appendChild(o); el.appendChild(o);
}); });
return nothingSelected; return nothingSelected;
} }
};
function rsSource(request) { function rsSource(request) {
var items = $A(request.responseXML.getElementsByTagName('dmap.listingitem')); var items = $A(request.responseXML.getElementsByTagName('dmap.listingitem'));
@ -521,9 +519,6 @@ String.prototype.truncate = function(length, truncation) {
var ret = (this.length > length) ? this.slice(0, length - truncation.length) + truncation : this; var ret = (this.length > length) ? this.slice(0, length - truncation.length) + truncation : this;
return '' + ret; return '' + ret;
}; };
function add() {
alert('add');
}
/* Detta script finns att hamta pa http://www.jojoxx.net och /* Detta script finns att hamta pa http://www.jojoxx.net och
far anvandas fritt sa lange som dessa rader star kvar. */ far anvandas fritt sa lange som dessa rader star kvar. */
function DataDumper(obj,n,prefix){ function DataDumper(obj,n,prefix){