{"action":"created","comment":{"url":"https://api.github.com/repos/montagejs/montage/pulls/comments/25027808","id":25027808,"diff_hunk":"@@ -0,0 +1,66 @@\n+/**\n+ * @module ui/segmented-bar.reel/segment.reel\n+ * @requires montage/ui/component\n+ */\n+var Component = require(\"ui/component\").Component;\n+\n+/**\n+ * @class Segment\n+ * @classdesc\n+ * A segment to be used inside a segmented bar.\n+ * Uses FlexBox to determine rendered length.\n+ *\n+ * @extends Component\n+ * @see SegmentedBar\n+ */\n+exports.Segment = Component.specialize( /** @lends Segment.prototype # */ {\n+    /**\n+     * @private\n+     * @prop {Object} value\n+     * @prop {Number} value.length\n+     * @prop {String} value.label\n+     */\n+    _content: {value: null},\n+\n+    /**\n+     * Length is used in draw()\n+     * Label is bound to Text component in template\n+     *\n+     * E.g. usage to get content from SegmentedBar via binding,\n+     * where `region` and `size` keys can be named anything in your data:\n+     *\n+     * ```json\n+     * \"content\": {\n+     *     \"<-\": \"@segmentedBar:segment.object.{label: region, length: size}\"\n+     * }\n+     * ```\n+     *\n+     * @param {Object} newContent\n+     * @prop {Number} newContent.length\n+     * @prop {String} newContent.label\n+     * @returns {Object[]}\n+     */\n+    content: {\n+        get: function () {return this._content},\n+        set: function (newContent) {\n+            if (newContent !== this._content) {\n+                this._content = newContent;\n+                this.needsDraw = true;\n+            }\n+        }\n+    },\n+\n+    /**\n+     * Redraw based on updated length\n+     *\n+     * @method\n+     */\n+    draw: {value: function () {\n+        if (this.content) {\n+            this.element.style.webkitBoxFlex = this.content.length;\n+            this.element.style.webkitFlex = this.content.length;\n+            this.element.style.msFlex = this.content.length;\n+            this.element.style.flex = this.content.length;\n+        }\n+    }}\n+});","path":"ui/segment.reel/segment.js","position":66,"original_position":66,"commit_id":"bcfb1ee59aead320220755f371662f4df2a5806e","original_commit_id":"bcfb1ee59aead320220755f371662f4df2a5806e","user":{"login":"rayshan","id":3760840,"avatar_url":"https://avatars.githubusercontent.com/u/3760840?v=3","gravatar_id":"","url":"https://api.github.com/users/rayshan","html_url":"https://github.com/rayshan","followers_url":"https://api.github.com/users/rayshan/followers","following_url":"https://api.github.com/users/rayshan/following{/other_user}","gists_url":"https://api.github.com/users/rayshan/gists{/gist_id}","starred_url":"https://api.github.com/users/rayshan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rayshan/subscriptions","organizations_url":"https://api.github.com/users/rayshan/orgs","repos_url":"https://api.github.com/users/rayshan/repos","events_url":"https://api.github.com/users/rayshan/events{/privacy}","received_events_url":"https://api.github.com/users/rayshan/received_events","type":"User","site_admin":false},"body":"> nit: Why newContent as the setter argument name? Is using new + property name a general style we should switch to for setter arguments? Most of the existing Montage code uses value for that. That's not my favorite, and I prefer code that provides some typing information in the setter argument name (set: function (flag) {... or set: function(string) {... for example), but at least it's consistent and makes it easy to see in the setter where the set value is. new + property name also provides the false impression that the passed in value will be the result of a new X() expression.\r\n\r\nNo it's not common in this code base. Good point. Will change arg to `data`.","created_at":"2015-02-19T21:33:45Z","updated_at":"2015-02-19T21:33:45Z","html_url":"https://github.com/montagejs/montage/pull/1515#discussion_r25027808","pull_request_url":"https://api.github.com/repos/montagejs/montage/pulls/1515","_links":{"self":{"href":"https://api.github.com/repos/montagejs/montage/pulls/comments/25027808"},"html":{"href":"https://github.com/montagejs/montage/pull/1515#discussion_r25027808"},"pull_request":{"href":"https://api.github.com/repos/montagejs/montage/pulls/1515"}}},"pull_request":{"url":"https://api.github.com/repos/montagejs/montage/pulls/1515","id":28134278,"html_url":"https://github.com/montagejs/montage/pull/1515","diff_url":"https://github.com/montagejs/montage/pull/1515.diff","patch_url":"https://github.com/montagejs/montage/pull/1515.patch","issue_url":"https://api.github.com/repos/montagejs/montage/issues/1515","number":1515,"state":"open","locked":false,"title":"Add SegmentedBar component","user":{"login":"rayshan","id":3760840,"avatar_url":"https://avatars.githubusercontent.com/u/3760840?v=3","gravatar_id":"","url":"https://api.github.com/users/rayshan","html_url":"https://github.com/rayshan","followers_url":"https://api.github.com/users/rayshan/followers","following_url":"https://api.github.com/users/rayshan/following{/other_user}","gists_url":"https://api.github.com/users/rayshan/gists{/gist_id}","starred_url":"https://api.github.com/users/rayshan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rayshan/subscriptions","organizations_url":"https://api.github.com/users/rayshan/orgs","repos_url":"https://api.github.com/users/rayshan/repos","events_url":"https://api.github.com/users/rayshan/events{/privacy}","received_events_url":"https://api.github.com/users/rayshan/received_events","type":"User","site_admin":false},"body":":+1: Ready to be reviewed & merged\r\n===\r\n\r\n- [x] Tests - should cover 100% of behavior; all 17 tests pass locally; this PR fixes all the whitespace issues in `run.js`, the only code change in that file is adding the last spec\r\n- [x] Docs\r\n- [x] Demo - serve `index.html` in root and use newly committed `overview` module to review\r\n\r\nQuestions:\r\n\r\n- [x] Need separate controllers or fine to put logic in component object? - no\r\n- [x] Namespace component everywhere, e.g. `ms-segmented-bar`? - yes, `montage-SegmentedBar-whatever`\r\n- [x] Response design - does SegmentedBar need to be vertical at all? Seems questionable. - yes\r\n- [x] Research how select binds user content - done, likely this implementation is more optimal due to conditionally 1-way binding `content` or `contentController`\r\n\r\nE.g. for wide desktop:\r\n\r\n![screen shot 2015-01-26 at 4 48 36 pm](https://cloud.githubusercontent.com/assets/3760840/5924695/97ca4fd2-a612-11e4-81e4-631f12c50e29.png)\r\n\r\nFor narrow mobile screen:\r\n![screen shot 2015-01-26 at 4 47 58 pm](https://cloud.githubusercontent.com/assets/3760840/5924701/a7a96c3a-a612-11e4-9c4f-17a95724115f.png)\r\n","created_at":"2015-01-27T18:53:24Z","updated_at":"2015-02-19T21:33:45Z","closed_at":null,"merged_at":null,"merge_commit_sha":"540d9154465c493eb5e5012ed93a5acc2ae2a7e9","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/montagejs/montage/pulls/1515/commits","review_comments_url":"https://api.github.com/repos/montagejs/montage/pulls/1515/comments","review_comment_url":"https://api.github.com/repos/montagejs/montage/pulls/comments/{number}","comments_url":"https://api.github.com/repos/montagejs/montage/issues/1515/comments","statuses_url":"https://api.github.com/repos/montagejs/montage/statuses/bcfb1ee59aead320220755f371662f4df2a5806e","head":{"label":"rayshan:feature-segmented-bar","ref":"feature-segmented-bar","sha":"bcfb1ee59aead320220755f371662f4df2a5806e","user":{"login":"rayshan","id":3760840,"avatar_url":"https://avatars.githubusercontent.com/u/3760840?v=3","gravatar_id":"","url":"https://api.github.com/users/rayshan","html_url":"https://github.com/rayshan","followers_url":"https://api.github.com/users/rayshan/followers","following_url":"https://api.github.com/users/rayshan/following{/other_user}","gists_url":"https://api.github.com/users/rayshan/gists{/gist_id}","starred_url":"https://api.github.com/users/rayshan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rayshan/subscriptions","organizations_url":"https://api.github.com/users/rayshan/orgs","repos_url":"https://api.github.com/users/rayshan/repos","events_url":"https://api.github.com/users/rayshan/events{/privacy}","received_events_url":"https://api.github.com/users/rayshan/received_events","type":"User","site_admin":false},"repo":{"id":29500471,"name":"montage","full_name":"rayshan/montage","owner":{"login":"rayshan","id":3760840,"avatar_url":"https://avatars.githubusercontent.com/u/3760840?v=3","gravatar_id":"","url":"https://api.github.com/users/rayshan","html_url":"https://github.com/rayshan","followers_url":"https://api.github.com/users/rayshan/followers","following_url":"https://api.github.com/users/rayshan/following{/other_user}","gists_url":"https://api.github.com/users/rayshan/gists{/gist_id}","starred_url":"https://api.github.com/users/rayshan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rayshan/subscriptions","organizations_url":"https://api.github.com/users/rayshan/orgs","repos_url":"https://api.github.com/users/rayshan/repos","events_url":"https://api.github.com/users/rayshan/events{/privacy}","received_events_url":"https://api.github.com/users/rayshan/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/rayshan/montage","description":"MontageJS is an elegant, open source HTML5 framework maintained by Montage Studio that rivals native SDKs, yet is easier to learn. It offers modular components, two-way data binding, and much more. Join us on irc.freenode.net#montage. Sign up for our beta to build MontageJS applications in the cloud.","fork":true,"url":"https://api.github.com/repos/rayshan/montage","forks_url":"https://api.github.com/repos/rayshan/montage/forks","keys_url":"https://api.github.com/repos/rayshan/montage/keys{/key_id}","collaborators_url":"https://api.github.com/repos/rayshan/montage/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/rayshan/montage/teams","hooks_url":"https://api.github.com/repos/rayshan/montage/hooks","issue_events_url":"https://api.github.com/repos/rayshan/montage/issues/events{/number}","events_url":"https://api.github.com/repos/rayshan/montage/events","assignees_url":"https://api.github.com/repos/rayshan/montage/assignees{/user}","branches_url":"https://api.github.com/repos/rayshan/montage/branches{/branch}","tags_url":"https://api.github.com/repos/rayshan/montage/tags","blobs_url":"https://api.github.com/repos/rayshan/montage/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/rayshan/montage/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/rayshan/montage/git/refs{/sha}","trees_url":"https://api.github.com/repos/rayshan/montage/git/trees{/sha}","statuses_url":"https://api.github.com/repos/rayshan/montage/statuses/{sha}","languages_url":"https://api.github.com/repos/rayshan/montage/languages","stargazers_url":"https://api.github.com/repos/rayshan/montage/stargazers","contributors_url":"https://api.github.com/repos/rayshan/montage/contributors","subscribers_url":"https://api.github.com/repos/rayshan/montage/subscribers","subscription_url":"https://api.github.com/repos/rayshan/montage/subscription","commits_url":"https://api.github.com/repos/rayshan/montage/commits{/sha}","git_commits_url":"https://api.github.com/repos/rayshan/montage/git/commits{/sha}","comments_url":"https://api.github.com/repos/rayshan/montage/comments{/number}","issue_comment_url":"https://api.github.com/repos/rayshan/montage/issues/comments/{number}","contents_url":"https://api.github.com/repos/rayshan/montage/contents/{+path}","compare_url":"https://api.github.com/repos/rayshan/montage/compare/{base}...{head}","merges_url":"https://api.github.com/repos/rayshan/montage/merges","archive_url":"https://api.github.com/repos/rayshan/montage/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/rayshan/montage/downloads","issues_url":"https://api.github.com/repos/rayshan/montage/issues{/number}","pulls_url":"https://api.github.com/repos/rayshan/montage/pulls{/number}","milestones_url":"https://api.github.com/repos/rayshan/montage/milestones{/number}","notifications_url":"https://api.github.com/repos/rayshan/montage/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/rayshan/montage/labels{/name}","releases_url":"https://api.github.com/repos/rayshan/montage/releases{/id}","created_at":"2015-01-19T22:43:06Z","updated_at":"2015-02-19T18:54:11Z","pushed_at":"2015-02-19T19:57:57Z","git_url":"git://github.com/rayshan/montage.git","ssh_url":"git@github.com:rayshan/montage.git","clone_url":"https://github.com/rayshan/montage.git","svn_url":"https://github.com/rayshan/montage","homepage":"http://montagestudio.com/montagejs","size":24729,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":0,"mirror_url":null,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"montagejs:master","ref":"master","sha":"9cbb410d72c4791592b5d25df3f2c95a0f362384","user":{"login":"montagejs","id":2008799,"avatar_url":"https://avatars.githubusercontent.com/u/2008799?v=3","gravatar_id":"","url":"https://api.github.com/users/montagejs","html_url":"https://github.com/montagejs","followers_url":"https://api.github.com/users/montagejs/followers","following_url":"https://api.github.com/users/montagejs/following{/other_user}","gists_url":"https://api.github.com/users/montagejs/gists{/gist_id}","starred_url":"https://api.github.com/users/montagejs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/montagejs/subscriptions","organizations_url":"https://api.github.com/users/montagejs/orgs","repos_url":"https://api.github.com/users/montagejs/repos","events_url":"https://api.github.com/users/montagejs/events{/privacy}","received_events_url":"https://api.github.com/users/montagejs/received_events","type":"Organization","site_admin":false},"repo":{"id":2943911,"name":"montage","full_name":"montagejs/montage","owner":{"login":"montagejs","id":2008799,"avatar_url":"https://avatars.githubusercontent.com/u/2008799?v=3","gravatar_id":"","url":"https://api.github.com/users/montagejs","html_url":"https://github.com/montagejs","followers_url":"https://api.github.com/users/montagejs/followers","following_url":"https://api.github.com/users/montagejs/following{/other_user}","gists_url":"https://api.github.com/users/montagejs/gists{/gist_id}","starred_url":"https://api.github.com/users/montagejs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/montagejs/subscriptions","organizations_url":"https://api.github.com/users/montagejs/orgs","repos_url":"https://api.github.com/users/montagejs/repos","events_url":"https://api.github.com/users/montagejs/events{/privacy}","received_events_url":"https://api.github.com/users/montagejs/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/montagejs/montage","description":"MontageJS is an elegant, open source HTML5 framework maintained by Montage Studio that rivals native SDKs, yet is easier to learn. It offers modular components, two-way data binding, and much more. Join us on irc.freenode.net#montage. Sign up for our beta to build MontageJS applications in the cloud.","fork":false,"url":"https://api.github.com/repos/montagejs/montage","forks_url":"https://api.github.com/repos/montagejs/montage/forks","keys_url":"https://api.github.com/repos/montagejs/montage/keys{/key_id}","collaborators_url":"https://api.github.com/repos/montagejs/montage/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/montagejs/montage/teams","hooks_url":"https://api.github.com/repos/montagejs/montage/hooks","issue_events_url":"https://api.github.com/repos/montagejs/montage/issues/events{/number}","events_url":"https://api.github.com/repos/montagejs/montage/events","assignees_url":"https://api.github.com/repos/montagejs/montage/assignees{/user}","branches_url":"https://api.github.com/repos/montagejs/montage/branches{/branch}","tags_url":"https://api.github.com/repos/montagejs/montage/tags","blobs_url":"https://api.github.com/repos/montagejs/montage/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/montagejs/montage/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/montagejs/montage/git/refs{/sha}","trees_url":"https://api.github.com/repos/montagejs/montage/git/trees{/sha}","statuses_url":"https://api.github.com/repos/montagejs/montage/statuses/{sha}","languages_url":"https://api.github.com/repos/montagejs/montage/languages","stargazers_url":"https://api.github.com/repos/montagejs/montage/stargazers","contributors_url":"https://api.github.com/repos/montagejs/montage/contributors","subscribers_url":"https://api.github.com/repos/montagejs/montage/subscribers","subscription_url":"https://api.github.com/repos/montagejs/montage/subscription","commits_url":"https://api.github.com/repos/montagejs/montage/commits{/sha}","git_commits_url":"https://api.github.com/repos/montagejs/montage/git/commits{/sha}","comments_url":"https://api.github.com/repos/montagejs/montage/comments{/number}","issue_comment_url":"https://api.github.com/repos/montagejs/montage/issues/comments/{number}","contents_url":"https://api.github.com/repos/montagejs/montage/contents/{+path}","compare_url":"https://api.github.com/repos/montagejs/montage/compare/{base}...{head}","merges_url":"https://api.github.com/repos/montagejs/montage/merges","archive_url":"https://api.github.com/repos/montagejs/montage/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/montagejs/montage/downloads","issues_url":"https://api.github.com/repos/montagejs/montage/issues{/number}","pulls_url":"https://api.github.com/repos/montagejs/montage/pulls{/number}","milestones_url":"https://api.github.com/repos/montagejs/montage/milestones{/number}","notifications_url":"https://api.github.com/repos/montagejs/montage/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/montagejs/montage/labels{/name}","releases_url":"https://api.github.com/repos/montagejs/montage/releases{/id}","created_at":"2011-12-08T23:18:21Z","updated_at":"2015-02-19T21:16:55Z","pushed_at":"2015-02-19T18:35:12Z","git_url":"git://github.com/montagejs/montage.git","ssh_url":"git@github.com:montagejs/montage.git","clone_url":"https://github.com/montagejs/montage.git","svn_url":"https://github.com/montagejs/montage","homepage":"http://montagestudio.com/montagejs","size":34396,"stargazers_count":1302,"watchers_count":1302,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":189,"mirror_url":null,"open_issues_count":101,"forks":189,"open_issues":101,"watchers":1302,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/montagejs/montage/pulls/1515"},"html":{"href":"https://github.com/montagejs/montage/pull/1515"},"issue":{"href":"https://api.github.com/repos/montagejs/montage/issues/1515"},"comments":{"href":"https://api.github.com/repos/montagejs/montage/issues/1515/comments"},"review_comments":{"href":"https://api.github.com/repos/montagejs/montage/pulls/1515/comments"},"review_comment":{"href":"https://api.github.com/repos/montagejs/montage/pulls/comments/{number}"},"commits":{"href":"https://api.github.com/repos/montagejs/montage/pulls/1515/commits"},"statuses":{"href":"https://api.github.com/repos/montagejs/montage/statuses/bcfb1ee59aead320220755f371662f4df2a5806e"}}}}