Deusexmachina: /* = */

2012-09-04T03:50:41Z

← Older revision		Revision as of 03:50, 4 September 2012
Line 455:		Line 455:
	<script src="main.js"></script>		<script src="main.js"></script>
	<script src="common.js"></script>		<script src="common.js"></script>
	~~<script src="blockUnload.js"></script>~~
	<script type="text/javascript">		<script type="text/javascript">
	<!--		<!--

Deusexmachina at 03:28, 4 September 2012

2012-09-04T03:28:08Z

Show changes

Deusexmachina at 03:25, 4 September 2012

2012-09-04T03:25:15Z

Show changes

Deusexmachina at 09:30, 11 June 2010

2010-06-11T09:30:19Z

← Older revision		Revision as of 09:30, 11 June 2010
Line 398:		Line 398:


	~~==================~~=================================================================================================================================================		=================================================================================================================================================

	mainscreen.html		mainscreen.html

Deusexmachina at 09:29, 11 June 2010

2010-06-11T09:29:45Z

← Older revision		Revision as of 09:29, 11 June 2010
Line 398:		Line 398:


	~~===========================================================~~===================================================================================================================================================================		===================================================================================================================================================================

	mainscreen.html		mainscreen.html

Deusexmachina at 09:28, 11 June 2010

2010-06-11T09:28:47Z

← Older revision		Revision as of 09:28, 11 June 2010
Line 398:		Line 398:


	=======================================================================================		==============================================================================================================================================================================================================================

	mainscreen.html		mainscreen.html

Deusexmachina at 09:27, 11 June 2010

2010-06-11T09:27:55Z

← Older revision		Revision as of 09:27, 11 June 2010
Line 396:		Line 396:
	}		}
	</pre>		</pre>


			=======================================================================================

	mainscreen.html		mainscreen.html

Deusexmachina: Created page with 'Since the official autologout was removed, I have re-edited my mainscreen.html page to re-implement it. In addition, this versin traps the delete key, so instead of doing the rat…'

2010-06-11T09:26:43Z

Created page with 'Since the official autologout was removed, I have re-edited my mainscreen.html page to re-implement it. In addition, this versin traps the delete key, so instead of doing the rat…'

New page

Since the official autologout was removed, I have re-edited my mainscreen.html page to re-implement it. In addition, this versin traps the delete key, so instead of doing the rather annoying web standard "back a page" when the user hits the delete key, it does the MUCH more intuitive "remove the currently selected song from the active playlist." There may be some other tweaks, but those are the highlights. Simply replace the server files with these:

(As always, I hope someone finds this helpful, and consider sending me a P.M. letting me know what you think)

main.js:
<pre>
/* kJams Project - main.js
Description: Main screen functionality.
(c) 2007 kJams and David M. Cotter */

var timer = null;
var allowBackspace = false;
var inSearch = {
on: function() {allowBackspace = true;},
off: function() {allowBackspace = false;}
}

function m_populatePlaylists() {
//Remove anything that was already there
divObj = document.getElementById("playlists");

for (var i = 0; i < divObj.childNodes.length; i++) {
divObj.removeChild(divObj.childNodes[i]);
}

list = new KJDropList();
list.create(divObj);
playlistsList = list;

getPlaylists(url_playlists, m_playlistsLoaded);
}

function m_playlistsLoaded(list) {
listCtrl = document.getElementById("playlists").childNodes[0].parent;

for (var i = 0; i < list.length; i++) {
if ((list[i]['name'] == "Library") || (list[i]['name'] == "History"))
dropTarget = false;
else
dropTarget = true;

listCtrl.addItem("p" + list[i]['id'], list[i]['name'], dropTarget, null, false);

//Library and History items are not rearrangeable
if ((list[i]['name'] == "Library") || (list[i]['name'] == "History"))
document.getElementById("p" + list[i]['id']).rearrange = false;
else
document.getElementById("p" + list[i]['id']).rearrange = true;

//Keep track of ids for 'Tonight' and 'Favorites'
if (list[i]['name'] == "Tonight") {
pTonightID = list[i]['id'];
}

if (list[i]['name'] == "Favorites") {
pFavoritesID = list[i]['id'];
}

//Store the playlist name in the DOM object
document.getElementById("p" + list[i]['id']).name = list[i]['name'];
}

listCtrl.color();
listCtrl.evtClick = m_populateSongs;
listCtrl.evtDropInto = m_playlistDrop;
}

function m_populateSongs(playlist) {
playlist = playlist.substring(1);

//Hide
if (songsList) {
songsList.hide();

if (songsList.playlist != "1") {
songsList.destroy();
}
}

//Hide "No Playlist" message, show waiting message
document.getElementById("message").style.display = 'none';
document.getElementById("msg_dosearch").style.display = 'none';
document.getElementById("msg_error").style.display = 'none';
document.getElementById("waiting").style.display = '';

//If the list is already loaded, simply display it
if ((playlist == "1") && (songsLists[playlist] != undefined)) {
songsList = songsLists[playlist];
songsList.show();
document.getElementById("waiting").style.display = 'none';
}

//If it's the library, request that user do a search first
else if (playlist == "1") {
document.getElementById("waiting").style.display = 'none';
document.getElementById("msg_dosearch").style.display = '';
}

else {
//Playlist DOM object
playlistObj = document.getElementById("p" + playlist);

//Which columns are needed?
var columns = Array("#", "Song Name", "Artist", "Album");

if (playlistObj.name == "Tonight") {
columns.push("Pitch");
columns.push("Add to");
}

else if (playlistObj.name == "Favorites") {
columns.push("Add to");
}

else {
columns.push("Add to");
columns.push("Add to");
}

songsList = new KJList();
songsList.rearrange = playlistObj.rearrange;
songsList.playlist = playlist;
songsList.playlistName = playlistObj.name;
songsList.create(document.getElementById("songs"));
songsList.setColumns(columns, 0);
songsList.evtDrop = m_songRearrange;
songsLists[playlist] = songsList;
getSongs(url_songs, m_songsLoaded, "playlist=" + playlist);

if (false) {
songsList.evtColClick = null;
}
else {
songsList.evtColClick = m_sortSongs;
}
}

m_sessionCheckin();
}

function m_songsLoaded(list) {
//Hide waiting message
document.getElementById("waiting").style.display = 'none';

//Rearrangeable?
if (songsList.rearrange)
var rearrange = true;
else
var rearrange = false;

for (var i = 0; i < list.length; i++) {
//Add to favorites
var favsButton = document.createElement("INPUT");
favsButton.type = "button"
favsButton.name = songsList.playlist + "-" + list[i]['itemId'];
favsButton.songId = list[i]['id'];
favsButton.value = "Favorites";
favsButton.onmousedown = m_addToFavorites;

//Add to Tonight
var tonightButton = document.createElement("INPUT");
tonightButton.type = "button";
tonightButton.name = songsList.playlist + "-" + list[i]['itemId'];
tonightButton.songId = list[i]['id'];
tonightButton.value = "Tonight";
tonightButton.onmousedown = m_addToTonight;

//Columns
var columns = Array(i, list[i]['name'], list[i]['artist']);

if (typeof(list[i]['album']) == "object") {
var dropDown = document.createElement("SELECT");
dropDown.name = list[i]['id'];

for (var j = 0; j < list[i]['album']['items'].length; j++) {
var optionObj = document.createElement("OPTION");
optionObj.value = list[i]['album']['items'][j];
optionObj.innerHTML = optionObj.value;

if (list[i]['album']['default'] == j) {
optionObj.selected = true;
}

dropDown.appendChild(optionObj);
}

columns.push(dropDown);
}

else {
columns.push(list[i]['album']);
}

if (songsList.playlistName == "Tonight") {
//Drop-down
var options = {"+6" : 6, "+5" : 5, "+4" : 4, "+3" : 3, "+2" : 2, "+1" : 1, "0" : 0, "-1" : -1, "-2" : -2, "-3" : -3, "-4" : -4, "-5" : -5, "-6" : -6}
var dropDown = document.createElement("SELECT");
dropDown.name = list[i]['itemId'];
dropDown.songId = list[i]['id'];
dropDown.onchange = m_changePitch;
for (option in options) {
var optionObj = document.createElement("OPTION");
optionObj.value = options[option];
optionObj.innerHTML = option;

if(list[i]['pitch'] == options[option]) {
optionObj.selected = true;
}

dropDown.appendChild(optionObj);
}

columns.push(dropDown);
columns.push(favsButton);
}

else if (songsList.playlistName == "Favorites") {
columns.push(tonightButton);
}

else {
columns.push(tonightButton);
columns.push(favsButton);
}

index = songsList.addItem(songsList.playlist + "-" + list[i]['itemId'], columns, rearrange, null, false);

document.getElementById(songsList.getByIndex(index)).songName = list[i]['name'];
document.getElementById(songsList.getByIndex(index)).songId = list[i]['id'];
document.getElementById(songsList.getByIndex(index)).piIx = list[i]['itemId'];
}

songsList.color();

if (songsList.playlistName != "Tonight" && songsList.playlistName != "History") {
songsList.evtColClick = m_sortSongs;
}
else {
songsList.evtColClick = null;
}
}

function m_songRearrange(list, song, index, oldIndex) {
sendData(url_rearrange, "playlist=" + list.playlist + "&index=" + index + "&oldIndex=" + oldIndex);
m_sessionCheckin();
}

function m_playlistDrop(song, index, nodeId) {
playlists = document.getElementById("playlists").childNodes[0].parent;
item = songsList.getByID(song);

if (songsLists[playlists.getByIndex(index).substring(1)]) { songsLists[playlists.getByIndex(index).substring(1)].destroy(); }
songsLists[playlists.getByIndex(index).substring(1)] = null;
sendData(url_drop, "playlist=" + playlists.getByIndex(index).substring(1) + "&song=" + songsList.getByID(song).songId);

m_setStatus("Added \"" + item.songName + "\" to \"" + m_getPlaylistName(playlists.getByIndex(index)) + "\" ...");
m_sessionCheckin();
}

function m_addToTonight(event) {
playlists = document.getElementById("playlists").childNodes[0].parent;
m_playlistDrop(event.target.name, playlists.getIndex("p" + pTonightID), event.target.name);
}

function m_addToFavorites(event) {
playlists = document.getElementById("playlists").childNodes[0].parent
m_playlistDrop(event.target.name, playlists.getIndex("p" + pFavoritesID), event.target.name);
}

function m_sortSongs(list, column) {
list.removeAll();
list.setPrimaryCol(column);
document.getElementById("waiting").style.display = '';

if (document.getElementById("searchfield").value) {
search = "&search=" + document.getElementById("searchfield").value;
}

getSongs(url_sort, m_songsLoaded, "playlist=" + list.playlist + "&orderby=" + column + search);
m_sessionCheckin();
}

function m_changePitch(event) {
sendData(url_pitch, "song=" + event.target.songId + "&pitch=" + event.target.value);
m_sessionCheckin();
}

function m_doSearch() {
//Remove old search list if it's there
if (songsLists["1"]) {
songsLists["1"].parentObj.removeChild(songsLists["1"].container);
songsLists["1"].parentObj.removeChild(songsLists["1"].columnsObj);
}

//Hide currently loaded list
if (songsList) {
songsList.hide();
}

document.getElementById("msg_dosearch").style.display = 'none';
document.getElementById("message").style.display = 'none';
document.getElementById("msg_error").style.display = 'none';
document.getElementById("waiting").style.display = '';

var columns = Array("#", "Song Name", "Artist", "Album", "Add to", "Add to");

songsList = new KJList();
songsList.rearrange = false;
songsList.playlist = "1";
songsList.playlistName = "Library";
songsList.create(document.getElementById("songs"));
songsList.setColumns(columns, 1);
songsLists["1"] = songsList;

getSongs(url_search, m_songsLoaded, "search=" + document.getElementById("searchfield").value);
m_sessionCheckin();
}

function searchKeyPressed(event) {
if (event.keyCode == 13) {
m_doSearch();
}
}

function m_getSongName(id) {
songObj = document.getElementById(id);
return songObj.songName;
}

function m_getPlaylistName(id) {
playlistObj = document.getElementById(id);
return playlistObj.name;
}

function kj_data_error(id, desc) {
songsLists[songsList.id] = null;
songsList.hide();
document.getElementById("waiting").style.display = 'none';

document.getElementById("msg_error").innerHTML = "Error: " + desc
document.getElementById("msg_error").style.display = '';
}

function m_setStatus(status, revert) {
statusObj = document.getElementById("status");
statusObj.innerHTML = status;
}
function trapDelete() {
var keyID = (window.event) ? event.keyCode : e.keyCode;
if (keyID==8 && !allowBackspace){
return false;
}
return true;
}
function m_keyPressed(event) {
//This is not IE-compliant code.
if (event.keyCode == 46 || event.keyCode ==8) {
if (!songsList.selection) {
return;
}

playlistName = songsList.playlistName;

if (playlistName != "Library" && playlistName != "History") {
selection = songsList.selection;
item = songsList.getByID(selection);

songsList.select(null);
sendData(url_remove, "playlist=" + songsList.playlist + "&piIx=" + item.piIx);
m_setStatus("Removed \"" + item.songName + "\" ...");
songsList.removeItem(selection);
}
}
}

function m_sessionCheckin() {
/* A true or false value is set by the server before delivering this script
depending on preference.
if (!{auto_logout}) {
return;
}

if (timer == null) {
timer = setInterval("m_sessionLogout()", {timeout} * 1000);
}
else {
clearInterval(timer);
timer = null;
return m_sessionCheckin();
}
*/
}

function m_sessionLogout() {
// window.location=url_login;
}
</pre>

mainscreen.html
<pre>
<html>
<head>
<title>kJams Server</title>

<script src="spry/xpath.js"></script>
<script src="spry/SpryData.js"></script>
<script src="ui.js"></script>
<script src="data.js"></script>
<script src="main.js"></script>
<script src="common.js"></script>
<script type="text/javascript">
var timer = 0;
function set_interval() {
//the interval 'timer' is set as soon as the page loads
timer=setInterval("auto_logout()",120000);
// the figure '120000' above indicates how many milliseconds the timer be set to.
//Eg: to set it to 2 mins, calculate 2min= 2x60=120 sec = 120,000 millisec. So set it to 120000
}
function reset_interval() {
//resets the timer. The timer is reset on each of the below events:
// 1. mousemove 2. mouseclick 3. key press 4. scroliing
//first step: clear the existing timer
if (timer != 0) {
clearInterval(timer);
timer = 0;
}
//second step: implement the timer again
timer=setInterval("auto_logout()",120000);
//completed the reset of the timer
}

function auto_logout() {
//this function will redirect the user to the logout script
window.location=logoutlink;
}
</script>
<style type="text/css">
#main {
padding: 10px;
margin-right: 20px;
margin-left: 20px;
border-style: solid;
border-color: #000000;
border-width: 1px;
background: url('metal.jpg');
cursor: default;
}

#title {
padding-right: 30px;
text-align: left;
font-family: Arial Black;
font-size: 24pt;
font-weight: bold;
margin-bottom: 5px;
}

#search {
width: 100%;
text-align: center;
}

#searchfield {
height: 21px;
width: 144px;
background: url('search.png');
border-width: 0px;
padding-left: 7px;
padding-right: 7px;
padding-top: 2px;
}

#left {
float: left;
width: 200px;
margin: 0px;
margin-left: 0px;
}

#status {
text-align: center;
color: #333333;
padding: 0px;
margin: 0px;
}

#playlists .KJList {
overflow: auto;
height: 240px;
padding: 0px;
background-color: #FFFFFF;
border-style: solid;
border-color: #999999;
border-width: 1px;
padding: 0px;
}

#playlists .KJList td {
padding: 0px;
margin: 0px;
}

#playlists .KJList table {
margin: 0px;
padding: 0px;
}

#photo {
padding: 3px;
width: 190px;
height: 143px;
max-height: 150px;
overflow: hidden;
margin-top: 5px;
background-color: #FFFFFF;
border-style: solid;
border-color: #999999;
border-width: 1px;
}

#songs {
border-style: solid
border-color: #999999;
border-width: 1px;
margin-left: 220px;
background-color: #FFFFFF;
min-height: 400px;
}

#message, #waiting, #msg_dosearch, #msg_error {
text-align: center;
font-size: 14pt;
}

#songs .KJList {
padding: 0px;
height: 400px;
overflow: auto;
!background-color: #FFFFFF;
}

.KJListColumn {
padding: 0px;
margin: 0px;
background: url('column-bg.jpg');
cursor: default;
}

.KJListColumn td {
border-style: solid;
border-color: #999999;
border-width: 0px;
border-right-width: 1px;
}

.KJListColumn .primary {
background: url('column-selected-bg.jpg');
}

.KJListItem, .KJListItem_alt, .KJListItem_selected, .KJListItem_drag, .KJListItem_target, .KJListItem_alt_target {
padding: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin: 0px;
cursor: default;
border-style: solid;
border-color: #FFFFFF;
border-width: 0px;
border-bottom-width: 1px;
}

.KJListItem_alt {
background-color: #EEEEFF;
}

.KJListItem_selected {
background-color: #4444FF;
color: #FFFFFF;
}

.KJListItem_target, .KJListItem_alt_target {
border-style: solid;
border-color: #000000;
border-width: 0px;
border-top-width: 1px;
}

.KJListItem_alt_target {
background-color: #EEEEFF;
}

.KJListItem_drag {
position: absolute;
border-style: solid;
border-color: #000000;
border-width: 1px;
background-color: #DDDDDD;
filter:alpha(opacity=40); /* for IE */
-moz-opacity:0.4;
opacity: 0.4;
}

.KJList input {
padding: 0px;
margin: 0px;
border-style: solid;
border-color: #000000;
border-width: 1px;
}

.KJList input:active {
background-color: #000000;
color: #FFFFFF;
}

#playlists .KJListItem, #playlists .KJListItem_alt, #playlists .KJListItem_selected, #playlists .KJListItem_target, #playlists .KJListItem_alt_target {
background: url('playlist-icon.gif');
background-repeat: no-repeat;
padding: 0px;
padding-left: 20px;
border-style: solid;
border-color: #FFFFFF;
border-width: 3px;
}

#playlists .KJListItem_alt {
background-color: #EEEEFF;
}

#playlists .KJListItem_selected {
background-color: #4444FF;
color: #FFFFFF;
}

#playlists .KJListItem_target, #playlists .KJListItem_alt_target {
border-color: #000000;
background-color: #9999FF;
}

.clear {
clear: both;
}
</style>

</head>

<body onLoad="set_interval()" onmousemove="reset_interval()" onclick="reset_interval()" onkeypress="reset_interval()" onscroll="reset_interval()">
<div id="main">
<table><tr><td id="title"><nobr>*DeusExMachina</nobr></td><td id="search"><nobr>Search Library: <input type="search" id="searchfield" name="search" onkeypress=searchKeyPressed(event) onblur="inSearch.off()" onfocus="inSearch.on()" /><input type="submit" style="" name="dosearch" value="Go" onclick=m_doSearch() /></nobr></td><td id="help"><nobr>[ <a id="helplink" href="">Help</a> ] [ <a id="logoutlink" href="">Logout</a> ]</nobr></td></tr></table>

<div>
<div id="left">
<div id="playlists"></div>
<div id="photo"><img src="kjams-main.jpg" /></div>
</div>

<div id="songs"><p id="msg_error"></p><p id="msg_dosearch">Please enter a search.</p><p id="message">No Playlist Selected.</p><p id="waiting">Please wait, loading playlist...</p></div>

<div class="clear"> </div>
<div id="status">Welcome to kJams!</div>
</div>
</div>

<script language="javascript">
//Bind key press function
document.onkeyup = m_keyPressed;
//Prevent browser from seeing the Delete key press
document.onkeydown=trapDelete;

//Hide message fields
document.getElementById("waiting").style.display = 'none';
document.getElementById("msg_dosearch").style.display = 'none';
document.getElementById("msg_error").style.display = 'none';

//Plug in help and logout URLs
document.getElementById("helplink").href = url_help;
document.getElementById("logoutlink").href = url_login;

//Playlists
m_populatePlaylists();

if (0) {
//Song list
var songs = new KJList();
songs.create(document.getElementById("songs"));
songs.setColumns(Array("#", "Song Name", "Artist", "Pitch", "Add to", "Add to"), 1);

//Set clipping
songs.setClipping({'right' : songs.getColumnWidth(5) + songs.getColumnWidth(4) + songs.getColumnWidth(3)});

getSongs(url_songs, populateList, 'playlist=1');

function populateList(songList) {
for(var i = 0; i < songList.length; i++) {
songs.addItem(songList[i]['number'], Array(songList[i]['number'], songList[i]['name'], songList[i]['artist'], "<select><option>+6</option><option>+5</option><option>+4</option><option>+3</option><option>+2</option><option>+1</option><option selected>0</option><option>-1</option><option>-2</option><option>-3</option><option>-4</option><option>-5</option></select>", "<input type=\"submit\" value=\"Tonight\" />", "<input type=\"submit\" value=\"Favorites\" />"), null, null, false);
}

songs.color();
}
}
</script>
</body>
</html>
</pre>

Code/new kJams server pages with autologout - Revision history