Improved cursor position in Firefox

This commit is contained in:
Eduard Urbach 2019-08-31 11:11:11 +09:00
parent d8ae8dec82
commit 97bd5d80e1
Signed by: akyoto
GPG Key ID: C874F672B1AF20C0
3 changed files with 28 additions and 19 deletions

View File

@ -8,12 +8,12 @@ component AnimeList(animeListItems []*arn.AnimeListItem, nextIndex int, viewUser
component AnimeListScrollable(animeListItems []*arn.AnimeListItem, viewUser *arn.User, user *arn.User) component AnimeListScrollable(animeListItems []*arn.AnimeListItem, viewUser *arn.User, user *arn.User)
each item in animeListItems each item in animeListItems
.anime-list-item.mountable(title=item.Notes, data-api="/api/animelist/" + viewUser.ID + "/field/Items[AnimeID=\"" + item.AnimeID + "\"]", draggable="true") .anime-list-item.mountable(title=item.Notes, data-api="/api/animelist/" + viewUser.ID + "/field/Items[AnimeID=\"" + item.AnimeID + "\"]")
.anime-list-item-image-container .anime-list-item-image-container(draggable="true")
a.anime-list-item-image-link(href=item.Anime().Link()) a.anime-list-item-image-link(href=item.Anime().Link())
img.anime-list-item-image.lazy(data-src=item.Anime().ImageLink("small"), data-webp="true", data-color=item.Anime().AverageColor(), alt=item.Anime().Title.ByUser(user)) img.anime-list-item-image.lazy(data-src=item.Anime().ImageLink("small"), data-webp="true", data-color=item.Anime().AverageColor(), alt=item.Anime().Title.ByUser(user))
.anime-list-item-name .anime-list-item-name(draggable="true")
a(href=item.Link(viewUser.Nick))= item.Anime().Title.ByUser(user) a(href=item.Link(viewUser.Nick))= item.Anime().Title.ByUser(user)
.anime-list-item-actions .anime-list-item-actions
@ -40,5 +40,5 @@ component AnimeListScrollable(animeListItems []*arn.AnimeListItem, viewUser *arn
.anime-list-item-episodes-separator / .anime-list-item-episodes-separator /
.anime-list-item-episodes-max= item.Anime().EpisodeCountString() .anime-list-item-episodes-max= item.Anime().EpisodeCountString()
.anime-list-item-rating.tip(aria-label="O: " + utils.FormatRating(item.Rating.Overall) + " | S: " + utils.FormatRating(item.Rating.Story) + " | V: " + utils.FormatRating(item.Rating.Visuals) + " | M: " + utils.FormatRating(item.Rating.Soundtrack)) .anime-list-item-rating-container
.action(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Overall", data-type="number", data-trigger="focusout", data-action="save")= utils.FormatRating(item.Rating.Overall) .anime-list-item-rating.action.tip(contenteditable=utils.SameUser(user, viewUser), data-field="Rating.Overall", data-type="number", data-trigger="focusout", data-action="save", aria-label="O: " + utils.FormatRating(item.Rating.Overall) + " | S: " + utils.FormatRating(item.Rating.Story) + " | V: " + utils.FormatRating(item.Rating.Visuals) + " | M: " + utils.FormatRating(item.Rating.Soundtrack))= utils.FormatRating(item.Rating.Overall)

View File

@ -81,13 +81,18 @@
flex 0.3 flex 0.3
opacity 0.5 opacity 0.5
.anime-list-item-rating .anime-list-item-rating-container
horizontal horizontal
text-align right
justify-content flex-end justify-content flex-end
flex-basis 40px flex-basis 65px
flex-shrink 1 flex-shrink 1
margin-left 25px
.anime-list-item-rating
default-transition
:hover,
:focus
transform scale(1.5)
.anime-list-item-actions .anime-list-item-actions
display none !important display none !important

View File

@ -346,35 +346,39 @@ export default class AnimeNotifier {
dragAndDrop() { dragAndDrop() {
if(location.pathname.includes("/animelist/")) { if(location.pathname.includes("/animelist/")) {
for(let element of findAll("anime-list-item")) { for(let listItem of findAll("anime-list-item")) {
// Skip elements that have their event listeners attached already // Skip elements that have their event listeners attached already
if(element["drag-listeners-attached"]) { if(listItem["drag-listeners-attached"]) {
continue continue
} }
element.addEventListener("dragstart", evt => { let name = listItem.getElementsByClassName("anime-list-item-name")[0]
if(!element.draggable || !evt.dataTransfer) { let imageContainer = listItem.getElementsByClassName("anime-list-item-image-container")[0]
let onDrag = evt => {
if(!evt.dataTransfer) {
return return
} }
let image = element.getElementsByClassName("anime-list-item-image")[0] let image = imageContainer.getElementsByClassName("anime-list-item-image")[0]
if(image) { if(image) {
evt.dataTransfer.setDragImage(image, 0, 0) evt.dataTransfer.setDragImage(image, 0, 0)
} }
let name = element.getElementsByClassName("anime-list-item-name")[0]
evt.dataTransfer.setData("text/plain", JSON.stringify({ evt.dataTransfer.setData("text/plain", JSON.stringify({
api: element.dataset.api, api: listItem.dataset.api,
animeTitle: name.textContent animeTitle: name.textContent
})) }))
evt.dataTransfer.effectAllowed = "move" evt.dataTransfer.effectAllowed = "move"
}, false) }
name.addEventListener("dragstart", onDrag, false)
imageContainer.addEventListener("dragstart", onDrag, false)
// Prevent re-attaching the same listeners // Prevent re-attaching the same listeners
element["drag-listeners-attached"] = true listItem["drag-listeners-attached"] = true
} }
for(let element of findAll("tab")) { for(let element of findAll("tab")) {