newpath-consulting / ez-wildapricot-webdesigner Goto Github PK

It would be nice to have EZ Web Designer be able to toggle translations in the following areas:

• Event Description names
• Event names
• Labels on Product names
• Product Descriptions in the online store
• other places that administrators add content but are strictly not in a content gadget on the website

An idea is to add a special "tag" that would rarely appear in any text that we could parse and swap like we do with .english and .french classes.

I propose a tag called [ezweb] that has a few options

[ezweb language="xx"] where xx is the official 2 letter ISO 639-1 language code

Example event name in 2 languages:
[ezweb language="en"]English event name[/ezweb] [ezweb language="fr"]French event name[/ezweb]

Here's how a "description" could look in Event description

[ezweb language="en"]

Event HTML in English

[/ezweb]

[ezweb language="fr"]

Event HTML in French

[/ezweb]

[ezweb language="es"]

Event HTML in Spanish

[/ezweb]

This would eliminate the need to attach HTML classes to the code of the description.

Create a graphical, less error-prone way to encode an addition or change into a csv (rather than the very manual way today). This is probably a good thing to pair with reorganizing the CSV file #2 .

When the Default Text to be replaced has a hyper link or HTML in it, WATM does not properly find the text string and act upon it.

Example element

<span id="idFooterPoweredByWA"> Powered by <a href="http://www.wildapricot.com" target="_blank">Wild Apricot</a> Membership Software</span>

If Default Text is set to

Powered by Wild Apricot Membership Software

neither replace or replace_element will work as expected.

If a part of the phrase such as Powered by is used the replace function will work to replace the Powered By text with the English Replacement Text or Alternate Language Text columns. But replace_element will break altogether and not replace the whole element with a substring search.

If WATM encounters an error of some sort on a line, the console window should be used to log any errors

Potential errors/warnings to log:

• [watm error] line x : invalid function in function column
• [watm error] line x : query column style or ID missing for function
• [watm error] line x : invalid style or ID format
• [watm error] WATM configuration file not found
• [watm error] WATM configuration file is not in correct format
• [watm notice] switched to alternate language

There may be other errors/notices to log which will help people debugging WATM configuration.

Also good to have a JS variable in WATM installation script to turn on error logging/turn off error logging

Turn off cache while textManagerProductionMode = false; in JS installer script. That way csv file is always downloaded while testing changes to the CSV file. Once textManagerProductionMode = true; turn on caching.

One approach is to add META data to the headers

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

One comment issue we have seen is that WATM can show conflicts between 2 or more lines in the CSV. It would be cool to show what CSV edits have been applied already to the selected element.

Alternatively we could have a mode that "highlights" what elements have been changed on a page all at once with some sort of UI highlight.

When using the inspector, the Copy Element ID button selects the Element ID but does not include the # prefix. For it to work in the CSV the ID needs a # prefix. Need to add # to clipboard text so that an ID has # on the clipboard rather than just .

https://sncc.ca/ website

In comparing the /?dev tool to an Inspect - Copy Selector, there is an apparent discrepancy.
For a reply as soon as possible - as we are working to provide a Client instruction very shortly

.

Let's add a Ui element to turn on and turn off the development mode. This is easier than adding /?dev manually to the URL.

One of the basic usages of WATM is to identify a default color scheme for all elements of a theme. Since Wild Apricot themes usually have a vibrant set of default colours, many choose the colours as defaults and don't change them. But many want to use their org's logo as the default color scheme. Most logos have 1-4 colours (sometimes more) that can be used as a primary, secondary and tertiary colour (3 is usually a good balance, and 4 can be used sometimes).

This feature would allow the user to

1. Upload an image to identify common colors used
2. Identify the colours to be used in a color palette
3. Reapply those colors to various user interface items

Several JavaScript libraries make this color identification easy to do:

Color identification: https://github.com/lokesh/color-thief/
JS color management: https://github.com/bgrins/TinyColor

Here's a sample application of such a toolset: https://mdigi.tools/color-extractor/

need to add a licensing key mechanism to enable free and with support/bug fix operation. Under free operation the WATM can be licensed to use without support, under translation/support/bug fix operation WATM is used in "enhanced" mode including the translation feature.

The translation feature is a premium feature in WATM.

There is now a watm.css file (v0.96) that describes styles for the WATM product including blinking the selecting text and future styling for the inspector panel. This is install with a jquery .append() call. It works locally off a local sample.html file but when loaded off wild apricot generates an error when attempting to add the style sheet.

TM Query and Style not rendering
When added to WA CSS, it worked as below - although the screenshot shows visibility: hidden (which worked on inspect)
Details:

Site Page/Log in: https://epsilonsigmaphi31.wildapricot.org/Sys/Login

CSS added on WA:

.*Hide Log in Social Media */
.WaGadgetAuthorizationRequired .openAuthFormContainer
{ display: none !important
}

Text Manager addition:

Query .WaGadgetAuthorizationRequired .openAuthFormContainer
{ "display": "none !important" }

--

--

The title attribute tag is rendered as a tooltip usually. There is content in the title tag that needs to be replaced/translated but WATM needs to be able to address it and do the replacement.

https://www.w3schools.com/TAGS/att_global_title.asp

Add a new directive called 'title' to address the title attribute in targeted tags. Here's an example:

The CSS selector for the Home page (<a href="https://rcco.ca/" title="Home"><span>Home</span></a>) is

#id_6NfRKGL > div > div.menuInner > ul > li.sel > div > a

Here's an example menu system with a variety of title tags that currently are unalterable as they are part of the HTML rather than the regular text. This is somewhat similar to the current button directive that alters button names.

<div id="id_6NfRKGL" class="WaGadgetOnly WaGadgetMenuHorizontal  HorizontalMenuStyle001" style="" data-componentid="KcFOzFB"><div class="stickyMenu">
	<div class="menuBackground"></div>
	<div class="menuInner">
		<ul class="firstLevel" style=""><li class="sel">
	<div class="item">
		<a href="https://rcco.ca/" title="Home"><span>Home</span></a>
</div>
</li><li class="dir">
	<div class="item">
		<a href="javascript:void(0);" title="About Us" style="cursor: pointer;"><span>About Us</span></a>
<ul class="secondLevel">
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/The-RCCO-Story" title="The RCCO Story"><span>The RCCO Story</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/What-We-Do" title="What We Do"><span>What We Do</span></a>
</div>
</li>
	
<li class=" dir">
	<div class="item">
		<a href="https://rcco.ca/Administration" title="Administration"><span>Administration</span></a>
<ul class="secondLevel">
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Staff" title="Staff"><span>Staff</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Board-of-Directors" title="Board of Directors"><span>Board of Directors</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/page-18462" title="College Committees"><span>College Committees</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/National-Council" title="National Council"><span>National Council</span></a>
</div>
</li>
	
</ul>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/page-18461" title="Centres and Regions"><span>Centres and Regions</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Important-Dates" title="Important Dates"><span>Important Dates</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Strategic-Plan" title="Strategic Plan"><span>Strategic Plan</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Historic-Organs" title="Historic Organs"><span>Historic Organs</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Archives" title="Archives"><span>Archives</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Honorary-Awards" title="Honorary Awards"><span>Honorary Awards</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Code-of-Ethics" title="Code of Ethics"><span>Code of Ethics</span></a>
</div>
</li>
	
</ul>
</div>
</li><li class="dir">
	<div class="item">
		<a href="javascript:void(0);" title="Education" style="cursor: pointer;"><span>Education</span></a>
<ul class="secondLevel">
<li class=" dir">
	<div class="item">
		<a href="https://rcco.ca/Examinations" title="Examinations"><span>Examinations</span></a>
<ul class="secondLevel">
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/exam-regulations" title="Exam Regulations"><span>Exam Regulations</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/exam-requirements" title="Exam Requirements"><span>Exam Requirements</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/exam-dates-fees" title="Exam Dates and Fees"><span>Exam Dates and Fees</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/exam-resources" title="Exam Resources"><span>Exam Resources</span></a>
</div>
</li>
	
</ul>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Scholarships" title="Scholarships"><span>Scholarships</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Professional-Development" title="Professional Development"><span>Professional Development</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Summer-Organ-Academy" title="Summer Organ Academy"><span>Summer Organ Academy</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Educational-Resources" title="OrgelkidsCAN"><span>OrgelkidsCAN</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/page-18416" title="Online Organ Lessons"><span>Online Organ Lessons</span></a>
</div>
</li>
	
</ul>
</div>
</li><li class="dir">
	<div class="item">
		<a href="javascript:void(0);" title="Employment" style="cursor: pointer;"><span>Employment</span></a>
<ul class="secondLevel">
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/For-Employers" title="For Employers"><span>For Employers</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Table-of-Recommended-Salaries" title="Table of Recommended Salaries"><span>Table of Recommended Salaries</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Employment-of-a-Church-Musician" title="Employment of a Church Musician"><span>Employment of a Church Musician</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Model-Employment-Contracts" title="Model Employment Contracts"><span>Model Employment Contracts</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Performing-Rights" title="Performing Rights"><span>Performing Rights</span></a>
</div>
</li>
	
</ul>
</div>
</li><li class="dir">
	<div class="item">
		<a href="javascript:void(0);" title="Festivals" style="cursor: pointer;"><span>Festivals</span></a>
<ul class="secondLevel">
<li class=" dir">
	<div class="item">
		<a href="https://rcco.ca/About-RCCO-Festivals" title="About RCCO Festivals"><span>About RCCO Festivals</span></a>
<ul class="secondLevel">
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/page-18327" title="Victoria 2020"><span>Victoria 2020</span></a>
</div>
</li>
	
</ul>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/National-Competition" title="National Competition"><span>National Competition</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Centre-Competitions" title="Centre Competitions"><span>Centre Competitions</span></a>
</div>
</li>
	
</ul>
</div>
</li><li class="dir">
	<div class="item">
		<a href="javascript:void(0);" title="Organ Canada" style="cursor: pointer;"><span>Organ Canada</span></a>
<ul class="secondLevel">
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/About-Organ-Canada" title="About Organ Canada"><span>About Organ Canada</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Current-Issue" title="Current Issue"><span>Current Issue</span></a>
</div>
</li>
	
</ul>
</div>
</li><li class="dir">
	<div class="item">
		<a href="javascript:void(0);" title="Support Us" style="cursor: pointer;"><span>Support Us</span></a>
<ul class="secondLevel">
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/How-You-Can-Help" title="Donor Opportunities"><span>Donor Opportunities</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/page-18408" title="National Donations"><span>National Donations</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/page-18452" title="Centre Donations"><span>Centre Donations</span></a>
</div>
</li>
	
</ul>
</div>
</li><li class="dir last-child">
	<div class="item">
		<a href="javascript:void(0);" title="Store" style="cursor: pointer;"><span>Store</span></a>
<ul class="secondLevel">
<li class=" dir">
	<div class="item">
		<a href="https://rcco.ca/Music-Publications" title="Music Publications"><span>Music Publications</span></a>
<ul class="secondLevel">
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Organ_Music" title="Organ Music"><span>Organ Music</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Choral_Music" title="Choral Music"><span>Choral Music</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Organ-Plus" title="Organ Plus"><span>Organ Plus</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Biographies" title="Composers' Biographies"><span>Composers' Biographies</span></a>
</div>
</li>
	
</ul>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Organ-Purch" title="Purchase Organ Music"><span>Purchase Organ Music</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Choral-Purch" title="Purchase Choral Music"><span>Purchase Choral Music</span></a>
</div>
</li>
	
<li class=" ">
	<div class="item">
		<a href="https://rcco.ca/Other-Purch" title="Purchase Other Music and Resources"><span>Purchase Other Music and Resources</span></a>
</div>
</li>
	
</ul>
</div>
</li></ul>
	</div>
</div>

</div>

explain difference between element ID, element path and CSS Style

Support selectors with #id and hierarchical selectors with “>” and spaces, distinguish between this and class definitions in query which has spaces. An CSS query that starts with an ID should allow spaces in the selector. Currently WATM only respects the first string before the first space and drops all the rest of the selector.

Create examples for these...

the new Element Contents may show html when the the ID or CSS Path selected has other elements in it. This information should be stripped out to show just the text contents of the element.

To replicate:

• change the element ID for "Powered by Wild Apricot" with the csv file
• try loading the Show Inspector link

WATM unfortunately overwrites the Show Inspector linked introduced in v0.94 if the powered by wild apricot element is changed.

Suggestion is to ensure the Show Inspector link appears after all the changes by WATM are triggered, rather than at the start of the search/replace process.

• Add var showInspectorLink = true ; in instructions to turn on the inspector link in the footer. var showInspectorLink = false; To turn it off.

• add inspector mode variables

var inspectorKeword =
"?dev";
var inspectorContainerId =
"el-details";
var inspectorlocation =
= "bottom";

I'd like to be able to use \n in replacement text to show a newline character.
Not sure if other backslash codes (like \t) would be worthwhile to implement. It might be nice to be able to insert a tab.

Let's make it easy to copy the ID, CSS Path or Element Class to the clipboard

Currently the include script for watm doesn't check the integrity of the underlying script. We can use Subresource integrity checking (SRI) to validate the checksum of the underlying script. Sha256 checksums should be ok.

The Inspector panel is a terrific innovation, but sometimes it is hard to know what element needs to be targeted. Clicking on slightly different parts of a page can yield a different element.

We can highlight while a user is hovering over an element to show a bounding boxes around each element. In order to see the bounding boxes, let's introduce a toggle to show a fine red line around the

.hover {
    border: 3px solid #f00;
}

.no-hover {
    border: 3px solid #000;
}

the console log currently shows information about the license key after it is validated. The Date object contains milliseconds since Jan 1 1970 (epoch) but needs to be converted in a regular TImestamp. The Date method.toLocaleString()doesn't seem to do that job right now. Check around lines 518-519 for the console logging...

Queries referencing the condition select option on the advance search page only works on the first dropdown,

Example: .conditionsColumn option

add version logging in console window.

For v1.0 of WATM coming out soon, need to have the free version of WATM have a "nag" mode. The nag is as follows:

• every 5 clicks (configurable in code) present a javascript window alert
• text says "You are currently using the free version of the Wild Apricot Text Manager. Purchase the commercial version that includes support at https://waxm.newpathconsulting.com/watm
• the button should take you to purchase the text manager
• the window should have a close box to avoid going to the buy page

Add Commons Clause to existing license to limit commercial use of Wild Apricot Text Manager

the code for the WATM install is word wrapping the code making it hard to copy and paste correctly. Check the PDF to make sure all code samples are easy to copy and paste into an editor without gremlins.

When hovering over the switch language button, add a tooltip that pops up to say "Switch to [langauge]"

Currently the WATM can be enabled/disabled by way of the Enable/Disable button that appears when WATM is installed. This button is controlled by a variable

var textManagerProductionMode = true;

It would be easier to have the WATM to be disabled while in the website editor and when switching to public view the WATM goes into production mode, eliminating the need for this button altogether. Instead the use of this button to enable/disable the WATM could be an option to enable the ability to deactivate the WATM on demand, but by default this button would not be available.

replace_delay on #membersTable th only affects first th

Doctors without Borders wildapricot-textmanager-config June 6 2022.csv

This is an example excel sheet currently being compiled and maintained by the client. They have had issues of translations not working for various reasons.

Need to create a user interface to allow selection of a section of a web page.

Requirements

• need to allow to enter a selection mode
• hover over elements on a page highlights them
• click on element selects both class and ID in use
• ask user if this is a global change to class or local change just to element
• allow user to identify what property to change (show existing properties to change)
• allow user to change all or some of the text
• allow user to hide element altogether

Challenges

• How to select hover states
• How to select buttons
• think How to select pseudo elements

We are having problems changing the headings into French for any of the member directory. Here's a test page

https://newpathconsulting.wildapricot.org/Public-member-directory

@Crednib please add a production page you need help with as well so we can have an example.

https://association2.msf.ca/
Client Doctors Without Border
Joshua - messaged Friday. I checked the site this morning and then Carol and I reviewed it this past hour. Oh my!

The main menu items are not translating. ALL was working over a week ago
I confirmed with Joshua that all was working fine **before new WATM 0.89 files loaded ** from GitHub.

Appears to be mostly the Main Menu titles and secondary menu dropdown names. See screenshots
Site pages for the most part are fine but some of the buttons are not rendering ie
https://association2.msf.ca/Regional-Groups - Only the middle two are translated

Click on Home tab and then hover over to "Getting Involved" - all dropdowns appear in French for this menu item BUT not consistent in French for all menu tabs.

Click on Getting Involved tab - all dropdowns appear in English
We checked back to previously saved 2021 & 2020 .csv files - when all working.

See attached message from Joshua (Screenshot from Slack)
And additional attachments

Nothing was changed on this site except for the WATM folder updated last week.

Ruth and Carol

Introduce a new function to change the link behind a button or a hard coded link in the user interface. This can be used for all sorts of good.

Hi All,

We just noticed a discrepancy for your review:
Re site: https://sncc.ca/

CSS Path for Menu items:

We inspected the top menu Members Only - Suggestion Box
(sorry, it was deeper into the menu items - see below for Home menu item too)

On inspect the #id is:
#id_H8b9tTl > div > div > div.menuInner > ul > li:nth-child(7) > div > ul > li:nth-child(10) > div > a > span

The above id works (we tested it in site's Css with font in red colour)

CSS Path: with /?dev tools: id as follows:
#id_H8b9tTl > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) > ul:nth-child(2) > li:nth-child(7) > div:nth-child(2) > ul:nth-child(2) > li:nth-child(2) > div:nth-child(2) > a:nth-child(2) > span:nth-child(1)

This did NOT work (when we tested in site's CSS with red font colour)

Home menu item: id's are different too:

1. Dev tool inspect: CSS Path: #id_H8b9tTl > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) > ul:nth-child(2) > li:nth-child(1) > div:nth-child(2) > a:nth-child(2) > span:nth-child(1)
2. Inspect (right click)
   #id_H8b9tTl > div > div > div.menuInner > ul > li.sel.dir > div > a > span

Ruth/Carol

Currently only two languages are supported in WATM, but there is a need to switch between 3 or more languages.

This change would involve:

• adding a drop down 3 or more languages, could be a text link switcher too (button is only for 2 languages)

• reading the configuration files(s) and script from a WATM-server

• support for a new translation file structure for a separate file for each language

• configuring number of languages and language names in the javascript installation script, as well as a fallback message in the console if the script doesn't load successfully

With update for v0.91

Fixed replace_delay function that will work for drop down boxes

Added "-n" suffix to replace-delay function. For example, replace-delay-3 will delay for 3 seconds

If the function field has an extra space at the beginning and/or end of the function, WATM ignores the line. Fix the parser to strip leading and trailing spaces from the function field.

Clearer differentiation between the text and replace_element and replace function. Why use text over replace or replace_element? Documentation could be clearer to end users, and maybe a better idea of how it works.

The common understanding is that text does not need a default text nor does it scan default text. It simply replaces the text of the target CSS selector set in query.

If text in "Default Text" column starts with a space, it will not work for replace functions.

Add debugging info to check console message for successful loading and troubleshooting tools.

Could watm read a multi tabbed spreadsheet? Much easier than slamming all config a into one tab.

Now that we have a the ability to select an element and copy to clipboard, let's allow allow the ability to :

• override the alternative text based on existing text of the element clicked

• enter alternative language text

• select which query keyword to apply from a drop down (ie replace, replace_element, text etc)

• add any optional css properties (key value pairs separated by a ,)

Once these are entered a button will allow a full config row to be copied to the clipboard that will be structured and formatted correctly. Remember the escaping with "" for the css properties value.

This Ui can ensure that if any functions that require alternative text or translation text will show an error if that query is selected but the fields are empty. Also you must have clicked on an element before these config options appear.

Acceptance Criteria:

• Show these elements in inspector only after element has been clicked
• validate that alternative text or alternative language text has been entered for any text replacement functions.
• allow replace_delay to add a second delay as an option
• add a button to copy full csv file line with tabs to clipboard

the current search and replace algorithm is case-sensitive. Allow a case-insensitive switch to allow searching of different cases

Requirements

• end user ability to add a new WATM configuration without code
• update an existing configuration
• delete an existing configuration
• ability to define the following properties for any CLASS/ID - font, font-size, color, background-color, visibility, hover pseudo classes, mouse in/out
• certain properties would be available only for certain HTML entities (button, div, link, form, a, etc)
• for text changes ability to introduce alternate text or translation text
• download a CSV file for reuse
  
  Have a look at a starting point CSV here

On first install of WATM call back to a central repo with
date of install
domain name of install
date of enable/disable