You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cordova.apache.org by pu...@apache.org on 2017/03/10 01:57:20 UTC
[5/6] cordova-plugin-screen-orientation git commit: update look and
feel of demo, add/remove event listeners
update look and feel of demo, add/remove event listeners
Project: http://git-wip-us.apache.org/repos/asf/cordova-plugin-screen-orientation/repo
Commit: http://git-wip-us.apache.org/repos/asf/cordova-plugin-screen-orientation/commit/90128f42
Tree: http://git-wip-us.apache.org/repos/asf/cordova-plugin-screen-orientation/tree/90128f42
Diff: http://git-wip-us.apache.org/repos/asf/cordova-plugin-screen-orientation/diff/90128f42
Branch: refs/heads/master
Commit: 90128f42d7ec868ad871d0bab92e3c18cf0035f6
Parents: fc2df8b
Author: Jesse MacFadyen <pu...@gmail.com>
Authored: Thu Mar 9 17:55:03 2017 -0800
Committer: Jesse MacFadyen <pu...@gmail.com>
Committed: Thu Mar 9 17:55:03 2017 -0800
----------------------------------------------------------------------
demo/www/css/index.css | 28 ++++++++++++++++------------
demo/www/index.html | 18 +++++++++++++-----
demo/www/js/index.js | 26 +++++++++++++++++++++++---
3 files changed, 52 insertions(+), 20 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/cordova-plugin-screen-orientation/blob/90128f42/demo/www/css/index.css
----------------------------------------------------------------------
diff --git a/demo/www/css/index.css b/demo/www/css/index.css
index 51daa79..bb118ff 100644
--- a/demo/www/css/index.css
+++ b/demo/www/css/index.css
@@ -41,22 +41,13 @@ body {
height:100%;
margin:0px;
padding:0px;
- text-transform:uppercase;
+ padding-top:20px;
width:100%;
}
/* Portrait layout (default) */
.app {
- background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
- position:absolute; /* position in the center of the screen */
- left:50%;
- top:50%;
- height:50px; /* text area height */
- width:225px; /* text area width */
text-align:center;
- padding:180px 0px 0px 0px; /* image height is 200px (bottom 20px are overlapped with text) */
- margin:-115px 0px 0px -112px; /* offset vertical: half of image height and text area height */
- /* offset horizontal: half of text area width */
}
/* Landscape layout (with min-width) */
@@ -69,6 +60,19 @@ body {
}
}
+button {
+ border:solid 1px #946A4b;
+ background:#666;
+ color:#fff;
+ border-radius:4px;
+ -webkit-border-radius:4px;
+ font-size:12px;
+
+ margin:8px;
+ padding:6px;
+ width:128px;
+}
+
h1 {
font-size:24px;
font-weight:normal;
@@ -102,13 +106,13 @@ h1 {
50% { opacity: 0.4; }
to { opacity: 1.0; }
}
-
+
@-webkit-keyframes fade {
from { opacity: 1.0; }
50% { opacity: 0.4; }
to { opacity: 1.0; }
}
-
+
.blink {
animation:fade 3000ms infinite;
-webkit-animation:fade 3000ms infinite;
http://git-wip-us.apache.org/repos/asf/cordova-plugin-screen-orientation/blob/90128f42/demo/www/index.html
----------------------------------------------------------------------
diff --git a/demo/www/index.html b/demo/www/index.html
index e4d5114..f88b9cd 100644
--- a/demo/www/index.html
+++ b/demo/www/index.html
@@ -7,9 +7,9 @@
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
-
+
http://www.apache.org/licenses/LICENSE-2.0
-
+
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
@@ -42,6 +42,7 @@
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
+ <h4>Set screen.orientation.lock();</h4>
<div>
<button id="btnPortrait">Portrait</button>
<button id="btnLandscape">Landscape</button>
@@ -50,9 +51,16 @@
<button id="btnPortPrimary">Portrait - Primary</button>
<button id="btnLandPrimary">Landscape - Primary</button>
</div>
- <button id="btnAny">Unlock</button>
- <button id="btnOnchange">Onchange</button>
- <button id="btnAddEvtListener">Add Event</button>
+ <div>
+ <button id="btnAny">Unlock</button>
+ <button style="opacity:0;"/>
+ </div>
+
+ <h4>Listen for events</h4>
+ <div>
+ <button id="btnOnchange">assign onchange</button>
+ <button id="btnAddEvtListener">addEventListener</button>
+ </div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
http://git-wip-us.apache.org/repos/asf/cordova-plugin-screen-orientation/blob/90128f42/demo/www/js/index.js
----------------------------------------------------------------------
diff --git a/demo/www/js/index.js b/demo/www/js/index.js
index 8512912..1210f48 100644
--- a/demo/www/js/index.js
+++ b/demo/www/js/index.js
@@ -66,12 +66,32 @@ var app = {
btnAny.addEventListener("click", function() {
screen.orientation.unlock();
});
- btnOnchange.addEventListener("click", function() {
- screen.orientation.onchange = myFunction1();
+ var hasOnChange = false;
+ btnOnchange.addEventListener("click", function() {
+ if(hasOnChange) {
+ screen.orientation.onchange = undefined;
+ btnOnchange.innerText = "assign onchange";
+ }
+ else {
+ screen.orientation.onchange = myFunction1;
+ btnOnchange.innerText = "remove onchange";
+ }
+ hasOnChange = !hasOnChange;
});
+
+ var hasListener = false;
btnAddEvtListener.addEventListener("click", function() {
- screen.orientation.addEventListener('change', myFunction2(), true);
+ if(hasListener) {
+ screen.orientation.removeEventListener('change', myFunction2);
+ btnAddEvtListener.innerText = "addEventListener";
+ }
+ else {
+ screen.orientation.addEventListener('change', myFunction2);
+ btnAddEvtListener.innerText = "remEventListener";
+ }
+ hasListener = !hasListener;
+
});
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@cordova.apache.org
For additional commands, e-mail: commits-help@cordova.apache.org