Browse Source

Improved IE compatibility

Added bad browser page
Organized scripts
master
Igor Zhukov 10 years ago
parent
commit
9bceb516c2
  1. 107
      app/badbrowser.html
  2. 51
      app/css/app.css
  3. 7
      app/index.html
  4. 6
      app/js/controllers.js
  5. 7
      app/js/init.js
  6. 2
      app/js/lib/crypto_worker.js
  7. 3
      app/js/lib/mtproto_wrapper.js
  8. 98
      app/js/lib/polyfill.js
  9. 27
      app/js/lib/utils.js
  10. 2
      app/js/services.js
  11. 4
      gulpfile.js
  12. 0
      scripts/cldr_localize.js
  13. 0
      scripts/emoji_data/build.php
  14. 0
      scripts/emoji_data/emoji.json
  15. 94
      scripts/ua_handler.js

107
app/badbrowser.html

@ -0,0 +1,107 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" style="display:block; overflow: auto; background: #f8f8f8;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Telegram Web</title>
<!-- build:css css/app.css -->
<link rel="stylesheet" href="vendor/angular/angular-csp.css"/>
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="css/app.css"/>
<!-- endbuild -->
<link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body class="non_osx is_1x">
<div class="tg_page_head" style="clear: both;">
<div class="navbar navbar-static-top navbar-inverse navbar_peer_not_selected" role="navigation">
<div class="container">
<div class="navbar-header pull-left">
<a class="navbar-brand" href=""><span class="tg_head_logo"></span></a>
</div>
<div class="navbar-menu pull-right">
<ul class="nav navbar-nav navbar-right" style="margin: 0;">
<li ng-if="!isLoggedIn"><a href="https://github.com/zhukov/webogram" target="_blank">About</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="welcome_form" style="padding-bottom: 50px; clear: both;">
<img class="welcome_logo" src="img/decentralization.png"/>
<h3 class="welcome_header"><strong>Telegram</strong> Web</h3>
<!-- <div class="welcome_text">
<p>This is an unofficial web-client for the <strong>Telegram Messenger</strong>.</p>
<p>It's still an <strong>alpha-version</strong> and may not be 200% reliable</p>
</div> -->
<div class="bad_browser_wrap">
<h2>You are using outdated browser!</h2>
<div class="bad_browser_text">
<p>Sorry, your browser is not supported by <strong>Telegram Web</strong>.</p>
<p>In order to use Telegram secure messaging protocol - MTProto, <strong>Telegram Web</strong> utilizes modern HTML5 technologies.</p>
<p>Your browser doesn't support these features. Please download a modern browser and come back soon!</p>
</div>
<a class="btn btn-primary btn-lg pull-right" href="//firefox.com" target="_blank">Download Mozilla Firefox</a>
<a class="btn btn-primary btn-lg" href="//google.com/chrome" target="_blank">Download Google Chrome</a>
</div>
</div>
<div class="welcome_footer">
<div class="welcome_cards_wrap clearfix">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-4" style="width: 33.33333333%; float: left;">
<div class="welcome_footer_card_wrap row">
<div class="welcome_footer_card welcome_footer_card_messaging"></div>
<h4>Fast messaging</h4>
<div class="welcome_footer_card_lead">Send messages with rich emoji support right from your desktop or laptop computer</div>
</div>
</div>
<div class="col-md-4 col-sm-4" style="width: 33.33333333%; float: left;">
<div class="welcome_footer_card_wrap">
<div class="welcome_footer_card welcome_footer_card_filesharing"></div>
<h4>Easy file sharing</h4>
<div class="welcome_footer_card_lead">Share files of any type using drag-and-drop or the attachment icon</div>
</div>
</div>
<div class="col-md-4 col-sm-4" style="width: 33.33333333%; float: left;">
<div class="welcome_footer_card_wrap">
<div class="welcome_footer_card welcome_footer_card_powerful"></div>
<h4>Powerful tools</h4>
<div class="welcome_footer_card_lead">Browse shared media and files by type \n and set custom notifications</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

51
app/css/app.css

@ -594,9 +594,9 @@ input.tg_range {
width: 100%; width: 100%;
max-width: 362px; max-width: 362px;
display: inline-block; display: inline-block;
background: #c7c7c7; /*background: #c7c7c7;*/
height: 3px; /*height: 18px;
line-height: 18px; line-height: 18px;*/
vertical-align: top; vertical-align: top;
margin: 8px 0; margin: 8px 0;
border-radius: 2px; border-radius: 2px;
@ -624,7 +624,6 @@ input.tg_range::-webkit-slider-thumb {
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden;
} }
input.tg_range::-moz-range-thumb { input.tg_range::-moz-range-thumb {
border: 0; border: 0;
background: #568cb5; background: #568cb5;
@ -633,6 +632,29 @@ input.tg_range::-moz-range-thumb {
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden;
} }
input.tg_range::-ms-track {
color: transparent;
border: 0;
cursor: pointer;
outline: none !important;
width: 100%;
max-width: 362px;
display: inline-block;
background: #c7c7c7;
height: 3px;
line-height: 18px;
vertical-align: top;
margin: 8px 0;
border-radius: 2px;
}
input.tg_range::-ms-thumb {
border: 0;
background: #568cb5;
width: 12px;
height: 12px;
border-radius: 6px;
overflow: hidden;
}
.tg_form_group { .tg_form_group {
@ -688,6 +710,9 @@ input.tg_range::-moz-range-thumb {
height: 160px; height: 160px;
margin: 0 auto; margin: 0 auto;
} }
img.welcome_logo {
background: none;
}
.welcome_header { .welcome_header {
text-align: center; text-align: center;
font-size: 24px; font-size: 24px;
@ -2649,3 +2674,21 @@ ce671b orange
.changelog_version_changes_list li { .changelog_version_changes_list li {
line-height: 20px; line-height: 20px;
} }
.bad_browser_wrap {
border-radius: 4px;
border: 1px solid #ccc;
background: #FFF;
max-width: 600px;
margin: 50px auto 0;
padding: 40px;
}
.bad_browser_wrap h2 {
margin-top: 0;
}
.bad_browser_text {
font-size: 14px;
line-height: 160%;
margin: 25px 0 30px;
}

7
app/index.html

@ -1,6 +1,9 @@
<!doctype html> <!doctype html>
<html lang="en" manifest="webogram.appcache" ng-csp=""> <html lang="en" manifest="webogram.appcache" ng-csp="" xmlns:ng="http://angularjs.org" id="ng-app">
<head> <head>
<!--[if lte IE 9]>
<meta HTTP-EQUIV="REFRESH" content="0; url=badbrowser.html">
<![endif]-->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Telegram Web</title> <title>Telegram Web</title>
@ -37,7 +40,7 @@
<div id="notify_sound"></div> <div id="notify_sound"></div>
<!-- build:js js/app.js --> <!-- build:js js/app.js -->
<script type="text/javascript" src="vendor/console-polyfill/console-polyfill.js"></script> <script type="text/javascript" src="js/lib/polyfill.js"></script>
<script type="text/javascript" src="vendor/jquery/jquery.min.js"></script> <script type="text/javascript" src="vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/lib/config.js"></script> <script type="text/javascript" src="js/lib/config.js"></script>
<script type="text/javascript" src="js/init.js"></script> <script type="text/javascript" src="js/init.js"></script>

6
app/js/controllers.js

@ -1505,7 +1505,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
return; return;
} }
$scope.delete = function () { $scope['delete'] = function () {
var messageID = $scope.messageID; var messageID = $scope.messageID;
ErrorService.confirm({type: 'MESSAGE_DELETE'}).then(function () { ErrorService.confirm({type: 'MESSAGE_DELETE'}).then(function () {
AppMessagesManager.deleteMessages([messageID]); AppMessagesManager.deleteMessages([messageID]);
@ -1714,7 +1714,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
}); });
}; };
$scope.delete = function () { $scope['delete'] = function () {
var messageID = $scope.photoID; var messageID = $scope.photoID;
ErrorService.confirm({type: 'MESSAGE_DELETE'}).then(function () { ErrorService.confirm({type: 'MESSAGE_DELETE'}).then(function () {
AppMessagesManager.deleteMessages([messageID]); AppMessagesManager.deleteMessages([messageID]);
@ -1744,7 +1744,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
}); });
}; };
$scope.delete = function () { $scope['delete'] = function () {
var messageID = $scope.messageID; var messageID = $scope.messageID;
ErrorService.confirm({type: 'MESSAGE_DELETE'}).then(function () { ErrorService.confirm({type: 'MESSAGE_DELETE'}).then(function () {
AppMessagesManager.deleteMessages([messageID]); AppMessagesManager.deleteMessages([messageID]);

7
app/js/init.js

@ -111,8 +111,13 @@
locale = (navigator.language || '').toLowerCase(); locale = (navigator.language || '').toLowerCase();
locale = Config.I18n.aliases[locale] || locale; locale = Config.I18n.aliases[locale] || locale;
} }
if (!Config.Mobile && Config.I18n.supported.indexOf(locale) != -1) { if (!Config.Mobile) {
for (var i = 0; i < Config.I18n.supported.length; i++) {
if (Config.I18n.supported[i] == locale) {
Config.I18n.locale = locale; Config.I18n.locale = locale;
break;
}
}
} }
bootReady.i18n_ng = Config.I18n.locale == defaultLocale; // Already included bootReady.i18n_ng = Config.I18n.locale == defaultLocale; // Already included

2
app/js/lib/crypto_worker.js

@ -6,7 +6,7 @@
*/ */
importScripts( importScripts(
'../../vendor/console-polyfill/console-polyfill.js', 'polyfill.js',
'bin_utils.js', 'bin_utils.js',
'../../vendor/jsbn/jsbn_combined.js', '../../vendor/jsbn/jsbn_combined.js',
'../../vendor/leemon_bigint/bigint.js', '../../vendor/leemon_bigint/bigint.js',

3
app/js/lib/mtproto_wrapper.js

@ -143,6 +143,7 @@ angular.module('izhukov.mtproto.wrapper', ['izhukov.utils', 'izhukov.mtproto'])
console.error(dT(), 'Error', error.code, error.type, baseDcID, dcID); console.error(dT(), 'Error', error.code, error.type, baseDcID, dcID);
if (error.code == 401 && baseDcID == dcID) { if (error.code == 401 && baseDcID == dcID) {
Storage.remove('dc', 'user_auth'); Storage.remove('dc', 'user_auth');
rejectPromise(error);
} }
else if (error.code == 401 && baseDcID && dcID != baseDcID) { else if (error.code == 401 && baseDcID && dcID != baseDcID) {
if (cachedExportPromise[dcID] === undefined) { if (cachedExportPromise[dcID] === undefined) {
@ -175,7 +176,7 @@ angular.module('izhukov.mtproto.wrapper', ['izhukov.utils', 'izhukov.mtproto'])
}); });
} }
else if (error.code == 303) { else if (error.code == 303) {
var newDcID = error.type.match(/^(PHONE_MIGRATE_|NETWORK_MIGRATE_)(\d+)/)[2]; var newDcID = error.type.match(/^(PHONE_MIGRATE_|NETWORK_MIGRATE_|USER_MIGRATE_)(\d+)/)[2];
if (newDcID != dcID) { if (newDcID != dcID) {
if (options.dcID) { if (options.dcID) {
options.dcID = newDcID; options.dcID = newDcID;

98
app/js/lib/polyfill.js

@ -0,0 +1,98 @@
// Console-polyfill. MIT license.
// https://github.com/paulmillr/console-polyfill
// Make it safe to do console.log() always.
(function (con) {
'use strict';
var prop, method;
var empty = {};
var dummy = function() {};
var properties = 'memory'.split(',');
var methods = ('assert,count,debug,dir,dirxml,error,exception,group,' +
'groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,' +
'time,timeEnd,trace,warn').split(',');
while (prop = properties.pop()) con[prop] = con[prop] || empty;
while (method = methods.pop()) con[method] = con[method] || dummy;
})(this.console = this.console || {});
/* Array.indexOf polyfill */
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(searchElement, fromIndex) {
var k;
if (this == null) {
throw new TypeError('"this" is null or not defined');
}
var O = Object(this);
var len = O.length >>> 0;
if (len === 0) {
return -1;
}
var n = +fromIndex || 0;
if (Math.abs(n) === Infinity) {
n = 0;
}
if (n >= len) {
return -1;
}
k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
while (k < len) {
if (k in O && O[k] === searchElement) {
return k;
}
k++;
}
return -1;
};
}
/* Array.isArray polyfill */
if (!Array.isArray) {
Array.isArray = function(arg) {
return Object.prototype.toString.call(arg) === '[object Array]';
};
}
/* Object.create polyfill */
if (typeof Object.create != 'function') {
Object.create = (function() {
var Object = function() {};
return function (prototype) {
if (arguments.length > 1) {
throw Error('Second argument not supported');
}
if (typeof prototype != 'object') {
throw TypeError('Argument must be an object');
}
Object.prototype = prototype;
var result = new Object();
Object.prototype = null;
return result;
};
})();
}
/* Function.bind polyfill */
if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
if (typeof this !== "function") {
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
}
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function () {},
fBound = function () {
return fToBind.apply(this instanceof fNOP && oThis
? this
: oThis,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}

27
app/js/lib/utils.js

@ -108,33 +108,6 @@ function listUniqSorted (list) {
return resultList; return resultList;
} }
// Bind polyfill from MDN
if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
if (typeof this !== "function") {
// closest thing possible to the ECMAScript 5
// internal IsCallable function
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
}
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function () {},
fBound = function () {
return fToBind.apply(this instanceof fNOP && oThis
? this
: oThis,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}
function templateUrl (tplName) { function templateUrl (tplName) {
return 'partials/' + (Config.Mobile ? 'mobile' : 'desktop') + '/' + tplName + '.html'; return 'partials/' + (Config.Mobile ? 'mobile' : 'desktop') + '/' + tplName + '.html';
} }

2
app/js/services.js

@ -424,7 +424,7 @@ angular.module('myApp.services', ['myApp.i18n'])
return; return;
} }
this.continue(); this['continue']();
} }
request.onerror = function (e) { request.onerror = function (e) {

4
gulpfile.js

@ -45,8 +45,8 @@ gulp.task('copy', function() {
.pipe(gulp.dest('dist')), .pipe(gulp.dest('dist')),
gulp.src(['app/img/**/*.wav']) gulp.src(['app/img/**/*.wav'])
.pipe(gulp.dest('dist/img')), .pipe(gulp.dest('dist/img')),
gulp.src('app/vendor/console-polyfill/console-polyfill.js') gulp.src('app/js/polyfill.js')
.pipe(gulp.dest('dist/vendor/console-polyfill')), .pipe(gulp.dest('dist/js/polyfill.js')),
gulp.src('app/js/lib/bin_utils.js') gulp.src('app/js/lib/bin_utils.js')
.pipe(gulp.dest('dist/js/lib')), .pipe(gulp.dest('dist/js/lib')),
gulp.src('app/vendor/closure/long.js') gulp.src('app/vendor/closure/long.js')

0
cldr_localize.js → scripts/cldr_localize.js

0
emoji_data/build.php → scripts/emoji_data/build.php

0
emoji_data/emoji.json → scripts/emoji_data/emoji.json

94
scripts/ua_handler.js

@ -0,0 +1,94 @@
var fs = require('fs'), path = require('path');
var uaList = fs.readFileSync(path.join(__dirname, 'ua.txt'));
uaList = uaList.toString().split('\n');
var OSs = {};
var browsers = {};
var browserVersions = {};
var unknown = [];
var osMatch = {
ios: /iOS|iPhone OS/i,
android: /Android/i,
linux: /Linux/i,
win: /Windows/i,
osx: /Mac|OS X/i,
blackberry: /BlackBerry|BB10/i,
series60: /Series 60|Series60/i,
series40: /Series 40|Series40/i,
j2me: /J2ME|MIDP/i
};
var browserMatch = {
opera: /opera/i,
ie: /msie|trident\//i,
chrome: /chrome/i,
chromium: /chromium/i,
safari: /safari|AppleWebKit/i,
firefox: /firefox/i,
blackberry: /BlackBerry/i
};
var featureMatch = {
ipad: /ipad/i,
opera_mobile: /opera mini|opera mobi/i,
opera_mini: /opera mini/i,
blackberry: /blackberry/i
};
uaList.forEach(function (uaName) {
var os = 'unknown';
for (var curOs in osMatch) {
if (uaName.match(osMatch[curOs])) {
os = curOs;
break;
}
}
var browser = 'unknown';
for (var curBrowser in browserMatch) {
if (uaName.match(browserMatch[curBrowser])) {
browser = curBrowser;
break;
}
}
var version = (
uaName.match(/MSIE ([\d.]+)/) ||
uaName.match( /.+(?:me|ox|on|rv|it|era|opr|ie)[\/: ]([\d.]+)/) ||
[0,'0']
)[1];
if (!OSs[os]) {
OSs[os] = 1;
} else {
OSs[os]++;
}
if (!browsers[os + ' ' + browser]) {
browsers[os + ' ' + browser] = 1;
} else {
browsers[os + ' ' + browser]++;
}
if (os == 'unknown' || browser == 'unknown') {
unknown.push(uaName);
}
if (!browserVersions[os + ' ' + browser + ' ' + version]) {
browserVersions[os + ' ' + browser + ' ' + version] = 1;
} else {
browserVersions[os + ' ' + browser + ' ' + version]++;
}
})
console.log(OSs);
console.log(browsers);
console.log(browserVersions);
// console.log(unknown);
Loading…
Cancel
Save