{"id":16791875,"url":"https://github.com/posabsolute/backbone-mobile-components","last_synced_at":"2025-04-10T23:33:10.486Z","repository":{"id":8849967,"uuid":"10557513","full_name":"posabsolute/backbone-mobile-components","owner":"posabsolute","description":"Include 7 components to use with backbone to help you get started with doing mobile web apps","archived":false,"fork":false,"pushed_at":"2018-03-02T17:44:15.000Z","size":616,"stargazers_count":18,"open_issues_count":3,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T20:21:50.445Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/posabsolute.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-06-07T19:40:01.000Z","updated_at":"2018-08-23T00:54:08.000Z","dependencies_parsed_at":"2022-09-19T08:30:51.791Z","dependency_job_id":null,"html_url":"https://github.com/posabsolute/backbone-mobile-components","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posabsolute%2Fbackbone-mobile-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posabsolute%2Fbackbone-mobile-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posabsolute%2Fbackbone-mobile-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posabsolute%2Fbackbone-mobile-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/posabsolute","download_url":"https://codeload.github.com/posabsolute/backbone-mobile-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248317035,"owners_count":21083515,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-13T08:36:03.538Z","updated_at":"2025-04-10T23:33:10.466Z","avatar_url":"https://github.com/posabsolute.png","language":"JavaScript","readme":"# Backbone Mobile components v0.9 (beta)\n\n[![Build Status](https://travis-ci.org/posabsolute/backbone-mobile-components.png?branch=master)](https://travis-ci.org/posabsolute/backbone-mobile-components)\n\nInclude 7 components to use with backbone to help you get started with doing mobile web apps. This is not a boilerplate project, it do not assume anything about your structure or stack.\n\n\n*Documentation: http://documentup.com/posabsolute/backbone-mobile-components*\n\n## Dependencies\n\n* TweenLite\n* Hammer.js\n\n## MobilePageView\n\nEasily setup a paging system for your mobile app.\n\n### init\n\nExtend MobilePageView like you would for a normal view\n\n    var Lists = Backbone.MobilePageView.extend({\n        events:{\n            \"event\" : \"method\"\n        },\n        className:\"pageLists pageContent\",\n        initialize : function  () {\n            this.template = _.template($(\"#lists_tpl\").html());\n        },\n        render: function(data) {\n            this.show({animType:\"slideleft\"});  \n            return this;\n        },\n        myOtherMethods : function(){\n      \n        }\n    });\n\n### rendering\n\n\n    var page = Lists({\n        topbar : appmobile.topbar,\n        menu : appmobile.menu,\n        title : \"page title\"\n    }); \n    $(\"#overflower\").append(page.render().el);\n\n### Options\n    \nWhen rendering you can pass multiple options that will be used by other components.\n\n#### Title \u0026 topbar\n\nWhen passing a title and topbar, the page will automatically trigegr a title change when changing the page.\n\n#### menu\n\nPassing a menu enable a page that when swiped, show the side menu.\n\n### show the page\n\nWhen showing a page, the current page will be automatically removed,\n\n    this.show({animType:\"slideleft\"});  \n\nYou can pass an animType thar will be used to animate both the current and new page to be shown. Currently There is only 3 anim type.\n\n* slideleft\n* slideup\n* opacity\n\n\n### hide a page\n\nGenerally you should not hide a page yourself as this is handle automatically when using the show method.\n\n    this.hide({animType:\"slideleft\"})\n\n\n\n\n## MobileMenuView\n\nLet you create a side action menu that can tie-in easily in the topbar.\n\n### init \u0026 Rendering\n\n    var menu = new appmobile.views.Menu();\n\n### HTML Template\n\nCurrently the template html is static, taken directly from the #menu_tpl dom node, will be change before 1.0\n\n### showMenu\n\nWill show the menu and move to the side the current page\n\n    menu.trigger(\"showMenu\")\n\n### hideMenu\n\n    menu.trigger(\"showMenu\")\n\n### navigate\n\nCurrently each \"a\" element are tied in to pages, in that sense the navigate method is called when one of those is pushed\n\n\n\n\n## MobileTopbarView\n\nCreates a fixed top toolbar with buttons, sub menu \u0026 dynamic page title\n\n### init \u0026 Rendering\n\n    var topbar = new appmobile.views.Topbar({\n        menu : appmobile.menu\n    });\n\n### HTML Template\n\nCurrently the template html is static, taken directly from the #topbar_tpl dom node, will be change before 1.0\n\n#### attaching a menu\nLike shown below, you can attach a menu to the topbar, that will add a button to the left of the title.\n\n### Adding a button \u0026 action to the right\n\n    topbar.trigger(\"loadActionBtn\", {\n        icon : \"\u003cspan class='icon_plus_person'\u003e\u003c/span\u003e\",\n        action : function () {\n            self.loadAddPoopin();\n        }\n    });\n\n### Adding a submenu\n\nA submenu will be triggered when the right side button is pushed\n\n    topbar.trigger(\"loadActionBtn\", {\n        icon : \"\u003cspan class='icon_plus_person'\u003e\u003c/span\u003e\",\n        subMenuItems : {\n            item1 : {\n                oid : \"item1\",\n                name : \"popup title 1\",\n                action : function(){\n                    self.loadSchedulePopup();\n                }\n            },\n            item2 : {\n                oid : \"item2\",\n                name : \"popup title 2\",\n                action : function(){\n                    self.loadSendNowPopup();\n                }\n            }\n        }\n    });\n\n\n### Remove right button\n\n    topbar.trigger(\"removeActionBtn\")\n\n## MobilePopin\n\nLet you create mobile overlays easily\n\n###  Initialisation\n\nYou can easily extend the mobile component like you would do for any view, but by extending MobilePopin\n\n    var AddContactPopin = Backbone.MobilePopin.extend({\n        events:{\n            \"submit #addContacts\" : \"add\"\n        },\n        beforeRender : function () { },\n        afterRender : function() {}\n        add: function (evt) {\n            // add contact stuff\n        }\n    });\n\nThere is 2 utility methods available for you\n\n#### beforeRender\n\nCalled before the mobile popup is shown\n\n\n#### afterRender\n\nCalled after the mobile popup is shown\n\n\n### Rendering\n\nNow that we got our template popup we can instantiate it and render it. You must pass it a content option with your rendered html template in it. \nYou could also put that in the init phase upward.\n\n    var popup = new appmobile.views.AddContactPopin({\n        content : _.template($(\"#contacts_add_tpl\").html())\n    }).render();\n\n### Hide\n\nYou can call the popup by calling the hide method.\n\n    popup.hide();\n\n\n## ListView\n\nHelping you handle list views that are pretty comming in mobile apps.\n\n### init \u0026 renderering\n\n    var contacts = new Backbone.ListView({\n        el : this.$el,\n        collection : new appmobile.collections.Contacts(),\n        itemView : \"#list_contact_item\",\n        fetch : {\n            list_id : this.options.id\n        }\n    });\n        \n\n### Options\n\n#### el\nSince the list view has no context we need to add one\n\n#### itemView\n\nYour html template for each item\n\n#### collection\n\nBackbone Collection to be fetched for this list.\n\n#### fetch\n\nOptions to be passed to the fetch call\n\n\n\n\n## bbanimate\n\nControl all animations in the mobile app with TweenLite(http://www.greensock.com/gsap-js/). Helps you serve animation to device that can handle it.\n\n### go\n\nYou should pass all your animation through this function, it will check if your phone cam handle animations and act accordingly by either \nletting the animation play or directly update the css with the style required.\n\nExemple:\n\n\tBackbone.bbanimate.go({\n        to:$(\".overayContent\"),\n        speed:0.25,\n        ease: Power1.easeIn,\n        attrs : {opacity: 0},\n        onComplete: function() {\n\t\t\t$(\".overayContent\").remove();\n\t\t}\n    });\n\nThere is multiple effects possible with GSAP I recommend you check the website for more information on how you can make great animations http://www.greensock.com/gsap-js/.\n\n### page.show\n\nInternal function use by the page component to animate the pages, see the page component for more informations\n\n### page.hide\n\nInternal function use by the page component to animate the pages, see the page component for more informations\n\n\n## bbUtils\n\nUtilities that you can use thoughout your app\n\n### windowWidth\n\nGet the phone screen width\n\n\tBackbone.bbUtils.windowWidth()\n\n### windowHeight\n\nGet the phone screen height\n\n\tBackbone.bbUtils.windowHeight()\n\n### useAnim\n\nCheck is the phone can run anims, by default animation is active unless the phone has android \u0026 version 4.0.4 and lower.\n\n\tBackbone.bbUtils.useAnim()\n\n### phone\n\nRetrieve Important phone informations and return an object, currently supported operating system:  android, iphone, ipad, blackberry\n\nCall:\n\n\tBackbone.bbUtils.phone()\n\nExample:\n\n    content = {\n        os : \"android\",\n        version : \"4.1.1\",\n        isRetina : false,\n        ua : \"Mozilla/5.0 (Linux; U; Android 4.1.1; en-us; Nexus S Build/JRO03E) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30\"\n    };\n\n\n## License (MIT)\n\nCopyright 2013 Cedric Dugas\nhttp://www.position-relative.net/\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n\"Software\"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposabsolute%2Fbackbone-mobile-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fposabsolute%2Fbackbone-mobile-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposabsolute%2Fbackbone-mobile-components/lists"}