studio-engine 0.97.0 → 0.98.0.rc1

data/app/views/studio/profiles/_birthday_picker_script.html.erb

@@ -1,146 +0,0 @@
-<%# The birthday field's Alpine component.
-
-    Supplies exactly what studio/fields/_date_of_birth binds to — month, day,
-    year, months, dayOptions, years, onMonthChange() — plus the one thing the
-    profile page needs on top: it writes the assembled ISO date into the
-    enclosing studioProfileForm's `fields.birthday`, which is what raises the
-    save bar.
-
-    THIS REPLACED A CALENDAR POPOVER, and the replacement is the point. That
-    component shipped four defects in three days:
-
-      · its day grid used `grid-cols-7`, which exists in NO consumer bundle, so
-        the seven weekday letters stacked into one column and the popover grew to
-        the height of the page;
-      · a flipped popover positioned itself from a hardcoded 340px height when
-        the real popover is ~245px, landing ~95px too high;
-      · place() ran on every scroll and RE-DECIDED the side, so it snapped
-        between above and below mid-scroll — a 254px jump between two 60px steps;
-      · and it came back OPEN after a browser Back.
-
-    Three selects have none of those failure modes. There is no position, no
-    flip, no popover, and no scroll listener — so there is nothing to place
-    wrongly, nothing to re-decide, and nothing to restore open.
-%>
-<script>
-  window.studioBirthdayFields = function (initial) {
-    var parts = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(initial || ""));
-
-    return {
-      year:  parts ? String(+parts[1]) : "",
-      month: parts ? String(+parts[2]) : "",
-      day:   parts ? String(+parts[3]) : "",
-
-      months: [
-        { n: 1, label: "January" },   { n: 2, label: "February" },
-        { n: 3, label: "March" },     { n: 4, label: "April" },
-        { n: 5, label: "May" },       { n: 6, label: "June" },
-        { n: 7, label: "July" },      { n: 8, label: "August" },
-        { n: 9, label: "September" }, { n: 10, label: "October" },
-        { n: 11, label: "November" }, { n: 12, label: "December" }
-      ],
-
-      // Oldest year offered. 120 covers every living person with room to spare;
-      // the newest is THIS year, because a birthday cannot be in the future and
-      // the cheapest way to say so is not to offer one.
-      get years() {
-        var now = new Date().getFullYear();
-        var out = [];
-        for (var y = now; y >= now - 120; y--) out.push(y);
-        return out;
-      },
-
-      // The days that exist in the chosen month — 30 in April, and 29 in a
-      // February only when the chosen year is a leap year. Day 0 of the NEXT
-      // month is the last day of this one, which is the standard trick and
-      // handles the leap rule without one being written down.
-      get dayOptions() {
-        var m = parseInt(this.month, 10);
-        var y = parseInt(this.year, 10) || 2000; // a leap year, so Feb offers 29 before a year is picked
-        if (!m) return Array.from({ length: 31 }, function (_, i) { return i + 1; });
-
-        var count = new Date(y, m, 0).getDate();
-        return Array.from({ length: count }, function (_, i) { return i + 1; });
-      },
-
-      get complete() {
-        return !!(this.year && this.month && this.day);
-      },
-
-      get isoValue() {
-        if (!this.complete) return "";
-        return this.year + "-" +
-          String(this.month).padStart(2, "0") + "-" +
-          String(this.day).padStart(2, "0");
-      },
-
-      // Named to match what the shared field binds to. Clears a day that the new
-      // month or year does not have — pick 31 January then switch to February and
-      // the 31st stops existing — then publishes.
-      onMonthChange() {
-        if (this.day && parseInt(this.day, 10) > this.dayOptions.length) this.day = "";
-        this.publish();
-      },
-
-      // WHAT THE DIRTY CHECK IS SHOWN, and why it is not isoValue.
-      //
-      // isoValue is "" for EVERY incomplete date, so publishing it made a whole
-      // class of edit invisible: on an empty birthday, choosing a month wrote ""
-      // over "" and the save bar never appeared. The operator reported exactly
-      // that. Choosing a month IS a change — the form just had no way to see it.
-      //
-      // So the signal is the three parts, which differ whenever any one of them
-      // does. It stays equal to isoValue for a COMPLETE date (same string, same
-      // shape) so a finished edit compares correctly against the value the page
-      // loaded with, and Discard restores it to that same string.
-      //
-      // `fields` belongs to the enclosing studioProfileForm — Alpine's scope
-      // chain makes it reachable and it is the SAME object, so assigning through
-      // it is what raises the save bar.
-      // THE EMPTY CASE IS NOT A PARTIAL ONE, and conflating them makes the page
-      // arrive already dirty. studioProfileForm's initial.birthday is "" for a
-      // person with no birthday on file, so an untouched empty field must also
-      // read "" — joining three blanks gives "--", which compares as a change and
-      // would raise the save bar on load, before anyone touched anything.
-      get signature() {
-        if (this.complete) return this.isoValue;
-        if (!this.year && !this.month && !this.day) return "";
-        return [this.year, this.month, this.day].join("-");
-      },
-
-      publish() {
-        if (this.fields) this.fields.birthday = this.signature;
-      },
-
-      // DISCARD MUST REACH THE SELECTS. studioProfileForm#discard reassigns its
-      // `fields` object, which restores every input bound with x-model — and the
-      // three selects are not, because they are bound to THIS component's own
-      // month/day/year. So Discard used to leave them showing the abandoned edit
-      // while the bar disappeared, and the hidden input went on carrying it: the
-      // next save would write the change the user had just discarded.
-      //
-      // Watching `fields.birthday` is what joins them. Discard sets it back to
-      // the initial string, this fires, and the selects follow — and because the
-      // guard below returns early when the value already matches, the publish →
-      // watch → publish path cannot loop.
-      init() {
-        var self = this;
-        this.publish();
-        this.$watch("fields.birthday", function (value) {
-          if (value === self.signature) return;
-          self.adopt(value);
-        });
-      },
-
-      // Takes an ISO date (or a blank) and puts the selects on it. Anything that
-      // is not a full date empties all three, which is what an initial blank and
-      // a cleared birthday both mean.
-      adopt(value) {
-        var m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(value || ""));
-        this.year  = m ? String(+m[1]) : "";
-        this.month = m ? String(+m[2]) : "";
-        this.day   = m ? String(+m[3]) : "";
-      }
-    };
-  };
-</script>

data/app/views/studio/profiles/_form_script.html.erb

@@ -1,65 +0,0 @@
-<%# The edit form's Alpine component.
-
-    Its own partial so the page above stays readable and this can be reasoned
-    about as behaviour rather than markup.
-%>
-<script>
-  window.studioProfileForm = function (initial) {
-    return {
-      alpine: true,
-      fields: Object.assign({}, initial),
-      initial: Object.assign({}, initial),
-
-      // Trimmed on both sides: whitespace is not a change, and the controller
-      // trims on the way in too — so the bar agrees with what saving would do.
-      changed(key) {
-        return String(this.fields[key] || "").trim() !== String(this.initial[key] || "").trim();
-      },
-
-      get changeCount() {
-        var self = this;
-        return Object.keys(this.fields).filter(function (k) { return self.changed(k); }).length;
-      },
-
-      get dirty() { return this.changeCount > 0; },
-
-      discard() {
-        this.fields = Object.assign({}, this.initial);
-      },
-
-      init() {
-        var self = this;
-
-        // Guard the exit BOTH ways. beforeunload covers a hard navigation or a
-        // closed tab; turbo:before-visit covers a Turbo Drive visit, which never
-        // fires beforeunload — an app with Turbo on would otherwise drop edits
-        // silently on any in-app link.
-        this._beforeUnload = function (e) {
-          if (!self.dirty) return;
-          e.preventDefault();
-          e.returnValue = "";
-        };
-        window.addEventListener("beforeunload", this._beforeUnload);
-
-        this._beforeVisit = function (e) {
-          if (!self.dirty) return;
-          if (!window.confirm("You have unsaved changes. Leave without saving?")) {
-            e.preventDefault();
-          }
-        };
-        document.addEventListener("turbo:before-visit", this._beforeVisit);
-
-        // Submitting is not leaving. Drop both guards before the form goes, or
-        // saving prompts you about the very changes you just chose to save.
-        this.$refs.form.addEventListener("submit", function () { self.teardown(); });
-      },
-
-      teardown() {
-        window.removeEventListener("beforeunload", this._beforeUnload);
-        document.removeEventListener("turbo:before-visit", this._beforeVisit);
-      },
-
-      destroy() { this.teardown(); }
-    };
-  };
-</script>