مكتبة PressureJS لعمل خاصية الـ3D Touch

AbdullaScriptمنذ 7 سنوات

لا يخفى على الجميع تفوق لغة الجافاسكربت في الاونه الاخيره " منذ مدة في الحقيقة " بعد ظهور كمية كبيرة وضخمه جدا من المكتبات و أُطُر العمل libraries/frameworks، هذا التضخم و النمو السريع في لغة الجافاسكربت سببت ارباك لكثير من المبرمجين الذين أصبحوا لا يعرفون من اين البداية لدراسة هذه الفريمووركس واين النهايه خصوصا مع وجود تشابه مابينها بسبب المنافسة، على سبيل المثال:

AngularJS
VueJS
ReactJS

حيث يعد الإثنين أطر عمل Frontend، ومع التطور ظهر أطر عمل مساعدة لاطار عمل اساسي (ان صح التعبير بالعربي) "بطتنا بطت بطن بطتكم" مثل فريمورك ExpressJS المساعد لل Runtime Environment NodeJS حيث يعمل الإثنين في السيرفر وليس جهة المستخدم، وامثلة كثيرة اخرى لا يسعنا التطرق لهم ( يخرب بيتهم كل يوم شي جديد يطلع ويصدم اكثر من الي قبله ).

في هذا الدرس سنقوم بعرض احد المكتبات المبرمجة بلغة الجافاسكربت "PressureJS" لعمل / لتطبيق فكرة الـ3D Touch الموجودة في اجهزة ابل الجديدة، والـ3D Touch هو عبارة عن الضغط بقوة اكثر من المعتاده على بعض الخيارات لإظهار خيارات اكثر او عمل، تفعيل event (حدث) معين.

اولا: قم بتحميل المكتبه من خلال الضغط هنا

او بإستخدام npm or bower.

npm

npm install pressure --save

bower

bower install pressure --save

ثانيا: طرق استخدام المكتبة
Example 1:


<script src="/js/pressure.js"></script>
<script src="/js/jquery.pressure.js"></script>

Pressure.set('#id-name', {
 change: function(force){
   this.innerHTML = force;
 }
});

Example 2:


var Pressure = require('pressure');

Pressure.set('#id-name', {
 change: function(force){
   this.innerHTML = force;
 }
});

كما هو موضح، التجربة ستكون على عنصر في الصفحة بدلالة الـId وهو id-name، تحتوي الدالة اعلاه على حدث event بإسم change تحمل متغير يسمى force، هذا الحدث change يستخدم لمعرفة التغير في قوة الضغط force على العنصر id-name ويكون المتغير force رقم مابين الصفر الى 1 كحد اقصى.

ملاحظة: في المثال الذي سأطرحة حاليا، كلمة this ستنعني العنصر نفسه مثلا this.style.width


Pressure.set('#element', {
 start: function(event){

 },
 end: function(){
   // this is called on force end
 },
 startDeepPress: function(event){
   // this is called on "force click" / "deep press", aka once the force is greater than 0.5
 },
 endDeepPress: function(){
   // this is called when the "force click" / "deep press" end
 },
 change: function(force, event){
   // this is called every time there is a change in pressure
   // force will always be a value from 0 to 1 on mobile and desktop
 },
 unsupported: function(){
   // NOTE: this is only called if the polyfill option is disabled!
   // this is called once there is a touch on the element and the device or browser does not support Force or 3D touch
 }
});

او عند استخدامك الـjQuery


// Select Element By Id
$('#element').pressure({
 // events goes here
});

// Select Element By Class
$('.element').pressure({
 // events goes here
});

لنستعرض الدالة اعلاة كل جزء على حدى:
- يوجد 6 انواع من الأحداث events التي تعتمد عليها / تقدمها هذه المكتبه في كلاس Pressure وهم:

حدث start: لمعرفة بدأ الضغط
حدث end: لمعرفة انتهاء الضغط.
حدث startDeepPress: اذا كانت قوة الضغط force اعلى من 0.5 وهي اعلى من نص القيمة العليا 1.
حدث endDeepPress: عند الانتهاء من الضغط على العنصر وقيمة الضغط دخلت ضمن قيمة startDeepPress اي اعلى من 0.5.
حدث change: وياخذ متغير force كما شرحناه بالاعلى، هذا الحدث سيستدعى دائما عند تغير قيمه الضغط مابين 0 و 1.
حدث unsupported: اذا كان المتصفح او الجهاز لايدعم ال3D Touch.

- الخيارات options، بالاضافة الى الاحداث والمتغيرات السابقة هناك ايضا متغير خارج دالة الset وهو عبارة عن اوبجكت اختياري يحتوي على عدة عناصر منها polyfill اما ان يكون true او false "يستخدم اذا كان المتصفح او الجهاز لايدعم ال3D Touch ،يكون true بشكل افتراضي.


Pressure.set('#example', {
 change: function(force, event){
   this.innerHTML = force;
 },
 unsupported: function(){
   alert("Oh no, this device does not support pressure.");
 }
}, {polyfill: false});

- المتغير الثاني في الoptions هو polyfillSpeedUp عدد ms ويستخدم لتحديد سرعة الوصول من 0 الى 1، كل 1000 تساوي ثانية واحدة.


Pressure.set('#example', {
 change: function(force, event){
   this.innerHTML = force;
 }
}, {polyfillSpeedUp: 5000});
// takes 5 seconds to go from a force value of 0 to 1
// only on devices that do not support pressure

- المتغير polyfillSpeedDown عكس SpeedUp تماما, الوقت بالميلي سكند ms لرجوع قيمة قوة الضغط من 1 إلى 0.


Pressure.set('#polyfill-speed-down', {
  change: function(force, event){
    this.innerHTML = force;
  }
}, {polyfillSpeedDown: 2000});
// takes 2 seconds to go from a force value of 1 to 0
// only on devices that do not support pressure

- المتغير only اما ان يكون mouse, touch or pointer وهذا يعني عند الضغط على العنصر المراد تطبيق الـ3D Touch عليه اما ان يكون من خلال الفأرة فقط، الضغط بالاصبع فقط او بالبوينتر فقط.


// فقط بالفأرة
Pressure.set('#example',{
 change: function(force, event){
   console.log(force);
 },
}, {only: 'mouse'});

// فقط عند الضغط بالاصبع, اجهزة ابل
Pressure.set('#example',{
 change: function(force, event){
   console.log(force);
 },
}, {only: 'touch'});

// فقط بالبوينتر ديفايسس مثل اجهزة تابلت الواكوم
Pressure.set('#example',{
 change: function(force, event){
   console.log(force);
 },
}, {only: 'pointer'});

- متغير preventSelect يعرفه الكثير بـpreventDefault. اما ان يكون true او false , قيمة المتغير تكون true افتراضيا وتستخدم لمنع العمل الافتراضي للعناصر.


Pressure.set('#example',{
 change: function(force, event){
   console.log(force);
 },
}, {preventSelect: false});

الجزء الأخير من PressureJS هو دالة لعمل Configuration عام تتشارك فيه جميع العناصر يحتوي على مجموعة من الخيارات التي تم شرحها في قسم Options مثلا.


// These are the default configs set by Pressure
Pressure.config({
  polyfill: true,
  polyfillSpeedUp: 1000,
  polyfillSpeedDown: 0,
  preventSelect: true,
  only: null
});