livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2024-12-26 17:33:44 +08:00
Code Issues Projects Releases Packages Wiki Activity

Improve section links behaviour (#367)

Browse source 
* Limit the impact of section html id changing

* Make sure section links scroll to section after loading finishes
This commit is contained in:
Jonatan Kłosko 2021-06-18 13:21:48 +02:00 committed by GitHub
parent 516f208d23
commit 56c087e79a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
assets/js/session/index.js
View file

@ -472,6 +472,14 @@ function focusCellFromUrl(hook) {
if (getCellById(cellId)) {
setFocusedCell(hook, cellId);
}
} else {
// Explicitly scroll to the target element
// after the loading finishes
const htmlId = hash.replace(/^#/, "");
const element = document.getElementById(htmlId);
if (element) {
element.scrollIntoView();
}
}
}

3
lib/livebook_web/live/session_live/section_component.ex
View file

@ -4,13 +4,12 @@ defmodule LivebookWeb.SessionLive.SectionComponent do
def render(assigns) do
~L"""
<div
id="<%= @section_view.html_id %>"
data-element="section"
data-section-id="<%= @section_view.id %>">
<div class="flex space-x-4 items-center" data-element="section-headline">
<h2 class="flex-grow text-gray-800 font-semibold text-2xl px-1 -ml-1 rounded-lg border border-transparent hover:border-blue-200 focus:border-blue-300"
data-element="section-name"
id="section-<%= @section_view.id %>-name"
id="<%= @section_view.html_id %>"
contenteditable
spellcheck="false"
phx-blur="set_section_name"