Use time element

This commit is contained in:
Eduard Urbach 2021-11-23 21:57:43 +09:00
parent 74d8f46b08
commit ad3ac4d880
Signed by: akyoto
GPG Key ID: C874F672B1AF20C0
22 changed files with 54 additions and 50 deletions

View File

@ -10,6 +10,6 @@ component AMVFooter(amv *arn.AMV, user *arn.User)
else
a(href=amv.Link())= amv.Title.ByUser(user)
span posted
span.utc-date.no-tip(data-date=amv.Created)
time.utc-date.no-tip(datetime=amv.Created)
span by
a(href=amv.Creator().Link())= amv.Creator().Nick + " "
a(href=amv.Creator().Link())= amv.Creator().Nick + " "

View File

@ -17,7 +17,7 @@ component AnimeListScrollable(animeListItems []*arn.AnimeListItem, viewUser *arn
.anime-list-item-airing-date
if item.Status != arn.AnimeListStatusCompleted && item.Anime().UpcomingEpisode() != nil
span.utc-airing-date(data-start-date=item.Anime().UpcomingEpisode().Episode.AiringDate.Start, data-end-date=item.Anime().UpcomingEpisode().Episode.AiringDate.End, data-episode-number=item.Anime().UpcomingEpisode().Episode.Number)
time.utc-airing-date(datetime=item.Anime().UpcomingEpisode().Episode.AiringDate.Start, data-end-date=item.Anime().UpcomingEpisode().Episode.AiringDate.End, data-episode-number=item.Anime().UpcomingEpisode().Episode.Number)
if item.Status != arn.AnimeListStatusCompleted
.anime-list-item-episodes

View File

@ -34,7 +34,7 @@ component Postable(post arn.Postable, user *arn.User, includeReplies bool, showP
a.post-action.post-header-action.tip(href=post.Link(), aria-label="Link")
RawIcon("link")
.post-date.utc-date(data-date=post.GetCreated())
time.post-date.utc-date(datetime=post.GetCreated())
.post-content(id="render-" + post.GetID())!= post.HTML()

View File

@ -1,6 +1,6 @@
component QuoteFooter(quote *arn.Quote)
footer.quote-footer
span posted
span.utc-date.no-tip(data-date=quote.Created)
time.utc-date.no-tip(datetime=quote.Created)
span by
a(href=quote.Creator().Link())= quote.Creator().Nick
a(href=quote.Creator().Link())= quote.Creator().Nick

View File

@ -34,6 +34,6 @@ component SoundTrackFooter(track *arn.SoundTrack, user *arn.User)
else
a(href=track.Link())= track.Title.ByUser(user)
span posted
span.utc-date.no-tip(data-date=track.Created)
time.utc-date.no-tip(datetime=track.Created)
span by
a(href=track.Creator().Link())= track.Creator().Nick + " "

View File

@ -82,7 +82,7 @@ component ActivityConsumeAnime(activity *arn.ActivityConsumeAnime, user *arn.Use
.post-header-info
ActivityConsumeAnimeTitle(activity, user)
.post-date.utc-date(data-date=activity.GetCreated())
time.post-date.utc-date(datetime=activity.GetCreated())
.post-content
ActivityConsumeAnimeText(activity, user)

View File

@ -11,7 +11,8 @@ component ClientErrors(reports []*arn.ClientErrorReport)
td
each line in strings.Split(report.Stack, "\n")
p= line
td.utc-date(data-date=report.Created)
td
time.utc-date(datetime=report.Created)
td.edit-log-user
if report.CreatedBy != ""
Avatar(report.Creator())

View File

@ -12,7 +12,8 @@ component Crashes(crashes []*arn.Crash)
td
each line in strings.Split(crash.Stack, "\n")
p= line
td.utc-date(data-date=crash.Created)
td
time.utc-date(datetime=crash.Created)
td.edit-log-user
if crash.CreatedBy != ""
Avatar(crash.Creator())

View File

@ -17,4 +17,5 @@ component GlobalPaymentHistory(payments []*arn.PayPalPayment)
a(href=payment.User().Link())= payment.User().Nick
td.history-price= payment.Amount
td.history-price= payment.Currency
td.history-date.utc-date(data-date=payment.Created)
td.history-date
time.utc-date(datetime=payment.Created)

View File

@ -21,7 +21,7 @@ component AnimeEpisodes(anime *arn.Anime, episodes []*arn.Episode, episodeToFrie
span.episode-title -
if validate.DateTime(episode.AiringDate.Start)
.episode-airing-date-start.utc-airing-date.no-tip(data-start-date=episode.AiringDate.Start, data-end-date=episode.AiringDate.End, data-episode-number=episode.Number)= episode.AiringDate.StartDateHuman()
time.episode-airing-date-start.utc-airing-date.no-tip(datetime=episode.AiringDate.Start, data-end-date=episode.AiringDate.End, data-episode-number=episode.Number)= episode.AiringDate.StartDateHuman()
//- Show friends in reverse order
.episode-friends

View File

@ -36,5 +36,5 @@ component CalendarView(day *utils.CalendarDay, entry *utils.CalendarEntry, user
.calendar-entry-info
.calendar-entry-title= entry.Anime.Title.ByUser(user)
.calendar-entry-time-and-episode
.calendar-entry-time.utc-date-absolute(data-date=entry.Episode.AiringDate.Start)
.calendar-entry-episode= "Ep: " + strconv.Itoa(entry.Episode.Number)
time.calendar-entry-time.utc-date-absolute(datetime=entry.Episode.AiringDate.Start)
.calendar-entry-episode= "Ep: " + strconv.Itoa(entry.Episode.Number)

View File

@ -89,4 +89,4 @@ component EditLogScrollable(entries []*arn.EditLogEntry, user *arn.User)
else
span.clip-long-text= entry.NewValue
.edit-log-date.utc-date(data-date=entry.Created)
time.edit-log-date.utc-date(datetime=entry.Created)

View File

@ -35,7 +35,7 @@ component Episode(anime *arn.Anime, episode *arn.Episode, episodeIndex int, uplo
if validate.DateTime(episode.AiringDate.Start)
p.episode-view-airing-date
span.utc-airing-date(data-start-date=episode.AiringDate.Start, data-end-date=episode.AiringDate.End, data-episode-number=episode.Number)= episode.AiringDate.StartDateHuman()
time.utc-airing-date(datetime=episode.AiringDate.Start, data-end-date=episode.AiringDate.End, data-episode-number=episode.Number)= episode.AiringDate.StartDateHuman()
footer.footer
p Make sure to support the anime you're watching by buying officially released Blu-rays and merchandise.
p Make sure to support the anime you're watching by buying officially released Blu-rays and merchandise.

View File

@ -33,8 +33,8 @@ component Notification(notification *arn.Notification)
footer.notification-footer
p.notification-text= notification.Message
.notification-date.utc-date(data-date=notification.Created)
time.notification-date.utc-date(datetime=notification.Created)
if notification.Seen != ""
.notification-seen
RawIcon("check")
RawIcon("check")

View File

@ -20,12 +20,12 @@ component QuoteMainColumn(quote *arn.Quote, user *arn.User)
footer.footer.mountable
if quote.EditedBy != ""
span Edited
span.utc-date(data-date=quote.Edited)
time.utc-date(datetime=quote.Edited)
span by
a(href=quote.Editor().Link())= quote.Editor().Nick
else
span Posted
span.utc-date(data-date=quote.Created)
time.utc-date(datetime=quote.Created)
span by
a(href=quote.Creator().Link())= quote.Creator().Nick
span .
@ -40,4 +40,4 @@ component QuoteTabs(quote *arn.Quote, user *arn.User)
component QuoteAnime(anime *arn.Anime, user *arn.User)
a.quote-anime-list-item(href=anime.Link(), title=anime.Title.ByUser(user))
img.quote-anime-list-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user))
img.quote-anime-list-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user))

View File

@ -62,7 +62,7 @@ component SettingsExtras(user *arn.User)
.widget-section
label
span Your PRO account expires in
span.utc-date(data-date=user.ProExpires)
time.utc-date(datetime=user.ProExpires)
span .
a.button(href="/shop")
Icon("star")
@ -72,4 +72,4 @@ component SettingsExtras(user *arn.User)
label Would you like to make this website more awesome?
a.button(href="/support")
Icon("star")
span Go PRO
span Go PRO

View File

@ -25,4 +25,5 @@ component PurchaseInfo(purchase *arn.Purchase)
td= purchase.Item().Name
td.history-quantity= purchase.Quantity
td.history-price= purchase.Price
td.history-date.utc-date(data-date=purchase.Date)
td.history-date
time.utc-date(datetime=purchase.Date)

View File

@ -59,12 +59,12 @@ component SoundTrackPage(track *arn.SoundTrack, relatedTracks []*arn.SoundTrack,
footer.footer.mountable
if track.EditedBy != ""
span Edited
span.utc-date(data-date=track.Edited)
time.utc-date(datetime=track.Edited)
span by
span= track.Editor().Nick
else
span Posted
span.utc-date(data-date=track.Created)
time.utc-date(datetime=track.Created)
span by
span= track.Creator().Nick

View File

@ -59,13 +59,13 @@ function getRemainingTime(remaining: number): string {
return "Just now"
}
export function displayAiringDate(element: HTMLElement, now: Date) {
if(!element.dataset.startDate || !element.dataset.endDate) {
export function displayAiringDate(element: HTMLTimeElement, now: Date) {
if(!element.dateTime || !element.dataset.endDate) {
element.textContent = ""
return
}
const startDate = new Date(element.dataset.startDate)
const startDate = new Date(element.dateTime)
const endDate = new Date(element.dataset.endDate)
let h = startDate.getHours()
@ -102,13 +102,13 @@ export function displayAiringDate(element: HTMLElement, now: Date) {
}
}
export function displayDate(element: HTMLElement, now: Date) {
if(!element.dataset.date) {
export function displayDate(element: HTMLTimeElement, now: Date) {
if(!element.dateTime) {
element.textContent = ""
return
}
const startDate = new Date(element.dataset.date)
const startDate = new Date(element.dateTime)
const h = startDate.getHours()
const m = startDate.getMinutes()
@ -133,13 +133,13 @@ export function displayDate(element: HTMLElement, now: Date) {
}
}
export function displayTime(element: HTMLElement) {
if(!element.dataset.date) {
export function displayTime(element: HTMLTimeElement) {
if(!element.dateTime) {
element.textContent = ""
return
}
const startDate = new Date(element.dataset.date)
const startDate = new Date(element.dateTime)
const h = startDate.getHours()
const m = startDate.getMinutes()

View File

@ -17,13 +17,16 @@ export default class Diff {
static mutations: MutationQueue = new MutationQueue()
// innerHTML will diff the element with the given HTML string and apply DOM mutations.
static innerHTML(aRoot: HTMLElement, html: string): Promise<void> {
static innerHTML(aRoot: HTMLElement, html: string) {
const container = document.createElement("main")
container.innerHTML = html
return new Promise((resolve, _) => {
Diff.childNodes(aRoot, container)
this.mutations.wait(resolve)
this.mutations.wait(() => {
resolve(null)
})
})
}
@ -34,7 +37,10 @@ export default class Diff {
rootContainer.innerHTML = html.replace("<!DOCTYPE html>", "")
Diff.childNodes(aRoot.getElementsByTagName("body")[0], rootContainer.getElementsByTagName("body")[0])
this.mutations.wait(resolve)
this.mutations.wait(() => {
resolve(null)
})
})
}
@ -82,9 +88,7 @@ export default class Diff {
const removeAttributes: Attr[] = []
for(let x = 0; x < elemA.attributes.length; x++) {
const attrib = elemA.attributes[x]
for(const attrib of elemA.attributes) {
if(attrib.specified) {
if(!elemB.hasAttribute(attrib.name) && !Diff.persistentAttributes.has(attrib.name)) {
removeAttributes.push(attrib)
@ -98,9 +102,7 @@ export default class Diff {
}
})
for(let x = 0; x < elemB.attributes.length; x++) {
const attrib = elemB.attributes[x]
for(const attrib of elemB.attributes) {
if(!attrib.specified) {
continue
}

View File

@ -39,10 +39,10 @@ export default class MutationQueue {
}
private mutateAll() {
const start = performance.now()
const start = Date.now()
for(let i = 0; i < this.mutations.length; i++) {
if(performance.now() - start > timeCapacity) {
if(Date.now() - start > timeCapacity) {
this.mutations = this.mutations.slice(i)
window.requestAnimationFrame(() => this.mutateAll())
return

View File

@ -2,6 +2,4 @@ mixin media-footer
text-align center
margin-top 0.4rem
font-size 0.9em
span
color hsla(text-color-h, text-color-s, text-color-l, 0.65)
color hsla(text-color-h, text-color-s, text-color-l, 0.65)