Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Removes the false assumption that non-iOS, non-touch event supported …

…content doesn’t have any orientation. This allows orientation specific designs even on desktop (i.e. resizable) browsers. Renames the orientation body classes to ‘sc-portrait’ and ‘sc-landscape’ since they are being applied by SproutCore.

Also serves up @2x stylesheets when the devicePixelRatio is greater than 1, so devices that have a DPR or 1.5 get scaled down 2x graphics rather than scaled up 1x graphics. This matches the way that SC.Module serves stylesheets as well.
  • Loading branch information...
commit 802d54d47ed2840651e4471784bb23a5707a4b6c 1 parent b37c173
@publickeating publickeating authored
Showing with 16 additions and 34 deletions.
  1. +15 −33 frameworks/core_foundation/system/device.js
  2. +1 −1  lib/index.rhtml
View
48 frameworks/core_foundation/system/device.js
@@ -40,14 +40,13 @@ SC.NO_ORIENTATION = 'desktop'; // value 'desktop' for backwards compatibility
SC.device = SC.Object.create({
/**
- Sets the orientation for touch devices, either SC.LANDSCAPE_ORIENTATION
- or SC.PORTRAIT_ORIENTATION. Will be SC.NO_ORIENTATION in the case of
- non-touch devices that are also not simulating touch events.
+ Sets the orientation for devices, either SC.LANDSCAPE_ORIENTATION
+ or SC.PORTRAIT_ORIENTATION.
@type String
- @default SC.NO_ORIENTATION
+ @default SC.PORTRAIT_ORIENTATION
*/
- orientation: SC.NO_ORIENTATION,
+ orientation: SC.PORTRAIT_ORIENTATION,
/**
Indicates whether the device is currently online or offline. For browsers
@@ -127,30 +126,12 @@ SC.device = SC.Object.create({
*/
windowSizeDidChange: function(newSize) {
if (SC.platform.windowSizeDeterminesOrientation) {
- if (!SC.browser.iOS) {
- // in any browser other than iOS, use height vs. width test
- SC.run(function() {
- if (SC.platform.touch) {
- if (newSize.height >= newSize.width) {
- SC.device.set('orientation', SC.PORTRAIT_ORIENTATION);
- } else {
- SC.device.set('orientation', SC.LANDSCAPE_ORIENTATION);
- }
- } else {
- SC.device.set('orientation', SC.NO_ORIENTATION);
- }
- });
+ if (newSize.height >= newSize.width) {
+ SC.device.set('orientation', SC.PORTRAIT_ORIENTATION);
} else {
- // in mobile safari, because some of its chrome can make the
- // above match landscape falsely, we compare to screen.width
- SC.run(function() {
- if (newSize.width === window.screen.width) {
- SC.device.set('orientation', SC.PORTRAIT_ORIENTATION);
- } else {
- SC.device.set('orientation', SC.LANDSCAPE_ORIENTATION);
- }
- });
+ SC.device.set('orientation', SC.LANDSCAPE_ORIENTATION);
}
+
return YES;
}
return NO;
@@ -169,20 +150,21 @@ SC.device = SC.Object.create({
});
},
- orientationObserver: function(){
+ /** @private */
+ orientationObserver: function () {
var body = SC.$(document.body),
orientation = this.get('orientation');
if (orientation === SC.PORTRAIT_ORIENTATION) {
- body.addClass('portrait');
+ body.addClass('sc-portrait');
} else {
- body.removeClass('portrait');
+ body.removeClass('sc-portrait');
}
if (orientation === SC.LANDSCAPE_ORIENTATION) {
- body.addClass('landscape');
+ body.addClass('sc-landscape');
} else {
- body.removeClass('landscape');
+ body.removeClass('sc-landscape');
}
}.observes('orientation'),
@@ -206,5 +188,5 @@ SC.device = SC.Object.create({
an instance and sets up event listeners as needed.
*/
SC.ready(function() {
- SC.device.setup() ;
+ SC.device.setup();
});
View
2  lib/index.rhtml
@@ -74,7 +74,7 @@
<script>
(function() {
var styles = [];
- if (window.devicePixelRatio == 2 || window.location.search.indexOf("2x") > -1) {
+ if (window.devicePixelRatio > 1 || window.location.search.indexOf("2x") > -1) {
styles = <%= stylesheet_urls_for_client(nil, { :x2 => true }).to_json %>;
SC.APP_IMAGE_ASSETS = <%= image_urls_for_client(nil, { :sprited => true, :x2 => true }).to_json %>;
} else {
Please sign in to comment.
Something went wrong with that request. Please try again.