diff --git a/src/scripts/messages.js b/src/scripts/messages.js index 468cafa8d..8852cc58a 100644 --- a/src/scripts/messages.js +++ b/src/scripts/messages.js @@ -30,58 +30,11 @@ /* * Code for the user messages portion of Yioop */ -document.addEventListener('DOMContentLoaded', function () { - // Query the element - const split_adjuster = document.getElementById('split-adjuster'); - if (!split_adjuster) { - return; - } - const direction = - document.getElementsByTagName('html')[0].getAttribute('dir'); - const direction_sign = (direction == 'rtl') ? -1 : 1; - const left_elt = split_adjuster.previousElementSibling; - const right_elt = split_adjuster.nextElementSibling; - // The current position of mouse - let x = 0; - let y = 0; - let left_width = 0; - const mouseDownHandler = function (e) { - x = e.clientX; - y = e.clientY; - left_width = left_elt.getBoundingClientRect().width; - document.addEventListener('mousemove', mouseMoveHandler); - document.addEventListener('mouseup', mouseUpHandler); - }; - const mouseMoveHandler = function (e) { - const dx = direction_sign*(e.clientX - x); - const dy = e.clientY - y; - const new_left_width = Math.max(((left_width + dx) * 100) / - split_adjuster.parentNode.getBoundingClientRect().width, 10); - left_elt.style.width = `${new_left_width}%`; - split_adjuster.style.cursor = 'col-resize'; - document.body.style.cursor = 'col-resize'; - left_elt.style.userSelect = 'none'; - left_elt.style.pointerEvents = 'none'; - right_elt.style.userSelect = 'none'; - right_elt.style.pointerEvents = 'none'; - }; - const mouseUpHandler = function () { - split_adjuster.style.removeProperty('cursor'); - document.body.style.removeProperty('cursor'); - left_elt.style.removeProperty('user-select'); - left_elt.style.removeProperty('pointer-events'); - right_elt.style.removeProperty('user-select'); - right_elt.style.removeProperty('pointer-events'); - document.removeEventListener('mousemove', mouseMoveHandler); - document.removeEventListener('mouseup', mouseUpHandler); - }; - split_adjuster.addEventListener('mousedown', mouseDownHandler); -}); function conversationUpdate() { let conversation_obj = elt('conversation'); - let conversation_time = - parseInt(conversation_obj.getAttribute('data-time')); + let conversation_time = (conversation_obj) ? + parseInt(conversation_obj.getAttribute('data-time')) : 0; getPage(null, start_url + conversation_time, function(text) { conversation_obj.style.backgroundColor = "#EEE"; let tmp_container = document.createElement("div"); diff --git a/src/scripts/wiki.js b/src/scripts/wiki.js index fe689fc01..bcf9aece9 100755 --- a/src/scripts/wiki.js +++ b/src/scripts/wiki.js @@ -851,3 +851,53 @@ function addToPage(resource_name, textarea_id, sub_path) resource_name.replace('"', '"'), textarea_id); } } +/* + * Set up event listeners to manage column splitter resizes when we have + * tabular output such as in media lists + */ + document.addEventListener('DOMContentLoaded', function () { + const direction = + document.getElementsByTagName('html')[0].getAttribute('dir'); + const direction_sign = (direction == 'rtl') ? -1 : 1; + let split_adjusters = document.getElementsByClassName('split-adjuster'); + // Query the element + for (const split_adjuster of split_adjusters) { + let left_elt = split_adjuster.previousElementSibling; + let right_elt = split_adjuster.nextElementSibling; + // The current position of mouse + let x = 0; + let y = 0; + let left_width = 0; + let mouseDownHandler = function (e) { + x = e.clientX; + y = e.clientY; + left_width = left_elt.getBoundingClientRect().width; + document.addEventListener('mousemove', mouseMoveHandler); + document.addEventListener('mouseup', mouseUpHandler); + }; + let mouseMoveHandler = function (e) { + const dx = direction_sign*(e.clientX - x); + const dy = e.clientY - y; + const new_left_width = Math.max(((left_width + dx) * 100) / + split_adjuster.parentNode.getBoundingClientRect().width, 10); + left_elt.style.width = `${new_left_width}%`; + split_adjuster.style.cursor = 'col-resize'; + document.body.style.cursor = 'col-resize'; + left_elt.style.userSelect = 'none'; + left_elt.style.pointerEvents = 'none'; + right_elt.style.userSelect = 'none'; + right_elt.style.pointerEvents = 'none'; + }; + let mouseUpHandler = function () { + split_adjuster.style.removeProperty('cursor'); + document.body.style.removeProperty('cursor'); + left_elt.style.removeProperty('user-select'); + left_elt.style.removeProperty('pointer-events'); + right_elt.style.removeProperty('user-select'); + right_elt.style.removeProperty('pointer-events'); + document.removeEventListener('mousemove', mouseMoveHandler); + document.removeEventListener('mouseup', mouseUpHandler); + }; + split_adjuster.addEventListener('mousedown', mouseDownHandler); + } + }); diff --git a/src/views/elements/WikiElement.php b/src/views/elements/WikiElement.php index f7977d665..f3770fd3e 100644 --- a/src/views/elements/WikiElement.php +++ b/src/views/elements/WikiElement.php @@ -1230,8 +1230,8 @@ class WikiElement extends Element implements CrawlConstants $written_name = $name; $use_editable_thumb = false; if (!empty($name_parts['extension'])) { - if (in_array($name_parts['extension'], ['txt', - 'csv', 'tex', 'php', 'sql', 'html', 'java', 'py', + if (in_array($name_parts['extension'], ['txt', 'css', + 'csv', 'tex', 'php', 'sql', 'html', 'java', 'js', 'py', 'pl', 'P', 'srt'])) { $use_editable_thumb = true; } elseif (in_array($name_parts['extension'], ['mov', @@ -1456,7 +1456,7 @@ class WikiElement extends Element implements CrawlConstants } } $thumb_class = ($is_a_default_thumb) ? ' class="default-thumb" ' : ""; - e("<$td_img class='resource-thumb'>". + e("<$td_img class='split-adjuster resource-thumb'>". "$num_files_indicator<a href='$current_url' $dbl_click >"); e("<img $style loading='lazy' $thumb_class src='" . $current_thumb . "' alt='$written_name' $animated_thumb_info >"); @@ -1466,7 +1466,8 @@ class WikiElement extends Element implements CrawlConstants "$written_name</a></$td>"); } else { // need tabindex to allow focus-within to work Safari - e("<$td class='resource-field' tabindex='0' ><input type='text' ". + e("<$td class='split-adjuster resource-field' tabindex='0' + ><input type='text' ". "id='resource-$i' aria-label='".tl('wiki_element_name')."' ". "value='".str_replace("'", "'", $name). "' $disabled ><br>"); @@ -1532,9 +1533,11 @@ class WikiElement extends Element implements CrawlConstants } e("</$td>"); if (!$_SERVER["MOBILE"]) { - e("<$td>" . L\intToMetric($resource['size']) . + e("<$td class='split-adjuster'>" . + L\intToMetric($resource['size']) . "B</$td>"); - e("<$td>" . date("r", $resource['modified']) . + e("<$td class='split-adjuster'>" . + date("r", $resource['modified']) . "</$td>"); } }