مـــقـــدمـــة في الكثير من المواقف في مجال برمجة و تطوير المواقع و خاصة منها التعليمية، و سعيا وراء تسهيل الأمر على المستخدمين، قد نجد من بين الخيارات المعروضة بعض الإضافات و ذلك حسب الحاجة. سنتكلم اليوم على خيار مهم جدا للمواقع التعليمية خاصة، و هو نسخ محتوى أكواد أو رموز توضيحية إلى لوحة المفاتيح، لكي يتم لصقها في مرحلة ثانية. الفــكــرة سنقوم بإذن الله، في مرحلة أولى بإنشاء محتوى داخل عنصر HTML . ثم في مرحلة ثانية سنقوم بإضافة زر يمكننا من القيام بعملية نسخه ( المحتوى ) عند الضغط على الزر . سيكون الزر إن شاء الله مخفي و لا يظهر إلا في حالة مرور الفأرة "mouse" فوق المحتوى. أخيرا و ليس آخرا، سنضيف زر ثاني للسماح بالتنقل بين خيار ثيمات اللون ( themes ). سنحدد عدد الثيمات إلى إثنان و هما الشائعان وضع الإضاءة والوضع المظلم نسبيا. (Light and Dark modes ). هذه الإضافة هي من باب التسهيل على المستخدم أيضا و هي لا تقل أهمية عن الأولى. يــتــبــع
تــهـيـئــة الــبيـئـة الطريقة المستعملة هناك أكثر من طريقة لفعل ذلك. الشائع منها: واجهة برمجة تطبيقات الحافظة (The Clipboard API) طريقة الإستعمال : navigator.clipboard لمزيد من المعلومات، MDN في هذا المثال سنستعمل "clipboard js" و هي عبارة عن مكتبة خفيفة تمكن من نسخ النص إلى الحافظة بأقل خطوات، و يمكن تحميلها من هـنا. (هي المفضلة لدي ) بعد التحميل، سنحتاج فقط مجلد "dist" الذي بداخله ملفنا المنشود "clipboard.min.js". المكتبة بها العديد من الميزات سنحتاج في مثالنا إثنان منها فقط. الميزة الأولي هي عملية النسخ و هي ضرورية. أما الثانية، فهي تضليل النص و هي إختيارية. نبدأ على بركة الله بإنشاء ملف بامتداد "html." وسميه ما تشاء. كنت قد ذكرت في مشاركة السابقة بأننا سنقوم بإنشاء محتوى داخل عنصر HTML. سنأخذ هذا المحتوى من هذه المشاركة و نعمل علية، ليصبح: كود HTML: <pre id="contToCopy" aria-label=""><code> <span class="html"><!doctype <span class="attr">html</span>></span> <span class="html"><html</span> <span class="attr">lang</span>=<span class="text">"en"</span><span class="html">></span> <span class="html"><head></span> <span class="html"><meta</span> <span class="attr">charset</span>=<span class="text">"utf-8"</span><span class="html">></span> <span class="html"><meta</span> <span class="attr">name</span>=<span class="text">"viewport" content="width=device-width"</span><span class="html">></span> <span class="html"><title></span>The "pre" html element<span class="html"></title></span> <span class="html"></head></span> <span class="html"><body</span> <span class="comm"><!-- I am an HTML body content --></span> <span class="html"><div</span> <span class="attr">class</span>=<span class="text">"navbar"</span><span class="html">></span> <span class="html"><a</span> <span class="attr">href</span>=<span class="text">"!#home"</span><span class="html">></span>Home<span class="html"></a></span> <span class="html"><a</span> <span class="attr">href</span>=<span class="text">"!#news"</span><span class="html">></span>News<span class="html"></a></span> <span class="html"><a</span> <span class="attr">href</span>=<span class="text">"!#contact"</span><span class="html">></span>Contact<span class="html"></a></span> <span class="html"></div></span> <span class="php"><?php</span> <span class="comm">// I am a PHP body content</span> <span class="text"><span class="key-word">echo</span> 'Hello World'</span>; <span class="php">?></span> <span class="html"><script></span> <span class="comm">// I am a JavaScript body content</span> <span class="key-word">const</span> <span class="var">btn</span> = <span class="js-key-word">document</span>.<span class="js-comm-txt">querySelector</span>(<span class="text">'#get-code'</span>); <span class="html"></script></span> <span class="html"></body></span> <span class="html"></html></span> </code></pre> كما لحظنا، أدخلنا العديد من التغييرات على جل العناصر بإسنادها فئة "class" كما أسندنا للعنصر "pre" معرف وحيد "id". هذا سيفيد في التنسيق و التعريف لدي الجفا سكريبت. عل ذكر التنسيق، سنحتاج بعض الأيقونات و أنا اخترت مكتبة "fontawesome" الموجودة بالمرفقات. سنحتاج أيضا ملف صورة و الذي سيكون خلفية زر النسخ و أنا اخترت بامتداد "svg." و الموجود أيضا بالمرفقات. المرحلة القادمة بإذن الله، ستكون مرحلة التطبيق. يــتـــبـــع
قبل أن نشرع في العمل ينقصنا ملف الـ "JQuery" الذي لا غنا عنه إذا أردنا استعمال حدث النقر "click event" في الجفا سكريبت. الملف سيكون في المرفقات إن شاء الله. و لمن أراد تحميله من جديد فمن هنا. إذا، لدينا ملف HTML يحتوي على عنصر "pre"، مع جميع الملفات الأخرى المطلوبة. كود: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>The HTML element "pre"</title> </head> <body class="light-theme"> <main class="content"> <div class="pre-content"> <pre id="contToCopy" aria-label=""><code> <span class="html"><!doctype <span class="attr">html</span>></span> <span class="html"><html</span> <span class="attr">lang</span>=<span class="text">"en"</span><span class="html">></span> <span class="html"><head></span> <span class="html"><meta</span> <span class="attr">charset</span>=<span class="text">"utf-8"</span><span class="html">></span> <span class="html"><meta</span> <span class="attr">name</span>=<span class="text">"viewport" content="width=device-width"</span><span class="html">></span> <span class="html"><title></span>The "pre" html element<span class="html"></title></span> <span class="html"></head></span> <span class="html"><body</span> <span class="comm"><!-- I am an HTML body content --></span> <span class="html"><div</span> <span class="attr">class</span>=<span class="text">"navbar"</span><span class="html">></span> <span class="html"><a</span> <span class="attr">href</span>=<span class="text">"!#home"</span><span class="html">></span>Home<span class="html"></a></span> <span class="html"><a</span> <span class="attr">href</span>=<span class="text">"!#news"</span><span class="html">></span>News<span class="html"></a></span> <span class="html"><a</span> <span class="attr">href</span>=<span class="text">"!#contact"</span><span class="html">></span>Contact<span class="html"></a></span> <span class="html"></div></span> <span class="php"><?php</span> <span class="comm">// I am a PHP body content</span> <span class="text"><span class="key-word">echo</span> 'Hello World'</span>; <span class="php">?></span> <span class="html"><script></span> <span class="comm">// I am a JavaScript body content</span> <span class="key-word">const</span> <span class="var">btn</span> = <span class="js-key-word">document</span>.<span class="js-comm-txt">querySelector</span>(<span class="text">'#get-code'</span>); <span class="html"></script></span> <span class="html"></body></span> <span class="html"></html></span> </code></pre> </div> </main> </body> </html> كما لحظنا، اعتمدنا الثيمة "theme" الإفتراضية "light mode" و ذلك عندما اسندنا للهيكل "body" فئة "light-theme". كما سبق الذكر، سنعتمد ثمتان فقط. و سيكون الإنتقال من نمط لآخر عبر النقر على زر. كود HTML: <button type="button" class="theme-btn" title="Click to switch theme"> <i class="fa-duotone fa-2x fa-moon-stars"></i> </button> نلاحظ في الكود أن الزر يحتوي على أيقونة. سيتم تغييرها تلقائيا عند الإنتقال من ثمة أو نمط لآخر. و ذلك عند عملية النقر. ملف النمط "CSS" كود PHP: @charset "UTF-8";:root{ font-size: 16px;}.light-theme{ --pre-content-bg-color: #f8f8f8; --pre-color: #141414; --pre-content-border-color: rgb(124, 7, 154); --btns-bg-color: transparent; --text-color: rgb(193, 155, 70); --comment-color: rgb(180, 180, 180); --html-color: rgb(9, 9, 236); --attr-color: rgb(56, 107, 7); --key-word-color: rgb(270, 70, 255); --key-word-php-color: rgb(250, 8, 16); --var-color: rgb(100, 8, 193); --js-key-word: rgb(149, 59, 7); --js-comm-txt: rgb(120, 120, 120);}.dark-theme{ --pre-content-bg-color: rgb(38, 50, 56); --pre-color: #d4d4d4; --pre-content-border-color: rgb(195, 232, 121); --btns-bg-color: transparent; --text-color: rgb(195, 232, 141); --comment-color: rgba(180, 180, 180, .3); --html-color: rgb(160, 58, 72); --attr-color: rgb(241, 159, 63); --key-word-color: rgb(153, 134, 234); --key-word-php-color: rgb(178, 33, 56); --var-color: rgba(38, 110, 226); --js-key-word: rgb(150, 100, 25); --js-comm-txt: rgb(180, 180, 180);}*, :before, :after { padding: 0; margin:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.content::after { clear: both; content: ""; display: block; height: 0; visibility: hidden;}.theme-btn{ position: absolute; top: 25px; left: 170px; background-color: var(--btns-bg-color); font-size: calc(100% - 3px); text-align: center; border: none; cursor: help; box-shadow: none; z-index:999;}.theme-btn:focus > i{ -webkit-transition: .3s; -moz-transition: .3s; transition: .3s;}.light-theme .theme-btn > i{ color: rgb(38, 50, 56);}.dark-theme .theme-btn > i { color: #f8f8f8;}.pre-content { position: relative; display: table; width: 700px; margin: 16px auto; background-color: var(--pre-content-bg-color); border-radius: 4px; border: 1px solid var(--pre-content-border-color); clear: both; overflow: auto;}@media screen and (max-width: 768px) { .pre-content { width: 600px; padding: 0; }}.pre-content:hover .copy-button,.pre-content:focus .copy-button { -moz-opacity: 1; opacity: 1; -webkit-animation: fade-out .5s; -moz-animation: fade-out .5s; animation: fade-out .5s;}pre { display: table-cell; color: var(--pre-color); overflow: auto;}pre,code { background-color: var(--pre-content-bg-color); font: 100%/20px Consolas,Lucida Console,Menlo,Monaco,monospace; margin: 0; padding: 0; text-shadow: none; z-index: 0;}pre,pre > code { direction: ltr; white-space: pre-wrap; word-spacing: normal; -moz-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none;}pre > code span.html { color: var(--html-color);}pre > code span.php { color: var(--key-word-php-color);}pre > code span.text{ color: var(--text-color);}pre > code span.js-key-word { color: var(--js-key-word);}pre > code span.js-comm-txt { color: var(--js-comm-txt);}pre > code span.attr { color: var(--attr-color);}pre > code span.comm{ color: var(--comment-color);}pre > code span.var{ color: var(--var-color);}pre > code span.key-word{ color: var(--key-word-color);}button{ font-weight: 300; line-height: 1.6; font-size: 100%;}.copy-button { /****/ width: 22px; height: 22px; display: block; position: absolute; top: 2%; left: calc(100% - 27px); background: #f8f8f8 url("clippy.svg"); background-size: 60% auto; background-position: center center; background-repeat: no-repeat; border: 1px solid rgba(0, 0, 0, 0.29); cursor: copy; border-radius: 3px; -moz-opacity: 0; opacity: 0; overflow: visible; -webkit-transform: translateY(-2%); -moz-transform: translateY(-2%); transform: translateY(-2%); -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; }@media screen and (max-width: 768px) { .copy-button { -moz-opacity: 1; opacity: 1; }}.copy-button:hover,.copy-button:focus { background-color: #eaeaea; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);}.copy-button::before { display: none; width: 0; height: 0; position: absolute; top: 25%; left: -11px; content: ""; border-top: 5px solid transparent; border-bottom: 5px solid transparent; z-index: 999;}.copy-button::after { display: none; width: 80px; height: 34px; position: absolute; top: 13px; left: -90px; content: attr(data-tooltip); font-size: 14px; font-weight: bold; line-height: 34px; text-align: center; border-radius: 3px; z-index: 999; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%);}.light-theme .copy-button::before { border-left: 7px solid var(--pre-content-border-color);}.light-theme .copy-button::after { background-color: var(--pre-content-border-color); color: #fff;}.dark-theme .copy-button::before { border-left: 7px solid var(--pre-content-border-color);}.dark-theme .copy-button::after { background-color: var(--pre-content-border-color); color: #1a1a1a;}.copy-button:focus::before,.copy-button:focus::after,.copy-button:hover::before,.copy-button:hover::after { display: block; -moz-animation: fade-out .3s; -webkit-animation: fade-out .3s; animation: fade-out .3s;}@-moz-keyframes fade-out { 0%{ -moz-opacity: 0; } 100%{ opacity: 1; }}@keyframes fade-out { 0%{ opacity: 0; } 100%{ opacity: 1; }} ملف الجفا سكريبت كود PHP: 'use strict';$(function () { const copy_btns = document.querySelectorAll('.copy-button'); if(copy_btns){ var clipboard = new ClipboardJS('.copy-button'); clipboard.on('success', (e) => { for (let i = 0; i < copy_btns.length; i++) { copy_btns[i].addEventListener('mouseleave', clearTooltip); copy_btns[i].addEventListener('blur', clearTooltip); } e.clearSelection(); // clipboard.destroy(); }).on('error', (e) => { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); clipboard.destroy(); }); copy_btns.forEach(btn => { btn.onclick = (e) => { showTooltip(btn, btn.dataset.sucess); }; }); } const theme_btn = document.querySelector('.theme-btn'); if(theme_btn){ theme_btn.addEventListener('click', (e) => { let btn = e.currentTarget; $('body').toggleClass('light-theme dark-theme'); $(btn).find('i').toggleClass('fa-moon-stars fa-sun-bright'); }); } function clearTooltip(even) { //even.currentTarget.setAttribute('class', 'copy-button'); //even.currentTarget.removeAttribute('aria-label'); even.currentTarget.dataset.tooltip = 'Copy'; } function showTooltip(el, msg) { el.dataset.tooltip = msg; }}); نلاحظ الأمر "e.clearSelection();" هو أمر يخص عملية تظليل النص المراد نسخه. بما أنه اختياري، اخترت هنا عدم التظليل. لمن أراد عكس ذلك، عليه أن يضع علامة "//" أما الأمر كي يصبح على شكل تعليق و لن يتم تنفيذه، أو يزيله تماما. كما أن الأمر "clipboard.destroy();" مسؤول على إعادة كل العملية عند كل ضغطة زر. أنا اخترت هذاا الخيار. لمن أراد غير ذلك، ماعليه إلا جعل السطر على شكل تعليق، أو حذفه تماما. ملف الـ HTML كاملا بعد التعديل كود HTML: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>The HTML element "pre"</title> <link href="./fontawesome/css/all.min.css" rel="stylesheet"> <link href="./pre.css" rel="stylesheet"> </head> <body class="light-theme"> <main class="content"> <button type="button" class="theme-btn" title="Click to switch theme"> <i class="fa-duotone fa-2x fa-moon-stars"></i> </button> <div class="pre-content"> <button type="button" class="copy-button" data-clipboard-snippet="" data-clipboard-target="#contToCopy" data-tooltip="Copy" data-sucess="✓ Copied" aria-label="Copy"> </button> <pre id="contToCopy" aria-label=""><code> <span class="html"><!doctype <span class="attr">html</span>></span> <span class="html"><html</span> <span class="attr">lang</span>=<span class="text">"en"</span><span class="html">></span> <span class="html"><head></span> <span class="html"><meta</span> <span class="attr">charset</span>=<span class="text">"utf-8"</span><span class="html">></span> <span class="html"><meta</span> <span class="attr">name</span>=<span class="text">"viewport" content="width=device-width"</span><span class="html">></span> <span class="html"><title></span>The "pre" html element<span class="html"></title></span> <span class="html"></head></span> <span class="html"><body</span> <span class="comm"><!-- I am an HTML body content --></span> <span class="html"><div</span> <span class="attr">class</span>=<span class="text">"navbar"</span><span class="html">></span> <span class="html"><a</span> <span class="attr">href</span>=<span class="text">"!#home"</span><span class="html">></span>Home<span class="html"></a></span> <span class="html"><a</span> <span class="attr">href</span>=<span class="text">"!#news"</span><span class="html">></span>News<span class="html"></a></span> <span class="html"><a</span> <span class="attr">href</span>=<span class="text">"!#contact"</span><span class="html">></span>Contact<span class="html"></a></span> <span class="html"></div></span> <span class="php"><?php</span> <span class="comm">// I am a PHP body content</span> <span class="text"><span class="key-word">echo</span> 'Hello World'</span>; <span class="php">?></span> <span class="html"><script></span> <span class="comm">// I am a JavaScript body content</span> <span class="key-word">const</span> <span class="var">btn</span> = <span class="js-key-word">document</span>.<span class="js-comm-txt">querySelector</span>(<span class="text">'#get-code'</span>); <span class="html"></script></span> <span class="html"></body></span> <span class="html"></html></span> </code></pre> </div> </main> <script src="./jquery.min.js"></script> <script src="./clipboard.min.js"></script> <script src="./main.js"></script> </body> </html> جميع الملفات المستعملة في هذا التوضيح، تم إدراجها بالمرفقات. أهلا و مرحبا بكل تساؤل مــتــابــعــة طــيــبــة
