ActionsDev

14 replies to this thread. Most Recent

max

24 Mar 2017, 3:23 pm

How to copy the style with its media types

How to copy the style with its media types

HI every we are in the middle of updating an action which converts an items styles into a class style and we are trying to make it work if that item is only referenced within the master style sheet.

At the moment thesis how our action works: Our test action looks at the master style sheet and if it finds the id style associated with that item , it copies that id style into the page’s individual stylesheet then it changes it to a class style.

The bit we are having problems with is in tying to copy the ‘PropertiesForMediaType’, styles. We can’t seem to see those styles. So at the moment as long as there are no associated media styles with that item then it works but the minute you ad break points and that item has different style at those break points, then we have failed to copy those into the page style sheet.

does anyone have any ideas of what we should be looking at:

these are the references that we have… so if anyone else has more info that would be handy:

// Accessing sheets - Master & Document only available with External Stylesheets on

var sheet = fwPage.fwMasterStylesheet;  // Read-only
var sheet = fwPage.fwPageStylesheet;
var sheet = fwPage.fwDocumentStylesheet;

// Accessing styles
var styleCount = sheet.fwLength;

var style = sheet[styleIndex];
var style = sheet["stylename"]; // Creates style if it doesn't exist (but doesn't publish it unless modified) - should bring up JS error

// Valid media type strings
// "" (default)
// "all"
// "braille"
// "embossed"
// "handheld"
// "print"
// "projection"
// "screen"
// "speech"
// "tty"
// "tv"
// "(-webkit-min-device-pixel-ratio:1.3), (-o-min-device-pixel-ratio:13/10), (min-resolution:125dpi)"

// Media types (empty string for media type also indicates default media query)
var mediaTypeArray = style.fwMediaTypes;    // Array of media strings currently supported by this style

// Style name (selector)
var styleName = style.fwName;
style.fwName = "#item45 .someclass p"
var styleRule = style.fwRule
var mediaStyleRule = style.fwMediaRule("mediaType");

// Accessing properties
var propertyCount = style.fwLength;         // Read-only
var property = style[propertyIndex];        // Read-only
var propertyName = property.fwName;         // Read-only
var propertyValue = property.fwValue;       // Read-only
var propertyValue = style["propertyName"];  // Read-only

style.fwGetPropertyForMediaType("position");        // Default media query
style.fwGetPropertyForMediaType("position", mediaTypeArray[0]);     // Specific media query

var propertiesString = style.fwGetPropertiesForMediaType();     // Default media query
var propertiesString = style.fwGetPropertiesForMediaType(mediaTypeString);      // Specific media query

// Adding, removing, setting styles
sheet.fwAddStyle("#item45 .someclass p", "position", "absolute", "margin-left", "10px");
sheet.fwAddStyle("#item45 .someclass p", {position: "absolute", margin-left: "10px"});
sheet.fwAddStyle("position: absolute; margin-left: 10px");
sheet["#item45 .someclass p"] = {position: "absolute", margin-left: "10px"};        // Set existing style or create new style from object
sheet["#item45 .someclass p"] = "position: absolute; margin-left: 10px";            // Set existing style or create new style from string
sheet.fwRemoveStyle("#item45 .someclass p");
sheet.fwRemoveStyle(style);

// These all accept objects, alternating property pair strings, and css syntax property strings as methods of specifying the properties to be set
sheet.fwInsertStyleAt(index, "styleName", {position: "absolute", margin-left: "10px"});
sheet.fwInsertBefore("styleNameBefore", "styleName", {position: "absolute", margin-left: "10px"});
sheet.fwInsertAfter("styleNameAfter", "styleName", {position: "absolute", margin-left: "10px"});

// Changing properties
style["position"] = "absolute";
style["position"] = "";     // Remove property (this is also the behaviour in fwSetProperties() if the value is an empty string)

style.fwSetPropertyForMediaType("position", "absolute");        // Default media query
style.fwSetPropertyForMediaType("position", "absolute", mediaTypeArray[0]);     // Specific media query

style.fwSetPropertiesForMediaType(mediaTypeString, "position", "absolute", "margin-left", "10px");
style.fwSetPropertiesForMediaType(mediaTypeString, {position: "absolute", margin-left: "10px"});
style.fwSetPropertiesForMediaType(mediaTypeString, "position: absolute; margin-left: 10px");

style.fwPropertyCount();            // Count of properties in default media query
style.fwPropertyCount(mediaTypeArray[0]);       // Count of properties in specific media query
style.fwPropertyAt(index);          // Property at index in default media query
style.fwPropertyAt(index, mediaTypeArray[0]);           // Property at index in default media query

// Adding raw text to the sheet (all added at the end, separated by single newline)
sheet.fwAddRaw("Some raw text added to the stylesheet");
sheet.fwAddRaw(fwMarkups["SomeMarkup"].fwMarkup);       // Add lots of raw fixed code

var sheet = fwPage.fwPageStylesheet;
var count = sheet.fwLength;
for (var i = 0; i < count; i++)
{
    var style = sheet[i];
    var mediaArray = style.fwMediaTypes;
    for (var j = 0; j < mediaArray.length; j++)
    {
        if (mediaArray[j].mediaType.length)
        {
            style.fwSetPropertiesForMediaType(mediaArray[j], { fnarr : "gribble", gronk : "tone" });
            fwAlert(mediaArray[j].type);
            fwAlert(mediaArray[j].width);
            fwAlert(mediaArray[j].highResolution);
        }
    }
}

As you can see we should be able to get those refrences but in out test action we are running into problem This is the test action which we are mucking about with so please note this isnt complete its for us to see whats going on:

https://dl.dropboxusercontent.com/u/4274685/FileChute/test-action.zip

it’s better to be lucky than clever.. :o)

max

27 Mar 2017, 8:11 am

sorry… for some reason the link was wrong here it is

http://jmp.sh/mm2Rnjr

kind regards max

it’s better to be lucky than clever.. :o)

max

28 Mar 2017, 1:27 pm

ok I think we have got it it looks like we can now read a specific item’s css in the master style sheet including the media styles and then rewrite them into the pages own style sheet that way we can place items on the master page and still convert them to class controled items.

max

it’s better to be lucky than clever.. :o)

max

28 Mar 2017, 2:39 pm

Hi everyone… well the people who are interested :o) I have uploaded the action to action forge and we are fairly sure its now working correctly with master page items kind regards max

it’s better to be lucky than clever.. :o)

Thomas Kimmich

28 Mar 2017, 8:51 pm

Hi Max,

having had a look into this and am still a bit confused.

The Version 1.2 - my preferred version still in use - does what I mostly expect. It prints the “converted ID to class styles” back to the head-Tag.

The new Version 2 doesn’t. It prints the styles to the specificpage.css which is OK - but doesn’t really help to automate the process of critical css (as elsewhere bespoken).

So in all theory, on plus of the two current options, there should be a third which could be called:

“Convert ID styles to class and print it to head-Tag”

or in summary, an ideal action could look something like:

Option one:  Convert ID styles to class styles (Anonymous)
Option two: Externalize critical css (You'll find them in the head-Tag)
Option three: Remove ID and add your own classes (be aware of what you're doing!!!)

Cheers

Thomas

Thomas Kimmich

Kimmich DigitalMedia

http://www.kimmich-digitalmedia.com

T.+49(0)7404-914 384

Somewhere in the South of Germany

max

28 Mar 2017, 10:01 pm

yep you are correct that part hasn’t been implemented yet…
I was just glad to make it work when the style is on the master style sheet
what I need to do is give the option of writing it to the head although I don’t know if that possible yet with media queries

it’s better to be lucky than clever.. :o)

max

28 Mar 2017, 10:11 pm

Hi thomas

Option one:  Convert ID styles to class styles (Anonymous)
Option two: Externalize critical css (You'll find them in the head-Tag)
Option three: Remove ID and add your own classes (be aware of what you're doing!!!)

just for clarification this what it can do so far

Option One: Convert ID styles to class styles (Anonymous) -  exists & works
Option Two: Externalize critical css (You'll find them in the head-Tag)  -  Not yet
Option Three: Remove ID and add your own classes (be aware of what you're doing!!!)  -  exists & works
Option Four: leave ID untouched but add your own classes (as many as you want) -  exists & works
Option Five:  add classes from extended or via the inspector palette and still add some more classes from the action : exists & works
Option Six: all of the above  but from a master page/action 

it’s better to be lucky than clever.. :o)

Thomas Kimmich

29 Mar 2017, 8:52 pm

Hi Max,

meanwhile I’m having had the opportunity to test the action and can confirm it works pretty well. The test page isn’t much of worth sharing if there wouldn’t be some pretty nice things in it.

Although it is a very small thing, it has flexbox for equal height columns and responsiveness, seamless adaptive typography based on calc - color and shadows (from Material design).

It’s by the way hosted on dropbox using an app called updog, It substitutes the shut down “public folder” for me. Worth a look and try.

Without your action, it would have been much harder (even impossible) to do it the way it has been done. But it shows me as well, that my new way of working and understanding the stuff makes it hard to keep up Freeway. In fact, I don’t think having a comeback cause my new destination makes it much quicker to realize my expectations.

https://lab.updog.co/externalizer/pageonlymasterit.html

But whenever you need a testing person, it’ll be based on that. And I’m more than happy doing this for you - with proud and the best I can.

Cheers

Thomas

Thomas Kimmich

Kimmich DigitalMedia

http://www.kimmich-digitalmedia.com

T.+49(0)7404-914 384

Somewhere in the South of Germany

max

29 Mar 2017, 9:06 pm

HI Thomas Its good to know it works in the way you wanted… well almost… I still don’t have critical CSS control but I was talking with Tom in our office, and he reckons we should be able to do it on an item by item choice basis. So it won’t be automatic, but we should be able to allow someone to make that decision on an item if they feel it’s a critical element. Actual I would prefer you to test it because what I am trying to do is at least get close o what someone with a deeper knowledge of HTML and CSS would construct rather than just expect Freeway to do it all. So as long as you don’t mind testing, I will keep sending you updates

All the best Max

it’s better to be lucky than clever.. :o)

SteveB

30 Mar 2017, 4:25 pm

Hi Max,

Just implemented it on an update to a Responsive site I’m developing.

I was using the Classify2 action, but on reading this thread I downloaded and installed CSS: ID to Class (2.0), changed a couple of the divs that used background images to the your action.

Unfortunately it crashes with a javascript error:

“masterSheet has no properties”

with the red arrow pointing to:

“ for (var i = 0; 1 < masterSheet.fwLength; i++) { “

The 1.2 CSS: ID to Class version works though!

I’ve tried it on a few divs and the result is the same, not sure what’s causing it through, I’m using the updated Freeway 7.1.4, html5 pages, separate resources and external stylesheets NOT ticked (i.e. style sheets all together on page.).

Any thoughts?

Cheers,

Steve.

On 28 Mar 2017, at 15:39, max <[email protected]> wrote:

Hi everyone… well the people who are interested :o) I have uploaded the action to action forge and we are fairly sure its now working correctly with master page items kind regards max

Design Artwork Illustrations & Websites Steve Ballinger SBDesign [email protected]

SBDesign

Design • Artwork • Illustration

Thomas Kimmich

30 Mar 2017, 8:47 pm

and external stylesheets NOT ticked (i.e. style sheets all together on page.).

Any thoughts?

I think it has to do with “no external” stylesheets and the matter of fact, that the new action hasn’t got the head-TAG implemented yet. Kind of combo effect. Wait until Max solved it (if even possible) - or preferably use the V1.2.

Cheers

Thomas

Thomas Kimmich

Kimmich DigitalMedia

http://www.kimmich-digitalmedia.com

T.+49(0)7404-914 384

Somewhere in the South of Germany

SteveB

30 Mar 2017, 9:24 pm

Ah, I thought as much.

I’ll revert to version 1.2 in the meantime, until the head-TAG is implemented. It works for what I want it to do at the moment, but having the css in thread-TAG would be better.

Cheers,

Steve.

On 30 Mar 2017, at 21:47, Thomas Kimmich <[email protected]> wrote:

and external stylesheets NOT ticked (i.e. style sheets all together on page.).

Any thoughts?

I think it has to do with “no external” stylesheets and the matter of fact, that the new action hasn’t got the head-TAG implemented yet. Kind of combo effect. Wait until Max solved it (if even possible) - or preferably use the V1.2.

Cheers

Thomas

Design Artwork Illustrations & Websites Steve Ballinger SBDesign [email protected]

SBDesign

Design • Artwork • Illustration

max

31 Mar 2017, 12:34 pm

Ok its done including fixing the crash

http://actionsforge.com/actions/css-id-to-class

it works…. it blooming works ….it does honest!!! it works :o)

all the best max

it’s better to be lucky than clever.. :o)

max

31 Mar 2017, 12:35 pm

and you now have critical css injection as well

it’s better to be lucky than clever.. :o)

Back to Top

Thomas Kimmich

31 Mar 2017, 2:52 pm

Hi Max,

like to confirm - yep - works a treat. Congrats - go and get a drink - you deserved it.

Cheers

Thomas

Thomas Kimmich

Kimmich DigitalMedia

http://www.kimmich-digitalmedia.com

T.+49(0)7404-914 384

Somewhere in the South of Germany