Server/Code/mainscreen.html: Difference between revisions

From kJams Wiki
Jump to navigation Jump to search
mNo edit summary
No edit summary
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
<pre>
<pre>
<html>
<html>
  <head>
<head>
  <title>kJams Server</title>
<!--Singer: {singer}-->
 
<title>kJams Server</title>
  <script src="spry/xpath.js"></script>
  <script src="spry/SpryData.js"></script>
<script src="spry/xpath.js"></script>
  <script src="ui.js"></script>
<script src="spry/SpryData.js"></script>
  <script src="data.js"></script>
<script src="ui.js"></script>
  <script src="main.js"></script>
<script src="data.js"></script>
  <script src="common.js"></script>
<script src="main.js"></script>
 
<script src="common.js"></script>
  <style type="text/css">
<script src="iscroll.js"></script>
#main {
<script src="blockUnload.js"></script>
padding: 10px;
<script type="text/javascript">
margin-right: 20px;
<!--
margin-left: 20px;
  var allowUnload = false;
border-style: solid;
blinkSpeed=150;
border-color: #000000;
tagName="blinker";
border-width: 1px;
blinkerFlag=1;
background: url('metal.jpg');
blinkElement=document.getElementsByName(tagName);
cursor: default;
blinkText();
}
#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 {
/*position: relative;
z-index: 1;*/
border-style: solid/
border-color: #999999;
border-width: 1px;
margin-left: 220px;
background-color: #FFFFFF;
min-height: 400px;
background-image:url(/media/Images/kjams.jpg);
background-repeat: no-repeat;
background-position: center;
/*filter: alpha (opacity=50);
-moz-opacity:0.5;
opacity: 0.5;*/
}
#songsbackground{
positon: absolute;
z-index: 10;
min-height: 400px;
background-image:url(kjams.jpg);
background-repeat: no-repeat;
background-position: center;
filter: alpha (opacity=50);/*for those yet to get with the program*/
-moz-opacity:0.5;
opacity: 0.5;
}
#message, #waiting, #msg_dosearch, #msg_error {
/*position: relative;
z-index: 11
top: 0;
left: 0;*/
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;
/*opacity: 0.7; I use this for slide show. Can be deleted or ignored*/
}
.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 {
function blinkText() {
clear: both;
if (blinkerFlag== 1) {
}
blinkState="visible";
  </style>
}
  </head>
else {
 
blinkState="hidden";
  <body>
}
  <div id="main">
blinkerFlag ^=1;
<table><tr><td id="title"><nobr>{singer}</nobr></td><td id="search"><nobr>Search Library: <input type="search" id="searchfield" name="search" onkeypress=searchKeyPressed(event) onblur="inSearch.off()" onfocus="inSearch.on()" />&nbsp;<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>
for(i=0;i<blinkElement.length;i++) {
<div id="left">
blinkElement[i].style.visibility=blinkState;
  <div id="playlists"></div>
}
  <div id="photo"><img src="kjams-main.jpg"></div>
 
setTimeout("blinkText()", blinkSpeed);
}
-->
</script>
<script type="text/javascript">
//variable to control if message is shown
  var allowUnload = false;
 
  // function triggered by any closing of the current document
function confirmUnload(){
if(!allowUnload){
//message displayed (as well as inbuilt IE junk) when page is unloaded.
return 'Why on earth would you think it is a good idea to close this window?!? Well, it ISN\'T!!! Do NOT close this window. If you do, all hell will rain down upon you, you will get A.I.D.S., and I will get very upset (at you closing the window, not the A.I.D.S., that\'s on you).\n :\'(';
}
}
 
//register function with the event handler
window.onbeforeunload = confirmUnload;
</script>
<link rel="stylesheet" href="screen.css" media="screen"/>
<link rel="stylesheet" href="handheld.css" media="handheld, only screen and (max-device-width:480px)"/>
</head>
 
<body onLoad="m_sessionCheckin()"; "loaded()" onmousemove="m_pingSession()" onclick="m_pingSession()" onkeypress="m_pingSession()" onscroll="m_pingSession()">
<div id="main">
<table><tr><td id="title"><nobr>{singer}</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" onClick="allowUnload=true" href="">Help</a> ] [ <a id="logoutlink" onClick="allowUnload=true" 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="wrapper">
<div id="songs"><p id="msg_error"></p><p id="msg_dosearch">Please enter a search.<br><br><b> Hint: To limit your search to just a particular artist, type "artist:" followed by the name of the artist.<br>Likewise, to search just on song names  type "song name:" and then the name of your song, etc..</b></p><p id="message">Please enter a search.<br><br><i>Type your search into the search field above and hit "Go".<br><br>To submit a song, just click the "Tonight" button for that song in the search results. (You can also make your own "Favorties" list.)<br><br>You will be informed at the bottom of the screen when you have successfully submitted a song.</i><br><br><b> Hint: To limit your search to just a particular artist, type "artist:" followed by the name of the artist.<br>Likewise, to search just on song names  type "song name:" and then the name of your song, etc..</b></p><p id="waiting">Please wait, loading search results… .<br><i><b>(This may take a while. <span style="color:#FF0000"><a name=blinker>Please do NOT</a> try another search until the first results are returned.)</span></b></i></p></div>
</div>
<div class="clear"></div>
<div id="status">Welcome to kJams!</div>
</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>
<div class="clear">&nbsp;</div>
<div id="status">Welcome to kJams!</div>
<script language="javascript">
</div>
//Bind key press function
  </div>
document.onkeyup = m_keyPressed;
 
//Prevent browser from seeing the Delete key press
  <script language="javascript">
document.onkeydown=trapDelete;
//Bind key press function
 
document.onkeyup = m_keyPressed;
//Hide message fields
//Prevent browser from seeing the Delete key press
document.getElementById("waiting").style.display = 'none';
document.onkeydown=trapDelete;
document.getElementById("msg_dosearch").style.display = 'none';
 
document.getElementById("msg_error").style.display = 'none';
//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
//Plug in help and logout URLs
songs.setClipping({'right' : songs.getColumnWidth(5) + songs.getColumnWidth(4) + songs.getColumnWidth(3)});
document.getElementById("helplink").href = url_help;
document.getElementById("logoutlink").href = url_login;
getSongs(url_songs, populateList, 'playlist=1');
//Playlists
m_populatePlaylists();
function populateList(songList) {
  for(var i = 0; i < songList.length; i++) {
if (0) {
  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);
//Song list
  }
var songs = new KJList();
 
songs.create(document.getElementById("songs"));
  songs.color();
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>
  </script>
</body>
  </body>
</html>
</html>
</pre>
</pre>

Latest revision as of 02:08, 4 September 2012

<html>
	<head>
	<!--Singer: {singer}-->
		<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 src="iscroll.js"></script>
		<script src="blockUnload.js"></script>
		<script type="text/javascript">
			<!--
			  			 var allowUnload = false;
			blinkSpeed=150;
			tagName="blinker";
			blinkerFlag=1;
			blinkElement=document.getElementsByName(tagName);
			blinkText();

			function blinkText() {
				if (blinkerFlag== 1) {
					blinkState="visible";
				}
				else {
				blinkState="hidden";
				}
				blinkerFlag ^=1;

				for(i=0;i<blinkElement.length;i++) {
					blinkElement[i].style.visibility=blinkState;
				}

				setTimeout("blinkText()", blinkSpeed);
			}
			-->
		</script>
		<script type="text/javascript">
			//variable to control if message is shown
  			 var allowUnload = false;

  			// function triggered by any closing of the current document
			function confirmUnload(){
				if(!allowUnload){
					//message displayed (as well as inbuilt IE junk) when page is unloaded.
					return 'Why on earth would you think it is a good idea to close this window?!? Well, it ISN\'T!!! Do NOT close this 							window. If you do, all hell will rain down upon you, you will get A.I.D.S., and I will get very upset (at you 							closing the window, not the A.I.D.S., that\'s on you).\n :\'(';
				}
			}

			//register function with the event handler
			window.onbeforeunload = confirmUnload;
		</script>
		
<link rel="stylesheet" href="screen.css" media="screen"/> 
<link rel="stylesheet" href="handheld.css" media="handheld, only screen and (max-device-width:480px)"/>
	</head>

	<body onLoad="m_sessionCheckin()"; "loaded()" onmousemove="m_pingSession()" onclick="m_pingSession()" onkeypress="m_pingSession()" onscroll="m_pingSession()">
		<div id="main">
			<table><tr><td id="title"><nobr>{singer}</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" onClick="allowUnload=true" href="">Help</a> ] [ <a id="logoutlink" onClick="allowUnload=true" 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="wrapper">
				<div id="songs"><p id="msg_error"></p><p id="msg_dosearch">Please enter a search.<br><br><b> Hint: To limit your search to just a particular artist, type "artist:" followed by the name of the artist.<br>Likewise, to search just on song names  type "song name:" and then the name of your song, etc..</b></p><p id="message">Please enter a search.<br><br><i>Type your search into the search field above and hit "Go".<br><br>To submit a song, just click the "Tonight" button for that song in the search results. (You can also make your own "Favorties" list.)<br><br>You will be informed at the bottom of the screen when you have successfully submitted a song.</i><br><br><b> Hint: To limit your search to just a particular artist, type "artist:" followed by the name of the artist.<br>Likewise, to search just on song names  type "song name:" and then the name of your song, etc..</b></p><p id="waiting">Please wait, loading search results… .<br><i><b>(This may take a while. <span style="color:#FF0000"><a name=blinker>Please do NOT</a> try another search until the first results are returned.)</span></b></i></p></div>
				</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>