diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/script.js | 104 |
1 files changed, 74 insertions, 30 deletions
diff --git a/static/script.js b/static/script.js index 2a4e0f6..d6cad6e 100644 --- a/static/script.js +++ b/static/script.js @@ -184,36 +184,80 @@ function add(id, title) { } function drawAdd(s) { - $('article').append('\ - <section class="song" id="' + s.yid + '">\ - <div class="thumb">\ - <img src="http://i.ytimg.com/vi/' + s.yid + '/1.jpg" alt="' + s.yid + '">\ - </div>\ - <div class="info">\ - <a href="http://www.youtube.com/watch?v=' + s.yid + '">' + s.title + '</a>\ - </div>\ - <div class="user">' + s.user + '</div>\ - <div class="remove">\ - <a href="javascript:remove(\'' + s.yid + '\')">\ - <img src="/static/remove.png" alt="remove">\ - </a>\ - </div>\ - <div class="reorder">\ - <a href="javascript:move(\'' + s.yid + '\', 2)">\ - <img src="/static/up-arrow.png" alt="up">\ - </a>\ - <a href="javascript:move(\'' + s.yid + '\', 3)">\ - <img src="/static/down-arrow.png" alt="down">\ - </a>\ - </div>\ - <canvas id="c_' + s.yid + '" width="700" height="20"></canvas>\ - <br>\ - <img src="/static/player_play.png" alt="Play" onclick="play(\'' + s.yid + '\')" id="play_' + s.yid + '">\ - <img src="/static/player_pause.png" alt="Pause" onclick="pause(\'' + s.yid + '\')" id="pause_' + s.yid + '">\ - <img src="/static/player_stop.png" alt="Stop" onclick="stop(\'' + s.yid + '\')">\ - <br class="clear">\ - </section>\ - '); + $('article').append($(document.createElement('section')) + .addClass('song').attr('id', s.yid) + .append($(document.createElement('div')) + .addClass('thumb') + .append($(document.createElement('img')) + .attr('src', 'http://i.ytimg.com/vi/' + s.yid + '/1.jpg') + .attr('alt', s.yid) + ) + ) + .append($(document.createElement('div')) + .addClass('info') + .append($(document.createElement('a')) + .attr('href', 'http://www.youtube.com/watch?v=' + s.yid) + .append(s.title) + ) + ) + .append($(document.createElement('div')) + .addClass('user') + .append(s.user) + ) + .append($(document.createElement('div')) + .addClass('remove') + .append($(document.createElement('a')) + .attr('href', 'javascript:remove("' + s.yid + '")') + .append($(document.createElement('img')) + .attr('src', '/static/remove.png') + .attr('alt', 'remove') + ) + ) + ) + .append($(document.createElement('div')) + .addClass('reorder') + .append($(document.createElement('a')) + .attr('href', 'javascript:move("' + s.yid + '", 2)') + .append($(document.createElement('img')) + .attr('src', '/static/up-arrow.png') + .attr('alt', 'up') + ) + ) + .append($(document.createElement('a')) + .attr('href', 'javascript:move("' + s.yid + '", 3)') + .append($(document.createElement('img')) + .attr('src', '/static/down-arrow.png') + .attr('alt', 'down') + ) + ) + ) + .append($(document.createElement('canvas')) + .attr('id', 'c_' + s.yid) + .attr('width', 700) + .attr('height', 20) + ) + .append($(document.createElement('br'))) + .append($(document.createElement('img')) + .attr('src', '/static/player_pause.png') + .attr('alt', 'play') + .attr('id', 'play_' + s.yid) + .click(function() {play(s.yid)}) + ) + .append($(document.createElement('img')) + .attr('src', '/static/player_play.png') + .attr('alt', 'pause') + .attr('id', 'pause_' + s.yid) + .click(function() {pause(s.yid)}) + ) + .append($(document.createElement('img')) + .attr('src', '/static/player_stop.png') + .attr('alt', 'stop') + .click(function() {stop(s.yid)}) + ) + .append($(document.createElement('br')) + .addClass('clear') + ) + ); ids.push(s.yid); drawBar(s.yid); } |