Server/Code/mainscreen.html: Difference between revisions

From kJams Wiki
Jump to navigation Jump to search
← Older editNewer edit →
mNo edit summary
No edit summary
Line 1: Line 1:
<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>

Revision as of 02:07, 4 September 2012

<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 src="iscroll.js"></script> <script src="blockUnload.js"></script> <script type="text/javascript"> </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()">

<nobr>{singer}</nobr><nobr>[ <a id="helplink" onClick="allowUnload=true" href="">Help</a> ] [ <a id="logoutlink" onClick="allowUnload=true" href="">Logout</a> ]</nobr>

Please enter a search.

Hint: To limit your search to just a particular artist, type "artist:" followed by the name of the artist.
Likewise, to search just on song names type "song name:" and then the name of your song, etc..

Please enter a search.

Type your search into the search field above and hit "Go".

To submit a song, just click the "Tonight" button for that song in the search results. (You can also make your own "Favorties" list.)

You will be informed at the bottom of the screen when you have successfully submitted a song.

Hint: To limit your search to just a particular artist, type "artist:" followed by the name of the artist.
Likewise, to search just on song names type "song name:" and then the name of your song, etc..

Please wait, loading search results… .
(This may take a while. <a name=blinker>Please do NOT</a> try another search until the first results are returned.)

Welcome to kJams!

<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>

Retrieved from "https://karaoke.kjams.com/w/index.php?title=Server/Code/mainscreen.html&oldid=7975"