rewrite profile page javascript to be bundled, and avoid jquery

Author: haarg

lib/MetaCPAN/Middleware/Static.pm

@@ -54,6 +54,7 @@ sub wrap {
             js/cpan.js
             js/github.js
             js/dropdown.js
+            js/profile.js
             js/recaptcha.js
             js/search.js
             modules/bootstrap-v3.4.1/js/dropdown.js

lib/MetaCPAN/Web/Model/API/Author.pm

@@ -151,7 +151,7 @@ my $profile_data = {
     },
     hackerrank => {
         name       => 'HackerRank',
-        url_format => 'https://www.hackerrank.com/%s',
+        url_format => 'https://www.hackerrank.com/profile/%s',
     },
     hackthissite => {
         name       => 'HackThisSite',

lib/MetaCPAN/Web/Model/API/User.pm

@@ -62,7 +62,17 @@ sub update_profile {
 
 sub get_profile {
     my ( $self, $token ) = @_;
-    $self->request( '/user/profile', undef, { access_token => $token } );
+    $self->request( '/user/profile', undef, { access_token => $token } )
+        ->then( sub {
+        my $data = shift;
+        for my $field (qw(email website)) {
+            my $value = $data->{$field}
+                or next;
+            $data->{$field} = [$value]
+                if !ref $value;
+        }
+        return $data;
+        } );
 }
 
 sub add_favorite {

lib/MetaCPAN/Web/Test/HTML5/TreeBuilder.pm

@@ -55,6 +55,7 @@ sub start {
         local $HTML::TreeBuilder::isBodyElement{source}     = 1;
         local $HTML::TreeBuilder::isBodyElement{summary}    = 1;
         local $HTML::TreeBuilder::isBodyElement{svg}        = 1;
+        local $HTML::TreeBuilder::isBodyElement{template}   = 1;
         local $HTML::TreeBuilder::isBodyElement{time}       = 1;
         local $HTML::TreeBuilder::isBodyElement{track}      = 1;
         local $HTML::TreeBuilder::isBodyElement{video}      = 1;

root/account/profile.tx

@@ -0,0 +1,122 @@
+window.addEventListener('DOMContentLoaded', function() {
+
+if (!document.querySelector('.profile-form')) return;
+
+"use strict";
+
+function rewriteURL(link) {
+    const url = link.dataset.urlTemplate;
+    const input = link.parentNode.previousElementSibling;
+    link.href = url.replace('%s', input.value);
+    return true;
+}
+
+for (const check_url of document.querySelectorAll('.account-settings .check-url')) {
+    check_url.addEventListener('click', function(e) {
+        return rewriteURL(this);
+    });
+}
+
+function removeDiv(div) {
+    new Promise(resolve => {
+        div.addEventListener("animationend", resolve);
+        setTimeout(resolve, 400);
+    }).then(() => div.parentNode.removeChild(div));
+    div.classList.remove("slide-down");
+    div.classList.add("slide-up");
+}
+
+function removeField(e) {
+    e.preventDefault();
+    removeDiv(this.closest('.field-container'));
+}
+for (const remove_field of document.querySelectorAll('.account-settings .remove-field')) {
+    remove_field.addEventListener('click', removeField);
+}
+
+function removeProfile(e) {
+    e.preventDefault();
+    removeDiv(this.closest('.profile-container'));
+}
+
+for (const remove_profile of document.querySelectorAll('.account-settings .remove-profile')) {
+    remove_profile.addEventListener('click', removeProfile);
+}
+
+function addProfile(container, id, title, formatUrl) {
+    const profileNode = document.importNode(document.querySelector('#profile-tmpl').content, true);
+    profileNode.querySelector('.remove-profile').addEventListener('click', removeProfile);
+    if (id) {
+        profileNode.querySelector('div.form-group').classList.add('profile', 'profile-' + id);
+        profileNode.querySelector('.profile-title').innerText = title;
+        const profile_name = profileNode.querySelector('input[name="profile.name"]');
+        profile_name.value = id;
+        profile_name.type = 'hidden';
+        profileNode.querySelector('a.check-url').dataset.urlTemplate(formatUrl);
+
+        for (const check_url of profileNode.querySelectorAll(':scope .check-url')) {
+            check_url.addEventListener('click', function(e) {
+                return rewriteURL(this);
+            });
+        }
+    }
+    container.append(profileNode);
+}
+
+document.querySelector('.account-settings .add-profile').addEventListener('change', function(e) {
+    e.preventDefault();
+    const option = this.selectedOptions[0];
+    addProfile(
+        document.querySelector('#metacpan_profiles'),
+        this.value,
+        option.dataset.title,
+        option.dataset.urlFormat,
+    );
+    this.selectedIndex = 0;
+});
+
+function addField(container, id) {
+    const fieldNode = document.importNode(document.querySelector('template#field-tmpl').content, true);
+    fieldNode.querySelector('input').name = id;
+    fieldNode.querySelector('.remove-field').addEventListener('click', removeField);
+    container.append(fieldNode);
+}
+
+for (const btn of document.querySelectorAll('.account-settings button.add-field')) {
+    btn.addEventListener('click', function (e) {
+        e.preventDefault();
+        addField(this.closest('.field-container').parentNode, this.dataset.fieldType);
+    });
+}
+
+
+function validateJSON(input) {
+    try {
+        input.value && JSON.parse(input.value);
+        input.classList.remove('invalid');
+    } catch(err) {
+        input.classList.add('invalid');
+    }
+}
+
+const extra = document.querySelector('.account-settings textarea[name="extra"]')
+extra.addEventListener('keyup', function (e) {
+    validateJSON(this);
+});
+validateJSON(extra);
+
+function fillLocation() {
+    navigator.geolocation.getCurrentPosition((pos) => {
+        document.querySelector('input[name="latitude"]').value = pos.coords.latitude;
+        document.querySelector('input[name="longitude"]').value = pos.coords.longitude;
+    }, function(){
+    });
+    return false;
+}
+
+document.querySelector('.account-settings button.fill-location').addEventListener('click', function (e) {
+    e.preventDefault();
+    fillLocation();
+});
+
+});

root/static/js/profile.js

@@ -7,24 +7,11 @@
     td {
         padding: 5px;
     }
-    .valid {
-        background-color: #900;
-        padding: 5px;
-        float: right;
-        font-size: 1.2em;
-        color: #fff;
-        font-weight: bold;
-        display: none;
-    }
 
-    .invalid {
-        display: inline-block;
-    }
-    // To fix the author-pic float-right crap..
-    .form-horizontal {
-        .control-group:after {
-            clear: left;
-        }
+    textarea.invalid {
+        background:
+            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='18px' width='74px'><text text-anchor='end' x='74px' y='18' fill='white' font-size='18' font-weight='bold' font-family='&quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif'>invalid</text></svg>") bottom 0.2em right 0.2em/auto 1em no-repeat,
+            linear-gradient(to bottom right, rgba(153,0,0,0) 90%, rgb(153, 0, 0) 95%);
     }
 
     // to fix repeating fields like email etc
@@ -288,4 +275,10 @@
             float: none !important;
         }
     }
+
+}
+@media (min-width: 480px) {
+    .profile-form {
+        .form-horizontal;
+    }
 }

root/static/less/account.less

@@ -462,3 +462,26 @@ h1, .h1, h2, .h2, h3, .h3 {
 .page-content * {
     scroll-margin-top: 60px;
 }
+
+@keyframes slide-down {
+  0%   { grid-template-rows: 0fr }
+  100% { grid-template-rows: 1fr }
+}
+@keyframes slide-up {
+  0%   { grid-template-rows: 1fr }
+  100% { grid-template-rows: 0fr }
+}
+.slide-out {
+    display: grid;
+    grid-template-rows: 1fr;
+}
+.slide-out.slide-down {
+    animation: slide-down 0.4s;
+}
+.slide-out.slide-up {
+    animation: slide-up 0.4s;
+    grid-template-rows: 0fr;
+}
+.slide-out > div {
+    overflow: hidden;
+}