Skip to content
This repository was archived by the owner on Feb 9, 2018. It is now read-only.

Update CSSTranslation.cssText to new style #141

Open
wants to merge 8 commits into
base: master
Choose a base branch
from

Conversation

rjwright
Copy link
Contributor

Make CSSTranslation.cssText reflect input text for parsed values & make it lazy.

Makes it consistent with https://github.com/css-typed-om/typed-om/pull/130/files (rotate and skew).

Other types will follow in separate PRs.

@@ -19,7 +19,9 @@
if (coords.length != 3) {
return null;
}
return [new CSSTranslation(coords[0], coords[1], coords[2]), remaining];
var result = [new CSSTranslation(coords[0], coords[1], coords[2]), remaining];
result[0]._inputType = '3';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I really don't like this thing where we're modifying the private attributes of the result outside the css-translation.js file - this can get hard to reason about very quickly. What if instead we had internal-only functions internal.buildCSSTranslation(x, y, z) and internal.buildCSSTranslationX(x) etc, in css-translation.js, that attach the correct cssText method to the resulting object? I'm imagining something like this

function CSSTranslation(x, y, z) {...}
...
function buildCSSTranslationX(x) {
  var result = new CSSTranslation(x, zeroLength);
  Object.defineProperty(result, 'cssText', {
    get: function() { return cssTextX(this); },
    set: function(newText) {}
  });
  return result;
}

internal.buildCSSTranslationX = buildCSSTranslationX;

This also gets rid of the magic '1', '2', 'x' etc, which I also think is not so great.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that might be more confusing, and add a lot of code. What about if we just set _cssText directly from the parser? That gets rid of the magic values.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that might be more confusing, and add a lot of code. What about if we just set _cssText directly from the parser? That gets rid of the magic values.

Actually I can't completely get rid of the magic flags, but I won't have to store them. And I can put them in an enum.

@rjwright
Copy link
Contributor Author

@wilddamon after talking to @shans and deciding we don't want to normalize cssText for parsed values, I have simplified the code and gotten rid of the magic flags.

I tried adding a factory for each input type, but I think was less readable. I also don't think we should move this logic into the class file, because it is a special case for parsing.

@rjwright
Copy link
Contributor Author

I tried adding a factory for each input type, but I think was less readable. I also don't think we should move this logic into the class file, because it is a special case for parsing.

But then I did it anyway, cause I don't really mind :P

}
internal.inherit(CSSTranslation, internal.CSSTransformComponent);

// These functions (cssTranslationFromTranslate*) are for making CSSTranslations from parsed CSS
// Strings. These are needed for setting the cssText.
function cssTranslationFromTranslate(coords, string, remaining) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This wasn't what I was thinking either - now you've moved parsing logic into the main file. You can definitely keep them separate - I'll send you an example in a bit.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants