diff options
author | Yorhel <git@yorhel.nl> | 2022-06-19 12:10:57 +0200 |
---|---|---|
committer | Yorhel <git@yorhel.nl> | 2022-06-19 12:10:59 +0200 |
commit | 43ef1a26d68f2b5dbc8b5ac3cc30e27b7bf89ca3 (patch) | |
tree | 1afcf240ee23a43511bb944ba57f50d26ad76781 /elm | |
parent | 888c7d968f44e86ffe2808cef67ed7e0e6145ad3 (diff) |
Move & streamline VN release expanding settings
Problems with the old implementation were that the setting wasn't an
intentional user action, so there were a LOT of preference writes that
were reverted a minute or so later. Wasting both server and visitor
time. For regular visitors, the localstorage-based approach also caused
a reflow if their preferences didn't match the default.
Downside of the new implementation is that regular visitors can't change
their preference at all anymore, this now requires an account. :/
Diffstat (limited to 'elm')
-rw-r--r-- | elm/Lib/Html.elm | 6 | ||||
-rw-r--r-- | elm/User/Edit.elm | 14 | ||||
-rw-r--r-- | elm/remember-details.js | 39 |
3 files changed, 20 insertions, 39 deletions
diff --git a/elm/Lib/Html.elm b/elm/Lib/Html.elm index 08648d55..fdb98823 100644 --- a/elm/Lib/Html.elm +++ b/elm/Lib/Html.elm @@ -29,6 +29,12 @@ onInputValidation msg = custom "input" <| onInvalid : msg -> Attribute msg onInvalid msg = on "invalid" (JD.succeed msg) +onInputMultiple : (List String -> msg) -> Attribute msg +onInputMultiple msg = + let dec = JD.at [ "target", "selectedOptions" ] <| JD.keyValuePairs <| JD.maybe (JD.field "value" JD.string) + f lst = msg (List.filterMap Tuple.second lst) + in on "input" (JD.map f dec) + -- Multi-<br> (ugly but oh, so, convenient) br_ : Int -> Html m br_ n = if n == 1 then br [] [] else span [] <| List.repeat n <| br [] [] diff --git a/elm/User/Edit.elm b/elm/User/Edit.elm index f9b9f38c..447691c6 100644 --- a/elm/User/Edit.elm +++ b/elm/User/Edit.elm @@ -106,6 +106,9 @@ type PrefMsg | TagsCont Bool | TagsEro Bool | TagsTech Bool + | VNRelLangs (List String) + | VNRelOLang Bool + | VNRelMTL Bool | ProdRel Bool | Skin String | Css String @@ -207,6 +210,9 @@ updatePrefs msg model = TagsCont b -> { model | tags_cont = b } TagsEro b -> { model | tags_ero = b } TagsTech b -> { model | tags_tech = b } + VNRelLangs l->{ model | vnrel_langs = l } + VNRelOLang b->{ model | vnrel_olang = b } + VNRelMTL b -> { model | vnrel_mtl = b } ProdRel b -> { model | prodrelexpand = b } Skin n -> { model | skin = n } Css n -> { model | customcss = n } @@ -411,6 +417,14 @@ view model = , label [] [ inputCheck "" m.tags_ero (Prefs << TagsEro ), text " Sexual content" ], br_ 1 , label [] [ inputCheck "" m.tags_tech (Prefs << TagsTech), text " Technical" ] ] + , formField "Releases" + [ text "Expand releases for the following languages by default", br_ 1 + , select [ tabindex 10, multiple True, onInputMultiple (Prefs << VNRelLangs), style "height" "200px" ] + <| List.map (\(k,v) -> option [ value k, selected (List.member k m.vnrel_langs) ] [ text v ]) GT.languages + , br_ 1 + , label [] [ inputCheck "" m.vnrel_olang (Prefs << VNRelOLang), text " Always expand original language" ], br_ 1 + , label [] [ inputCheck "" m.vnrel_mtl (Prefs << VNRelMTL ), text " Expand machine translations" ] + ] , tr [ class "newpart" ] [ td [ colspan 2 ] [ text "Theme" ] ] , formField "skin::Skin" [ inputSelect "skin" m.skin (Prefs << Skin) [ style "width" "300px" ] GT.skins ] , formField "css::Custom CSS" [ inputTextArea "css" m.customcss (Prefs << Css) ([ rows 5, cols 60 ] ++ GUE.valPrefsCustomcss) ] diff --git a/elm/remember-details.js b/elm/remember-details.js deleted file mode 100644 index 9d06bd55..00000000 --- a/elm/remember-details.js +++ /dev/null @@ -1,39 +0,0 @@ -/* Simple script to remember the open/closed state of <details> elements. - * Usage: - * - * <details data-remember-id=".."> .. </details> - * - * This does have the downside of causing a DOM reflow if the elements' default - * state differs from the one stored by the user, and the preference is stored - * in the users' browser rather than their account, so it doesn't transfer. - */ -document.querySelectorAll('details[data-remember-id]').forEach(function(el) { - var sid = 'remember-details-'+el.getAttribute('data-remember-id'); - el.addEventListener('toggle', function() { - window.localStorage.setItem(sid, el.open ? '1' : ''); - }); - var val = window.localStorage.getItem(sid); - if(val != null) - el.open = val == '1' ? true : false; -}); - - -/* Alternative to the above, for users who are logged in. - * Usage: - * - * <details data-save-id=".."> .. </details> - * - * State changes will be saved with an AJAX call to /js/save-pref. - * Preferences are already assumed to be loaded by server-side code, so this - * approach does not cause a DOM reflow. - */ -document.querySelectorAll('details[data-save-id]').forEach(function(el) { - el.addEventListener('toggle', function() { - var xhr = new XMLHttpRequest(); - xhr.open('POST', '/js/save-pref'); - xhr.setRequestHeader('Content-Type', 'application/json'); - var obj = {}; - obj[el.getAttribute('data-save-id')] = el.open; - xhr.send(JSON.stringify(obj)); - }); -}); |