تحية طيبة. إليكم ترجمة لمقال "القضاء بلا رحمة على تغيير التخطيط على Netlify.com" الذي نشره المؤلف زاك ليثرمان في 25 نوفمبر 2020.
على موقع Netlify ، لدينا لافتة صغيرة تظهر في الجزء العلوي لتوجيه حركة المرور إلى أشياء جديدة ومثيرة للاهتمام تحدث في عالم Netlify.
يتكون هذا الشعار من جزأين:
ميزة HTML متقدمة يعرفها مطورو المدرسة القديمة فقط: الارتباط التشعبي.
( )
, :
. ⚠️⚠️⚠️ . JavaScript JavaScript .
JavaScript
localStorage
, , . - URL- , , . - .
, . , HTML ().
(, ) JavaScript 2 3 <body>
, :
? . . JavaScript , .
1, . JavaScript JavaScript .
JavaScript- : , , - .
Update: GitHub .
HTML CSS
opacity
, , JavaScript.
.banner--hide announcement-banner,
announcement-banner[hidden] {
display: none;
}
[data-banner-close] {
opacity: 0;
pointer-events: none;
}
.banner--show-close [data-banner-close] {
opacity: 1;
pointer-events: auto;
}
<announcement-banner>
<a href="https://www.netlify.com/sustainability/">Read about our Sustainability</a>
<button type="button" data-banner-close>Close</button>
</announcement-banner>
JavaScript
banner-helper.js
, <head>
:
// CTA , JSON
let ctaUrl = "https://www.netlify.com/sustainability/";
let savedCtaUrl = localStorage.getItem("banner--cta-url");
if(savedCtaUrl === ctaUrl) {
document.documentElement.classList.add("banner--hide");
}
banner.js
, ( - ):
class Banner extends HTMLElement {
connectedCallback() {
// , , ,
// -
// .
this.classList.add("banner--show-close");
let button = this.getButton();
if(button) {
button.addEventListener("click", () => {
this.savePreference();
this.close();
});
}
}
getButton() {
return this.querySelector("[data-banner-close]");
}
savePreference() {
let cta = this.querySelector("a[href]");
if(cta) {
let ctaUrl = cta.getAttribute("href");
localStorage.setItem("banner--cta-url", ctaUrl);
}
}
close() {
this.setAttribute("hidden", true);
}
}
window.customElements.define("announcement-banner", Banner);
, -, .
ونظرًا لأننا أدخلنا نص إعادة العرض في <head>
، عندما يخفي المستخدم الشعار وينتقل إلى صفحة جديدة ، فسيتم إخفاء الشعار أيضًا قبل العرض الأول.
جيد جدا لمثل هذه التغييرات الصغيرة!
سيكون الهدف التالي هو تحسين عرض خطوط الويب.