/erepmobile/index.html
HTML | 184 lines | 160 code | 24 blank | 0 comment | 0 complexity | 25e6bae210d34bad097a9bfaba649b49 MD5 | raw file
- <!DOCTYPE html>
- <html>
- <head>
- <title>Erep Mobile</title>
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
- <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
- <script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
- <script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
- </head>
- <body>
- <script type="text/javascript">
- var companies = [
- {"number": 269139, "name": 'exedere'},
- {"number": 269296, "name": 'fodere'},
- {"number": 292795, "name": 'ggggrain'},
- {"number": 320252, "name": 'gunnns'},
- {"number": 313945, "name": 'irrrron'},
- {"number": 331277, "name": 'irrrrron'}
- ];
- // MODEL
- var CompanyModel = Backbone.Model.extend({
- defaults: {
- "number": undefined,
- "name": '',
- "stock": 0,
- "amount": 0,
- "price": 0,
- "taxes": 1,
- "currency": "",
- "raw": false,
- "loaded": false
- },
- url: function() {
- return "http://query.yahooapis.com/v1/public/yql?q=select%20content%20from%20html%20where%20url%3D%22http%3A%2F%2Feconomy.erepublik.com%2Fen%2Fcompany%2F" + this.get("name") + "%2F" + this.get("number") + "%22%20and%20xpath%3D'%2F%2Fbig%5B%40id%3D%22stock%22%5D%7C%2F%2Fdiv%5B%40class%3D%22raw_materials%22%5D%2Fdiv%5B%40class%3D%22stats%22%5D%2Fbig%7C%2F%2Fscript%5Bcontains(.%2C%22licensesJSON%22)%5D'&format=json&callback=?";
- },
- sync: function(method, obj, success, error) {
- $.getJSON(obj.url(), success);
- },
- parse: function(data){
- eval(data.query.results.script.split("\n")[2]);
- var offerdata = licensesJSON[0];
- var result = {
- "stock": data.query.results.big != 0 ? parseInt(data.query.results.big[0]) : 0,
- "raw": data.query.results.big != 0 ? parseFloat(data.query.results.big[1]) : 0,
- "amount": offerdata.offers[0] ? offerdata.offers[0].amount : 0,
- "price": offerdata.offers[0] ? parseFloat(offerdata.offers[0].price) : 0,
- "taxes": offerdata.taxes,
- "currency": offerdata.currency
- };
- return result;
- }
- });
- var CompanyCollection = Backbone.Collection.extend({
- model: CompanyModel,
- refresh: function() {
- this.each(function(obj){
- obj.trigger("beforerefresh", obj);
- obj.save(undefined, {success: function(model){
- model.trigger("afterrefresh", model);
- }});
- });
- return this;
- }
- });
- // VIEW
- var CompaniesView = Backbone.View.extend({
- events: {
- "click #header": "refresh",
- "swipe li": "swipe"
- },
- defaultli: _.template(
- '<li id="<%= name %>"><%= name %></li>'
- ),
- completedli: _.template(
- '<%= name %>' +
- '<div class="ui-li-aside">' +
- '<%= infos %>' +
- '</div>'
- ),
- companyInfo: _.template(
- '<p class="ui-li-desc"><strong><%= label %>:</strong> <span class="<%= class %>"><%= value %></span></p>'
- ),
- refresh: function() {
- this.collection.refresh();
- this.el.find('li').removeClass('ui-btn-up-e').addClass('ui-btn-up-c');
- },
- initialize: function() {
- var view = this;
- var ul = this.el.find('ul');
- ul.empty();
- $.each(companies, function(key, value){
- ul.append($(view.defaultli({"name": value.name})));
- });
- ul.listview('refresh');
- _.bindAll(this, "render");
- this.collection.bind("beforerefresh", this.beforerefresh);
- this.collection.bind("change", this.render);
- this.collection.bind("afterrefresh", this.render);
- },
- beforerefresh: function(obj) {
- var el = $('#' + obj.get('name'));
- el.html(obj.get("name"));
- },
- render: function(obj) {
- var el = $('#' + obj.get('name'));
- var liinfos = this.companyInfo({"class": 'stock', "label": "Stock","value": obj.get('stock')}) +
- this.companyInfo({"class": 'amount',"label": "Offer","value": obj.get('amount')});
- if (obj.get('raw')) liinfos+= this.companyInfo({"class": 'raw',"label": "Raw","value": obj.get('raw')});
- var litext = this.completedli({
- "name": obj.get("name"),
- "infos": liinfos
- });
- el.html(litext);
- this.el.find('ul').listview('refresh');
- // so that the change is triggered after the rendering and then be able to alter it
- if (true === obj.hasChanged())
- this.change(obj);
- },
- change: function(obj) {
- if (!obj.loaded) {
- obj.loaded = true;
- return;
- }
- var el = $('#' + obj.get('name'));
- el.removeClass('ui-btn-up-c').addClass('ui-btn-up-e');
- // get the list of changed attibutes
- var changelist = obj.changedAttributes();
- $.each(changelist, function(label, value){
- el.find('.' + label).each(function(key,value){
- $(value).css("color", "red");
- });
- });
- },
- swipe: function(obj) {
- $(obj.target).removeClass('ui-btn-up-e').addClass('ui-btn-up-c');
- }
- });
- $('#main').live('pagecreate',function(event){
- var companyList = new CompanyCollection();
- var companiesView = new CompaniesView({
- el: $("#main"),
- collection: companyList
- });
- companyList.add(companies);
- companyList.refresh();
- });
- </script>
- <div data-role="page" id="main">
- <div data-role="header" id="header">
- <h2>Erep Mobile</h2>
- </div><!-- /header -->
- <div data-role="content">
- <ul data-role="listview">
- <li>No Company defined</li>
- </ul>
- </div><!-- /content -->
- </div><!-- /page -->
- </body>
- </html>