← Back to branch summary

~ken-vandine/+junk/hangonman

« back to all changes in this revision

Viewing changes to www/js/scaleBody.js

  • Committer: Ken VanDine
  • Date: 2014-03-07 03:22:47 UTC
  • Revision ID: ken.vandine@canonical.com-20140307032247-uk4i0eqyf4l7e4em
initial packaging on hangonman

Show diffs side-by-side

added added

removed removed

Lines of Context:
www/js/scaleBody.js
 
1
var scaleBody = function (container, mobileWidth) {
 
2
    // height and width of the page-container element; note that these
 
3
    // should be set in CSS so we can do measure once here
 
4
    var computedStyles = window.getComputedStyle(container);
 
5
    var containerWidth = parseInt(computedStyles.width.replace('px', ''), 10);
 
6
    var containerHeight = parseInt(computedStyles.height.replace('px', ''), 10);
 
7
    var containerStyle = container.style;
 
8
    containerStyle.position = 'absolute';
 
9
    containerStyle['-webkit-transform-origin'] = '0 0 0';
 
10
    containerStyle.transform = '0 0 0';
 
11
    containerStyle.display = 'none';
 
12
 
 
13
    // resize page so that it fills it either horizontally or vertically
 
14
    var scaleLandscape = function () {
 
15
        // available height and width
 
16
        var availableWidth = document.documentElement.clientWidth;
 
17
        var availableHeight = document.documentElement.clientHeight;
 
18
 
 
19
        // work out ratio of available height to container height,
 
20
        // and the same for width
 
21
        var scaleWidth = availableWidth / containerWidth;
 
22
        var scaleHeight = availableHeight / containerHeight;
 
23
 
 
24
        // use a single scaling value for both width and height:
 
25
        // whichever is smaller, vertical or horizontal scale
 
26
        var scaleBoth = scaleWidth;
 
27
        if (scaleHeight < scaleWidth) {
 
28
            scaleBoth = scaleHeight;
 
29
        }
 
30
 
 
31
        var left = (availableWidth - (containerWidth * scaleBoth)) / 2;
 
32
        left = parseInt(left * (1 / scaleBoth), 10);
 
33
 
 
34
        var top = (availableHeight - (containerHeight * scaleBoth)) / 2;
 
35
        top = parseInt(top * (1 / scaleBoth), 10);
 
36
 
 
37
        var scaleTransform = 'scale(' + scaleBoth + ',' + scaleBoth + ')';
 
38
        var translateTransform = 'translate(' + left + 'px, ' + top + 'px)';
 
39
 
 
40
        containerStyle['-webkit-transform'] = scaleTransform + ' ' +
 
41
            translateTransform;
 
42
        containerStyle.transform = scaleTransform + ' ' +
 
43
            translateTransform;
 
44
    };
 
45
 
 
46
    // manually apply a pseudo landscape orientation where the client
 
47
    // width is smaller than its height
 
48
    var scaleWithPseudoOrientation = function () {
 
49
        // we rotate by 90deg around the top left corner
 
50
        var rotateTransform = 'rotate(90deg)';
 
51
 
 
52
        // figure out the available height and width
 
53
        var availableWidth = document.documentElement.clientWidth;
 
54
        var availableHeight = document.documentElement.clientHeight;
 
55
 
 
56
        // we have to fit the container's width into the client height
 
57
        // and container's height into its width, as it's rotated
 
58
        // work out ratio of available height to container height,
 
59
        // and the same for width
 
60
        var scaleWidth = availableWidth / containerHeight;
 
61
        var scaleHeight = availableHeight / containerWidth;
 
62
 
 
63
        // use a single scaling value for both width and height:
 
64
        // whichever is smaller, vertical or horizontal scale
 
65
        var scaleBoth = scaleWidth;
 
66
        if (scaleHeight < scaleWidth) {
 
67
            scaleBoth = scaleHeight;
 
68
        }
 
69
 
 
70
        var scaleTransform = 'scale(' + scaleBoth + ',' + scaleBoth + ')';
 
71
 
 
72
        // now we translate to centre the container in the client
 
73
        var left = (availableWidth - (containerHeight * scaleBoth)) / 2;
 
74
        left = parseInt(left * (1 / scaleBoth), 10) + containerHeight;
 
75
 
 
76
        var top = (availableHeight - (containerWidth * scaleBoth)) / 2;
 
77
        top = parseInt(top * (1 / scaleBoth), 10);
 
78
 
 
79
        var translateTransform = 'translate(' + left + 'px, ' + top + 'px)';
 
80
 
 
81
        containerStyle['-webkit-transform'] = scaleTransform + ' ' +
 
82
            translateTransform + ' ' +
 
83
            rotateTransform;
 
84
        containerStyle.transform = scaleTransform + ' ' +
 
85
            translateTransform + ' ' +
 
86
            rotateTransform;
 
87
    };
 
88
 
 
89
    // scale according
 
90
    var scale = function () {
 
91
        if ('lockOrientation' in screen) {
 
92
            // we are locked to landscape already
 
93
            scaleLandscape();
 
94
        }
 
95
        else {
 
96
            var doc = document.documentElement;
 
97
 
 
98
            // if the window is small, assume we're on mobile
 
99
            var onMobile = (doc.clientWidth <= mobileWidth);
 
100
 
 
101
            if (doc.clientWidth < doc.clientHeight && onMobile) {
 
102
                // we haven't locked to landscape orientation and the window is
 
103
                // taller than it is wide, so we apply a pseudo-landscape transform
 
104
                scaleWithPseudoOrientation();
 
105
            }
 
106
            else {
 
107
                scaleLandscape();
 
108
            }
 
109
        }
 
110
    };
 
111
 
 
112
    var nextTickScale = function () {
 
113
      setTimeout(scale, 0);
 
114
    };
 
115
 
 
116
    // lock orientation if possible
 
117
    if (screen.lockOrientation) {
 
118
        screen.lockOrientation('landscape');
 
119
    }
 
120
 
 
121
    // set up handlers
 
122
    window.onresize = nextTickScale;
 
123
    window.addEventListener('orientationchange', nextTickScale);
 
124
 
 
125
    // run first scale
 
126
    scale();
 
127
 
 
128
    // apply borders to the page container once it has had its first resize
 
129
    setTimeout(function () {
 
130
        containerStyle.display = 'block';
 
131
    }, 0);
 
132
 
 
133
};