{"id":23655239,"url":"https://github.com/caplin/boxxer","last_synced_at":"2025-11-22T07:30:15.559Z","repository":{"id":8995836,"uuid":"10745905","full_name":"caplin/boxxer","owner":"caplin","description":"Javascript layout manager","archived":false,"fork":false,"pushed_at":"2013-09-14T14:14:25.000Z","size":1708,"stargazers_count":2,"open_issues_count":15,"forks_count":1,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-12-28T19:52:03.384Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/caplin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-06-17T19:57:18.000Z","updated_at":"2013-11-23T18:49:06.000Z","dependencies_parsed_at":"2022-09-14T04:52:00.099Z","dependency_job_id":null,"html_url":"https://github.com/caplin/boxxer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caplin%2Fboxxer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caplin%2Fboxxer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caplin%2Fboxxer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caplin%2Fboxxer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/caplin","download_url":"https://codeload.github.com/caplin/boxxer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239627287,"owners_count":19670844,"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-12-28T19:52:02.830Z","updated_at":"2025-11-22T07:30:15.529Z","avatar_url":"https://github.com/caplin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Boxxer - Layout manager\n=======================\n\nBoxxer is an open source project which aim to simplify the construction of complex layouts.\n\nHere are the features aimed for. Not all have been implemented or are stable as yet.\n\n* Automatic handling of layout element resizing\n* Weight / Percentage / Fixed (px) dimension\n* Server side layout persistence in node\n* Programatic approach to layout\n* Custom build capability\n* Component interfaces\n* Layout events firing\n* Decorators API\n* more...\n\n## Grunt build\n\nNode with npm required. Use npm to install grunt and then just run ```npm install``` inside the root directory.\n\n```grunt``` Run the default build which does unit testing, concating, uglifying\n\n```grunt deploy``` Run the default build and move the minified file to the server\n\n```grunt watch``` Run the file watcher which concate files automatically\n\nIf adding file make sure to update the Gruntfile.js!\n\n## Documentation\n\nSee [API](https://github.com/caplin/boxxer/wiki/API \"View API on wiki\") and the documentation directory everything is documented using jsdoc.\n\n## Example\n\n```javascript\n\n    // Tile component\n    var Tile = function() {\n        this._element = document.createElement(\"div\");\n    };\n\n    // implements Component and LifeCycle interfaces\n    boxxer.mix(Tile, boxxer.Component);\n    boxxer.mix(Tile, boxxer.LifeCycle);\n\n    // throw an error if not implemented\n    Tile.prototype.getElement = function() {\n        return this._element;\n    };\n\n    Tile.prototype.onOpen = function(box) {\n        console.log(\"tile\", box.getId());\n    };\n\n    Tile.prototype.onRestore = function(box) {\n        console.log(\"tile restored\", box.getId());\n    };\n\n    Tile.prototype.onMaximize = function(box) {\n        console.log(\"tile maximized\", box.getId());\n    };\n\n    Tile.prototype.onMinimize = function(box) {\n        console.log(\"tile minimized\", box.getId());\n    };\n\n    // create our layout\n    var frame = boxxer.createBox();\n    var header = boxxer.createBox();\n    var tileSet = boxxer.createBox({height:5, flow:\"horizontal\"});\n    var blotter = boxxer.createBox({height:2});\n\n    // create a bunch of tiles\n    for (var i = 0; i \u003c 10; i++) {\n\n        tileSet.addBox(boxxer.createBox({\n            width: \"200px\",\n            height: \"200px\",\n            component: new Tile(),\n            decorators: [\n                \"BoxHeader\",\n                \"PanelControls\"\n            ]\n        }));\n    }\n\n    // add the lot to the frame\n    frame.addBox(header).addBox(tileSet).addBox(blotter);\n\n    // render the frame\n    frame.render(true);\n\n```\n\n### Layout persistence\n\nRequires the back-end to be running. If the box has a custom name set the name will be used in serialization and will\nbe used to store the file. The layout can then be retrieve by creating a box, giving it a name and call getLayout().\n\n#### Running the back-end\n\nThe back-end is very basic at the moment and use file to store the layout.\nFrom a command line tool go to server directory and run ```node index.js```.\nThere is a demo running on http://localhost:666.\n\nStore a layout\n\n```javascript\n\n// create a box\nvar frame = new boxxer.Box();\n\n// name it\nframe.setName(\"myLayout\");\n\n// code to create the layout here...\n\n// store the layout\nframe.saveLayout();\n\n```\n\nRetrieve a layout\n\n```javascript\n\n// create a box\nvar frame = new boxxer.Box();\n\n// name it\nframe.setName(\"myLayout\");\n\n// retrieve its layout\nframe.getLayout();\n\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaplin%2Fboxxer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaplin%2Fboxxer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaplin%2Fboxxer/lists"}