From 89127aa313da699225a7db9ba583b8c63a689537 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Sat, 25 Dec 2021 00:02:52 +0100 Subject: [PATCH 1/7] Add aliases for common module locations --- app/javascript/packs/application.ts | 6 +++--- .../retrospring/features/answerbox/index.ts | 4 ++-- .../retrospring/features/answerbox/share.ts | 2 +- app/javascript/retrospring/features/inbox/index.ts | 6 +++--- config/webpack/environment.js | 11 +++++++++++ tsconfig.json | 4 +++- 6 files changed, 23 insertions(+), 10 deletions(-) diff --git a/app/javascript/packs/application.ts b/app/javascript/packs/application.ts index 91272b03..a3359592 100644 --- a/app/javascript/packs/application.ts +++ b/app/javascript/packs/application.ts @@ -1,6 +1,6 @@ -import start from '../retrospring/common'; -import initAnswerbox from '../retrospring/features/answerbox/index'; -import initInbox from '../retrospring/features/inbox/index'; +import start from 'retrospring/common'; +import initAnswerbox from 'retrospring/features/answerbox/index'; +import initInbox from 'retrospring/features/inbox/index'; start(); document.addEventListener('turbolinks:load', initAnswerbox); diff --git a/app/javascript/retrospring/features/answerbox/index.ts b/app/javascript/retrospring/features/answerbox/index.ts index 45c8cd68..9f836842 100644 --- a/app/javascript/retrospring/features/answerbox/index.ts +++ b/app/javascript/retrospring/features/answerbox/index.ts @@ -1,5 +1,5 @@ -import registerEvents from "retrospring/utilities/registerEvents"; -import {createShareEvent} from "./share"; +import registerEvents from 'utilities/registerEvents'; +import { createShareEvent } from './share'; export default (): void => { if ('share' in navigator) { diff --git a/app/javascript/retrospring/features/answerbox/share.ts b/app/javascript/retrospring/features/answerbox/share.ts index 6d74815e..34c2ba54 100644 --- a/app/javascript/retrospring/features/answerbox/share.ts +++ b/app/javascript/retrospring/features/answerbox/share.ts @@ -1,4 +1,4 @@ -import noop from 'retrospring/utilities/noop'; +import noop from 'utilities/noop'; export function createShareEvent(answerbox: HTMLElement): () => void { return function (): void { diff --git a/app/javascript/retrospring/features/inbox/index.ts b/app/javascript/retrospring/features/inbox/index.ts index 4c4af9b3..65e0684b 100644 --- a/app/javascript/retrospring/features/inbox/index.ts +++ b/app/javascript/retrospring/features/inbox/index.ts @@ -1,12 +1,12 @@ -import registerEvents from "retrospring/utilities/registerEvents"; -import {reportEventHandler} from "./report"; +import registerEvents from 'utilities/registerEvents'; +import { reportEventHandler } from './report'; export default (): void => { const entries: NodeList = document.querySelectorAll('.inbox-entry:not(.js-initialized)'); entries.forEach((element: HTMLElement) => { registerEvents([ - {type: 'click', target: element.querySelector('[name=ib-report]'), handler: reportEventHandler} + { type: 'click', target: element.querySelector('[name=ib-report]'), handler: reportEventHandler } ]); element.classList.add('js-initialized'); diff --git a/config/webpack/environment.js b/config/webpack/environment.js index 89edc45f..7bf31a49 100644 --- a/config/webpack/environment.js +++ b/config/webpack/environment.js @@ -1,5 +1,16 @@ +const path = require('path') const { environment } = require('@rails/webpacker') const coffee = require('./loaders/coffee') environment.loaders.prepend('coffee', coffee) + +environment.config.merge({ + resolve: { + alias: { + retrospring: path.resolve(__dirname, '..', '..', 'app/javascript/retrospring'), + utilities: path.resolve(__dirname, '..', '..', 'app/javascript/retrospring/utilities') + } + } +}) + module.exports = environment diff --git a/tsconfig.json b/tsconfig.json index 4746f32a..fe957b80 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,7 +8,9 @@ "moduleResolution": "node", "baseUrl": ".", "paths": { - "*": ["node_modules/*", "app/javascript/*"] + "*": ["node_modules/*", "app/javascript/*"], + "retrospring/*": ["app/javascript/retrospring/*"], + "utilities/*": ["app/javascript/retrospring/utilities/*"] }, "sourceMap": true, "target": "es5", From 3b5e963da5875e014006fc7355ffb4822d5ed45c Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Sat, 25 Dec 2021 03:31:30 +0100 Subject: [PATCH 2/7] Add `$.on` vanilla JS substitute --- app/javascript/retrospring/utilities/on.ts | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 app/javascript/retrospring/utilities/on.ts diff --git a/app/javascript/retrospring/utilities/on.ts b/app/javascript/retrospring/utilities/on.ts new file mode 100644 index 00000000..1d7d5211 --- /dev/null +++ b/app/javascript/retrospring/utilities/on.ts @@ -0,0 +1,7 @@ +export function on(type: string, selector: string, callback: Function): void { + document.addEventListener(type, (event: Event) => { + if ((event.target as HTMLElement).matches(selector)) { + callback(event); + } + }); +}; \ No newline at end of file From cf8d6b088406eeff1265c6eeb94663907557968e Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Sat, 25 Dec 2021 03:33:09 +0100 Subject: [PATCH 3/7] Setup user features in TypeScript --- app/javascript/packs/application.ts | 4 +++- app/javascript/retrospring/features/user/index.ts | 8 ++++++++ 2 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 app/javascript/retrospring/features/user/index.ts diff --git a/app/javascript/packs/application.ts b/app/javascript/packs/application.ts index a3359592..edcdba3c 100644 --- a/app/javascript/packs/application.ts +++ b/app/javascript/packs/application.ts @@ -1,7 +1,9 @@ import start from 'retrospring/common'; import initAnswerbox from 'retrospring/features/answerbox/index'; import initInbox from 'retrospring/features/inbox/index'; +import initUser from 'retrospring/features/user'; start(); document.addEventListener('turbolinks:load', initAnswerbox); -document.addEventListener('turbolinks:load', initInbox); \ No newline at end of file +document.addEventListener('turbolinks:load', initInbox); +document.addEventListener('DOMContentLoaded', initUser); \ No newline at end of file diff --git a/app/javascript/retrospring/features/user/index.ts b/app/javascript/retrospring/features/user/index.ts new file mode 100644 index 00000000..c1a6bf9c --- /dev/null +++ b/app/javascript/retrospring/features/user/index.ts @@ -0,0 +1,8 @@ +import { userActionHandler } from './action'; +import { userReportHandler } from './report'; +import { on } from 'utilities/on'; + +export default (): void => { + on('click', 'button[name=user-action]', userActionHandler); + on('click', 'a[data-action=report-user]', userReportHandler); +} \ No newline at end of file From 2cc8a33d5b8bef450a93b6043f69ec4fc7b064d0 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Sat, 25 Dec 2021 03:33:33 +0100 Subject: [PATCH 4/7] Port (un)following from CoffeeScript to TypeScript --- .../retrospring/features/user/action.ts | 45 +++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 app/javascript/retrospring/features/user/action.ts diff --git a/app/javascript/retrospring/features/user/action.ts b/app/javascript/retrospring/features/user/action.ts new file mode 100644 index 00000000..0c72bcf4 --- /dev/null +++ b/app/javascript/retrospring/features/user/action.ts @@ -0,0 +1,45 @@ +import Rails from '@rails/ujs'; +import I18n from '../../../legacy/i18n'; + +export function userActionHandler(event: Event): void { + const button: HTMLButtonElement = event.target as HTMLButtonElement; + const target = button.dataset.target; + const action = button.dataset.action; + + let targetURL = action === 'follow' ? '/ajax/create_friend' : '/ajax/destroy_friend'; + let success = false; + + Rails.ajax({ + url: targetURL, + type: 'POST', + data: new URLSearchParams({ + screen_name: target + }).toString(), + success: (data) => { + success = data.success; + window['showNotification'](data.message, data.success); + }, + error: (data, status, xhr) => { + console.log(data, status, xhr); + window['showNotification'](I18n.translate('frontend.error.message'), false); + }, + complete: () => { + if (!success) return; + + switch (action) { + case 'follow': + button.dataset.action = 'unfollow'; + button.innerText = I18n.translate('views.actions.unfollow'); + button.classList.remove('btn-primary'); + button.classList.add('btn-default'); + break; + case 'unfollow': + button.dataset.action = 'follow'; + button.innerText = I18n.translate('views.actions.follow'); + button.classList.remove('btn-default'); + button.classList.add('btn-primary'); + break; + } + } + }); +} \ No newline at end of file From 1bc52786ade53190d73e84f35cad432ec4066488 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Sat, 25 Dec 2021 03:34:02 +0100 Subject: [PATCH 5/7] Port reporting users from CoffeeScript to TypeScript --- app/javascript/retrospring/features/user/report.ts | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 app/javascript/retrospring/features/user/report.ts diff --git a/app/javascript/retrospring/features/user/report.ts b/app/javascript/retrospring/features/user/report.ts new file mode 100644 index 00000000..b0b5193e --- /dev/null +++ b/app/javascript/retrospring/features/user/report.ts @@ -0,0 +1,6 @@ +export function userReportHandler(event: Event): void { + event.preventDefault(); + const button: HTMLButtonElement = event.target as HTMLButtonElement; + + window['reportDialog']('user', button.dataset.target); +} \ No newline at end of file From d27665471e8a47e8ce66aa4a27517bc2415d9c37 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Sat, 25 Dec 2021 03:34:24 +0100 Subject: [PATCH 6/7] Remove legacy user CoffeeScript --- app/javascript/legacy/user.coffee | 95 ------------------------------ app/javascript/packs/legacy.coffee | 1 - 2 files changed, 96 deletions(-) delete mode 100644 app/javascript/legacy/user.coffee diff --git a/app/javascript/legacy/user.coffee b/app/javascript/legacy/user.coffee deleted file mode 100644 index e2b07a99..00000000 --- a/app/javascript/legacy/user.coffee +++ /dev/null @@ -1,95 +0,0 @@ -$(document).on "click", "button[name=user-action]", -> - btn = $(this) - btn.button "loading" - type = btn[0].dataset.type - target = btn[0].dataset.target - action = btn[0].dataset.action - if type in ['follower', 'friend'] - count = Number $("h4.entry-text##{type}-count").html() - - target_url = switch action - when 'follow' - count++ - '/ajax/create_friend' - when 'unfollow' - count-- - '/ajax/destroy_friend' - - success = false - - $.ajax - url: target_url - type: 'POST' - data: - screen_name: target - success: (data, status, jqxhr) -> - success = data.success - if data.success - if type in ['follower', 'friend'] - $("h4.entry-text##{type}-count").html(count) - showNotification data.message, data.success - error: (jqxhr, status, error) -> - console.log jqxhr, status, error - showNotification translate('frontend.error.message'), false - complete: (jqxhr, status) -> - btn.button "reset" - if success - switch action - when 'follow' - btn[0].dataset.action = 'unfollow' - btn.attr 'class', 'btn btn-default btn-block profile--follow-btn' - btn.html translate('views.actions.unfollow') - when 'unfollow' - btn[0].dataset.action = 'follow' - btn.attr 'class', 'btn btn-primary btn-block profile--follow-btn' - btn.html translate('views.actions.follow') - - -# report user -$(document).on "click", "a[data-action=report-user]", (ev) -> - ev.preventDefault() - btn = $(this) - target = btn[0].dataset.target - reportDialog "user", target, -> btn.button "reset" - -# parallax -PARALLAX_PREFIX = null -if typeof document.documentElement.style.webkitTransform == "string" - PARALLAX_PREFIX = "webkit" -if typeof document.documentElement.style.mozTransform == "string" - PARALLAX_PREFIX = "moz" -if typeof document.documentElement.style.oTransform == "string" - PARALLAX_PREFIX = "o" -if typeof document.documentElement.style.msTransform == "string" - PARALLAX_PREFIX = "ms" -if typeof document.documentElement.style.khtmlTransform == "string" - PARALLAX_PREFIX = "khtml" -if typeof document.documentElement.style.transform == "string" - PARALLAX_PREFIX = "" - -HEADER_PARALLAX = null - -if PARALLAX_PREFIX? - PARALLAX_CSS = "transform" - if PARALLAX_PREFIX.length - PARALLAX_CSS = PARALLAX_PREFIX + PARALLAX_CSS.charAt(0).toUpperCase() + PARALLAX_CSS.slice(1) - - window.HEADER_PARALLAX_INERTIA = 0.4; - - HEADER_PARALLAX = -> - header = $("#profile--header:not(.profile--no-header) img")[0] - if header? - headerOffset = Math.max(window.pageYOffset, window.scrollY, document.documentElement.scrollTop) * HEADER_PARALLAX_INERTIA - header.style[PARALLAX_CSS] = "translate3d(0px, #{headerOffset}px, 0px)"; - return # coffee doesn't have !-> to prevent returning like LiveScript has, god I miss livescript ;-; - # also no := to set global variables :-( - # or var-iables = varIables :-(( - # or fun! = fun() :-((( - - $(window).on "scroll", (event) -> - HEADER_PARALLAX() - return - -$(document).ready -> - HEADER_PARALLAX() if HEADER_PARALLAX? - return diff --git a/app/javascript/packs/legacy.coffee b/app/javascript/packs/legacy.coffee index 505ed10f..14db464e 100644 --- a/app/javascript/packs/legacy.coffee +++ b/app/javascript/packs/legacy.coffee @@ -31,7 +31,6 @@ import '../legacy/notifications' import '../legacy/pagination' import '../legacy/question' import '../legacy/settings' -import '../legacy/user' import '../legacy/report' import '../legacy/locale-box' import '../legacy/util' From 8b583e103a9831b9a5a4b6ddfcd3fb09cd69c986 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Sat, 25 Dec 2021 04:05:03 +0100 Subject: [PATCH 7/7] Fix lint nits --- app/javascript/retrospring/features/user/action.ts | 2 +- app/javascript/retrospring/utilities/on.ts | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/app/javascript/retrospring/features/user/action.ts b/app/javascript/retrospring/features/user/action.ts index 0c72bcf4..55788562 100644 --- a/app/javascript/retrospring/features/user/action.ts +++ b/app/javascript/retrospring/features/user/action.ts @@ -6,7 +6,7 @@ export function userActionHandler(event: Event): void { const target = button.dataset.target; const action = button.dataset.action; - let targetURL = action === 'follow' ? '/ajax/create_friend' : '/ajax/destroy_friend'; + const targetURL = action === 'follow' ? '/ajax/create_friend' : '/ajax/destroy_friend'; let success = false; Rails.ajax({ diff --git a/app/javascript/retrospring/utilities/on.ts b/app/javascript/retrospring/utilities/on.ts index 1d7d5211..6f29accd 100644 --- a/app/javascript/retrospring/utilities/on.ts +++ b/app/javascript/retrospring/utilities/on.ts @@ -1,7 +1,9 @@ -export function on(type: string, selector: string, callback: Function): void { +type OnCallbackFunction = (event: Event) => void; + +export function on(type: string, selector: string, callback: OnCallbackFunction): void { document.addEventListener(type, (event: Event) => { if ((event.target as HTMLElement).matches(selector)) { callback(event); } }); -}; \ No newline at end of file +} \ No newline at end of file