الفرق بين المراجعتين ل"Cordova/cordova plugin screen orientation"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:إضافة اتجاه الشبكة في كوردوفا}}</noinclude> تصنيف: Cordova تصنيف: Plugin تُستخدم إضا...')
 
 
(6 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:إضافة اتجاه الشبكة في كوردوفا}}</noinclude>
+
<noinclude>{{DISPLAYTITLE:إضافة اتجاه الشاشة في كوردوفا}}</noinclude>
 
[[تصنيف: Cordova]]
 
[[تصنيف: Cordova]]
[[تصنيف: Plugin]]
+
[[تصنيف: Cordova Plugin]]
تُستخدم إضافة اتجاه الشبكة (cordova-plugin-screen-orientation) لتعيين أو قفل (lock) اتجاه الشاشة بطريقة موحدة في المنصاتـiOS و أندرويد و windows-uwp. تعتمد هذه الإضافة على [http://www.w3.org/TR/screen-orientation/ Screen Orientation API]، حتى تتطابق الواجهة البرمجية مع المواصفات الحالية.  
+
تُستخدَم إضافة اتجاه الشاشة (cordova-plugin-screen-orientation) للتحكم باتجاه الشاشة (عبر ضبطها إلى اتجاه محدَّد أو منع تغيير الاتجاه) بشكل موحَّد في المنصات iOS وأندرويد و windows-uwp. تعتمد هذه الإضافة على [http://www.w3.org/TR/screen-orientation/ الواجهة البرمجية لاتجاه الشاشة]، حتى تتطابق مع المواصفات الحالية.
  
تضيف هذه الإضافة العناصر التالية إلى كائن الشاشة (<code>window.screen</code>):  
+
تضيف هذه الإضافة العناصر التالية إلى كائن الشاشة <code>window.screen</code>:  
<syntaxhighlight lang="javascript">// lock the device orientation
+
<syntaxhighlight lang="javascript">// منع تغيير اتجاه الشاشة
 
.orientation.lock('portrait')
 
.orientation.lock('portrait')
// unlock the orientation
+
// السماح بتغيير اتجاه الشاشة
 
.orientation.unlock()
 
.orientation.unlock()
// current orientation
+
// الاتجاه الحالي
 
.orientation‎</syntaxhighlight>  
 
.orientation‎</syntaxhighlight>  
  
== التثبيت ==  
+
== التثبيت ==
<syntaxhighlight lang="javascript">cordova plugin add cordova-plugin-screen-orientation‎</syntaxhighlight>  
+
يمكن تثبيت هذه الإضافة عبر الأمر التالي:<syntaxhighlight lang="shell">cordova plugin add cordova-plugin-screen-orientation‎</syntaxhighlight>  
  
== التوجيهات المدعومة ==  
+
== الاتجاهات المدعومة ==  
====portrait-primary====  
+
===<code>portrait-primary</code>===  
الاتجاه يكون في الوضع العمودي الأولي (primary portrait mode).  
+
يمثل هذا الاتجاه الوضع العمودي الأولي (primary portrait mode).  
====portrait-secondary====  
+
===<code>portrait-secondary</code>===  
الاتجاه في الوضع العمودي الثانوي.  
+
الوضع العمودي الثانوي (secondary portrait mode).  
====landscape-primary====  
+
===<code>landscape-primary</code>===  
الاتجاه في الوضع الأفقي الأولي (primary landscape mode).  
+
الوضع الأفقي الأولي (primary landscape mode).  
====landscape-secondary====  
+
===<code>landscape-secondary</code>===  
الاتجاه في الوضع الأفقي الثانوي (secondary landscape mode).  
+
الوضع الأفقي الثانوي (secondary landscape mode).  
====portrait====  
+
===<code>portrait</code>===  
الاتجاه إما في الوضع العمودي الأولي أو الوضع العمودي الثانوي (sensor).  
+
الوضع العمودي الأولي أو الثانوي (sensor).  
====landscape====  
+
===<code>landscape</code>===  
الاتجاه إما في الوضع الأفقي الأولي أو الثانوي (sensor).  
+
الوضع الأفقي الأولي أو الثانوي (sensor).  
====any====  
+
===<code>any</code>===  
تحرير التوجيه، بحيث يتم دعم جميع الاتجاهات.  
+
تحرير التوجيه، بحيث تُدعم جميع الاتجاهات.  
  
==الاستخدام==  
+
==طريقة الاستخدام==
<syntaxhighlight lang="javascript">// set to either landscape
+
إليك المثال التالي الذي يشرح كيفية استخدام الاضافة بشكل مبسَّط:<syntaxhighlight lang="javascript">// تعين الاتجاه إلى أحد الوضعين الأفقيين
 
screen.orientation.lock('landscape');
 
screen.orientation.lock('landscape');
// allow user rotate
+
// إتاحة إدارة الاتجاه من قِبل المستخدم
 
screen.orientation.unlock();
 
screen.orientation.unlock();
// access current orientation
+
// الحصول على الاتجاه الحالي
 
console.log('Orientation is ' + screen.orientation.type);‎</syntaxhighlight>  
 
console.log('Orientation is ' + screen.orientation.type);‎</syntaxhighlight>  
  
 
==الأحداث==  
 
==الأحداث==  
  
سيطلق كل من منصتي أندرويد و iOS الحدث orientationchange من الكائن window. في هذا الإصدار من الإضافة، استخدم الكائن window إذا كنت تريد طريقة للتنبيه.  
+
ستُطلق كلٌّ من منصتي أندرويد و iOS الحدث <code>orientationchange</code> من الكائن <code>window</code>. في هذا الإصدار من الإضافة، استخدم الكائن <code>window</code> إن كنت تريد طريقة للتنبيه بتغيير الاتجاه. اطلع على الشيفرة التالية مثلًا: <syntaxhighlight lang="javascript">window.addEventListener("orientationchange", function(){
=== مثال للاستخدام ===
+
     console.log(screen.orientation.type); // مثلا الوضع العمودي
<syntaxhighlight lang="javascript">window.addEventListener("orientationchange", function(){
 
     console.log(screen.orientation.type); // e.g. portrait
 
 
});‎</syntaxhighlight>  
 
});‎</syntaxhighlight>  
  
تمت إضافة مُنصتٍ (listener) للحدث changeأيضًا إلى الكائن screen.orientation.
+
في الشيفرة التالية، سنُضيف مُنصتًا (listener) للحدث <code>change</code> في الكائن <code>screen.orientation</code>: <syntaxhighlight lang="javascript">screen.orientation.addEventListener('change', function(){
=== مثال للاستخدام ===
+
     console.log(screen.orientation.type); // مثلا الوضع العمودي
<syntaxhighlight lang="javascript">screen.orientation.addEventListener('change', function(){
 
     console.log(screen.orientation.type); // e.g. portrait
 
 
});
 
});
     // OR
+
     // أو
 
screen.orientation.onchange = function(){console.log(screen.orientation.type);
 
screen.orientation.onchange = function(){console.log(screen.orientation.type);
 
};‎</syntaxhighlight>  
 
};‎</syntaxhighlight>  
سطر 58: سطر 54:
 
== ملاحظات حول أندرويد ==  
 
== ملاحظات حول أندرويد ==  
  
لن تُحدّث الخاصية <code>screen.orientation</code> عندما يكون يُدار الهاتف [http://www.quirksmode.org/dom/events/orientationchange.html rotated 180 degrees].  
+
لن تُحدَّث الخاصية <code>screen.orientation</code> عندما [http://www.quirksmode.org/dom/events/orientationchange.html يُدار الهاتف 180 درجة].  
  
== ملاحظات حول منصة ويندوز الكونية UWP ==  
+
== ملاحظات حول منصة Windows UWP ==  
  
لن تعرض تطبيقات متجر ويندوز (windows-uwp) تغييرات الاتجاه إلا إن كان الجهاز مُزودًا بمقياسٍ للتسارع (accelerometer). ستُحفظ الحالة الداخلية للكائن orientation، ولكن لن يتم تدوير الشاشة فعليًا ما لم يكن الجهاز يدعم ذلك.  
+
لن تَعرض تطبيقات متجر ويندوز (windows-uwp) تغييرات الاتجاه إلّا إن كان الجهاز مُزودًا بمقياسٍ للتسارع (accelerometer). ستُحفَظ الحالة الداخلية للكائن <code>orientation</code>، ولكن لن يتم تدوير الشاشة فعليًا ما لم يكن الجهاز يدعم ذلك.  
 +
 
 +
== سجِل التغييرات ==
 +
راجع الملف [https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-screen-orientation/RELEASENOTES.md RELEASENOTES.md] المُولّد آليًا لمطالعة تاريخ التغييرات على هذه الإضافة.
 +
{| class="wikitable"
 +
!الإصدار
 +
!التغييرات
 +
|-
 +
|2.0.0
 +
|واجهة جافاسكريبت مُوحّدة لأندرويد وويندوز و iOS
 +
|-
 +
|1.4.2
 +
|[https://github.com/gbenvenuti/cordova-plugin-screen-orientation/pull/101 #101] يجعل منصة iOS  تُدير الاتجاه عند استدعاء <code>lockOrientation</code> 
 +
|-
 +
|1.4.1
 +
|[https://github.com/gbenvenuti/cordova-plugin-screen-orientation/pull/89 #89] سد ثغرة في كوردوفا
 +
|-
 +
|1.4.0
 +
|
 +
* إضافة دعم ويندوز 8.1
 +
* [https://github.com/gbenvenuti/cordova-plugin-screen-orientation/pull/54 #54] مهمة فرعية (thread) خلفية لمنصة ios
 +
* [https://github.com/gbenvenuti/cordova-plugin-screen-orientation/pull/64 #64] تصحيح خطأ في تسمية الاتجاه
 +
* إضافة الوضع العمودي المقلوب (portrait upside down) لاتجاهات منصة iOS الافتراضية
 +
|-
 +
|1.3.5-6
 +
|أُضيف في هذا الإصدار إضافةٌ إلى npm
 +
|-
 +
|1.3.4
 +
|تحديث ملف Readme 
 +
|-
 +
|1.3.3
 +
|[https://github.com/gbenvenuti/cordova-plugin-screen-orientation/pull/53 #53] دعم WP8
 +
|-
 +
|1.3.2
 +
|[https://github.com/gbenvenuti/cordova-plugin-screen-orientation/issues/33 #33] تأخير الكتل (Delay Block) في منصة iOS8 
 +
|-
 +
|1.3.0
 +
|[https://github.com/gbenvenuti/cordova-plugin-screen-orientation/issues/23 #23] دعم موقع flicker على منصة iOS8 
 +
|-
 +
|1.2.0-1.2.1
 +
|#19  عطبٌ في منصة [https://github.com/gbenvenuti/cordova-plugin-screen-orientation/issues/19 iOS8] 
 +
|}
 +
 
 +
== انظر أيضًا ==
 +
* إضافة <nowiki/>[[Cordova/cordova plugin device|حالة الجهاز]]
 +
* إضافة [[Cordova/cordova plugin splashscreen|شاشة البدء]]
 +
* [[Cordova/plugins|دليل تطوير الإضافات في كوردوفا]]
  
 
==مصادر==
 
==مصادر==
 
*[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-screen-orientation/index.html صفحة Cordova Screen Orientation Plugin في توثيق كوردوفا الرسمي.]
 
*[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-screen-orientation/index.html صفحة Cordova Screen Orientation Plugin في توثيق كوردوفا الرسمي.]

المراجعة الحالية بتاريخ 10:03، 26 ديسمبر 2018

تُستخدَم إضافة اتجاه الشاشة (cordova-plugin-screen-orientation) للتحكم باتجاه الشاشة (عبر ضبطها إلى اتجاه محدَّد أو منع تغيير الاتجاه) بشكل موحَّد في المنصات iOS وأندرويد و windows-uwp. تعتمد هذه الإضافة على الواجهة البرمجية لاتجاه الشاشة، حتى تتطابق مع المواصفات الحالية.

تضيف هذه الإضافة العناصر التالية إلى كائن الشاشة window.screen:

// منع تغيير اتجاه الشاشة
.orientation.lock('portrait')
// السماح بتغيير اتجاه الشاشة
.orientation.unlock()
// الاتجاه الحالي
.orientation

التثبيت

يمكن تثبيت هذه الإضافة عبر الأمر التالي:

cordova plugin add cordova-plugin-screen-orientation‎

الاتجاهات المدعومة

portrait-primary

يمثل هذا الاتجاه الوضع العمودي الأولي (primary portrait mode).

portrait-secondary

الوضع العمودي الثانوي (secondary portrait mode).

landscape-primary

الوضع الأفقي الأولي (primary landscape mode).

landscape-secondary

الوضع الأفقي الثانوي (secondary landscape mode).

portrait

الوضع العمودي الأولي أو الثانوي (sensor).

landscape

الوضع الأفقي الأولي أو الثانوي (sensor).

any

تحرير التوجيه، بحيث تُدعم جميع الاتجاهات.

طريقة الاستخدام

إليك المثال التالي الذي يشرح كيفية استخدام الاضافة بشكل مبسَّط:

// تعين الاتجاه إلى أحد الوضعين الأفقيين
screen.orientation.lock('landscape');
// إتاحة إدارة الاتجاه من قِبل المستخدم
screen.orientation.unlock();
// الحصول على الاتجاه الحالي
console.log('Orientation is ' + screen.orientation.type);

الأحداث

ستُطلق كلٌّ من منصتي أندرويد و iOS الحدث orientationchange من الكائن window. في هذا الإصدار من الإضافة، استخدم الكائن window إن كنت تريد طريقة للتنبيه بتغيير الاتجاه. اطلع على الشيفرة التالية مثلًا:

window.addEventListener("orientationchange", function(){
    console.log(screen.orientation.type); // مثلا الوضع العمودي 
});

في الشيفرة التالية، سنُضيف مُنصتًا (listener) للحدث change في الكائن screen.orientation:

screen.orientation.addEventListener('change', function(){
    console.log(screen.orientation.type); // مثلا الوضع العمودي 
});
    // أو
screen.orientation.onchange = function(){console.log(screen.orientation.type);
};

ملاحظات حول أندرويد

لن تُحدَّث الخاصية screen.orientation عندما يُدار الهاتف 180 درجة.

ملاحظات حول منصة Windows UWP

لن تَعرض تطبيقات متجر ويندوز (windows-uwp) تغييرات الاتجاه إلّا إن كان الجهاز مُزودًا بمقياسٍ للتسارع (accelerometer). ستُحفَظ الحالة الداخلية للكائن orientation، ولكن لن يتم تدوير الشاشة فعليًا ما لم يكن الجهاز يدعم ذلك.

سجِل التغييرات

راجع الملف RELEASENOTES.md المُولّد آليًا لمطالعة تاريخ التغييرات على هذه الإضافة.

الإصدار التغييرات
2.0.0 واجهة جافاسكريبت مُوحّدة لأندرويد وويندوز و iOS
1.4.2 #101 يجعل منصة iOS  تُدير الاتجاه عند استدعاء lockOrientation 
1.4.1 #89 سد ثغرة في كوردوفا
1.4.0
  • إضافة دعم ويندوز 8.1
  • #54 مهمة فرعية (thread) خلفية لمنصة ios
  • #64 تصحيح خطأ في تسمية الاتجاه
  • إضافة الوضع العمودي المقلوب (portrait upside down) لاتجاهات منصة iOS الافتراضية
1.3.5-6 أُضيف في هذا الإصدار إضافةٌ إلى npm
1.3.4 تحديث ملف Readme 
1.3.3 #53 دعم WP8
1.3.2 #33 تأخير الكتل (Delay Block) في منصة iOS8 
1.3.0 #23 دعم موقع flicker على منصة iOS8 
1.2.0-1.2.1 #19  عطبٌ في منصة iOS8 

انظر أيضًا

مصادر