البحث في الموقع

يُعتبر مربع البحث أحد المكونات التي لا غنى عنها في أي موقع، وفي هذا الدرس سوف تتعلم كيف يمكنك إنشاء مربع بحث يظهر ويختفي عند النقر عليه. قد تعتقد أنّ القيام بذلك سيكون سهلًا جدًا ولكنك سوف ترى أنّ الأمر ليس كذلك، فسوف نحتاج إلى تطبيق بعض الخدع حتى نجعل كل شيء يعمل بشكل صحيح. هذه هي المتطلبات التي نريدها مبدئيًا: ما نريده مبدئيًا هو ظهور زر يحتوي على أيقونة بحث. عند النقر على ذلك الزر نريد أن يظهر مربع البحث. نريده أن يكون متجاوبًا مع جميع الأجهزة. عند كتابة أي شيء في مربع البحث نريد أن يقوم المربع بالقيام بالبحث فور النقر على مفتاح الدخول (enter) من لوحة المفاتيح أو النقر على الأيقونة نفسها. إذا كان مربع البحث ظاهرًا ولكنه كان فارغًا فإننا نريده أن يختفي عند النقر على أيقونة البحث (أي أننا إذا قمنا بالنقر على أيقونة البحث وكان المربع فارغًا فإننا لا نريده أن يقوم بالبحث وإنما يقوم بإخفاء مربع البحث). نريد أيضًا أن يختفي مربع البحث عند النقر خارجه سواء كان فارغًا أم لا. لو كانت الجافاسكربت معطلة لدى المستخدم فإننا نريد لمربع البحث أن يكون ظاهرًا (أي دون الحاجة إلى النقر على أيقونة البحث). نريد أيضًا أن ندعم الأجهزة التي تعمل باللمس. يمكنك معاينة النتيجة النهائية لهذا الدرس. بما أننا بتنا الآن نعرف ما نريد فلنقم بذلك. بنية ملف HTML كل ما نحتاجه من وسوم HTML هو حاوٍ رئيسي (main container) وسوف يكون عبارة عن وسم <div> وسوف نحتاج إلى وسم <form> وإلى حقلي إدخال (inputs)؛ واحد من نوع "text" والآخر من نوع "submit" وأخيرًا سوف نحتاج إلى وسم <span> ليحتوي على أيقونة البحث: <div id="sb-search" class="sb-search"> <form> <input class="sb-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search"> <input class="sb-search-submit" type="submit" value=""> <span class="sb-icon-search"></span> </form> </div> لنبدأ الآن بتنسيق العناصر باستخدام CSS. تنسيقات CSS بناءً على المتطلبات التي ذكرناها سابقًا فإنه يجب في البداية أن يكون لدينا زر يحتوي على أيقونة بحث وباقي العناصر يجب أن تكون مخفية. دعونا الآن نتخيل ما الذي سيحصل عند تمدد مربع البحث وجعله ظاهرًا (الذي هو نفسه سيكون الحاوي الرئيسي الذي ذكرناه سابقًا). كيف نقوم بذلك؟ سوف نستخدم الخاصية overflow: hidden وتكبير العرض الخاص بالعنصر الحاوي (sb-search) يجب أن يقوم بإظهار حقل البحث. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن إذًا أول شيء نقوم به هو تنسيق العنصر الحاوي (sb-search) بحيث سوف نجعله يطوف إلى اليمين باستخدام الخاصية float: right ونعطيه الخاصية overflow: hidden، والعرض يجب أن يكون 60px ولكن بما أننا نريد أن يزيد العرض إلى 100% فإننا سنواجه بعض المشاكل في متصفحات iOS فهي لا تقبل التغيير من عرض يعتمد على الـpixels إلى عرض يعتمد على النسب المئوية. لذلك سوف نقوم بتعريف خاصية min-width بالقيمة 60px وخاصية width بقيمة 0%. يمكنك قراءة المزيد عن هذا الحل العبقري من خلال هذا الرابط. سوف نستعمل أيضًا الخاصية transition والخاصية webkit-backface-visibility: hidden- لتلافي بعض الآثار للحقول في متصفحات الهواتف iOS: .sb-search { position: relative; margin-top: 10px; width: 0%; min-width: 60px; height: 60px; float: right; overflow: hidden; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; -webkit-backface-visibility: hidden; } أي شيء يتجاوز/يفيض عن هذا المربع الصغير لن يكون ظاهرًا. لنقم الآن بموضعة حقل البحث. سوف نستعمل قيمة مئوية بالنسبة للعرض حتى نسمح للحقل بأن يتمدد مع تمدد العنصر الحاوي. ومع إضافة الارتفاع (height) وحجم الخط (font-size) والـpadding المناسبة يمكننا توسيط النص داخل العنصر (استعملنا padding بدل line-height لأن الخاصية line-height لا تعمل بشكل جيد في متصفح IE8). قد يبدو استعمالنا للخاصية position: absolute غير ضروري، ولكن استعمالها يقوم بحل مشكلة تظهر عند إغلاق مربع البحث بحيث يبدو الحقل وكأنه ظاهر في الجانب الأيمن لفترة قصيرة جدًا. .sb-search-input { position: absolute; top: 0; right: 0; border: none; outline: none; background: #fff; width: 100%; height: 60px; margin: 0; z-index: 10; padding: 20px 65px 20px 20px; font-family: inherit; font-size: 20px; color: #2c3e50; } input[type="search"].sb-search-input { -webkit-appearance: none; -webkit-border-radius: 0px; } قمنا أيضًا بإزالة التنسيقات الإفتراضية لحقل البحث في متصفحات WebKit. دعونا نقوم الآن بتعريف لون الخط بالنسبة للـplaceholder (الـplaceholder هو نص يظهر داخل حقل البحث قبل أن يقوم المستخدم بكتابة أي شيء بداخله حتى يُعطي المستخدم لمحة عما يجب عليه كتابته في ذلك الحقل): .sb-search-input::-webkit-input-placeholder { color: #efb480; } .sb-search-input:-moz-placeholder { color: #efb480; } .sb-search-input::-moz-placeholder { color: #efb480; } .sb-search-input:-ms-input-placeholder { color: #efb480; } دعونا الآن نقوم بتنسيق زر أيقونة البحث وحقل التأكيد/الإرسال (submit input)، فنحن نريدهما أن يظهرا في نفس المكان لذلك يجب أن نضعهما في الجانب الأيمن ونعطيهما نفس الأبعاد. وبما أنهما سيظهران فوق بعضهما فسوف نعطيهما الخاصية position: absolute: .sb-icon-search, .sb-search-submit { width: 60px; height: 60px; display: block; position: absolute; right: 0; top: 0; padding: 0; margin: 0; line-height: 60px; text-align: center; cursor: pointer; } نريد في بداية الأمر أن تكون الأيقونة قابلة للنقر، وعند فتح حقل البحث فإننا نريد لحقل التأكيد/الإرسال (submit input) أن يكون قابلًا للنقر. لذلك سوف نُعطي حقل التأكيد الخاصية z-index: -1 ونجعله شفافًا/مخفيًا حتى يمكننا رؤية أيقونة البحث: .sb-search-submit { background: #fff; /* IE needs this */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */ filter: alpha(opacity=0); /* IE 5-7 */ opacity: 0; color: transparent; border: none; outline: none; z-index: -1; } لاحظ أننا لم نقم بجعل الخلفية شفافة وذلك لأن الأمر لا يعمل بشكل جيد في متصفح IE فالعنصر لا يكون قابلًا للنقر عند ذلك، لذلك قمنا باستعمال لون معين (الأبيض) وجعلنا الشفافية (opacity) تساوي صفر. وبما أننا نريد لأيقونة البحث أن تظهر فوق كل شيء فإننا سوف نقوم بإعطائها الخاصية z-index بقيمة عالية، وسوف نقوم باستخدام الفئة الزائفة ::before لإضافة الأيقونة: .sb-icon-search { color: #fff; background: #e67e22; z-index: 90; font-size: 22px; font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; } .sb-icon-search:before { content: "\e000"; } ودعونا لا ننسى إضافة خط الويب (web font) في بداية ملف الـCSS: /* Search icon by IcoMoon, made with http://icomoon.io/app/ */ @font-face { font-family: 'icomoon'; src:url('../fonts/icomoon/icomoon.eot'); src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'), url('../fonts/icomoon/icomoon.woff') format('woff'), url('../fonts/icomoon/icomoon.ttf') format('truetype'), url('../fonts/icomoon/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } يمكننا الآن إعطاء العنصر الحاوي (sb-search) عرضًا بقيمة 100% وذلك في حالتين؛ الأولى عند النقر على أيقونة البحث وذلك عن طريق إضافة فئة (class) بالاسم "sb-search-open" باستخدام الجافاسكربت والثانية عندما لا يكون الجافاسكربت مفعّلًا لدى المستخدم: .sb-search.sb-search-open, .no-js .sb-search { width: 100%; } لنقم الآن بتغيير لون الخط الخاص بعنصر أيقونة البحث ونضعه أسفل حقل التأكيد/الإرسال وذلك عن طريق إعطائه قيمة z-index أقل من 90 (وهي القيمة التي أعطيناها للعنصر "sb-icon-search"): .sb-search.sb-search-open .sb-icon-search, .no-js .sb-search .sb-icon-search { background: #da6d0d; color: #fff; z-index: 11; } وأخيرًا لنقم بإضافة الخاصية z-index لحقل التأكيد/الإرسال ولكن بقيمة أكبر من 11 حتى يمكننا النقر عليها: .sb-search.sb-search-open .sb-search-submit, .no-js .sb-search .sb-search-submit { z-index: 90; } انتهينا الآن من تنسيقات CSS وبقي علينا الجافاسكربت. بعض الجافاسكربت لنبدأ بإضافة وإزالة الفئة "sb-search-open". بحيث سوف يتم إضافة الفئة عند النقر على الحاوي الرئيسي (sb-search) وإزالته عند النقر على حقل التأكيد/الإرسال ولكن فقط إذا كان حقل البحث فارغًا، أمّا إذا لم يكن فارغًا فإننا نريد تأكيد عملية البحث. وحتى لا نقوم بإزالة الفئة عند النقر على الحقل (لأن الحاوي بأكمله قابل للنقر) فإننا نحتاج إلى منع حدث النقر (click event) من الانتشار على ذلك العنصر. هذا يعني أنّ النقر على الحقل لن يؤدي إلى إثارة حدث النقر على العناصر الحاوية له. ;( function( window ) { function UISearch( el, options ) { this.el = el; this.inputEl = el.querySelector( 'form > input.sb-search-input' ); this._initEvents(); } UISearch.prototype = { _initEvents : function() { var self = this, initSearchFn = function( ev ) { if( !classie.has( self.el, 'sb-search-open' ) ) { ev.preventDefault(); self.open(); } else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { self.close(); } } this.el.addEventListener( 'click', initSearchFn ); this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); }); }, open : function() { classie.add( this.el, 'sb-search-open' ); }, close : function() { classie.remove( this.el, 'sb-search-open' ); } } window.UISearch = UISearch; } )( window ); سوف نحتاج أيضًا إلى إضافة الأحداث التي تقوم بإزالة الفئة "sb-search-open" عند النقر خارج مربع البحث، وحتى يعمل ذلك فإننا نريد أن نتعامل مع انتشار الأحداث (event bubbling) عند النقر على الحاوي الرئيسي. ;( function( window ) { function UISearch( el, options ) { this.el = el; this.inputEl = el.querySelector( 'form > input.sb-search-input' ); this._initEvents(); } UISearch.prototype = { _initEvents : function() { var self = this, initSearchFn = function( ev ) { ev.stopPropagation(); if( !classie.has( self.el, 'sb-search-open' ) ) { ev.preventDefault(); self.open(); } else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { self.close(); } } this.el.addEventListener( 'click', initSearchFn ); this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); }); }, open : function() { var self = this; classie.add( this.el, 'sb-search-open' ); // close the search input if body is clicked var bodyFn = function( ev ) { self.close(); this.removeEventListener( 'click', bodyFn ); }; document.addEventListener( 'click', bodyFn ); }, close : function() { classie.remove( this.el, 'sb-search-open' ); } } window.UISearch = UISearch; } )( window ); وشيء آخر علينا الاهتمام به وهو قصّ مصطلح البحث. عندما نقوم أيضًا بالنقر على أيقونة البحث فإننا نريد أن يكون الحقل مفعّلًا (focused)، ولأنّ هذا يسبب بعض المشاكل في متصفح iOS (لوحة المفاتيح تظهر في نفس الوقت) فإننا نريد تلافي ذلك في هذه الحالة، وعندما يتم إغلاق مربع البحث فإننا نريد أن يكون مربع البحث غير مفعل (blur). هذا سوف يحل بعض المشاكل في بعض الأجهزة التي تُظهر بأنّ المؤشر يومض حتى بعد أن يكون الحقل مغلقًا. ملاحظة جانبية: كلمة focus تدل على أنّ مربع البحث مفعّل (أي أنّ المؤشر بداخله) وكلمة blur تدل على عكس ذلك. ;( function( window ) { // http://stackoverflow.com/a/11381730/989439 function mobilecheck() { var check = false; (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera); return check; } // http://www.jonathantneal.com/blog/polyfills-and-prototypes/ !String.prototype.trim && (String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ''); }); function UISearch( el, options ) { this.el = el; this.inputEl = el.querySelector( 'form > input.sb-search-input' ); this._initEvents(); } UISearch.prototype = { _initEvents : function() { var self = this, initSearchFn = function( ev ) { ev.stopPropagation(); // trim its value self.inputEl.value = self.inputEl.value.trim(); if( !classie.has( self.el, 'sb-search-open' ) ) { ev.preventDefault(); self.open(); } else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { self.close(); } } this.el.addEventListener( 'click', initSearchFn ); this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); }); }, open : function() { var self = this; classie.add( this.el, 'sb-search-open' ); // focus the input if( !mobilecheck() ) { this.inputEl.focus(); } // close the search input if body is clicked var bodyFn = function( ev ) { self.close(); this.removeEventListener( 'click', bodyFn ); }; document.addEventListener( 'click', bodyFn ); }, close : function() { this.inputEl.blur(); classie.remove( this.el, 'sb-search-open' ); } } window.UISearch = UISearch; } )( window ); وحتى يعمل كل شيء بشكل سلس في أجهزة الهواتف فإننا سوف نحتاج إلى إضافة أحداث اللمس (touch events). كما أنّ إضافة preventDefault في دالّة initSearchFn سوف يمنع حدث النقر واللمس من أن يتفعّلا مع بعضهما في أجهزة اللمس. ;( function( window ) { // http://stackoverflow.com/a/11381730/989439 function mobilecheck() { var check = false; (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera); return check; } // http://www.jonathantneal.com/blog/polyfills-and-prototypes/ !String.prototype.trim && (String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ''); }); function UISearch( el, options ) { this.el = el; this.inputEl = el.querySelector( 'form > input.sb-search-input' ); this._initEvents(); } UISearch.prototype = { _initEvents : function() { var self = this, initSearchFn = function( ev ) { ev.stopPropagation(); // trim its value self.inputEl.value = self.inputEl.value.trim(); if( !classie.has( self.el, 'sb-search-open' ) ) { ev.preventDefault(); self.open(); } else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { ev.preventDefault(); self.close(); } } this.el.addEventListener( 'click', initSearchFn ); this.el.addEventListener( 'touchstart', initSearchFn ); this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); }); this.inputEl.addEventListener( 'touchstart', function( ev ) { ev.stopPropagation(); } ); }, open : function() { var self = this; classie.add( this.el, 'sb-search-open' ); // focus the input if( !mobilecheck() ) { this.inputEl.focus(); } // close the search input if body is clicked var bodyFn = function( ev ) { self.close(); this.removeEventListener( 'click', bodyFn ); this.removeEventListener( 'touchstart', bodyFn ); }; document.addEventListener( 'click', bodyFn ); document.addEventListener( 'touchstart', bodyFn ); }, close : function() { this.inputEl.blur(); classie.remove( this.el, 'sb-search-open' ); } } window.UISearch = UISearch; } )( window ); وأخيرًا، للأجهزة التي لا تدعم addEventListener وremoveEventListener فإننا سوف نستعمل polyfill. // EventListener | @jon_neal | //github.com/jonathantneal/EventListener !window.addEventListener && window.Element && (function () { function addToPrototype(name, method) { Window.prototype[name] = HTMLDocument.prototype[name] = Element.prototype[name] = method; } var registry = []; addToPrototype("addEventListener", function (type, listener) { var target = this; registry.unshift({ __listener: function (event) { event.currentTarget = target; event.pageX = event.clientX + document.documentElement.scrollLeft; event.pageY = event.clientY + document.documentElement.scrollTop; event.preventDefault = function () { event.returnValue = false }; event.relatedTarget = event.fromElement || null; event.stopPropagation = function () { event.cancelBubble = true }; event.relatedTarget = event.fromElement || null; event.target = event.srcElement || target; event.timeStamp = +new Date; listener.call(target, event); }, listener: listener, target: target, type: type }); this.attachEvent("on" + type, registry[0].__listener); }); addToPrototype("removeEventListener", function (type, listener) { for (var index = 0, length = registry.length; index < length; ++index) { if (registry[index].target == this && registry[index].type == type && registry[index].listener == listener) { return this.detachEvent("on" + type, registry.splice(index, 1)[0].__listener); } } }); addToPrototype("dispatchEvent", function (eventObject) { try { return this.fireEvent("on" + eventObject.type, eventObject); } catch (error) { for (var index = 0, length = registry.length; index < length; ++index) { if (registry[index].target == this && registry[index].type == eventObject.type) { registry[index].call(this, eventObject); } } } }); })(); خاتمة هذا كان كل شيء فيما يخص هذا الدرس، أتمنى أن تكون قد استفدت منه وتعلمت منه شيئًا جديدًا. ترجمة -وبتصرّف- للمقال Expanding Search Bar Deconstructed لصاحبته Mary Lou.

حدّث تويتر مؤخرًا تصميم زر التفضيل "fave" الخاصّ به، وذلك بتقديم تحريكٍ جديد، وبدلًا من الاعتماد على التنقل transitions في CSS، فإن التحريك المُستخدم يعتمد على استخدام سلسلة من الصور، في هذا الشرح سيتمّ إعادة إنشاء التحريك باستخدام CSS وبدالة التوقيت steps. وهم الحركة (Illusion of movement) يُشبه هذا التأثير إلى حدٍ كبيرٍ التأثير المُقدّم بواسطة أجهزة Zoetrope القديمة، حيثُ تعرض سلسلة من الرسومات في حلقة وحول أسطوانة، ولكن ما سيتمّ استخدامه هنا هو عرض سلسلة مُسطّحة من الصور داخل عنصر. عرض المثال مثال على تحريك الزر عند حركة المرور hover: .twitter-fave { width: 70px; height: 50px; background: url("//raw.githubusercontent.com/HsoubAcademy/HsoubAcademy.github.io/master/examples/CSS-animation-series/Twitter%20fave%20animation/twitter_fave.png") no-repeat; background-position: 0 0; } .twitter-fave:hover { background-position: -3519px 0; transition: background 1s steps(55); } يمكن معاينة الملفات المصدرية لهذا الدرس على حساب أكاديمية حسوب على Github. تمّ في البداية إنشاء سلسلة من الصور، والّتي ستُشكل التحريك في نهاية الأمر: يجب وضع هذه الصور/الإطارات على صفّ واحد بهدف إتمام عمليّة التحريك بسهولة أكبر، ليتمّ عندها التحويل من الصورة الأولى إلى الصورة الأخيرة، وذلك عبر التحكم بمكان الخلفيّة باستخدام شيفرة CSS. كيف ستتموضع صور الخلفيّة background image ضمن العنصر: دالة التوقيت ()steps كما هو الأمر مع مُعظم دالات التوقيت مثل ease أو cubic-bezier، فإن الانتقال transition يُحرّك العنصر بسلاسة بين حالة البداية وحالة النهاية، أما دالة التوقيت steps فهي مُختلفة، فبدلًا من ذلك الانتقال (بين نقطتين)، سيتمّ تقسيم التحوّل/الانتقال إلى عدد من الخطوات والتحكم بين هذه الخطوات بشكل مُنفصل. تمثيل دالة ()steps بالرسم البياني، والّتي تَظهر على شكل سلسلة من الخطوات: البداية مع إعداد HTML: <section class="fave"></section> صورة الخلفيّة Background image سيتمّ في الخطوة التّالية تنسيق العنصر السابق وإضافة تَمَوْضُع لصورة الخلفيّة background image: .fave { width: 70px; height: 50px; background: url(images/twitter_fave.png) no-repeat; background-position: 0 0; } سيتمّ إضافة تنسيق لحركة المرور hover، ليتم نقل تَمَوْضُع الخلفيّة إلى نهاية سلسلة الصّور: .fave:hover { background-position: -3519px 0; transition: background 1s steps(55); } تمّ في الخاصّيّة الثانية تعيين قيمة للانتقال transition، وذلك للخاصية background وبمدة انتقال ثانية واحدة، ولدالة التوقيت ()steps القيمة 55، وذلك لأن عدد الصور الكلّي الّتي سيتمّ التبديل بينها هو: 55. لن يحدث التحريك إلّا عند حركة المرور hover، حيثُ سيتمّ الانتقال عبر جميع الصور وبعدد خطوات متساوي (55 خطوة). لماذا لا يتمّ استخدام gif مع التحريك؟ يُمكن في الحقيقة استخدام الصور المُتحركة (gifs)، ولكن لن تكون الاختيار الأمثل في هذه الحالة، حيثُ حجم الملفّ سيكون أكبر، ومن الصعب التحكم بمُعدّل النقل، ولكن بالطريقة المُستخدمة هنا يُمكن عمل: إيقاف مؤقت، إعادة التحريك، وإجراء كافّة التعديلات المطلوبة لإتمام التحريك على الوجه المطلوب. استخدامات أخرى للدالة steps إن تحريك الصور من نوع sprites هو أحد استخدامات دالة التوقيت steps، فأي شيء يحتاج إلى التحريك على شكل سلسلة من الخطوات المُفصّلة، يُمكن له الاستفادة من هذه الدالة. أقصوصة الغش (Cheatsheet) تقدّم الأقصوصة التّالية مُختصر للمقالة، والذي يُمكن الرجوع إليه عند تطبيق الدرس. خاتمة ما أجمل التحريك في صفحات الويب؛ سرعة، خفّة، مرونة، جمال، أنصح بالقراءة عن الأمر والتعمّق في جنباته، فهو الوجه الجديد لصفحات الويب. ترجمة وبتصرّف للمقال Twitter’s "fave" animation.

سنتعلّم معًا كيفيّة صناعة شريط إعلاني ببضع خطوات بسيطة، حيث سنصمّم شريطًا إعلانيًّا من الصّفر وفي غضون دقائق. سنسعى كذلك لجعل هذا الشّريط متعدد الاستخدامات لتتمكّن من استخدامه في اﻹعلان عن أي مشروع من مشاريعك الخاصّة. الخطوة 1أحد المقاسات الأكثر شيوعًا في مجال تصميم اﻷشرطة اﻹعلانية هو 300px * 250px. افتح برنامج فوتوشوب Photoshop وأنشئ مستندًا جديدًا بخلفيّة رماديّة وبمقاسات أكبر. الخطوة 2ارسم مستطيلًا رماديًّا داكنًا باستخدام أداة المستطيل (U)، وكما قلنا سابقًا فإنّ أبعاد المستطيل يجب أن تكون 300px * 250px. أضف تأثير التوهّج الخارجيّ Outer Glow باللون (#343434). الخطوة 3طبّق كذلك تأثير التوهّج الداخليّ، قد يبدو التّأثير مشوّشًا اﻵن ولكنه سيعطي لمسة جميلة للمستطيل في النّهاية. الخطوة 4سنطبّق نقشًا على المستطيل وسيكون شفّافًا تقريبًا، لذا سنطبّق نمط المزج Soft Light وشفافيّة بمقدار 5%. الخطوة 5سننهي العمل على المستطيل بإضافة تأثير الحدّ الخارجيّ Stroke، بحجم 1px بلون أغمق من لون المستطيل اﻷساسيّ. الخطوة 6يمكن استخدام أي مجموعة زخرفيّة تتوفّر لديك، ويتوفّر الكثير من هذه المجاميع مجّانًا على شبكة اﻹنترنت وبمختلف الأشكال واﻷنواع. سنعتمد الخطّ (Bebas Neue) بحجم 48px كخطّ للعنوان، ثمّ نطبّق تأثير الظلّ Drop Shadow على العنوان وعلى اﻷشكال الزخرفيّة كذلك. الخطوة 7ارسم مستطيلاً باﻷبعاد 260px * 125px بواسطة أداة المستطيل مدوّر الحوافّ Rounded Rectangle Tool بمقدار 2px، ثم طبق تأثيرّ الظلّ عليه، سنضاعف الشّكل مرّتين، ثمّ نقلّل حجم الشكل اﻷوّل بنسبة 1% والثّاني بنسبة 2%. الخطوة 8سنعتمد الخطّ (Museo Slab) باللّون (#887e7e)، اختر اﻷيقونات التي ترغب بها وباﻷبعاد 16px * 16px من مجموعة IconSweets 2 وضعْها في أماكنها المخصّصة لها. ارسم خطّين دقيقين باللّون (#e6e6e6)، ليكونا بمثابة حدّ فاصل للحدود الخارجيّة للنص. الخطوة 9ارسم مستطيلًا أحمر اللّون (#dc4027) بواسطة أداة المستطيل مدوّر الحواف (U)، سيكون الشكل اﻷساسي الذي سيمثّل زرّ اﻹجراء. طبّق تأثير الظلّ Drop Shadow. الخطوة 10طبّق تأثير الظلّ الداخليّ Inner Shadow بشفافيّة مقدارها 15%. الخطوة 11طبّق تأثير التّدرّج اللونيّ Gradient Overlay ونمط مزج الطّبقة Soft Light بشفافيّة مقدارها 35%. الخطوة 12طبّق تأثير الحدّ الخارجيّ على الزرّ، واختر التدرّج اللونيّ من قائمة نوع التّعبئة Fill Type لكي نطبّق لونًا أحمر غامق للجزء السفليّ من الزرّ ولونًا فاتحًا للجزء العلويّ منه. الخطوة 13اكتب بعض الكلمات على الزرّ مستخدمًا الخطّ (Bebas Neue)، يمكن أن تكتب ما تشاء، وسنختار العبارة (Sign Up)، ثمّ طبّق تأثير الظلّ على النصّ. الخطوة 14أخيرًا سنضيف بعض النّصوص التي تشبه كتابة اليد إلى زرّ اﻹجراء، ويمكن استخدام الخطّ (Journal) للحصول على هذا التّأثير. إضافة السّهم سهلة كذلك، إذ يمكن رسم أيّ شكل، خطّ مائل على سبيل المثال، ثمّ باستخدام خاصّيّة لوي النّص Warp Text للحصول على هذا التّأثير. ترجمة -وبتصرّف- للمقال Create an All-Purpose Banner in Photoshop لصاحبه Dainis Graveris.

سنقوم في هذا الدرس باستخدام الأشكال البيضوية وتأثيرات 3D لعمل زرّ رسومي Vector ثلاثي الأبعاد. سنتعلّم أيضًا كيفية إضافة العديد من أشكال الملء واستخدام العديد من أوضاع الطبقات لكي نحصل على بعض التأثيرات الرائعة. 1. نقوم بفتح مستند جديد (Ctrl +N) بالإعدادات التالية: الأبعاد: 800px*600px.نمط الألوان: CNYK.الدقة: 300ppi.ونتأكّد من أنّ مربّع الخيار Align New Objects to Pixel Grid غير مؤشّر: 2. نرسم مستطيلا باستخدام (Rectangle Tool (M بالأبعاد 800px*600px ونملأه بتدرج قطري (Radial Gradient) من الأبيض إلى الرمادي. نقوم بإخفاء شكل الخلفية من لوحة المظهر (Appearance Panel) بالضغط على أيقونة العين بجانب الطبقة: 3. نرسم شكلًا بيضويًا في طبقة باستخدام (Ellipse Tool (L بالأبعاد 245px*245px (أي دائرة). 4. نحدد هذا الشكل ونقوم بإضافة تأثير ثلاثي الأبعاد: Effect > 3D > Extrude and Bevel نقوم بإدخال القيم كما في الصورة أدناه، ثم نقوم بتوسيع التأثير بالذهاب إلى: Object > Expand Appearance 5. بعد توسيع التأثير ثلاثي الأبعاد نقوم بتحديد الأشكال السبعة الصغيرة جميعها ثم توحيدها عن طريق الضغط على زرّ Unite من لوحة مستكشف المسارات (Pathfinder Panel). بعدها نقوم بحذف مسار القطع (Clipping Path) عديم الفائدة كما موضّح في الصورة أدناه؛ فنحن في النهاية نريد الحصول على شكلين فقط. نقوم بفكّ كلّ المجموعات حتى لا تتبقى أي مجموعة (Ctrl +Shit +G). ملاحظة: سنسمّي الشكل البيضوي الكبير بالشكل الرئيسي، وشكل القوس السفلي بالشكل الصغير. أسماء الطبقات مهمّة في هذا الدرس، لذا يُرجى تسمية كل طبقة شكل بالاسم المذكور لتجنّب الالتباس ولتكون الخطوات واضحة وسهلة عند التطبيق. 6. نقوم بتحديد الشكل الرئيسي ونعمل منه نسختين في مقدّمته (Ctrl +C ثم Ctrl +F ثم Ctrl +F)، ثمّ نقوم بتحريك النسخة العلويّة بمقدار 2px إلى الأعلى. نحدّد النسختين معًا ثم نضغط على زرّ Minus Front من لوحة مستكشف المسارات: 7. نملأ الشكل الناتج باللون الأبيض، ثم نقلل قيمة Opacity إلى 30%، ونغيّر الوضع إلى Screen من لوحة المظهر (Appearance Panel). نذهب إلى القائمة: Effect > Blur > Gaussian Blur ونضع القيمة 5px: 8. نقوم بتحديد الشكل الرئيسي من جديد ونعمل منه نسختين في مقدّمته (Ctrl +C ثم Ctrl +F ثم Ctrl +F)، نقوم بتحريك النسخة العلويّة بمقدار 12px إلى الأسفل. نحدّد النسختين ثم نضغط على زرّ Minus Front من لوحة مستكشف المسارات: 9. نملأ الشكل الناتج (سنسمّيه الظل (1)) باللون الأسود، نقلل قيمة Opacity إلى 15% ثم نغيّر الوضع إلى Multiply من لوحة المظهر. نذهب إلى القائمة: Effect > Blur > Gaussian Blur ونضع القيمة 30px: 10. نحدّد الشكل الرئيسي من جديد ونقوم بعمل نسخة واحدة منه (Ctrl +C ثم Ctrl +F). نقوم بتحريك هذه النسخة إلى مقدّمة جميع الطبقات في لوحة الطبقات (Layers Panel) (Shift +Ctrl +])، ثم نقوم بتحديد نسخة الشكل الرئيسي وشكل الظل (1) الذي قمنا بعمله في الخطوة السابقة معًا ونعمل قناع قطع (Clipping Mask) بالذهاب إلى: Object > Clipping Mask > Make 11. سنقوم الآن بإضافة التأثيرات للشكل الرئيسي. في البداية نملأه باللون C=0 M=0 Y=100 K=10، ثمّ نملأه بتدرّج خطّي كما في الصورة رقم (1) أدناه. نقلل قيمة Opacity إلى 10% ونغيّر الوضع إلى Multiply. نملأه مرة ثالثة بتدرّج قطري كما في الصورة رقم (2) أدناه. نقلل قيمة Opacity إلى 50% ونغيّر الوضع إلى Screen. بعد ذلك نعيد تحديد الشكل بالكامل ونضيف Inner Glow بالذهاب إلى: Effect > Stylize > Inner Glow ونضع قيمة التمويه 10px والوضع Screen كما موضّح في الصورة رقم (3) أدناه: 12. نقوم بتحديد الشكل الصغير ونعمل منه نسختين (Ctrl +C ثم Ctrl +F ثم Ctrl +F)، ثمّ نقوم بتحريك النسخة الأولى (لننتبه هنا؛ النسخة الأولى وليست النسخة العلويّة كباقي الخطوات) بمقدار 5px إلى الأسفل. نحدد النسختين معًا ونضغط على زرّ Minus Front من لوحة مستكشف المسارات: 13. نحدّد الشكل الناتج (سنسمّيه الظل (2))، ثم باستخدام (Scale Tool (S نحدد نقطة المرجع كما موضّح في الصورة أدناه مع الضغط على مفتاح ALT في نفس الوقت. في مربع الحوار الذي سيظهر نؤشّر على مربّع الخيار Non-Uniform ثم نغيّر قيمة Vertical إلى 106%: 14. نقوم بتحريك شكل الظل (2) الذي قمنا بعمله في الخطوة السابقة تحت شكل القوس (Ctrl +[) من لوحة الطبقات: 15. نقوم بتحديد الشكل الصغير ونعمل منه نسختين (Ctrl +C ثم Ctrl +F ثم Ctrl +F). نقوم بتحريك النسخة العلويّة بمقدار 4px إلى الأعلى. نحدّد النسختين معًا ثم نضغط على زرّ Minus Front من لوحة مستكشف المسارات: 16. نملأ الشكل الناتج (نسمّيه الظل (3)) باللون الأسود، نقلل قيمة Opacity إلى 90%، ثمّ نغيّر الوضع إلى Multiply. نضيف تمويه (Blur) للشكل بقيمة 10px بالذهاب إلى: Effect > Blur > Gaussian Blur بعدها نحرّك الشكل إلى الأسفل بمقدار 2px: 17. نعود إلى الشكل الصغير ونعمل منه نسخة واحدة (Ctrl +C ثم Ctrl +F). نقوم بتحريك هذه النسخة أمام شكل الظل (3)، ثم نحدد الشكلين معًا ونعمل قناع قطع (Clipping Mask) بالذهاب إلى: Object > Clipping Mask > Make 18. سنقوم الآن بإضافة التأثيرات للشكل الصغير. في البداية نقوم بملئه باللون C=0 M=0 Y=100 K=30. نملأه مرة ثانية بتدرّج خطي كما موضّح في الصورة رقم (1) أدناه. نقلّل قيمة Opacity إلى 25% ونغيّر الوضع إلى Multiply. نملأ الشكل للمرّة الثالثة بتدرّج قطري كما موضّح في الصورة رقم (2) أدناه. نقلّل قيمة Opacity إلى 15% ونغيّر الوضع إلى Screen. نملأ الشكل للمرة الأخيرة بتدرّج قطري أيضًا وكما موضّح في الصورة رقم (3) أدناه. نقلل قيمة Opacity إلى 25% ونغيّر الوضع إلى Multiply. 19. نحدّد شكل الظل (2) الذي قمنا بعمله في الخطوة (12) ونعمل منه نسختين (Ctrl +C ثم Ctrl +F ثم Ctrl +F). نقوم بتحريك النسخة الأولى بمقدار 2px إلى الأسفل. نحدّد النسختين معًا ونضغط على زرّ Minus Front من لوحة مستكشف المسارات. بعدها نحرّك الشكل الناتج بقدار 1px إلى الأسفل: 20. نملأ الشكل السابق باللون الأبيض، نقلّل قيمة Opacity إلى 45%، ثمّ نغيّر الوضع إلى Screen. نذهب إلى القائمة: Effect > Blur > Gaussian Blur ونضع قيمة التمويه 4px: 21. نعيد تحديد الشكل الرئيسي وننسخه مرّة واحدة (Ctrl +C ثم Ctrl +F)، نقوم بتحريكه إلى أسفل بقية الأشكال في لوحة الطبقات. سنقوم بحذف جميع أشكال الملء والتأثيرات الخاصّة بهذه النسخة من لوحة المظهر لأنّ لون الشكل لا يهمّنا هنا. نقوم بإضافة تأثير Drop Shadow من القائمة: Effect > Stylize > Drop Box ثمّ ندخل نفس القيم الموضّحة في الصورة أدناه: 22. نستخدم أداة الكتابة (T) لكتابة الكلمة "OFF". (نوع الخط المستخدم هنا هو Myriad Pro font Condensed Bold style). نذهب إلى القائمة: Effect > 3D > Rotate ثم نذهب إلى: Object > Expand Appearance 23. سنقوم بحذف مسار القطع (Clipping Path) الزائد من لوحة الطبقات، ثم نقوم بفكّ كلّ المجموعات (Shift + Ctrl +G) إلى أن نحصل على مجموعة واحدة تضم الحروف الثلاث: 24. نملأ كل حرف من الحروف بتدرّج خطّي كما موضّح في الصورة أدناه: 25. نحدّد الحروف الثلاثة ثم نضيف لها تأثير Drop Shadow من القائمة: Effect > Stylize > Drop Shadow والقيم موضّحة بالصورة أدناه: وهذه هي نتيجة هذا الدرس بعد تتبع جميع الخطوات السابقة؛ زرّ فيكتور ثلاثي الأبعاد. ترجمة -وبتصرّف- للدّرس Create a simple 3D Vector Button in Adobe Illustrator لصاحبه Andrei-Sergiu.