GitHub PullRequestReviewCommentEvent at 2014-02-25 17:33:02
Repository: pure-site
Actor: tilomitra
Payload: {"comment":{"url":"https://api.github.com/repos/yui/pure-site/pulls/comments/10046008","id":10046008,"diff_hunk":"@@ -0,0 +1,220 @@\n+var COL_INPUT           = '[data=\"cols-input\"]',\n+    PREFIX_INPUT        = '[data=\"prefix-input\"]',\n+    TAB                 = '[data-action=\"tab\"]',\n+    MQ_ADD              = '[data=\"add-mq\"]',\n+    MQ_REMOVE           = '[data=\"remove-mq\"]'\n+    MQ_ADD_DEFAULT      = '[data=\"add-default-mq\"]'\n+    MQ_TABLE            = '#media-query-table',\n+    MQ_LIST             = '#media-query-table tbody',\n+    MQ_KEY              = '.mq-key',\n+    MQ_VAL              = '.mq-value',\n+    MQ_ROW              = '[data-row=\"media-query\"]';\n+\n+var events = {};\n+events[TAB]           = {click: 'handleTabClick'};\n+events[COL_INPUT]     = {blur: 'inputCols'};\n+events[PREFIX_INPUT]  = {blur: 'inputPrefix'};\n+events[MQ_KEY]        = {focus: 'storeMediaQueryId',\n+                            blur: 'addMediaQueryById'};\n+events[MQ_VAL]        = {focus: 'storeMediaQueryValue',\n+                            blur: 'addMediaQueryByValue'};\n+events[MQ_ADD]        = {click: 'renderNewMediaQuery'};\n+events[MQ_REMOVE]     = {click: 'removeRenderedMediaQuery'};\n+events[MQ_ADD_DEFAULT] = {click: 'generateDefaultMediaQuery'};\n+\n+\n+\n+YUI.add('grid-input-view', function (Y, NAME, imports, exports) {\n+\n+    'use strict';\n+\n+    //importing stuff in from other modules. Is this the right way?\n+    var MqModel = imports['mq-model'].MqModel;\n+\n+    exports = Y.Base.create('grid-input-view', Y.GridTabView, [], {\n+        events: events,\n+\n+        initializer: function (cfg) {\n+            var model = this.get('model');\n+            model.after('destroy', this.destroy, this);\n+            this.set('template', cfg.template);\n+        },\n+\n+        render: function () {\n+            //We are just going to manipulate the input values inside render(). No need to re-render all the DOM elements.\n+            var container = this.get('container'),\n+                model = this.get('model'),\n+                mq = model.get('mediaQueries'),\n+                list = container.one(MQ_LIST);\n+\n+            if (model.get('cols')) {\n+                container.one(COL_INPUT).set('value', Y.Escape.html(model.get('cols')));\n+            }\n+\n+            if (model.get('prefix')) {\n+                container.one(PREFIX_INPUT).set('value', Y.Escape.html(model.get('prefix')));\n+            }\n+\n+            list.empty();\n+            mq.each(function (m) {\n+                this._renderNewMediaQuery(m.get('id'), m.get('mq'));\n+            }, this);\n+        },\n+\n+        //This will create a new <tr> and populate it with media query values, if they exist.\n+        _renderNewMediaQuery: function (key, mq) {\n+            var container = this.get('container'),\n+                template = this.get('template'),\n+                table = container.one(MQ_TABLE),\n+                html;\n+\n+            html = template({id: key || '', mq: mq || ''});\n+\n+            if (table.hasAttribute('hidden')) {\n+                table.removeAttribute('hidden');\n+            }\n+            container.one(MQ_LIST).append(html);\n+        },\n+\n+        //This will just pass through to _renderNewMediaQuery() to create an empty row.\n+        renderNewMediaQuery: function () {\n+            this._renderNewMediaQuery();\n+\n+            var container = this.get('container'),\n+                numMediaQueries = container.one(MQ_TABLE).all(MQ_ROW).size();\n+\n+            if (numMediaQueries > app.start.limits.mediaQueries.max ||\n+                numMediaQueries < app.start.limits.mediaQueries.min) {\n+\n+                container.one(MQ_ADD).setAttribute('disabled', true);\n+            }\n+        },\n+\n+        removeRenderedMediaQuery: function (e) {\n+            var container = this.get('container'),\n+                list = container.one(MQ_LIST),\n+                table = container.one(MQ_TABLE),\n+                mq = this.get('model').get('mediaQueries'),\n+                key = e.target.ancestor(MQ_ROW, MQ_LIST)\n+                        .one(MQ_KEY).get('value');\n+\n+            e.target.ancestor(MQ_ROW, MQ_LIST).remove();\n+            container.one(MQ_ADD).removeAttribute('disabled');\n+            if (!list.hasChildNodes()) {\n+                table.setAttribute('hidden');\n+            }\n+\n+            //we only want to update the route if the row had some contents\n+            if (key) {\n+                mq.remove(mq.getById(key));\n+            }\n+\n+            this.get('model').set('mediaQueries', mq);\n+        },\n+\n+        storeMediaQueryId: function (e) {\n+            this.mediaQueryId = e.target.get('value');\n+        },\n+\n+        storeMediaQueryValue: function (e) {\n+            this.mediaQueryValue = e.target.get('value');\n+        },\n+        addMediaQueryById: function (e) {\n+            //check to see if this media query has a value associated with it.\n+            var key     = e.target.get('value'),\n+                oldKey  = this.mediaQueryId,\n+                val     = e.target.get('parentNode').next().one(MQ_VAL).get('value'),\n+                mq      = this.get('model').get('mediaQueries'),\n+                existingModel = mq.getById(oldKey),\n+                index   = mq.size();\n+\n+\n+            //dont want to do anything unless the key has an explicit value\n+            if (key && key !== oldKey) {\n+\n+                //if we had an existing model, then remove that\n+                if (existingModel) {\n+                    index = mq.indexOf(existingModel);\n+                    mq.remove(existingModel);\n+                }\n+                //add a new media query\n+                mq.add({\n+                    id: key,\n+                    mq: val\n+                }, {index: index});\n+\n+                this.get('model').set('mediaQueries', mq);\n+            }\n+        },\n+\n+        addMediaQueryByValue: function (e) {\n+            var val = e.target.get('value'),\n+                oldVal = this.mediaQueryValue,\n+                key = e.target.get('parentNode').previous().one(MQ_KEY).get('value'),\n+                mq  = this.get('model').get('mediaQueries'),\n+                existingModel = mq.getById(key),\n+                model;\n+\n+\n+\n+            //dont want to do anything unless `val` has an explicit value\n+            if (val && val !== oldVal) {\n+                model = new MqModel({id: key, mq: val});\n+\n+                if (!model.isValidMediaQuery()) {\n+                    e.target.setAttribute('invalid', true);\n+                }\n+                else {\n+                    if (existingModel) {\n+                        //find the existing model and update it.\n+                        existingModel.set('mq', val);\n+                    }\n+                    //add a new model to the model list\n+                    else {\n+                        mq.add({id: key, mq: val});\n+                    }\n+                    this.get('model').set('mediaQueries', mq);","path":"public/js/views/grid-input-view.js","position":176,"original_position":176,"commit_id":"34f3eb4dc0fac6cbc08accc2b5af90210edf8659","original_commit_id":"afd807255442ea59b1111c97b5111669a30d412a","user":{"login":"tilomitra","id":174783,"avatar_url":"https://gravatar.com/avatar/39416e8a4f8a9c9677a0a67da51f2207?d=https%3A%2F%2Fidenticons.github.com%2F568fe58ba4afa54d2db108fbd57a1f11.png&r=x","gravatar_id":"39416e8a4f8a9c9677a0a67da51f2207","url":"https://api.github.com/users/tilomitra","html_url":"https://github.com/tilomitra","followers_url":"https://api.github.com/users/tilomitra/followers","following_url":"https://api.github.com/users/tilomitra/following{/other_user}","gists_url":"https://api.github.com/users/tilomitra/gists{/gist_id}","starred_url":"https://api.github.com/users/tilomitra/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tilomitra/subscriptions","organizations_url":"https://api.github.com/users/tilomitra/orgs","repos_url":"https://api.github.com/users/tilomitra/repos","events_url":"https://api.github.com/users/tilomitra/events{/privacy}","received_events_url":"https://api.github.com/users/tilomitra/received_events","type":"User","site_admin":false},"body":"I think I need these. Otherwise, the local variable `mq` gets updated but the change doesn't get reflected in the actual model. ","created_at":"2014-02-25T17:33:02Z","updated_at":"2014-02-25T17:33:02Z","html_url":"https://github.com/yui/pure-site/pull/210#discussion_r10046008","pull_request_url":"https://api.github.com/repos/yui/pure-site/pulls/210","_links":{"self":{"href":"https://api.github.com/repos/yui/pure-site/pulls/comments/10046008"},"html":{"href":"https://github.com/yui/pure-site/pull/210#discussion_r10046008"},"pull_request":{"href":"https://api.github.com/repos/yui/pure-site/pulls/210"}}}}