Woods and Trees !

[zapatak]

Hi Acorn,

No hard feelings :-)

The first glance looked daunting

Although you must remember that I have had no real opportunity to see or get to grips with it for a week. We just had a very unreliable not so hot spot.

I will now try to put some order into the layer structure and flag coding to see if I have a bit more luck.

Sorry

[zapatak]

Hi Acorn,

Hope you had a good day despite the dismal performance of your PM !

I think that I have correctly modified the site, i.e. sorted the layer arrangements, inserted the yellow rectangle and modified the flag messages.
I don't understand how to set up a term 'lang' or how to change storage preferences.

Unfortunately it still does not work as one would wish.... No doubt more errors on my behalf but any help would be welcome...

thanks in advance...

[Acorn]

Lots of little corrections to Layer Names and their levels.

First go, nothing works with the Variant included.
I deleted it and all is fine.

Tomorrow, I will have a look to see what the problem might be.

It may not be possible but I may have an alternative that is probably cleaner for a SmartPhone.

Acorn

[Acorn]

OK, some progress.

Adding a variant blows up the current coding totally, both in the Main and the Variant.
The reason is the popup open & close refers to the right layers but in the background totally new layer numbers are added depending on the number of pages X the number of variants.
Keeping track is next to impossible as I have no direct access to Xara's coding or logic.

I have had to resort to trickery.
Where I refer here to "Country" / "other_Country", you could treat these as "English" / "French".
Do note the Initial case is significant!

Each Flag, again, can use popup: open "Country" close "other_Country". This remains the same across Variants and Main so can be included as a Repeating Group.
Each Flag has a Name of "country" or "other-country" included. Again repeatable.
Do note the lowercase is significant!

Again, Xara throws in a spanner in that each Variant's Name (Anchor) is modified so I have to capture this as well.

So the code just to trigger the pressing of a Flag is like:
javascript: eval(document.getElementById(document.querySelecto r('[id*="_french"]').id).parentElement.href.substr(11)); - the Variants include an underscore.
javascript: eval(document.getElementById(document.querySelecto r('[id*="english"]').id).parentElement.href.substr(11)); - Main is unchanged.

The shapes that do this can now have more code to close Layers, if actually needed, and set the sessionStorage lang value. lang is defaulted in the Page Code Head (currently set to 'english').

I have a play file: JS - Level Flipper.xar that I have used to muck around with Level naming as well.

It is important to keep the Levels called French and English (Initial case) throughout.
I would recommend ticking Options > Page Size > Same layers on all pages in document throughout but this is less important, as is the layer ordering, as the above code now goes and finds where the layer is to then get its layer number.

The shapes that hold this code then become transparent and should be soft-grouped over their respective flags.

I have yet to build and test the code to deploy the lang value into opening the right layer regardless of it being a page viewed as Main or Variant.

You now have a dilemma.
I trust my code and if it goes wrong, I trust myself to fix it. Your fallback is then simply to remove the overlays and you still have a working site, albeit with a manual toggle into each language.
I will not necessarily be around to debug things for changes you make.

My current solution works when there is no Variant.
The dilemma is run with what I have done or what I can do.
All you can say is Acorn has treated this as an intellectual challenge, can I afford to run with it for my purposes?

The genesis of this was not wanting to split the site into two forms, French and English.
Another alternative is to produce two (or more) sites from Main and Variant(s) and use my current (working) code in each.
A little extra code to detect the viewport width could be added to always ensure the correct sized website is always seen.

The no code way is have the English text on the MouseOff layer and simply have the French Flag open the French layer and within that have the Union Jack cover the French one with the code to close the French layer.

Acorn

[zapatak]

Dear Acorn,

When I started this post I assumed that it was just a simple problem of moving logic variables from one page to another. I now realise that I was completely incorrect and that it is actually advanced Rocket Science! far too complex for my tired grey cells.

As the site is only seven pages long I will have a play with your 'no code' option, although I can foresee problems masking areas of MouseOff....

The simplest option would appear to go for the doubling up of pages using the flags to switch between one set and the other.

Once again I would like to thank you for your help and patience.

All the best

Zap

[Acorn]

Dear Acorn,

When I started this post I assumed that it was just a simple problem of moving logic variables from one page to another. I now realise that I was completely incorrect and that it is actually advanced Rocket Science! far too complex for my tired grey cells.

As the site is only seven pages long I will have a play with your 'no code' option, although I can foresee problems masking areas of MouseOff....

The simplest option would appear to go for the doubling up of pages using the flags to switch between one set and the other.

Once again I would like to thank you for your help and patience.

All the best

Zap

Zap, thank you for your understanding.

I at least know it is feasible but sadly requires a lot of fiddling because of the way Xara merges Variants and also Supersites into one amorphous mass of code.
My code is robust enough until Xara changes how it will deliver HTML and then it will all stop.

A No-code option will be cleaner, and safer, in the long run.

Acorn

[zapatak]

The heat goes on...

I abandoned the language layer idea and modified the site to display switchable side by side versions, everything works, almost...

One of the pages has a large table widget containing over 300 cells. Hopefully the table will need to be updated on a regular basis as users send in their feedback. Rather than make an English and French version of this page which could be tedious to update, I made a small pop up for the very short bit of descriptive text. So far so good...

Imagine the disappointment when I tested it and discovered that the table does not update across variants thus opening the road for a clumsy fingered operator (me) to introduce multiple errors and inconsistencies.

Any known solutions? import Excel or Filemaker tables for example?

Simple solutions welcome…..

Zap

[Acorn]

The heat goes on...
I abandoned the language layer idea and modified the site to display switchable side by side versions, everything works, almost...
One of the pages has a large table widget containing over 300 cells. Hopefully the table will need to be updated on a regular basis as users send in their feedback. Rather than make an English and French version of this page which could be tedious to update, I made a small pop up for the very short bit of descriptive text. So far so good...
Imagine the disappointment when I tested it and discovered that the table does not update across variants thus opening the road for a clumsy fingered operator (me) to introduce multiple errors and inconsistencies.
Any known solutions? import Excel or Filemaker tables for example?
Simple solutions welcome…..Zap

Zap, I will have a look later.

I was disappointed with the failure (complexity) of the Layer Flipper so I had a rethink and came up with a working Name Flipper where what you hide and show are Named objects.
The logic is simpler and immutable across Pages and Variants.

JS - Class Flipper.xar

You don't need to even have Layers but I kept them as it is good design and easier to work with.
The main difference is each Layer for the English and French Classes is preceded with a bang (!) - !French and !English.
The order is no longer important.
The bang ensure the objects in the layer are published, even if the layer is hidden.

Each French Object is now Named htmlclass="French".
Each English Object is now Named htmlclass="English".
The Flags are on the MouseOff Layer and it may look perverse but their ClassNames are flipped.
Can you see that doing this gives a toggle action to the Flags?
The French Flag is sitting directly on top of the English one.

The Flags share the same code - javascript: ToggleLanguage();ShowLanguage();
ToggleLanguage sets up the sessionStorage"lang".
ShowLanguage simply hides the language just flipped and shows the other.
When each page is accessed ToggleLanguage is run twice to ensure the sessionStorage is primed regardless of how any of the pages are accessed. ShowLanguage is then run.

Moving from Variant page to Main page is seamless.

I kept the code basic so it can be dissected/understood:

Website HTML Code (head)

<script>
    function ToggleLanguage() {
        showLang = sessionStorage.getItem("lang");
        if (!showLang) { sessionStorage.setItem("lang", "English"); showLang = "English"; }
        if (showLang == "English") {
            showLang = sessionStorage.setItem("lang", "French"); showLang="French"; hideLang ="English";
            }
        else {
            showLang = sessionStorage.setItem("lang", "English"); showLang = "English"; hideLang ="French";
            }
    }


    function ShowLanguage() {
    var elLang = document.getElementsByClassName(hideLang);
        for (var i=0; i < elLang.length; i++) {
            elLang[i].style.visibility = 'hidden';
        }
        console.log(showLang + hideLang);
    elLang = document.getElementsByClassName(showLang);
        for (var i=0; i < elLang.length; i++) {
            elLang[i].style.visibility = 'visible';
        }
    }
</script>

Website HTML Code (body)

<script>
 ToggleLanguage();
 ToggleLanguage()
 ShowLanguage();
</script>

Acorn

[Acorn]

One of the pages has a large table widget containing over 300 cells. Hopefully the table will need to be updated on a regular basis as users send in their feedback. Rather than make an English and French version of this page which could be tedious to update, I made a small pop up for the very short bit of descriptive text. So far so good...

Imagine the disappointment when I tested it and discovered that the table does not update across variants thus opening the road for a clumsy fingered operator (me) to introduce multiple errors and inconsistencies.

Any known solutions? import Excel or Filemaker tables for example?

Simple solutions welcome…..

Zap

Zap, you chose to use a Xara Smart Table, which does not LiveShare.
Also frequent updates, just for this one (large) item, will become a chore.

The "solutions" revolve round the use of IFRAMEs in Placeholders. You update a table and the Placeholders present views into this one master table across Variants.
In Main, you have created Dates (? - 1 to 30) across by Locations Down.
In the Variant, it would be cleaner as Locations by Dates, making it taller.

One data input with two views tells me to use Google Sheets.
Once set up no re-publishing.
You would create two Sheets and apply a Copy and Transpose Paste from the first into the second sheet.
I would try this approach first.

Here is a noddy demo: https://docs.google.com/spreadsheets...it?usp=sharing.
@Egg is the ace with Google Sheets and embedding:

• Main - https://docs.google.com/spreadsheets...&range=A1:AG15
• Variant - https://docs.google.com/spreadsheets...3&range=A1:O33

Acorn

[Egg Bramhill]

I've been in the process of doing exactly that Acorn, adding an editable Google sheet.

However I've hit a problem. The content of the !English layer is always visible and I can't get the content of the !French layer to display.

Any idea what I'm getting wrong?