index.html | searchcode

/erepmobile/index.html

https://bitbucket.org/doubleface/doubleface.bitbucket.org
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>