Layouts and languages

<div class="demo">
  <div class="demo-row">
    <div class="demo-seg" id="layout">
      <button class="is-on" data-layout="box">Box</button>
      <button data-layout="bar">Bar</button>
      <button data-layout="center">Centre</button>
    </div>
    <div class="demo-seg" id="lang">
      <button class="is-on" data-lang="en">English</button>
      <button data-lang="ar">العربية</button>
      <button data-lang="ur">اردو</button>
    </div>
  </div>
  <p class="demo-hint">The notice below is live — the buttons rebuild it.</p>
</div>

import { createCookieConsent } from 'https://www.devix.pk/cdn/oss/cookie-consent@1.0.0/index.js';

const CATEGORIES = [
  { id: 'necessary', label: { en: 'Strictly necessary', ar: 'ضرورية', ur: 'لازمی' }, required: true },
  { id: 'analytics', label: { en: 'Analytics', ar: 'التحليلات', ur: 'تجزیات' }, description: { en: 'How the site is used.', ar: 'كيفية استخدام الموقع.', ur: 'سائٹ کیسے استعمال ہوتی ہے۔' } },
  { id: 'marketing', label: { en: 'Marketing', ar: 'التسويق', ur: 'مارکیٹنگ' } },
];

const TRANSLATIONS = {
  ar: { title: 'ملفات الارتباط', description: 'نستخدم ملفات الارتباط لتشغيل الموقع، وبموافقتك، لمعرفة كيفية استخدامه.', acceptAll: 'قبول الكل', rejectAll: 'رفض الكل', manage: 'اختيار', preferencesTitle: 'اختياراتك', save: 'حفظ الاختيارات' },
  ur: { title: 'کوکیز', description: 'ہم سائٹ چلانے کے لیے کوکیز استعمال کرتے ہیں، اور آپ کی اجازت سے یہ دیکھنے کے لیے کہ یہ کیسے استعمال ہوتی ہے۔', acceptAll: 'سب قبول کریں', rejectAll: 'سب مسترد کریں', manage: 'منتخب کریں', preferencesTitle: 'آپ کے انتخاب', save: 'محفوظ کریں' },
};

let consent = null;
let layout = 'box';
let language = 'en';

function build() {
  consent?.destroy();
  document.documentElement.dir = language === 'en' ? 'ltr' : 'rtl';
  consent = createCookieConsent({
    categories: CATEGORIES,
    translations: TRANSLATIONS,
    language,
    layout,
    position: layout === 'bar' ? 'bottom-center' : 'bottom-left',
    policyUrl: '#',
    autoShow: true,
    storage: { name: `demo_layout_${Date.now()}`, days: 1 },
  });
}

for (const [id, apply] of [['layout', (value) => (layout = value)], ['lang', (value) => (language = value)]]) {
  document.getElementById(id).addEventListener('click', (event) => {
    const button = event.target.closest('button');
    if (!button) return;
    for (const sibling of button.parentElement.children) sibling.classList.toggle('is-on', sibling === button);
    apply(button.dataset.layout ?? button.dataset.lang);
    build();
  });
}

build();

@import url('https://www.devix.pk/cdn/oss/cookie-consent@1.0.0/cookie-consent.min.css');

.dxcc-banner { position: absolute; }
.dxcc[data-layout='center'] .dxcc-banner { inset: auto 50% 16px auto; transform: translateX(50%); }