admin/mymovies
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use native Lampa card classes (card__img/card__title/card__age); fix framework contract create(body)+render() without double-render

Browse Source
This commit is contained in:
Hermes committed 2026-08-08 13:32:28 +02:00
1 parent a9c4e7d317
commit ced0d67c87
1 file changed
+35 -40
Download Patch File Download Diff File Expand all files Collapse all files
plugin.js
+35 -40
View File
@@ -42,21 +42,41 @@
}
}
// Inject plugin styles (only the grid layout; cards use native Lampa classes)
function injectStyles() {
if (window.__mymovies_css_injected) return;
window.__mymovies_css_injected = true;
var css = '' +
'.mymovies{padding:2.2em 3.4em;overflow-y:auto;height:100%;box-sizing:border-box}' +
'.movies-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1.4em}' +
'.mymovies-detail{padding:3em;max-width:900px}' +
'.detail-head{display:flex;gap:2em;flex-wrap:wrap}' +
'.detail-poster{width:220px;border-radius:10px}' +
'.detail-info h1{margin:0 0 .4em;font-size:1.8em}' +
'.detail-info>div{margin:.3em 0;opacity:.85}' +
'.detail-actions{margin-top:1.5em}' +
'.mymovies-empty{padding:2em;opacity:.6;font-size:1.2em}';
$('<style>').text(css).appendTo('body');
}
// ---------- Component: movie list ----------
// Framework contract (ActivitySlide.create):
// component.create(body) -> store the activity body
// body.append(component.render(true)) -> render() returns a DOM node
function MyMovies() {
var comp = this;
var body;
this.create = function () {
return comp.render();
this.create = function (b) {
body = b;
};
// Framework (ActivitySlide.start) calls component.start() after the
// activity is ready. Refresh the selector so focus lands on a card.
this.start = function () {
if (Lampa.Selector) Lampa.Selector.update();
};
this.render = function () {
injectStyles();
var html = document.createElement('div');
html.className = 'mymovies';
var grid = document.createElement('div');
@@ -65,22 +85,17 @@
if (comp.activity) comp.activity.loader(true);
injectStyles();
loadCatalog(function (err, data) {
if (comp.activity) comp.activity.loader(false);
if (err) {
console.error('[mymovies] catalog error', err);
grid.innerHTML = '<div class="mymovies-empty">Catalog load error</div>';
Lampa.Layer.update(html);
Lampa.Layer.visible(html);
if (Lampa.Selector) Lampa.Selector.update();
return;
}
var movies = (data && data.movies) || [];
console.log('[mymovies] loaded', movies.length, 'films');
renderMovies($(grid), movies);
Lampa.Layer.update(html);
Lampa.Layer.visible(html);
});
return html;
@@ -96,48 +111,29 @@
return;
}
movies.forEach(function (m) {
var card = $('<div class="card selector movie-card" data-id="' + esc(m.id) + '">');
card.append($('<img class="card__poster">').attr('src', resolve(m.poster || m.cover)).attr('loading', 'lazy'));
// LAMPA NATIVE card classes so the grid/style matches the app
var card = $('<div class="card selector" data-id="' + esc(m.id) + '">');
var view = $('<div class="card__view">');
view.append($('<img class="card__img">').attr('src', resolve(m.poster || m.cover)).attr('loading', 'lazy'));
card.append(view);
card.append($('<div class="card__title">').text(m.title || m.id));
if (m.year) card.append($('<div class="card__subtitle">').text(m.year));
if (m.year) card.append($('<div class="card__age">').text(m.year));
card.on('hover:enter', function () { openMovie(m); });
grid.append(card);
});
if (Lampa.Selector) Lampa.Selector.update();
}
// Inject plugin styles so the grid looks like native Lampa movie cards
function injectStyles() {
if (window.__mymovies_css_injected) return;
window.__mymovies_css_injected = true;
var css = '' +
'.mymovies{padding:2.2em 3.4em;overflow-y:auto;height:100%;box-sizing:border-box}' +
'.movies-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1.4em}' +
'.movie-card{background:#1c1f26;border-radius:10px;overflow:hidden;cursor:pointer;transition:transform .15s}' +
'.movie-card .card__poster{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;background:#2a2e38}' +
'.movie-card .card__title{padding:.6em .7em .2em;font-size:1em;line-height:1.2;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}' +
'.movie-card .card__subtitle{padding:0 .7em .6em;font-size:.85em;opacity:.6}' +
'.movie-card.focus,.movie-card.hover{transform:scale(1.05)}' +
'.mymovies-detail{padding:3em;max-width:900px}' +
'.detail-head{display:flex;gap:2em}' +
'.detail-poster{width:220px;border-radius:10px}' +
'.detail-info h1{margin:0 0 .4em;font-size:1.8em}' +
'.detail-info>div{margin:.3em 0;opacity:.85}' +
'.detail-actions{margin-top:1.5em}' +
'.mymovies-empty{padding:2em;opacity:.6;font-size:1.2em}';
$('<style>').text(css).appendTo('body');
}
// ---------- Component: movie detail ----------
var selected = null;
function MyMoviesDetail() {
var comp = this;
var body;
this.create = function () {
return comp.render();
this.create = function (b) {
body = b;
};
// Framework (ActivitySlide.start) calls component.start().
this.start = function () {
if (Lampa.Selector) Lampa.Selector.update();
};
@@ -146,6 +142,7 @@
var m = selected;
if (!m) { Lampa.Activity.back(); return document.createElement('div'); }
injectStyles();
var html = document.createElement('div');
html.className = 'mymovies-detail';
var head = document.createElement('div');
@@ -176,8 +173,6 @@
html.appendChild(actions);
$(btn).on('hover:enter', function () { play(m); });
Lampa.Layer.update(html);
Lampa.Layer.visible(html);
return html;
};
}