From ecb537ac7fd5d74066a37af439a20852e5d5a38a Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 10 Oct 2017 18:19:49 +0200 Subject: [PATCH] Move code to render.js in poll --- customize.dist/pages.js | 2 +- www/poll/app-poll.less | 14 ++++ www/poll/inner.js | 153 +++++++--------------------------------- www/poll/render.js | 117 +++++++++++++++++++++++++++++- 4 files changed, 155 insertions(+), 131 deletions(-) diff --git a/customize.dist/pages.js b/customize.dist/pages.js index 2c26acc35..6b1e4a62f 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -656,7 +656,7 @@ define([ h('br') ]), h('div#cp-app-poll-table-container', [ - h('div#cp-app-poll-table-scroll'), + h('div#cp-app-poll-table-scroll', [h('table')]), h('button#cp-app-poll-create-user.btn.btn-secondary', { title: Msg.poll_create_user }, h('span.fa.fa-plus')), diff --git a/www/poll/app-poll.less b/www/poll/app-poll.less index dd3b3b91f..276267963 100644 --- a/www/poll/app-poll.less +++ b/www/poll/app-poll.less @@ -224,6 +224,15 @@ div.cp-app-poll-realtime { padding: 0px; margin: 0px; + .cp-app-poll-table-scrolled { + tr td:last-child { + right: 0; + } + tr td:nth-last-child(2) { + right: 100px; + } + } + table { border-collapse: collapse; width: ~"calc(100% - 1px)"; @@ -401,6 +410,11 @@ div.cp-app-poll-realtime { &:not(:last-child) { border-right: 1px solid rgba(255,255,255,0.2); } + &:last-child { + height: 52px; + line-height: 52px; + text-align: center; + } &:nth-last-child(2) { border-right: 1px solid @poll-border-color; } diff --git a/www/poll/inner.js b/www/poll/inner.js index c2da2e8ea..bf4b4003e 100644 --- a/www/poll/inner.js +++ b/www/poll/inner.js @@ -46,9 +46,7 @@ define([ var Messages = Cryptpad.Messages; var saveAs = window.saveAs; - var Render = Renderer(Cryptpad); var APP = window.APP = { - Render: Render, unlocked: { row: [], col: [] @@ -57,6 +55,7 @@ define([ Cryptpad: Cryptpad, mobile: function () { return $('body').width() <= 600; } // Menu and content area are not inline-block anymore for mobiles }; + var Render = Renderer(Cryptpad, APP); var debug = $.noop; //console.log; @@ -221,11 +220,12 @@ define([ return newObj; }; - var enableColumn = function (id) { - var $input = $('input[disabled="disabled"][data-rt-id^="' + id + '"]') + var enableColumn = APP.enableColumn = function (id, table) { + table = table || $('body'); + var $input = $(table).find('input[disabled="disabled"][data-rt-id^="' + id + '"]') .removeAttr('disabled'); $input.closest('td').addClass('cp-app-poll-table-editing'); - $('.cp-app-poll-table-lock[data-rt-id="' + id + '"]').addClass('fa-unlock') + $(table).find('.cp-app-poll-table-lock[data-rt-id="' + id + '"]').addClass('fa-unlock') .removeClass('fa-lock').attr('title', Messages.poll_unlocked); }; var disableColumn = function (id) { @@ -235,10 +235,13 @@ define([ $('.cp-app-poll-table-lock[data-rt-id="' + id + '"]').addClass('fa-lock') .removeClass('fa-unlock').attr('title', Messages.poll_locked); }; - var enableRow = function (id) { - var $input = $('input[type="text"][disabled="disabled"][data-rt-id="' + id + '"]').removeAttr('disabled'); + var enableRow = APP.enableRow = function (id, table) { + table = table || $('body'); + var $input = $(table).find('input[disabled="disabled"][data-rt-id="' + id + '"]') + .removeAttr('disabled'); $input.closest('td').addClass('cp-app-poll-table-editing'); - $('span.cp-app-poll-table-edit[data-rt-id="' + id + '"]').css('visibility', 'hidden'); + $(table).find('span.cp-app-poll-table-edit[data-rt-id="' + id + '"]') + .css('visibility', 'hidden'); }; var disableRow = function (id) { var $input = $('input[type="text"][data-rt-id="' + id + '"]') @@ -247,77 +250,10 @@ define([ $('span.cp-app-poll-table-edit[data-rt-id="' + id + '"]').css('visibility', 'visible'); }; - var styleUserColumn = function () { - var userid = APP.userid; - if (!userid) { return; } - - // Enable input for the userid column - enableColumn(userid); - $('input[disabled="disabled"][data-rt-id^="' + userid + '"]') - .attr('placeholder', Messages.poll_userPlaceholder); - $('.cp-app-poll-table-lock[data-rt-id="' + userid + '"]').remove(); - $('[data-rt-id^="' + userid + '"]').closest('td') - .addClass("cp-app-poll-table-own"); - $('.cp-app-poll-table-bookmark[data-rt-id="' + userid + '"]').css('visibility', '') - .addClass('cp-app-poll-table-bookmark-full') - .attr('title', Messages.poll_bookmarked_col); - }; - var styleUncommittedColumn = function () { - var $scroll = $('#cp-app-poll-table-scroll'); - var hasScroll = $scroll.width() < $scroll[0].scrollWidth; - APP.uncommitted.content.colsOrder.forEach(function(id) { - // Enable the checkboxes for the uncommitted column - enableColumn(id); - $('.cp-app-poll-table-lock[data-rt-id="' + id + '"]').remove(); - $('.cp-app-poll-table-remove[data-rt-id="' + id + '"]').remove(); - $('.cp-app-poll-table-bookmark[data-rt-id="' + id + '"]').remove(); - - $('td.cp-app-poll-table-uncommitted .cover').addClass("cp-app-poll-table-uncommitted"); - var $uncommittedCol = $('[data-rt-id^="' + id + '"]').closest('td'); - $uncommittedCol.addClass("cp-app-poll-table-uncommitted"); - - if (hasScroll) { - $uncommittedCol.css('right', '100px'); - } - }); - APP.uncommitted.content.rowsOrder.forEach(function(id) { - // Enable the checkboxes for the uncommitted column - enableRow(id); - $('.cp-app-poll-table-edit[data-rt-id="' + id + '"]').remove(); - $('.cp-app-poll-table-remove[data-rt-id="' + id + '"]').remove(); - - $('[data-rt-id="' + id + '"]').closest('tr').addClass("cp-app-poll-table-uncommitted"); - }); - }; var unlockElements = function () { APP.unlocked.row.forEach(enableRow); APP.unlocked.col.forEach(enableColumn); }; - var updateTableButtons = function () { - var uncomColId = APP.uncommitted.content.colsOrder[0]; - var uncomRowId = APP.uncommitted.content.rowsOrder[0]; - var $createOption = APP.$table.find('tbody input[data-rt-id="' + uncomRowId+'"]') - .closest('td').find('> div'); - $createOption.append(APP.$createRow); - var $createUser = APP.$table.find('thead input[data-rt-id="' + uncomColId + '"]') - .closest('td'); - $createUser.prepend(APP.$createCol); - - if (APP.proxy.content.colsOrder.indexOf(APP.userid) === -1) { - APP.$table.find('.cp-app-poll-table-bookmark').css('visibility', ''); - } - - //$('#cp-app-poll-create-user, #cp-app-poll-create-option').css('display', 'inline-flex'); - if (!APP.proxy || - !APP.proxy.content.rowsOrder || - APP.proxy.content.rowsOrder.length === 0) { - //$('#create-user').hide(); - } - var width = $('#cp-app-poll-table').outerWidth(); - if (width) { - //$('#create-user').css('left', width + 30 + 'px'); - } - }; var setTablePublished = function (bool) { if (bool) { if (APP.$publish) { APP.$publish.hide(); } @@ -329,59 +265,19 @@ define([ $('#cp-app-poll-form').removeClass('cp-app-poll-published'); } }; - var addCount = function () { + var addScrollClass = function () { var $scroll = $('#cp-app-poll-table-scroll'); var hasScroll = $scroll.width() < $scroll[0].scrollWidth; - var $countCol = $('tr td:last-child'); if (hasScroll) { - $countCol.css('right', '0'); + $scroll.addClass('cp-app-poll-table-scrolled'); + return; } - var $thead = APP.$table.find('thead'); - var $tr = APP.$table.find('tbody tr').first(); - $thead.find('tr td').last() - .css({ - 'height': $thead.height()+'px', - 'text-align': 'center', - 'line-height': $thead.height()+'px' - }) - .text(Messages.poll_total); - var winner = { - v: 0, - ids: [] - }; - APP.count = {}; - APP.proxy.content.rowsOrder.forEach(function (rId) { - var count = Object.keys(APP.proxy.content.cells) - .filter(function (k) { - return k.indexOf(rId) !== -1 && APP.proxy.content.cells[k] === 1; - }).length; - if (count > winner.v) { - winner.v = count; - winner.ids = [rId]; - } else if (count && count === winner.v) { - winner.ids.push(rId); - } - APP.count[rId] = count; - APP.$table.find('[data-rt-count-id="' + rId + '"]') - .text(count) - .css({ - 'height': $tr.height()+'px', - 'line-height': $tr.height()+'px' - }); - }); - winner.ids.forEach(function (rId) { - $('[data-rt-id="' + rId + '"]').closest('td').addClass('cp-app-poll-table-winner'); - $('[data-rt-count-id="' + rId + '"]').addClass('cp-app-poll-table-winner'); - }); + $scroll.removeClass('cp-app-poll-table-scrolled'); }; var updateDisplayedTable = function () { - styleUserColumn(); - styleUncommittedColumn(); - unlockElements(); - updateTableButtons(); setTablePublished(APP.proxy.published); - addCount(); + addScrollClass(); }; var unlockColumn = function (id, cb) { @@ -941,12 +837,6 @@ define([ unlockRow(rowuid); } - var displayedObj = mergeUncommitted(proxy, uncommitted, false); - - var colsOrder = sortColumns(displayedObj.content.colsOrder, userid); - - var $table = APP.$table = $(Render.asHTML(displayedObj, null, colsOrder, APP.readOnly)); - /* Extract uncommitted data (row or column) and create a new uncommitted row or column */ @@ -1007,6 +897,15 @@ define([ }); }); + var displayedObj = mergeUncommitted(proxy, uncommitted, false); + + var colsOrder = sortColumns(displayedObj.content.colsOrder, userid); + + Render.updateTable($('#cp-app-poll-table-scroll').find('table')[0], displayedObj, { + cols: colsOrder, + readOnly: APP.readOnly + }); + // Description APP.editor.on('change', function () { var val = APP.editor.getValue(); @@ -1015,7 +914,7 @@ define([ APP.$addComment.find('.cp-app-poll-comments-add-submit').click(addComment); APP.$addComment.find('.cp-app-poll-comments-add-cancel').click(resetComment); - $('#cp-app-poll-table-scroll').html('').prepend($table); + var $table = APP.$table = $('#cp-app-poll-table-scroll').find('table'); updateDisplayedTable(); updateDescription(null, APP.proxy.description || ''); diff --git a/www/poll/render.js b/www/poll/render.js index 6ca527292..ba0a07c77 100644 --- a/www/poll/render.js +++ b/www/poll/render.js @@ -30,7 +30,7 @@ by maintaining indexes in rowsOrder and colsOrder } }; -var Renderer = function (Cryptpad) { +var Renderer = function (Cryptpad, APP) { var Render = { Example: Example @@ -222,7 +222,9 @@ var Renderer = function (Cryptpad) { disabled: 'disabled' }; return result; - })).concat([null]); + })).concat([{ + content: Cryptpad.Messages.poll_total + }]); } if (i === rows.length) { return [null].concat(cols.map(function () { @@ -307,7 +309,7 @@ var Renderer = function (Cryptpad) { } return ['TD', {}, elements]; } - return ['TD', cell, []]; + return ['TD', cell, [cell.content]]; }; var clone = function (o) { @@ -444,6 +446,112 @@ var Renderer = function (Cryptpad) { } }; + var styleUserColumn = function (table) { + var userid = APP.userid; + if (!userid) { return; } + + + // Enable input for the userid column + APP.enableColumn(userid, table); + $(table).find('input[disabled="disabled"][data-rt-id^="' + userid + '"]') + .attr('placeholder', Cryptpad.Messages.poll_userPlaceholder); + $(table).find('.cp-app-poll-table-lock[data-rt-id="' + userid + '"]').remove(); + $(table).find('[data-rt-id^="' + userid + '"]').closest('td') + .addClass("cp-app-poll-table-own"); + $(table).find('.cp-app-poll-table-bookmark[data-rt-id="' + userid + '"]') + .css('visibility', '') + .addClass('cp-app-poll-table-bookmark-full') + .attr('title', Cryptpad.Messages.poll_bookmarked_col); + }; + var styleUncommittedColumn = function (table) { + APP.uncommitted.content.colsOrder.forEach(function(id) { + // Enable the checkboxes for the uncommitted column + APP.enableColumn(id, table); + $(table).find('.cp-app-poll-table-lock[data-rt-id="' + id + '"]').remove(); + $(table).find('.cp-app-poll-table-remove[data-rt-id="' + id + '"]').remove(); + $(table).find('.cp-app-poll-table-bookmark[data-rt-id="' + id + '"]').remove(); + + $(table).find('td.cp-app-poll-table-uncommitted .cover') + .addClass("cp-app-poll-table-uncommitted"); + var $uncommittedCol = $(table).find('[data-rt-id^="' + id + '"]').closest('td'); + $uncommittedCol.addClass("cp-app-poll-table-uncommitted"); + }); + APP.uncommitted.content.rowsOrder.forEach(function(id) { + // Enable the checkboxes for the uncommitted column + APP.enableRow(id, table); + $(table).find('.cp-app-poll-table-edit[data-rt-id="' + id + '"]').remove(); + $(table).find('.cp-app-poll-table-remove[data-rt-id="' + id + '"]').remove(); + + $(table).find('[data-rt-id="' + id + '"]').closest('tr') + .addClass("cp-app-poll-table-uncommitted"); + }); + }; + var unlockElements = function (table) { + APP.unlocked.row.forEach(function (id) { APP.enableRow(id, table); }); + APP.unlocked.col.forEach(function (id) { APP.enableColumn(id, table); }); + }; + var updateTableButtons = function (table) { + var uncomColId = APP.uncommitted.content.colsOrder[0]; + var uncomRowId = APP.uncommitted.content.rowsOrder[0]; + var $createOption = $(table).find('tbody input[data-rt-id="' + uncomRowId+'"]') + .closest('td').find('> div'); + $createOption.append(APP.$createRow); + var $createUser = $(table).find('thead input[data-rt-id="' + uncomColId + '"]') + .closest('td'); + $createUser.prepend(APP.$createCol); + + if (APP.proxy.content.colsOrder.indexOf(APP.userid) === -1) { + $(table).find('.cp-app-poll-table-bookmark').css('visibility', ''); + } + + if (!APP.proxy || + !APP.proxy.content.rowsOrder || + APP.proxy.content.rowsOrder.length === 0) { + } + }; + var addCount = function (table) { + var $tr = $(table).find('tbody tr').first(); + var winner = { + v: 0, + ids: [] + }; + APP.count = {}; + APP.proxy.content.rowsOrder.forEach(function (rId) { + var count = Object.keys(APP.proxy.content.cells) + .filter(function (k) { + return k.indexOf(rId) !== -1 && APP.proxy.content.cells[k] === 1; + }).length; + if (count > winner.v) { + winner.v = count; + winner.ids = [rId]; + } else if (count && count === winner.v) { + winner.ids.push(rId); + } + APP.count[rId] = count; + var h = $tr.height() || 28; + $(table).find('[data-rt-count-id="' + rId + '"]') + .text(count) + .css({ + 'height': h+'px', + 'line-height': h+'px' + }); + }); + winner.ids.forEach(function (rId) { + $(table).find('[data-rt-id="' + rId + '"]').closest('td') + .addClass('cp-app-poll-table-winner'); + $(table).find('[data-rt-count-id="' + rId + '"]') + .addClass('cp-app-poll-table-winner'); + }); + }; + + var styleTable = function (table) { + styleUserColumn(table); + styleUncommittedColumn(table); + unlockElements(table); + updateTableButtons(table); + addCount(table); + }; + Render.updateTable = function (table, obj, conf) { var DD = new DiffDOM(diffOptions); @@ -457,6 +565,9 @@ var Renderer = function (Cryptpad) { if (!hj) { throw new Error("Expected Hyperjson!"); } var table2 = Hyperjson.toDOM(hj); + + styleTable(table2); + var patch = DD.diff(table, table2); DD.apply(table, patch); };