Seaside General - render Seaside Component html to a workspace?

render Seaside Component html to a workspace?

Classic

List

Threaded

7 messages Options

tty

render Seaside Component html to a workspace?

Hi Folks,

I am looking for something like doing a "print it" on MySeasideComponent.

Does this exist?

There are times during CSS work where having a component's html as a cut-n-paste would be handy. This is because the modern (Zurb Foundation) modifies the seaside generated html after page-load with "live" variables for things like tool-tips, off-canvas, modals, etc. Therefore, the "View Source" in the browser is different than what I have coded in my components.

These frameworks (Zurb Foundation) provide live coding environments based on node.js and placing clean html into them is a must so that the zurb can generate its own live variables.

thx

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Johan Brichau-2

Re: render Seaside Component html to a workspace?

You mean `html html: ‘ Here is some plain html ’ ` ?

Johan

On 22 Dec 2018, at 13:02, gettimothy <[hidden email]> wrote:

Hi Folks,

I am looking for something like doing a "print it" on MySeasideComponent.

Does this exist?

There are times during CSS work where having a component's html as a cut-n-paste would be handy. This is because the modern (Zurb Foundation) modifies the seaside generated html after page-load with "live" variables for things like tool-tips, off-canvas, modals, etc. Therefore, the "View Source" in the browser is different than what I have coded in my components.

These frameworks (Zurb Foundation) provide live coding environments based on node.js and placing clean html into them is a must so that the zurb can generate its own live variables.

thx

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

tty

Re: render Seaside Component html to a workspace?

No, that is internal to a component.

I guess I am looking for a brush that renders to a workspace

---- On Sat, 22 Dec 2018 11:48:04 -0500 [hidden email] wrote ----

You mean `html html: ‘ Here is some plain html ’ ` ?

Johan

On 22 Dec 2018, at 13:02, gettimothy <[hidden email]> wrote:

Hi Folks,

I am looking for something like doing a "print it" on MySeasideComponent.

Does this exist?

There are times during CSS work where having a component's html as a cut-n-paste would be handy. This is because the modern (Zurb Foundation) modifies the seaside generated html after page-load with "live" variables for things like tool-tips, off-canvas, modals, etc. Therefore, the "View Source" in the browser is different than what I have coded in my components.

These frameworks (Zurb Foundation) provide live coding environments based on node.js and placing clean html into them is a must so that the zurb can generate its own live variables.

thx

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Johan Brichau-2

Re: render Seaside Component html to a workspace?

Still not sure what you want :)

You want to print the generated html of a component?

WAHtmlCanvas builder render: [ :html |

html unorderedList: [

html listItem: 'an item' ] ].

On 22 Dec 2018, at 18:11, gettimothy <[hidden email]> wrote:

No, that is internal to a component.

I guess I am looking for a brush that renders to a workspace

---- On Sat, 22 Dec 2018 11:48:04 -0500 [hidden email] wrote ----

You mean `html html: ‘ Here is some plain html ’ ` ?

Johan

On 22 Dec 2018, at 13:02, gettimothy <[hidden email]> wrote:

Hi Folks,

I am looking for something like doing a "print it" on MySeasideComponent.

Does this exist?

There are times during CSS work where having a component's html as a cut-n-paste would be handy. This is because the modern (Zurb Foundation) modifies the seaside generated html after page-load with "live" variables for things like tool-tips, off-canvas, modals, etc. Therefore, the "View Source" in the browser is different than what I have coded in my components.

These frameworks (Zurb Foundation) provide live coding environments based on node.js and placing clean html into them is a must so that the zurb can generate its own live variables.

thx

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

tty

Re: render Seaside Component html to a workspace?

Hi John,

Thanks for the reply.

I will use the zurb basic tabs as an example. https://foundation.zurb.com/sites/docs/tabs.html#basics

Implemented in Smalltalk here: http://menmachinesmaterials.com/zurb/Containers/Tabs/TabsBasics

1. If you look at the foundation.zurb source code, it looks like this:

<ul class="tabs" data-tabs id="example-tabs">
<li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
<li class="tabs-title"><a data-tabs-target="panel2" href="#panel2">Tab 2</a></li>
</ul>

2. If you go to the menmachinesmaterails link, and inspect the tabs, they look like this:

<ul class="tabs" data-tabs="9cs7b4-tabs" id="example-tabs" role="tablist">
<li class="tabs-title is-active" role="presentation"><a aria-selected="true" href="#panel1" role="tab" aria-controls="panel1" id="panel1-label" tabindex="0">Tab 1</a></li>
<li class="tabs-title" role="presentation"><a data-tabs-target="panel2" role="tab" aria-controls="panel2" aria-selected="false" id="panel2-label" tabindex="-1">Tab 2</a></li>
</ul>

As you can see, the zurb foundation framework has added values to the data-tabs attribute and inserted a role="tablist". Neither of these exist in the raw html generated by Seaside.

You can view the smalltalk source code at the menmachinesmaterials link under the "Smalltalk Source Code" accordion.

What I would like to do is ask any WAComponent to print out the html as in 1.

The rational has to do with SCSS/CSS Saas work (i.e. theming) in the Foundation live environment as described here: https://foundation.zurb.com/sites/docs/sass.html

What I need to do is copy-n-paste the html of 1 into the live environment. copy-n-paste of 2. results in me pasting zurb generated attributes.

For that tabs example, the SeasideComponent is ZurbTabsBasicsExample

So in smalltalk, given a subclass of WAComponent, I would like to "print it" to get the basic html of 1:

(ZurbTabsBasicsExample new) <print it> >> "<ul class="tabs" data-tabs id="example-tabs"> <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li> <li class="tabs-title"><a data-tabs-target="panel2" href="#panel2">Tab 2</a></li> </ul>"

Now, "print it" is just a stand in for what I have in mind. I don't care about the mechanism, just the output.

hth,

---- On Sat, 22 Dec 2018 15:07:14 -0500 Johan Brichau <[hidden email]> wrote ----

Still not sure what you want :)

You want to print the generated html of a component?

WAHtmlCanvas builder render: [ :html |
html unorderedList: [
html listItem: 'an item' ] ].

On 22 Dec 2018, at 18:11, gettimothy <[hidden email]> wrote:

No, that is internal to a component.

I guess I am looking for a brush that renders to a workspace

---- On Sat, 22 Dec 2018 11:48:04 -0500 [hidden email] wrote ----

You mean `html html: ‘ Here is some plain html ’ ` ?

Johan

On 22 Dec 2018, at 13:02, gettimothy <[hidden email]> wrote:

Hi Folks,

I am looking for something like doing a "print it" on MySeasideComponent.

Does this exist?

There are times during CSS work where having a component's html as a cut-n-paste would be handy. This is because the modern (Zurb Foundation) modifies the seaside generated html after page-load with "live" variables for things like tool-tips, off-canvas, modals, etc. Therefore, the "View Source" in the browser is different than what I have coded in my components.

These frameworks (Zurb Foundation) provide live coding environments based on node.js and placing clean html into them is a must so that the zurb can generate its own live variables.

thx

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

tty

Re: render Seaside Component html to a workspace?

In reply to this post by Johan Brichau-2

Ah! Your example works.

I will see if I can get it to work with my component.

brb

---- On Sat, 22 Dec 2018 15:07:14 -0500 Johan Brichau <[hidden email]> wrote ----

Still not sure what you want :)

You want to print the generated html of a component?

WAHtmlCanvas builder render: [ :html |
html unorderedList: [
html listItem: 'an item' ] ].

On 22 Dec 2018, at 18:11, gettimothy <[hidden email]> wrote:

No, that is internal to a component.

I guess I am looking for a brush that renders to a workspace

---- On Sat, 22 Dec 2018 11:48:04 -0500 [hidden email] wrote ----

You mean `html html: ‘ Here is some plain html ’ ` ?

Johan

On 22 Dec 2018, at 13:02, gettimothy <[hidden email]> wrote:

Hi Folks,

I am looking for something like doing a "print it" on MySeasideComponent.

Does this exist?

There are times during CSS work where having a component's html as a cut-n-paste would be handy. This is because the modern (Zurb Foundation) modifies the seaside generated html after page-load with "live" variables for things like tool-tips, off-canvas, modals, etc. Therefore, the "View Source" in the browser is different than what I have coded in my components.

These frameworks (Zurb Foundation) provide live coding environments based on node.js and placing clean html into them is a must so that the zurb can generate its own live variables.

thx

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

tty

Re: render Seaside Component html to a workspace?

In reply to this post by Johan Brichau-2

Got it!

WAHtmlCanvas builder render: [ :html | |c|
c := (ZurbTabsBasicsExample new) .
html render: c].

Perfect, thank you so much.

---- On Sat, 22 Dec 2018 15:07:14 -0500 Johan Brichau <[hidden email]> wrote ----

Still not sure what you want :)

You want to print the generated html of a component?

WAHtmlCanvas builder render: [ :html |
html unorderedList: [
html listItem: 'an item' ] ].

On 22 Dec 2018, at 18:11, gettimothy <[hidden email]> wrote:

No, that is internal to a component.

I guess I am looking for a brush that renders to a workspace

---- On Sat, 22 Dec 2018 11:48:04 -0500 [hidden email] wrote ----

You mean `html html: ‘ Here is some plain html ’ ` ?

Johan

On 22 Dec 2018, at 13:02, gettimothy <[hidden email]> wrote:

Hi Folks,

I am looking for something like doing a "print it" on MySeasideComponent.

Does this exist?

There are times during CSS work where having a component's html as a cut-n-paste would be handy. This is because the modern (Zurb Foundation) modifies the seaside generated html after page-load with "live" variables for things like tool-tips, off-canvas, modals, etc. Therefore, the "View Source" in the browser is different than what I have coded in my components.

These frameworks (Zurb Foundation) provide live coding environments based on node.js and placing clean html into them is a must so that the zurb can generate its own live variables.

thx

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside