angular►stripe

Angular stripe example

By: Ryan Wong at

After looking at a whole bunch of tutorials, their submission form is very strict and require you to use their type of form.

I needed a custom form that takes their credit card number to get a valid stripe credit card token and then submit the form.

To do this what I did is extract the credit card field, cvc, expiry date and create a javascript form that I will submit from the controller.

make sure you include stripe file.

1
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

controller.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
angular.module('registercontroller',[])
.controller('registerCtrl', ['$scope', '$ionicPopup', registerCtrl])
function registerCtrl($s, $i) {
    $s.profile = {
        username: '',
        number: '',
        expiry: '',
        cvc: '',
        stripeToken: ''
      };
      $s.signUp = function(form){
        if(form.$valid) {
            var stripeForm = {
                number: $s.profile.number.replace(/ /g,''),
                exp_month: $s.profile.expiry.month,
                exp_year: $s.profile.expiry.year,
                cvc: $s.profile.cvc
            };

            var f = document.createElement("form");
            f.setAttribute('method',"post");
            f.setAttribute('action',"");

            var number = document.createElement("input");
            number.setAttribute('type',"text");
            number.setAttribute('data-stripe',"number");
            number.setAttribute('value', stripeForm.number);

            var cvc = document.createElement("input");
            cvc.setAttribute('type',"text");
            cvc.setAttribute('data-stripe',"cvc");
            cvc.setAttribute('value', $s.profile.cvc);

            var exp_month = document.createElement("input");
            exp_month.setAttribute('type',"text");
            exp_month.setAttribute('data-stripe',"exp_month");
            exp_month.setAttribute('value', stripeForm.exp_month);

            var exp_year = document.createElement("input");
            exp_year.setAttribute('type',"text");
            exp_year.setAttribute('data-stripe',"exp_year");
            exp_year.setAttribute('value', stripeForm.exp_year);

            f.appendChild(number);
            f.appendChild(cvc);
            f.appendChild(exp_month);
            f.appendChild(exp_year);

            window.Stripe.card.createToken(f, function (status, response) {
                console.log('status', status);
                console.log('response', response);
                if (response.error) {
                    var alert = $i.alert({
                        title: 'Credit Card Error',
                        template: "Sorry your credit card information is not correct",
                        buttons: [
                        { text: 'Ok',
                        type: 'button-calm'
                        }
                        ]
                    });
                } else {
                    $s.profile.stripeToken = response.id;
                    register($s.profile);
                    //else ends
                }
            });

        }
      };
}

HTML:
This is the sample form I used

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<form  class="signinForm" name="signupForm" novalidate="" ng-submit="signUp(signupForm)">
<div class="input">

	<p class="w90 mx-5p">Name</p>
  <label class="item item-input">
    <input type="text" placeholder="Example Name" name="username" ng-model="profile.username" ng-minlength="2" ng-maxlength="15" required>
  </label>
  <div class="form-errors w90 mx-auto light-red" ng-messages="signupForm.username.$dirty && signupForm.username.$error">
          <div class="form-error" ng-message="required">Your UserName is Required.</div>
          <div class="form-error" ng-message="minlength">Your UserName cannot be that short.</div>
          <div class="form-error" ng-message="maxlength">Your UserName must be less than 15 characters</div>
  </div>

  <p class="w90 mx-5p mt2">Phone Number</p>

  <label class="item item-input">
    <input type="tel" name="telephone" ng-model="profile.telephone" ng-minlength="2"  required onlynum>
  </label>
  <div class="form-errors w90 mx-auto light-red" ng-messages="signupForm.telephone.$dirty && signupForm.telephone.$error">
          <div class="form-error" ng-message="required">Your Phone Number is Required.</div>
          <div class="form-error" ng-message="minlength">Your Phone Number cannot be that short.</div>
  </div>

  <p class="w90 mx-5p mt2">Email</p>

  <label class="item item-input">
    <input type="email" name="email" ng-model='profile.email' placeholder="example@outlook.com" ng-model-options="{updateOn: 'blur'}" ng-minlength="1"  required blacklist>
  </label>
 <div class="form-errors w90 mx-auto light-red" ng-messages="signupForm.email.$dirty && signupForm.email.$error">
          <div class="form-error" ng-message="required">Your Email is Required.</div>
          <div class="form-error" ng-message="minlength">Your Email cannot be that short.</div>
          <div class="form-error" ng-message="email">That's not a valid Email</div>
          <div class="form-error" ng-message="blacklist">Your Email must be an outlook email.</div>
  </div>
   <p class="w90 mx-5p mt2">Email Password</p>

  <label class="item item-input">
    <input type="password" placeholder="*******" name="password" ng-model="profile.password" ng-minlength="8"  ng-maxlength="25" required>
  </label>
  <small class="passwordtext">Please enter in your actual email password so we can retrieve emails from it.</small>
  <div class="form-errors w90 mx-auto light-red" ng-messages="signupForm.password.$dirty && signupForm.password.$error">
          <div class="form-error" ng-message="required">This field is required.</div>
          <div class="form-error" ng-message="minlength">This field is must be at least 8 characters.</div>
          <div class="form-error" ng-message="maxlength">This field is must be less than 25 characters</div>
  </div>
   <p class="w90 mx-5p mt2">Subscription plan</p>
  <label class="item item-input pa0">
    <input type="text" value="standard plan $5.99 per month" readonly=""
  </label>

  <p class="w90 mx-5p mt2">Credit Card Number</p>
  <label class="item item-input">
    <card-number-input class="form-control" name="number" ng-model="profile.number" card-type="cardType"></card-number-input>
  </label>
  <div class="form-errors w90 mx-auto light-red" ng-messages="signupForm.number.$dirty && signupForm.number.$error">
    <div class="form-error" ng-message="cardNumber">Your credit card number is not valid.</div>
  </div>

  <p class="w90 mx-5p mt2">Expiry Date</p>
  <label class="item item-input">
  <!-- <input type="text" name="expiry" ng-model="profile.expiry" payments-validate="expiry" payments-format="expiry" placeholder="mm/yyyy" /> -->
   <card-expiry-input class="form-control" name="expiry" ng-model="profile.expiry" placeholder="mm/yyyy"></card-expiry-input>
  </label>
  <div class="form-errors w90 mx-auto light-red" ng-messages="signupForm.expiry.$dirty && signupForm.expiry.$error">
    <div class="form-error" ng-message="cardExpiry">Your expiry date is not valid.</div>
  </div>

  <p class="w90 mx-5p mt2">CVC</p>
  <label class="item item-input">
  <card-cvc-input class="form-control" name="cvc" ng-model="profile.cvc" placeholder="****"></card-cvc-input>
  </label>
  <div class="form-errors w90 mx-auto light-red" ng-messages="signupForm.cvc.$dirty && signupForm.cvc.$error">
    <div class="form-error" ng-message="cardCvc">CVC is too short.</div>
  </div>

    <button class="button w90 blue-button">
      Submit
    </button>
</div>
</form>
angular►filter

Angular only number filter

By: Ryan Wong at

Here’s an angular filter that allows only numbers.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function onlynum() {
  return {
    require: 'ngModel',
    restrict: 'A',
    link: function (scope, element, attr, ctrl) {
      function inputValue(val) {
        if (val) {
          var digits = val.replace(/[^0-9]/g, '');

          if (digits !== val) {
            ctrl.$setViewValue(digits);
            ctrl.$render();
          }
          return parseInt(digits,10);
        }
        return undefined;
      }
      ctrl.$parsers.push(inputValue);
    }
  }
}
ionic►sqlite

phonegap sqlite tutorial in ionic 1

By: Ryan Wong at

Here’s my tutorial on making your sqlite work in your ionic application.

1.run “cordova plugin add io.litehelpers.cordova.sqlite”

2.create a file called “yourdb.db” in your www folder.

3.Run “ionic run android —device” to open your app even if its not complete.

4.Open chrome to “chrome://inspect/#devices” and open the developer tool.

5.In order to add the tables you need to sqlite, you must do it on the device. You can’t do it from an editor on your computer from my experience.

6.Type following to your developer tool.

1
2
3
var db = window.sqlitePlugin.openDatabase({name: "yourdb.db", createFromLocation: 1, location: 2, androidLockWorkaround: 1});
db.executeSql('CREATE TABLE IF NOT EXISTS profile (id integer primary key, email text, passwords text, details text)',[], function(res){console.log(res);});
db.executeSql('PRAGMA table_info(profile);',[], function(res){console.log(res);});

The first line opens the database. Make sure you have all those options there to enable it to work on both android and ios.

Next create the tables you need.

To see the columns you have run the third line.

Now everything is setup, I’ll show you how to code from ionic.

I have given a non trival example sql module you can use.

I show you how to insert, delete, query, update your database.

app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
angular.module('home', [])
.run(['$ionicPlatform', '$rootScope',
 function($ionicPlatform, $rootScope) {

  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });

  document.addEventListener("deviceready", function(){
    $rootScope.db = window.sqlitePlugin.openDatabase({name: "yourdb.db", createFromLocation: 1, location: 2, androidLockWorkaround: 1});
  }, false);
}]);

sqlService.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
angular.module('sqlService', [])
.service('sqlModule', ['$rootScope', '$q',  sqlModule])

function sqlModule($r, $q){
 var self = this;
 this.insertProfile = function(email, password, detailObj, cb){
    var query = "Insert INTO chat (email, password, detailObj) VALUES (?,?,?);";
    $r.db.transaction(function(tx) {
        tx.executeSql(query, [email, password, JSON.stringify(detailObj)], function(tx, res) {
          console.log("insertId: " + res.insertId);
          return cb(null, true);
        }, function(e) {
          console.log("ERROR: " + e.message);
          return cb(e, false);
        });
      });
 };

 this.queryProfile = function(email, cb){
    $r.db.executeSql('SELECT * FROM profile WHERE email LIKE "%' + email + '";',[], function(res){
        var result = [];
        var length = res.rows.length;
        for (var i = 0; i < length; i++){
            var holder = res.rows.item(i);
            var jsonObj = JSON.parse(holder.details);
            result.push({
                email: holder.email,
                password: holder.password,
                detail: jsonObj
            });
        }
        return cb(null, result);
    });
 };

 this.queryAllProfile = function(cb){
    $r.db.executeSql('SELECT * FROM profile;',[], function(res){
        var result = [];
        var length = res.rows.length;
        for (var i = 0; i < length; i++){
            var holder = res.rows.item(i);
            var jsonObj = JSON.parse(holder.details);
            result.push({
                email: holder.email,
                password: holder.password,
                detail: jsonObj
            });
        }
        return cb(null, result);
    });
 };

 this.updateProfile = function(email, password, details, cb){
    var query = "UPDATE profile SET password = ?, details = ? WHERE email = ?;";
    $r.db.transaction(function(tx) {
        tx.executeSql(query, [password, JSON.stringify(details), email], function(tx, res) {
          console.log("update: " + res);
          return cb(null, true);
        }, function(e) {
          console.log("ERROR: " + e.message);
          return cb(e, false);
        });
      });
 };

 this.deleteAllProfile = function(){
    $r.db.executeSql('DELETE FROM profile;',[], function(res){
        console.log(res);
    });
 };

}
angular►publish►subscribe

ionic publish and subscribe example

By: Ryan Wong at

Here’s the scenario. I want to run an expensive function on a time interval that is called on many pages.
If someone else also calls the expensive function, it will ignore this request.

app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
angular.module('app', [])
.run(['$ionicPlatform', '$rootScope',
 function($ionicPlatform, $rootScope) {

 $rootScope.startJob = true;
 $rootScope.$on('longjob', function (event, data) {
  if ($rootScope.startJob){
    $rootScope.startJob = false;
    setTimeout(function(){
      longFunction(data, function(e, result){
      //reset $rootScope
      $rootScope.startJob = true;
      });
    }, 2000);
  }
  });


 }]);

controller.js

1
2
3
function ctrl($scope){
    $scope.$emit('longjob', {});
}
laravel

Laravel translate error messages

By: Ryan Wong at

There’s no complete guide on translating text based on locale. So here’s my take on it.

In the blade file, you can translate by doing the following:

Blade:

1
<div>@lang('messages.lang_name',array(),'de')</div>

The function to translate lang().

The @ sign is blades way of identifying that it’s a php function

‘messages.lang_name’ specifies which key to use.

messages is the filename and lang_name is the key in the array in messages.

The array is parameters you can pass in.

‘de’ is the country code. I have a list of country codes below. you don’t need to add the country code but you can.

One way to implement locale is to have a middleware that identify the new lang and save it to the session and set it in App.

PHP:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?php namespace App\Http\Middleware;

use Closure;
use Session;
use App;
use Config;

class Locale {

    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        $language = Session::get('lang', Config::get('app.locale'));
        App::setLocale($language);
        $lang = $request->input('lang');
        if ($lang){
            switch ($lang) {
                case 'fr':
                    App::setLocale('fr');
                    Session::put('lang', 'fr');
                    break;
                case 'de':
                    App::setLocale('de');
                    Session::put('lang', 'de');
                    break;
                default:
                    App::setLocale('en');
                    Session::put('lang', 'en');
                    break;
            }
        }
        return $next($request);
    }

}

Another way is to retrieve $_SERVER[‘HTTP_ACCEPT_LANGUAGE’] and set the language from that.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
<?php
return [
    'supportedLocales' => [
        'ace'         => ['name' => 'Achinese',               'script' => 'Latn', 'native' => 'Aceh'],
        'af'          => ['name' => 'Afrikaans',              'script' => 'Latn', 'native' => 'Afrikaans'],
        'agq'         => ['name' => 'Aghem',                  'script' => 'Latn', 'native' => 'Aghem'],
        'ak'          => ['name' => 'Akan',                   'script' => 'Latn', 'native' => 'Akan'],
        'an'          => ['name' => 'Aragonese',              'script' => 'Latn', 'native' => 'aragonés'],
        'cch'         => ['name' => 'Atsam',                  'script' => 'Latn', 'native' => 'Atsam'],
        'gn'          => ['name' => 'Guaraní',                'script' => 'Latn', 'native' => 'Avañe’ẽ'],
        'ae'          => ['name' => 'Avestan',                'script' => 'Latn', 'native' => 'avesta'],
        'ay'          => ['name' => 'Aymara',                 'script' => 'Latn', 'native' => 'aymar aru'],
        'az'          => ['name' => 'Azerbaijani (Latin)',    'script' => 'Latn', 'native' => 'azərbaycanca'],
        'id'          => ['name' => 'Indonesian',             'script' => 'Latn', 'native' => 'Bahasa Indonesia'],
        'ms'          => ['name' => 'Malay',                  'script' => 'Latn', 'native' => 'Bahasa Melayu'],
        'bm'          => ['name' => 'Bambara',                'script' => 'Latn', 'native' => 'bamanakan'],
        'jv'          => ['name' => 'Javanese (Latin)',       'script' => 'Latn', 'native' => 'Basa Jawa'],
        'su'          => ['name' => 'Sundanese',              'script' => 'Latn', 'native' => 'Basa Sunda'],
        'bh'          => ['name' => 'Bihari',                 'script' => 'Latn', 'native' => 'Bihari'],
        'bi'          => ['name' => 'Bislama',                'script' => 'Latn', 'native' => 'Bislama'],
        'nb'          => ['name' => 'Norwegian Bokmål',       'script' => 'Latn', 'native' => 'Bokmål'],
        'bs'          => ['name' => 'Bosnian',                'script' => 'Latn', 'native' => 'bosanski'],
        'br'          => ['name' => 'Breton',                 'script' => 'Latn', 'native' => 'brezhoneg'],
        'ca'          => ['name' => 'Catalan',                'script' => 'Latn', 'native' => 'català'],
        'ch'          => ['name' => 'Chamorro',               'script' => 'Latn', 'native' => 'Chamoru'],
        'ny'          => ['name' => 'Chewa',                  'script' => 'Latn', 'native' => 'chiCheŵa'],
        'kde'         => ['name' => 'Makonde',                'script' => 'Latn', 'native' => 'Chimakonde'],
        'sn'          => ['name' => 'Shona',                  'script' => 'Latn', 'native' => 'chiShona'],
        'co'          => ['name' => 'Corsican',               'script' => 'Latn', 'native' => 'corsu'],
        'cy'          => ['name' => 'Welsh',                  'script' => 'Latn', 'native' => 'Cymraeg'],
        'da'          => ['name' => 'Danish',                 'script' => 'Latn', 'native' => 'dansk'],
        'se'          => ['name' => 'Northern Sami',          'script' => 'Latn', 'native' => 'davvisámegiella'],
        'de'          => ['name' => 'German',                 'script' => 'Latn', 'native' => 'Deutsch'],
        'luo'         => ['name' => 'Luo',                    'script' => 'Latn', 'native' => 'Dholuo'],
        'nv'          => ['name' => 'Navajo',                 'script' => 'Latn', 'native' => 'Diné bizaad'],
        'dua'         => ['name' => 'Duala',                  'script' => 'Latn', 'native' => 'duálá'],
        'et'          => ['name' => 'Estonian',               'script' => 'Latn', 'native' => 'eesti'],
        'na'          => ['name' => 'Nauru',                  'script' => 'Latn', 'native' => 'Ekakairũ Naoero'],
        'guz'         => ['name' => 'Ekegusii',               'script' => 'Latn', 'native' => 'Ekegusii'],
        'en'          => ['name' => 'English',                'script' => 'Latn', 'native' => 'English'],
        'en-AU'       => ['name' => 'Australian English',     'script' => 'Latn', 'native' => 'Australian English'],
        'en-GB'       => ['name' => 'British English',        'script' => 'Latn', 'native' => 'British English'],
        'en-US'       => ['name' => 'U.S. English',           'script' => 'Latn', 'native' => 'U.S. English'],
        'es'          => ['name' => 'Spanish',                'script' => 'Latn', 'native' => 'español'],
        'eo'          => ['name' => 'Esperanto',              'script' => 'Latn', 'native' => 'esperanto'],
        'eu'          => ['name' => 'Basque',                 'script' => 'Latn', 'native' => 'euskara'],
        'ewo'         => ['name' => 'Ewondo',                 'script' => 'Latn', 'native' => 'ewondo'],
        'ee'          => ['name' => 'Ewe',                    'script' => 'Latn', 'native' => 'eʋegbe'],
        'fil'         => ['name' => 'Filipino',               'script' => 'Latn', 'native' => 'Filipino'],
        'fr'          => ['name' => 'French',                 'script' => 'Latn', 'native' => 'français'],
        'fr-CA'       => ['name' => 'Canadian French',        'script' => 'Latn', 'native' => 'français canadien'],
        'fy'          => ['name' => 'Western Frisian',        'script' => 'Latn', 'native' => 'frysk'],
        'fur'         => ['name' => 'Friulian',               'script' => 'Latn', 'native' => 'furlan'],
        'fo'          => ['name' => 'Faroese',                'script' => 'Latn', 'native' => 'føroyskt'],
        'gaa'         => ['name' => 'Ga',                     'script' => 'Latn', 'native' => 'Ga'],
        'ga'          => ['name' => 'Irish',                  'script' => 'Latn', 'native' => 'Gaeilge'],
        'gv'          => ['name' => 'Manx',                   'script' => 'Latn', 'native' => 'Gaelg'],
        'sm'          => ['name' => 'Samoan',                 'script' => 'Latn', 'native' => 'Gagana fa’a Sāmoa'],
        'gl'          => ['name' => 'Galician',               'script' => 'Latn', 'native' => 'galego'],
        'ki'          => ['name' => 'Kikuyu',                 'script' => 'Latn', 'native' => 'Gikuyu'],
        'gd'          => ['name' => 'Scottish Gaelic',        'script' => 'Latn', 'native' => 'Gàidhlig'],
        'ha'          => ['name' => 'Hausa',                  'script' => 'Latn', 'native' => 'Hausa'],
        'bez'         => ['name' => 'Bena',                   'script' => 'Latn', 'native' => 'Hibena'],
        'ho'          => ['name' => 'Hiri Motu',              'script' => 'Latn', 'native' => 'Hiri Motu'],
        'hr'          => ['name' => 'Croatian',               'script' => 'Latn', 'native' => 'hrvatski'],
        'bem'         => ['name' => 'Bemba',                  'script' => 'Latn', 'native' => 'Ichibemba'],
        'io'          => ['name' => 'Ido',                    'script' => 'Latn', 'native' => 'Ido'],
        'ig'          => ['name' => 'Igbo',                   'script' => 'Latn', 'native' => 'Igbo'],
        'rn'          => ['name' => 'Rundi',                  'script' => 'Latn', 'native' => 'Ikirundi'],
        'ia'          => ['name' => 'Interlingua',            'script' => 'Latn', 'native' => 'interlingua'],
        'iu-Latn'     => ['name' => 'Inuktitut (Latin)',      'script' => 'Latn', 'native' => 'Inuktitut'],
        'sbp'         => ['name' => 'Sileibi',                'script' => 'Latn', 'native' => 'Ishisangu'],
        'nd'          => ['name' => 'North Ndebele',          'script' => 'Latn', 'native' => 'isiNdebele'],
        'nr'          => ['name' => 'South Ndebele',          'script' => 'Latn', 'native' => 'isiNdebele'],
        'xh'          => ['name' => 'Xhosa',                  'script' => 'Latn', 'native' => 'isiXhosa'],
        'zu'          => ['name' => 'Zulu',                   'script' => 'Latn', 'native' => 'isiZulu'],
        'it'          => ['name' => 'Italian',                'script' => 'Latn', 'native' => 'italiano'],
        'ik'          => ['name' => 'Inupiaq',                'script' => 'Latn', 'native' => 'Iñupiaq'],
        'dyo'         => ['name' => 'Jola-Fonyi',             'script' => 'Latn', 'native' => 'joola'],
        'kea'         => ['name' => 'Kabuverdianu',           'script' => 'Latn', 'native' => 'kabuverdianu'],
        'kaj'         => ['name' => 'Jju',                    'script' => 'Latn', 'native' => 'Kaje'],
        'mh'          => ['name' => 'Marshallese',            'script' => 'Latn', 'native' => 'Kajin M̧ajeļ'],
        'kl'          => ['name' => 'Kalaallisut',            'script' => 'Latn', 'native' => 'kalaallisut'],
        'kln'         => ['name' => 'Kalenjin',               'script' => 'Latn', 'native' => 'Kalenjin'],
        'kr'          => ['name' => 'Kanuri',                 'script' => 'Latn', 'native' => 'Kanuri'],
        'kcg'         => ['name' => 'Tyap',                   'script' => 'Latn', 'native' => 'Katab'],
        'kw'          => ['name' => 'Cornish',                'script' => 'Latn', 'native' => 'kernewek'],
        'naq'         => ['name' => 'Nama',                   'script' => 'Latn', 'native' => 'Khoekhoegowab'],
        'rof'         => ['name' => 'Rombo',                  'script' => 'Latn', 'native' => 'Kihorombo'],
        'kam'         => ['name' => 'Kamba',                  'script' => 'Latn', 'native' => 'Kikamba'],
        'kg'          => ['name' => 'Kongo',                  'script' => 'Latn', 'native' => 'Kikongo'],
        'jmc'         => ['name' => 'Machame',                'script' => 'Latn', 'native' => 'Kimachame'],
        'rw'          => ['name' => 'Kinyarwanda',            'script' => 'Latn', 'native' => 'Kinyarwanda'],
        'asa'         => ['name' => 'Kipare',                 'script' => 'Latn', 'native' => 'Kipare'],
        'rwk'         => ['name' => 'Rwa',                    'script' => 'Latn', 'native' => 'Kiruwa'],
        'saq'         => ['name' => 'Samburu',                'script' => 'Latn', 'native' => 'Kisampur'],
        'ksb'         => ['name' => 'Shambala',               'script' => 'Latn', 'native' => 'Kishambaa'],
        'swc'         => ['name' => 'Congo Swahili',          'script' => 'Latn', 'native' => 'Kiswahili ya Kongo'],
        'sw'          => ['name' => 'Swahili',                'script' => 'Latn', 'native' => 'Kiswahili'],
        'dav'         => ['name' => 'Dawida',                 'script' => 'Latn', 'native' => 'Kitaita'],
        'teo'         => ['name' => 'Teso',                   'script' => 'Latn', 'native' => 'Kiteso'],
        'khq'         => ['name' => 'Koyra Chiini',           'script' => 'Latn', 'native' => 'Koyra ciini'],
        'ses'         => ['name' => 'Songhay',                'script' => 'Latn', 'native' => 'Koyraboro senni'],
        'mfe'         => ['name' => 'Morisyen',               'script' => 'Latn', 'native' => 'kreol morisien'],
        'ht'          => ['name' => 'Haitian',                'script' => 'Latn', 'native' => 'Kreyòl ayisyen'],
        'kj'          => ['name' => 'Kuanyama',               'script' => 'Latn', 'native' => 'Kwanyama'],
        'ksh'         => ['name' => 'Kölsch',                 'script' => 'Latn', 'native' => 'Kölsch'],
        'ebu'         => ['name' => 'Kiembu',                 'script' => 'Latn', 'native' => 'Kĩembu'],
        'mer'         => ['name' => 'Kimîîru',                'script' => 'Latn', 'native' => 'Kĩmĩrũ'],
        'lag'         => ['name' => 'Langi',                  'script' => 'Latn', 'native' => 'Kɨlaangi'],
        'lah'         => ['name' => 'Lahnda',                 'script' => 'Latn', 'native' => 'Lahnda'],
        'la'          => ['name' => 'Latin',                  'script' => 'Latn', 'native' => 'latine'],
        'lv'          => ['name' => 'Latvian',                'script' => 'Latn', 'native' => 'latviešu'],
        'to'          => ['name' => 'Tongan',                 'script' => 'Latn', 'native' => 'lea fakatonga'],
        'lt'          => ['name' => 'Lithuanian',             'script' => 'Latn', 'native' => 'lietuvių'],
        'li'          => ['name' => 'Limburgish',             'script' => 'Latn', 'native' => 'Limburgs'],
        'ln'          => ['name' => 'Lingala',                'script' => 'Latn', 'native' => 'lingála'],
        'lg'          => ['name' => 'Ganda',                  'script' => 'Latn', 'native' => 'Luganda'],
        'luy'         => ['name' => 'Oluluyia',               'script' => 'Latn', 'native' => 'Luluhia'],
        'lb'          => ['name' => 'Luxembourgish',          'script' => 'Latn', 'native' => 'Lëtzebuergesch'],
        'hu'          => ['name' => 'Hungarian',              'script' => 'Latn', 'native' => 'magyar'],
        'mgh'         => ['name' => 'Makhuwa-Meetto',         'script' => 'Latn', 'native' => 'Makua'],
        'mg'          => ['name' => 'Malagasy',               'script' => 'Latn', 'native' => 'Malagasy'],
        'mt'          => ['name' => 'Maltese',                'script' => 'Latn', 'native' => 'Malti'],
        'mtr'         => ['name' => 'Mewari',                 'script' => 'Latn', 'native' => 'Mewari'],
        'mua'         => ['name' => 'Mundang',                'script' => 'Latn', 'native' => 'Mundang'],
        'mi'          => ['name' => 'Māori',                  'script' => 'Latn', 'native' => 'Māori'],
        'nl'          => ['name' => 'Dutch',                  'script' => 'Latn', 'native' => 'Nederlands'],
        'nmg'         => ['name' => 'Kwasio',                 'script' => 'Latn', 'native' => 'ngumba'],
        'yav'         => ['name' => 'Yangben',                'script' => 'Latn', 'native' => 'nuasue'],
        'nn'          => ['name' => 'Norwegian Nynorsk',      'script' => 'Latn', 'native' => 'nynorsk'],
        'oc'          => ['name' => 'Occitan',                'script' => 'Latn', 'native' => 'occitan'],
        'ang'         => ['name' => 'Old English',            'script' => 'Runr', 'native' => 'Old English'],
        'xog'         => ['name' => 'Soga',                   'script' => 'Latn', 'native' => 'Olusoga'],
        'om'          => ['name' => 'Oromo',                  'script' => 'Latn', 'native' => 'Oromoo'],
        'ng'          => ['name' => 'Ndonga',                 'script' => 'Latn', 'native' => 'OshiNdonga'],
        'hz'          => ['name' => 'Herero',                 'script' => 'Latn', 'native' => 'Otjiherero'],
        'uz-Latn'     => ['name' => 'Uzbek (Latin)',          'script' => 'Latn', 'native' => 'oʼzbekcha'],
        'nds'         => ['name' => 'Low German',             'script' => 'Latn', 'native' => 'Plattdüütsch'],
        'pl'          => ['name' => 'Polish',                 'script' => 'Latn', 'native' => 'polski'],
        'pt'          => ['name' => 'Portuguese',             'script' => 'Latn', 'native' => 'português'],
        'pt-BR'       => ['name' => 'Brazilian Portuguese',   'script' => 'Latn', 'native' => 'português do Brasil'],
        'ff'          => ['name' => 'Fulah',                  'script' => 'Latn', 'native' => 'Pulaar'],
        'pi'          => ['name' => 'Pahari-Potwari',         'script' => 'Latn', 'native' => 'Pāli'],
        'aa'          => ['name' => 'Afar',                   'script' => 'Latn', 'native' => 'Qafar'],
        'ty'          => ['name' => 'Tahitian',               'script' => 'Latn', 'native' => 'Reo Māohi'],
        'ksf'         => ['name' => 'Bafia',                  'script' => 'Latn', 'native' => 'rikpa'],
        'ro'          => ['name' => 'Romanian',               'script' => 'Latn', 'native' => 'română'],
        'cgg'         => ['name' => 'Chiga',                  'script' => 'Latn', 'native' => 'Rukiga'],
        'rm'          => ['name' => 'Romansh',                'script' => 'Latn', 'native' => 'rumantsch'],
        'qu'          => ['name' => 'Quechua',                'script' => 'Latn', 'native' => 'Runa Simi'],
        'nyn'         => ['name' => 'Nyankole',               'script' => 'Latn', 'native' => 'Runyankore'],
        'ssy'         => ['name' => 'Saho',                   'script' => 'Latn', 'native' => 'Saho'],
        'sc'          => ['name' => 'Sardinian',              'script' => 'Latn', 'native' => 'sardu'],
        'de-CH'       => ['name' => 'Swiss High German',      'script' => 'Latn', 'native' => 'Schweizer Hochdeutsch'],
        'gsw'         => ['name' => 'Swiss German',           'script' => 'Latn', 'native' => 'Schwiizertüütsch'],
        'trv'         => ['name' => 'Taroko',                 'script' => 'Latn', 'native' => 'Seediq'],
        'seh'         => ['name' => 'Sena',                   'script' => 'Latn', 'native' => 'sena'],
        'nso'         => ['name' => 'Northern Sotho',         'script' => 'Latn', 'native' => 'Sesotho sa Leboa'],
        'st'          => ['name' => 'Southern Sotho',         'script' => 'Latn', 'native' => 'Sesotho'],
        'tn'          => ['name' => 'Tswana',                 'script' => 'Latn', 'native' => 'Setswana'],
        'sq'          => ['name' => 'Albanian',               'script' => 'Latn', 'native' => 'shqip'],
        'sid'         => ['name' => 'Sidamo',                 'script' => 'Latn', 'native' => 'Sidaamu Afo'],
        'ss'          => ['name' => 'Swati',                  'script' => 'Latn', 'native' => 'Siswati'],
        'sk'          => ['name' => 'Slovak',                 'script' => 'Latn', 'native' => 'slovenčina'],
        'sl'          => ['name' => 'Slovene',                'script' => 'Latn', 'native' => 'slovenščina'],
        'so'          => ['name' => 'Somali',                 'script' => 'Latn', 'native' => 'Soomaali'],
        'sr-Latn'     => ['name' => 'Serbian (Latin)',        'script' => 'Latn', 'native' => 'Srpski'],
        'sh'          => ['name' => 'Serbo-Croatian',         'script' => 'Latn', 'native' => 'srpskohrvatski'],
        'fi'          => ['name' => 'Finnish',                'script' => 'Latn', 'native' => 'suomi'],
        'sv'          => ['name' => 'Swedish',                'script' => 'Latn', 'native' => 'svenska'],
        'sg'          => ['name' => 'Sango',                  'script' => 'Latn', 'native' => 'Sängö'],
        'tl'          => ['name' => 'Tagalog',                'script' => 'Latn', 'native' => 'Tagalog'],
        'tzm-Latn'    => ['name' => 'Central Atlas Tamazight (Latin)', 'script' => 'Latn', 'native' => 'Tamazight'],
        'kab'         => ['name' => 'Kabyle',                 'script' => 'Latn', 'native' => 'Taqbaylit'],
        'twq'         => ['name' => 'Tasawaq',                'script' => 'Latn', 'native' => 'Tasawaq senni'],
        'shi'         => ['name' => 'Tachelhit (Latin)',      'script' => 'Latn', 'native' => 'Tashelhit'],
        'nus'         => ['name' => 'Nuer',                   'script' => 'Latn', 'native' => 'Thok Nath'],
        'vi'          => ['name' => 'Vietnamese',             'script' => 'Latn', 'native' => 'Tiếng Việt'],
        'tg-Latn'     => ['name' => 'Tajik (Latin)',          'script' => 'Latn', 'native' => 'tojikī'],
        'lu'          => ['name' => 'Luba-Katanga',           'script' => 'Latn', 'native' => 'Tshiluba'],
        've'          => ['name' => 'Venda',                  'script' => 'Latn', 'native' => 'Tshivenḓa'],
        'tw'          => ['name' => 'Twi',                    'script' => 'Latn', 'native' => 'Twi'],
        'tr'          => ['name' => 'Turkish',                'script' => 'Latn', 'native' => 'Türkçe'],
        'ale'         => ['name' => 'Aleut',                  'script' => 'Latn', 'native' => 'Unangax tunuu'],
        'ca-valencia' => ['name' => 'Valencian',              'script' => 'Latn', 'native' => 'valencià'],
        'vai-Latn'    => ['name' => 'Vai (Latin)',            'script' => 'Latn', 'native' => 'Viyamíĩ'],
        'vo'          => ['name' => 'Volapük',                'script' => 'Latn', 'native' => 'Volapük'],
        'fj'          => ['name' => 'Fijian',                 'script' => 'Latn', 'native' => 'vosa Vakaviti'],
        'wa'          => ['name' => 'Walloon',                'script' => 'Latn', 'native' => 'Walon'],
        'wae'         => ['name' => 'Walser',                 'script' => 'Latn', 'native' => 'Walser'],
        'wen'         => ['name' => 'Sorbian',                'script' => 'Latn', 'native' => 'Wendic'],
        'wo'          => ['name' => 'Wolof',                  'script' => 'Latn', 'native' => 'Wolof'],
        'ts'          => ['name' => 'Tsonga',                 'script' => 'Latn', 'native' => 'Xitsonga'],
        'dje'         => ['name' => 'Zarma',                  'script' => 'Latn', 'native' => 'Zarmaciine'],
        'yo'          => ['name' => 'Yoruba',                 'script' => 'Latn', 'native' => 'Èdè Yorùbá'],
        'de-AT'       => ['name' => 'Austrian German',        'script' => 'Latn', 'native' => 'Österreichisches Deutsch'],
        'is'          => ['name' => 'Icelandic',              'script' => 'Latn', 'native' => 'íslenska'],
        'cs'          => ['name' => 'Czech',                  'script' => 'Latn', 'native' => 'čeština'],
        'bas'         => ['name' => 'Basa',                   'script' => 'Latn', 'native' => 'Ɓàsàa'],
        'mas'         => ['name' => 'Masai',                  'script' => 'Latn', 'native' => 'ɔl-Maa'],
        'haw'         => ['name' => 'Hawaiian',               'script' => 'Latn', 'native' => 'ʻŌlelo Hawaiʻi'],
        'el'          => ['name' => 'Greek',                  'script' => 'Grek', 'native' => 'Ελληνικά'],
        'uz'          => ['name' => 'Uzbek (Cyrillic)',       'script' => 'Cyrl', 'native' => 'Ўзбек'],
        'az-Cyrl'     => ['name' => 'Azerbaijani (Cyrillic)', 'script' => 'Cyrl', 'native' => 'Азәрбајҹан'],
        'ab'          => ['name' => 'Abkhazian',              'script' => 'Cyrl', 'native' => 'Аҧсуа'],
        'os'          => ['name' => 'Ossetic',                'script' => 'Cyrl', 'native' => 'Ирон'],
        'ky'          => ['name' => 'Kyrgyz',                 'script' => 'Cyrl', 'native' => 'Кыргыз'],
        'sr'          => ['name' => 'Serbian (Cyrillic)',     'script' => 'Cyrl', 'native' => 'Српски'],
        'av'          => ['name' => 'Avaric',                 'script' => 'Cyrl', 'native' => 'авар мацӀ'],
        'ady'         => ['name' => 'Adyghe',                 'script' => 'Cyrl', 'native' => 'адыгэбзэ'],
        'ba'          => ['name' => 'Bashkir',                'script' => 'Cyrl', 'native' => 'башҡорт теле'],
        'be'          => ['name' => 'Belarusian',             'script' => 'Cyrl', 'native' => 'беларуская'],
        'bg'          => ['name' => 'Bulgarian',              'script' => 'Cyrl', 'native' => 'български'],
        'kv'          => ['name' => 'Komi',                   'script' => 'Cyrl', 'native' => 'коми кыв'],
        'mk'          => ['name' => 'Macedonian',             'script' => 'Cyrl', 'native' => 'македонски'],
        'mn'          => ['name' => 'Mongolian (Cyrillic)',   'script' => 'Cyrl', 'native' => 'монгол'],
        'ce'          => ['name' => 'Chechen',                'script' => 'Cyrl', 'native' => 'нохчийн мотт'],
        'ru'          => ['name' => 'Russian',                'script' => 'Cyrl', 'native' => 'русский'],
        'sah'         => ['name' => 'Yakut',                  'script' => 'Cyrl', 'native' => 'саха тыла'],
        'tt'          => ['name' => 'Tatar',                  'script' => 'Cyrl', 'native' => 'татар теле'],
        'tg'          => ['name' => 'Tajik (Cyrillic)',       'script' => 'Cyrl', 'native' => 'тоҷикӣ'],
        'tk'          => ['name' => 'Turkmen',                'script' => 'Cyrl', 'native' => 'түркменче'],
        'uk'          => ['name' => 'Ukrainian',              'script' => 'Cyrl', 'native' => 'українська'],
        'cv'          => ['name' => 'Chuvash',                'script' => 'Cyrl', 'native' => 'чӑваш чӗлхи'],
        'cu'          => ['name' => 'Church Slavic',          'script' => 'Cyrl', 'native' => 'ѩзыкъ словѣньскъ'],
        'kk'          => ['name' => 'Kazakh',                 'script' => 'Cyrl', 'native' => 'қазақ тілі'],
        'hy'          => ['name' => 'Armenian',               'script' => 'Armn', 'native' => 'Հայերէն'],
        'yi'          => ['name' => 'Yiddish',                'script' => 'Hebr', 'native' => 'ייִדיש'],
        'he'          => ['name' => 'Hebrew',                 'script' => 'Hebr', 'native' => 'עברית'],
        'ug'          => ['name' => 'Uyghur',                 'script' => 'Arab', 'native' => 'ئۇيغۇرچە'],
        'ur'          => ['name' => 'Urdu',                   'script' => 'Arab', 'native' => 'اردو'],
        'ar'          => ['name' => 'Arabic',                 'script' => 'Arab', 'native' => 'العربية'],
        'uz-Arab'     => ['name' => 'Uzbek (Arabic)',         'script' => 'Arab', 'native' => 'اۉزبېک'],
        'tg-Arab'     => ['name' => 'Tajik (Arabic)',         'script' => 'Arab', 'native' => 'تاجیکی'],
        'sd'          => ['name' => 'Sindhi',                 'script' => 'Arab', 'native' => 'سنڌي'],
        'fa'          => ['name' => 'Persian',                'script' => 'Arab', 'native' => 'فارسی'],
        'pa-Arab'     => ['name' => 'Punjabi (Arabic)',       'script' => 'Arab', 'native' => 'پنجاب'],
        'ps'          => ['name' => 'Pashto',                 'script' => 'Arab', 'native' => 'پښتو'],
        'ks'          => ['name' => 'Kashmiri (Arabic)',      'script' => 'Arab', 'native' => 'کأشُر'],
        'ku'          => ['name' => 'Kurdish',                'script' => 'Arab', 'native' => 'کوردی'],
        'dv'          => ['name' => 'Divehi',                 'script' => 'Thaa', 'native' => 'ދިވެހިބަސް'],
        'ks-Deva'     => ['name' => 'Kashmiri (Devaganari)',  'script' => 'Deva', 'native' => 'कॉशुर'],
        'kok'         => ['name' => 'Konkani',                'script' => 'Deva', 'native' => 'कोंकणी'],
        'doi'         => ['name' => 'Dogri',                  'script' => 'Deva', 'native' => 'डोगरी'],
        'ne'          => ['name' => 'Nepali',                 'script' => 'Deva', 'native' => 'नेपाली'],
        'pra'         => ['name' => 'Prakrit',                'script' => 'Deva', 'native' => 'प्राकृत'],
        'brx'         => ['name' => 'Bodo',                   'script' => 'Deva', 'native' => 'बड़ो'],
        'bra'         => ['name' => 'Braj',                   'script' => 'Deva', 'native' => 'ब्रज भाषा'],
        'mr'          => ['name' => 'Marathi',                'script' => 'Deva', 'native' => 'मराठी'],
        'mai'         => ['name' => 'Maithili',               'script' => 'Tirh', 'native' => 'मैथिली'],
        'raj'         => ['name' => 'Rajasthani',             'script' => 'Deva', 'native' => 'राजस्थानी'],
        'sa'          => ['name' => 'Sanskrit',               'script' => 'Deva', 'native' => 'संस्कृतम्'],
        'hi'          => ['name' => 'Hindi',                  'script' => 'Deva', 'native' => 'हिन्दी'],
        'as'          => ['name' => 'Assamese',               'script' => 'Beng', 'native' => 'অসমীয়া'],
        'bn'          => ['name' => 'Bengali',                'script' => 'Beng', 'native' => 'বাংলা'],
        'mni'         => ['name' => 'Manipuri',               'script' => 'Beng', 'native' => 'মৈতৈ'],
        'pa'          => ['name' => 'Punjabi (Gurmukhi)',     'script' => 'Guru', 'native' => 'ਪੰਜਾਬੀ'],
        'gu'          => ['name' => 'Gujarati',               'script' => 'Gujr', 'native' => 'ગુજરાતી'],
        'or'          => ['name' => 'Oriya',                  'script' => 'Orya', 'native' => 'ଓଡ଼ିଆ'],
        'ta'          => ['name' => 'Tamil',                  'script' => 'Taml', 'native' => 'தமிழ்'],
        'te'          => ['name' => 'Telugu',                 'script' => 'Telu', 'native' => 'తెలుగు'],
        'kn'          => ['name' => 'Kannada',                'script' => 'Knda', 'native' => 'ಕನ್ನಡ'],
        'ml'          => ['name' => 'Malayalam',              'script' => 'Mlym', 'native' => 'മലയാളം'],
        'si'          => ['name' => 'Sinhala',                'script' => 'Sinh', 'native' => 'සිංහල'],
        'th'          => ['name' => 'Thai',                   'script' => 'Thai', 'native' => 'ไทย'],
        'lo'          => ['name' => 'Lao',                    'script' => 'Laoo', 'native' => 'ລາວ'],
        'bo'          => ['name' => 'Tibetan',                'script' => 'Tibt', 'native' => 'པོད་སྐད་'],
        'dz'          => ['name' => 'Dzongkha',               'script' => 'Tibt', 'native' => 'རྫོང་ཁ'],
        'my'          => ['name' => 'Burmese',                'script' => 'Mymr', 'native' => 'မြန်မာဘာသာ'],
        'ka'          => ['name' => 'Georgian',               'script' => 'Geor', 'native' => 'ქართული'],
        'byn'         => ['name' => 'Blin',                   'script' => 'Ethi', 'native' => 'ብሊን'],
        'tig'         => ['name' => 'Tigre',                  'script' => 'Ethi', 'native' => 'ትግረ'],
        'ti'          => ['name' => 'Tigrinya',               'script' => 'Ethi', 'native' => 'ትግርኛ'],
        'am'          => ['name' => 'Amharic',                'script' => 'Ethi', 'native' => 'አማርኛ'],
        'wal'         => ['name' => 'Wolaytta',               'script' => 'Ethi', 'native' => 'ወላይታቱ'],
        'chr'         => ['name' => 'Cherokee',               'script' => 'Cher', 'native' => 'ᏣᎳᎩ'],
        'iu'          => ['name' => 'Inuktitut (Canadian Aboriginal Syllabics)', 'script' => 'Cans', 'native' => 'ᐃᓄᒃᑎᑐᑦ'],
        'oj'          => ['name' => 'Ojibwa',                 'script' => 'Cans', 'native' => 'ᐊᓂᔑᓈᐯᒧᐎᓐ'],
        'cr'          => ['name' => 'Cree',                   'script' => 'Cans', 'native' => 'ᓀᐦᐃᔭᐍᐏᐣ'],
        'km'          => ['name' => 'Khmer',                  'script' => 'Khmr', 'native' => 'ភាសាខ្មែរ'],
        'mn-Mong'     => ['name' => 'Mongolian (Mongolian)',  'script' => 'Mong', 'native' => 'ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ'],
        'shi-Tfng'    => ['name' => 'Tachelhit (Tifinagh)',   'script' => 'Tfng', 'native' => 'ⵜⴰⵎⴰⵣⵉⵖⵜ'],
        'tzm'         => ['name' => 'Central Atlas Tamazight (Tifinagh)','script' => 'Tfng', 'native' => 'ⵜⴰⵎⴰⵣⵉⵖⵜ'],
        'yue'         => ['name' => 'Yue',                    'script' => 'Hant', 'native' => '廣州話'],
        'ja'          => ['name' => 'Japanese',               'script' => 'Jpan', 'native' => '日本語'],
        'zh'          => ['name' => 'Chinese (Simplified)',   'script' => 'Hans', 'native' => '简体中文'],
        'zh-Hant'     => ['name' => 'Chinese (Traditional)',  'script' => 'Hant', 'native' => '繁體中文'],
        'ii'          => ['name' => 'Sichuan Yi',             'script' => 'Yiii', 'native' => 'ꆈꌠꉙ'],
        'vai'         => ['name' => 'Vai (Vai)',              'script' => 'Vaii', 'native' => 'ꕙꔤ'],
        'jv-Java'     => ['name' => 'Javanese (Javanese)',    'script' => 'Java', 'native' => 'ꦧꦱꦗꦮ'],
        'ko'          => ['name' => 'Korean',                 'script' => 'Hang', 'native' => '한국어'],
    ],
    ];
angular►csrf

Angular csrf token

By: Ryan Wong at

One way to implement CSRF token in angular is to put csrf token in a meta tag and pull it from angular as a constant.

JS:

1
2
3
4
5
6
7
8
9
10
11
12
var app = angular.module('home', [])
.constant('CSRF_TOKEN', csrftoken)
var csrftoken =  (function() {
    // not need Jquery for doing that
    var metas = window.document.getElementsByTagName('meta');
    // finding one has csrf token
    for(var i=0 ; i < metas.length ; i++) {
        if ( metas[i].name === "csrf-token") {
            return  metas[i].content;
        }
    }
})();

HTML:

1
<meta content="{{csrf_token()}}" name="csrf-token"/>
angular►ng-repeat

Angularjs filter ng-repeat object

By: Ryan Wong at

Here’s an implementation of full text search on a list of records.
You specify the fields you want search on;

HTML:

1
2
<input type="text" ng-model="toggleSearch"/>
<div ng-repeat="oneResult in filterResult = (result | lookupfilter:toggleSearch)"></div>

Angular:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function lookupFilter(){
    return function(items, searchText){
        var fields = [
        'field1',
        'field2',
        'field3'
        ];
        var length = fields.length;
        var regObj = new RegExp(searchText, 'gi');
        if (searchText.length > 2){
          return items;
        }
        var found  = items.filter(function(oneItem){
            for(var i = 0; i < length; i++ ){
                if (oneItem[fields[i]] != undefined &&
                    oneItem[fields[i]].match(regObj)){
                    return true;
                }
            }
            return false;
        });
        return found;
    };
}
angular.module('home', [])
.filter('lookupfilter', lookupFilter)
angular►select

Reset ui-select current value

By: Ryan Wong at

I was having trouble resetting the ui-select directive current selected value when resetting the form.

So here’s the solution. Add this directive to it and it will reset automatically.

Angular:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var app = angular.module('home', [])
.directive('resetsearchmodel', [resetSearchModel])
function resetSearchModel () {
    return {
        restrict: 'A',
        require: ['^ngModel','uiSelect'],
        link: function (scope, element, attrs, ctrls) {
            scope.$watch(attrs.ngModel,function (newval,oldval,scope) {
                if (newval != undefined && newval.length < 1){
                    scope.$select.selected = undefined;
                }
            });
        }
    };
}

HTML:

1
2
3
4
5
6
7
8
9
10
11
<div class="form-group">
  <label class="col-md-2 control-label" for="Competition">Competition</label>
  <div class="col-md-10">
   <ui-select ng-model="toggleSearch" theme="select2" class="full-width" on-select="filterCompetition($item)" allow-clear="true" resetsearchmodel>
    <ui-select-match placeholder="Select a Competition">@{{$select.selected}}</ui-select-match>
    <ui-select-choices repeat="oneCompetition in competitionList | filter: $select.search">
      <span ng-bind-html="oneCompetition| highlight: $select.search"></span>
    </ui-select-choices>
  </ui-select>
  </div>
</div>

To reset the value, just set $s.toggleSearch = “”;

Hope this helps you out.

angular

Google style search box

By: Ryan Wong at

Below I will show you how to make the search box effect google does.

First the search bar is in middle of the page. Then it moves up if typed in.

HTML:

1
2
3
4
5
6
7
8
9
<div class="w90 mx-auto"  ng-style="searchStyle()">
    <div class="input-group">
          <input type="text" class="form-control" placeholder="Search for Blogs" name="query" ng-model="search.query" ng-change="searchChange()">
          <span class="input-group-btn">
            <button class="btn btn-green w125" ng-click="search()">Search</button>
          </span>
        </div>
  </div>
<br/>

Angular:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function blogsCtrl($scope){
  $scope.search = {
  query:"",
  hasInput:false
  };
  $scope.searchStyle = function(){
    if ($scope.search.hasInput){
   return {
       'margin-top': '0%'
   };
    }else{
   return {
       'margin-top': '15%'
   };
    }
  }
  $scope.searchChange = function(){
   if ($scope.search.query.length > 0){
    $scope.search.hasInput = true;
    return true;
  }
    $scope.search.hasInput = false;
    return true;
  };
}

CSS:

1
2
3
4
5
6
7
8
.w90{
    width: 90%;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
angular►graph

How to make an animated horizontal bar graph in Angular

By: Ryan Wong at

When I was looking for a simple animated two sided horizontal bar graph, I couldn’t find one on the internet so I made it.
How it works:
1.You pass in the left score, right score and the description of the score in the middle.
2.Then the CSS will expand the bars outward proportional to the value pass in.

For example if left score is 5 and right score is 10, then the left side will be half the width of the right side.

HTML: 

1
2
<horizontalbargraph  leftscore="leftScore" rightscore="rightScore"
 name="center_score"></horizontalbargraph>


Angular:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var app = angular.module('home', [ 'ui-tpl'])
angular.module("ui-tpl", ["template/stat/horizontal-graph.html"])
.directive('horizontalbargraph', [horizontalbargraph])

function horizontalbargraph() {
  return {
      restrict: 'E',
      templateUrl: 'template/stat/horizontal-graph.html',
      scope: {
        leftscore: '=',
        name: '@',
        rightscore: '='
      },
      link: function(scope) {
        scope.leftBar = {
            'max-width': ((scope.leftscore)/(scope.leftscore + scope.rightscore) * 100) + '%',
            animation: "move 2s linear 0.1s 1",
            'animation-fill-mode': "forwards"
        };
        scope.rightBar = {
            'max-width': ((scope.rightscore)/(scope.leftscore + scope.rightscore) * 100) + '%',
            animation: "move 2s linear 0.1s 1",
            'animation-fill-mode': "forwards"
        };
      }
  };
}

angular.module("template/stat/horizontal-graph.html", [])
.run(["$templateCache", function($templateCache) {
  $templateCache.put("template/stat/horizontal-graph.html",
 "<div class=\"horizontal-bar-graph\" ng-if=\"leftscore>0||rightscore>0\">\n" +
      "<div class=\"bar-3\">\n" +
        "<div class=\"bar-fill-left\" ng-style=\"leftBar\"><span ng-if=\"leftscore>0\">{{leftscore}}</span></div>\n" +
      "</div>\n" +
      "<div class=\"bar-2\">{{name}}</div>\n" +
      "<div class=\"bar-3\">\n" +
      "  <div class=\"bar-fill-right\" ng-style=\"rightBar\"><span ng-if=\"rightscore>0\">{{rightscore}}</span></div>\n" +
      "</div>\n" +
    "<div class=\"clearfix\"></div>\n" +
"</div>");
}]);



CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.horizontal-bar-graph{
    margin: 10px 0;
}
.bar-3{
    width: 40%;
    float:left;
    text-align: center;
}
.bar-2{
    width: 20%;
    float:left;
    text-align: center;
}
.bar-fill-left{
    height: 20px;
    background-color: #5cb85c;
    float:right;
    text-align: center;
    color:white;
    animation: move 2s linear 1 forwards;
}

.bar-fill-right{
    height: 20px;
    background-color: #d9534f;
    float:left;
    text-align: center;
    color:white;
    animation: move 2s linear 1 forwards;
}

@keyframes move {
  0% {
    width:0%;
  }
  100% {
    width: 100%;
  }
}

hope this helps you out