KVinS/index.js

## index.js
/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * 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
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
function getDevicePixelRatio (){
		var pixelRatio = 1; // just for safety
		if('deviceXDPI' in screen){ // IE mobile or IE
			pixelRatio = Math.round(window.screen.availWidth / document.documentElement.clientWidth);
		} else if (window.hasOwnProperty('devicePixelRatio')){ // other devices
			pixelRatio = window.devicePixelRatio;
		}
		return   pixelRatio ;
	}

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();

    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);

		var div = document.createElement("div");
		// give it an absolute size of one inch
		div.style.width="1in";
		// append it to the body
		var body = document.getElementsByTagName("body")[0];
		body.appendChild(div);
		// read the computed width
		var ppi = parseFloat(document.defaultView.getComputedStyle(div, null).getPropertyValue('width'));
		// remove it again
		body.removeChild(div);

		var devicePixelRatio = getDevicePixelRatio();
		if (window.devicePixelRatio>1) {
		width = screen.width / (ppi * 1.528 * devicePixelRatio);
		height = screen.height / (ppi * 1.528 * devicePixelRatio);
		} else {
		width = screen.width / (ppi * devicePixelRatio);
		height = screen.height / (ppi *  devicePixelRatio);
		}
		alert("devicePixelRatio: "+devicePixelRatio);
		alert("Diagonal: "+Math.sqrt(width*width+height*height));
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
		//alert(navigator.userAgent.match(/iPad/i) != null);
		//alert(navigator.userAgent);
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
    }
};

## main.html
<!DOCTYPE html>
<!-- CSP support mode (required for Windows Universal apps): https://docs.angularjs.org/api/ng/directive/ngCsp -->
<html lang="en" ng-app="app" ng-csp>
<head>
    <meta charset="utf-8" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="mobile-web-app-capable" content="yes" />

	<meta name="format-detection" content="telephone=no" />
	<meta name="msapplication-tap-highlight" content="no" />

    <!-- JS dependencies (order matters!) -->
    <script src="js/platformOverrides.js"></script>
    <script src="lib/angular/angular.js"></script>
    <script src="lib/onsen/js/onsenui.js"></script>


	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"  />

    <!-- CSS dependencies -->
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css">
    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />

    <!-- CSP support mode (required for Windows Universal apps) -->
    <link rel="stylesheet" href="lib/angular/angular-csp.css" />

	 <style>
    .item {
      padding: 10px;
      line-height: 1;
    }
    .item-thum {
      background-color: white;
      width: 70px;
      height: 70px;
      border-radius: 4px;
    }
    .item-title {
      font-size: 15px;
      font-weight: 500;
    }
    .item-desc {
      font-size: 14px;
      color: #666;
      line-height: 1.3;
      margin: 4px 0 0 0;
      padding: 0 30px 0 0;
      max-height: 30px;
    }
    .item-label {
      font-size: 12px;
      color: #999;
      float: right;
    }
  </style>

    <!-- --------------- App init --------------- -->

    <title>Onsen UI Split View</title>


    <script>
		function myCtrl($scope) {
		$scope.LessonsDelegate = {
				  configureItemScope: function(index, itemScope) {
					console.log("Created item #" + index);
					itemScope.item = {
					  title: 'Урок №' + (index + 1),
					  steps: 'Шагов: 7',
					  complexity: 'Сложно',
					  rand: img(index)
					};
				  },
				  calculateItemHeight: function(index) {
					return 91;
				  },
				  countItems: function() {
					return 60;
				  },
				  destroyItemScope: function(index, scope) {
					console.log("Destroyed item #" + index);
				  }
				};

	}

		function img(index) {
			while (index > 6) index-=6;
			return index;
	    }

        angular.module('app', ['onsen'])
		.controller("myCtrl", myCtrl)
		.config(['$compileProvider', function($compileProvider) {
			$compileProvider.imgSrcSanitizationWhitelist('img/');
			$compileProvider.imgSrcSanitizationWhitelist('img/prews/');
}]);
    </script>

</head>

<body>


    <ons-split-view var="splitView"
                    secondary-page="page1.html"
                    main-page="secondary.html"
                    main-page-width="60%"
                    collapse="portrait">
    </ons-split-view>

    <ons-template id="page1.html">
		<ons-page ng-controller="myCtrl">
		  <ons-list>

			<ons-list-item modifier="chevron" class="item" ons-lazy-repeat="LessonsDelegate" onclick="alert('!')">
				<ons-row>
				  <ons-col width="80px">
					<img ng-src="img/prews/{{item.rand}}.svg" class="item-thum"></img>
				  </ons-col>
				  <ons-col>
					<header>
					  <span class="item-title">{{item.title}}</span>
					  <span class="item-label">{{item.complexity}}</span>
					</header>
					<div ng-show="item.desc==''">
							  <p>
									<span style='opacity: 0.7;'>
										<ons-icon icon='fa-spinner' spin='true'></ons-icon>
										Loading bacon...
									</span>
							  </p>
					</div>
					<p class="item-desc">{{ item.steps }}</p>
				  </ons-col>
				</ons-row>
			</ons-list-item>

		  </ons-list>
		</ons-page>
    </ons-template>

    <ons-template id="page2.html">
        <ons-page>
            <ons-toolbar>
                <div class="center">Page 2</div>
            </ons-toolbar>

            <div class="content-padded" style="font-size: 13px; text-align: center; color: #999;">
                <p>Rotate the device to landscape/portrait see the views split/collapse.</p>
                <p>Or resize the window so that the width is larger than the height (landscape)/smaller than the height ().</p>
            </div>

            <ons-bottom-toolbar>
            </ons-bottom-toolbar>
        </ons-page>
    </ons-template>

<ons-template id="secondary.html">
  <ons-page style="background-color: white; border-right: 1px solid #ddd;">
    <ons-list>
      <ons-list-item modifier="tappable" class="list__item__line-height" onclick="app.splitView.setMainPage('page1.html');">
        <i class="fa fa-home fa-lg" style="color: #666"></i> &nbsp; Page 1
      </ons-list-item>

      <ons-list-item modifier="tappable" class="list__item__line-height" onclick="app.splitView.setMainPage('page2.html');">
        <i class="fa fa-gear fa-lg" style="color: #666"></i> &nbsp; Page 2
      </ons-list-item>

    </ons-list>
  </ons-page>
</ons-template>

    <script type="text/javascript" src="cordova.js"></script>
    <!-- Cordova reference -->
    <script type="text/javascript" src="js/index.js"></script>
    <!-- -->
    <script type="text/javascript">
            app.initialize();
    </script>
</body>
</html>
	/*
	* Licensed to the Apache Software Foundation (ASF) under one
	* or more contributor license agreements. See the NOTICE file
	* distributed with this work for additional information
	* regarding copyright ownership. The ASF licenses this file
	* 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
	* KIND, either express or implied. See the License for the
	* specific language governing permissions and limitations
	* under the License.
	*/
	function getDevicePixelRatio (){
	var pixelRatio = 1; // just for safety
	if('deviceXDPI' in screen){ // IE mobile or IE
	pixelRatio = Math.round(window.screen.availWidth / document.documentElement.clientWidth);
	} else if (window.hasOwnProperty('devicePixelRatio')){ // other devices
	pixelRatio = window.devicePixelRatio;
	}
	return pixelRatio ;
	}

	var app = {
	// Application Constructor
	initialize: function() {
	this.bindEvents();

	},
	// Bind Event Listeners
	//
	// Bind any events that are required on startup. Common events are:
	// 'load', 'deviceready', 'offline', and 'online'.
	bindEvents: function() {
	document.addEventListener('deviceready', this.onDeviceReady, false);

	var div = document.createElement("div");
	// give it an absolute size of one inch
	div.style.width="1in";
	// append it to the body
	var body = document.getElementsByTagName("body")[0];
	body.appendChild(div);
	// read the computed width
	var ppi = parseFloat(document.defaultView.getComputedStyle(div, null).getPropertyValue('width'));
	// remove it again
	body.removeChild(div);

	var devicePixelRatio = getDevicePixelRatio();
	if (window.devicePixelRatio>1) {
	width = screen.width / (ppi * 1.528 * devicePixelRatio);
	height = screen.height / (ppi * 1.528 * devicePixelRatio);
	} else {
	width = screen.width / (ppi * devicePixelRatio);
	height = screen.height / (ppi * devicePixelRatio);
	}
	alert("devicePixelRatio: "+devicePixelRatio);
	alert("Diagonal: "+Math.sqrt(widthwidth+heightheight));
	},
	// deviceready Event Handler
	//
	// The scope of 'this' is the event. In order to call the 'receivedEvent'
	// function, we must explicitly call 'app.receivedEvent(...);'
	onDeviceReady: function() {
	app.receivedEvent('deviceready');
	//alert(navigator.userAgent.match(/iPad/i) != null);
	//alert(navigator.userAgent);
	},
	// Update DOM on a Received Event
	receivedEvent: function(id) {
	var parentElement = document.getElementById(id);
	}
	};
	<!DOCTYPE html>
	<!-- CSP support mode (required for Windows Universal apps): https://docs.angularjs.org/api/ng/directive/ngCsp -->
	<html lang="en" ng-app="app" ng-csp>
	<head>
	<meta charset="utf-8" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="mobile-web-app-capable" content="yes" />

	<meta name="format-detection" content="telephone=no" />
	<meta name="msapplication-tap-highlight" content="no" />

	<!-- JS dependencies (order matters!) -->
	<script src="js/platformOverrides.js"></script>
	<script src="lib/angular/angular.js"></script>
	<script src="lib/onsen/js/onsenui.js"></script>


	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

	<!-- CSS dependencies -->
	<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
	<link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />

	<!-- CSP support mode (required for Windows Universal apps) -->
	<link rel="stylesheet" href="lib/angular/angular-csp.css" />

	<style>
	.item {
	padding: 10px;
	line-height: 1;
	}
	.item-thum {
	background-color: white;
	width: 70px;
	height: 70px;
	border-radius: 4px;
	}
	.item-title {
	font-size: 15px;
	font-weight: 500;
	}
	.item-desc {
	font-size: 14px;
	color: #666;
	line-height: 1.3;
	margin: 4px 0 0 0;
	padding: 0 30px 0 0;
	max-height: 30px;
	}
	.item-label {
	font-size: 12px;
	color: #999;
	float: right;
	}
	</style>

	<!-- --------------- App init --------------- -->

	<title>Onsen UI Split View</title>


	<script>
	function myCtrl($scope) {
	$scope.LessonsDelegate = {
	configureItemScope: function(index, itemScope) {
	console.log("Created item #" + index);
	itemScope.item = {
	title: 'Урок №' + (index + 1),
	steps: 'Шагов: 7',
	complexity: 'Сложно',
	rand: img(index)
	};
	},
	calculateItemHeight: function(index) {
	return 91;
	},
	countItems: function() {
	return 60;
	},
	destroyItemScope: function(index, scope) {
	console.log("Destroyed item #" + index);
	}
	};

	}

	function img(index) {
	while (index > 6) index-=6;
	return index;
	}

	angular.module('app', ['onsen'])
	.controller("myCtrl", myCtrl)
	.config(['$compileProvider', function($compileProvider) {
	$compileProvider.imgSrcSanitizationWhitelist('img/');
	$compileProvider.imgSrcSanitizationWhitelist('img/prews/');
	}]);
	</script>

	</head>

	<body>


	<ons-split-view var="splitView"
	secondary-page="page1.html"
	main-page="secondary.html"
	main-page-width="60%"
	collapse="portrait">
	</ons-split-view>

	<ons-template id="page1.html">
	<ons-page ng-controller="myCtrl">
	<ons-list>

	<ons-list-item modifier="chevron" class="item" ons-lazy-repeat="LessonsDelegate" onclick="alert('!')">
	<ons-row>
	<ons-col width="80px">
	<img ng-src="img/prews/{{item.rand}}.svg" class="item-thum"></img>
	</ons-col>
	<ons-col>
	<header>
	<span class="item-title">{{item.title}}</span>
	<span class="item-label">{{item.complexity}}</span>
	</header>
	<div ng-show="item.desc==''">
	<p>
	<span style='opacity: 0.7;'>
	<ons-icon icon='fa-spinner' spin='true'></ons-icon>
	Loading bacon...
	</span>
	</p>
	</div>
	<p class="item-desc">{{ item.steps }}</p>
	</ons-col>
	</ons-row>
	</ons-list-item>

	</ons-list>
	</ons-page>
	</ons-template>

	<ons-template id="page2.html">
	<ons-page>
	<ons-toolbar>
	<div class="center">Page 2</div>
	</ons-toolbar>

	<div class="content-padded" style="font-size: 13px; text-align: center; color: #999;">
	<p>Rotate the device to landscape/portrait see the views split/collapse.</p>
	<p>Or resize the window so that the width is larger than the height (landscape)/smaller than the height ().</p>
	</div>

	<ons-bottom-toolbar>
	</ons-bottom-toolbar>
	</ons-page>
	</ons-template>

	<ons-template id="secondary.html">
	<ons-page style="background-color: white; border-right: 1px solid #ddd;">
	<ons-list>
	<ons-list-item modifier="tappable" class="list__item__line-height" onclick="app.splitView.setMainPage('page1.html');">
	<i class="fa fa-home fa-lg" style="color: #666"></i>   Page 1
	</ons-list-item>

	<ons-list-item modifier="tappable" class="list__item__line-height" onclick="app.splitView.setMainPage('page2.html');">
	<i class="fa fa-gear fa-lg" style="color: #666"></i>   Page 2
	</ons-list-item>

	</ons-list>
	</ons-page>
	</ons-template>

	<script type="text/javascript" src="cordova.js"></script>
	<!-- Cordova reference -->
	<script type="text/javascript" src="js/index.js"></script>
	<!-- -->
	<script type="text/javascript">
	app.initialize();
	</script>
	</body>
	</html>