Develop Reference

TinyMCE retrieving elements using DomQuery

I'm dealing with TinyMCE to create a WYSIWYG editor, but there is a problem and now I'm stuck on it.
I need to create a system where users are allowed to create specific documents, each devided into sections i.e. a wrapper. Inside every section there are textual and block elements (p, table, img and so on).
Now, the problem is: when a new section needs to be created I'm using the following code
function insertRawSection () {
// Close the current section and open the next one
Editor.execCommand('mceInsertRawHtml',false,`</section><section><h1>${ZERO_SPACE}</h1>`)
}
This code works, but the real problem comes out when I need to move the cursor at the start of the new h1 element.
I can't retrieve the new heading because if I look for it with DomQuery it doesn't appear.
The code I use to lookup the h1 element is the following
function insertRawSection () {
// Close the current section and open the next one
Editor.execCommand('mceInsertRawHtml',false,`</section><section><h1 data-pointer>${ZERO_SPACE}</h1>`)
// Lookup the last inserted heading
console.log($('[data-pointer]'))
}
Note: The variable $ is not JQuery but is TinyMCE.DomQuery (everything is correctly setted up)
The log print only the previous existent headings, but not the last one. Probably there is somethings like a refresh to execute, but what i have to do in order to "communicate" between this command and the DomQuery APIs?

Instead of using mceInsertRawHtml same can be achieved using dom methods of tinymce.
var ed = tinymce.activeEditor;
var currentNode = ed.selection.getNode();
var newEle = ed.dom.create('section', {}, '<h1></h1>');
ed.dom.insertAfter(newEle, currentNode);
ed.selection.select(newEle.firstChild.firstChild);
ed.selection.collapse(false);
ed.focus();
Once the element is created same can be selected using dom methods to place the cursor at the begining/ending of the element.

How to find the end of node in tinymce?

I want to insert a text after the end of next closing tag in tinymce. For ex. <p>This is <span>This is a s|pan</span>paragraph</p>. '|' shows my cursor position, I need to place my cursor after '</span>|'.

Here's an outline for what you need to do:
// get a reference to the Editor instance
// (depending on your scenario, this may come from a different place)
var editor = tinymce.activeEditor;
// get the node your cursor is in - the one you want to insert after
var endNode = editor.selection.getEnd();
// move the selection after the current node
editor.selection.select(endNode).collapse(false);
// insert your content
editor.selection.setContent("abc");
You can use the API docs to actually make it work. What I wrote above is based strictly on the docs - as I don't have the time now to test it -, so it probably won't be plug and play.

Compiling the previous answer and comments into one block of code...
// Get a reference to the Editor instance
// (depending on your scenario, this may come from a different place)
var editor = tinymce.activeEditor;
// get the node your cursor is in - the one you want to insert after
var endNode = editor.selection.getEnd();
// move the selection after the current node
editor.selection.select(endNode);
editor.selection.collapse(false);
// insert your content
editor.selection.setContent("abc");

WooCommerce double load

I have this Wordpress project and I am using WooCommerce Plug-in and WooCommerce Adamas Theme. I have the following problem:
I need to replace the word "Cart" from the top right menu with an icon of a cart as part of my project. What my theme does in its functions.php file is to create two a links to the Cart's contents PoP Up element. The first is the word "Cart" and the second is the cart product counter.
What I have tried is to add the following CSS properties by adding the class cmagnet-cart to the second, in order to include the cart icon.
.cmagnet-cart{
background: url('http://www.athlokinisi.gr/images/shopping-cart.png') no-repeat 10px 6px;
min-width: 45px;
text-align: right;
background-size: auto 17px;
}
I have added the class to the appropriate element at the functions.php cartShow() function where it is originally generated. As you can see, the problem is that when page loads, it shows the icon perfectly on position and then there is a javascript reload of some WooCommerce parameters and hides it again, by returning to its original values. Thus, without my added class.
After contacting the Adamas Theme Support team at PremiumCoding and after several tickets which took place for over 2 weeks, it was pointed out to me that I need to make an alteration at WooCommerce's JS function, perhaps the cart-fragment.js. The problem is that nothing makes sense to me in there and I really cannot find where to make the code alteration in order for the Javascript's second load to include my function or exclude this element from double loading. The Suport team there couldn't assist me further.
I would appreciate endlessly any help as well as an explanation of why this happens. It doesn't make any sense to me why to load some elements two times.
To add two additional information:
- I know that when I fix the issue I will just hide (probably by putting in comments) the first a link which prints the word "Cart"
- The last response I got from support was the following (in case it is of any help):
even if you replace text with icon after loading WooCommerce Ajax,
text will be back. So you will need to change WooCommerce js function
or translate all WooCommerce plugin and theme with WPML plugin and
string translation module.
Extended info:
In general it's not enough for me to just replace the first a link that says "Cart" with the cart's image, because it doesn't solve my bigger problem which includes the following: I am using Greek language for this project and the theme has many uppercase CSS elements. There are some problems with this because Greek words in uppercase cannot be automatically transformed because you have to remove the accents from the vowels. Therefore, I had made a jQuery functions which runs on document ready and corrects this problem, but due to the aforementioned problem of the double load it returns all text back to the previous state.

I solved it by adding this code:
//Uppercase correction for Greek language
String.prototype.replaceArray = function(find, replace){
var replaceString = this;
for (var i = 0; i < find.length; i++){
replaceString = replaceString.replace(find[i], replace[i]);
}
return replaceString;
};
var e = jQuery('a, h2, h3, button, li'), l = e.length, i;
if (typeof getComputedStyle == "undefined"){
getComputedStyle = function(e) {return e.currentStyle;};
}
for (i=0; i<l; i++){
if (getComputedStyle(e[i]).textTransform == "uppercase"){
var find = ['ά', 'έ', 'ί', 'ή', 'ύ', 'ό', 'ώ'];
var replace = ['α', 'ε', 'ι', 'η', 'υ', 'ο', 'ω'];
var replaceTo = e[i].innerHTML;
replaceTo = replaceTo.replaceArray(find, replace);
e[i].innerHTML = replaceTo;
}
}
//Uppercase correction for Greek language
into the file:
wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js
This JS file was the one responsible for the double load of contents. It may not be the best solution, yet a working one.

How to link to highlighted text on another page

I have a static HTML page where I am using span tags and javascript to highlight selected portions of text. On a separate page, I would like to link back to this HTML page and have specified highlighting active. See provided code below.
The issue is the required style="background: transparent" tag. It has to be there so that the highlight is only active when clicked upon, but this also means that when I attempt to link to this page as specified below, the highlight is not active.
Any help would be much appreciated. Thanks.
Clicking this link highlights specified portions of text in the document.
<span title="Warscape"><a title="Warscape" onclick="highlightSpan(this.getAttribute('title'))" href="">Warscape</a></span>
This is the text that is highlighted when clicked.
<span title="Warscape" class="highlight" style="background: transparent">During this month while we have been building Fort No 1 Spring field Missouri, quite a No of Regiments have arrived from the north & now the Army of the Frontier [is?] formed</span>
Code to link to page with highlighting.
<a href="j_62sept.html?highlight=Warscape">
CSS re. highlighting
.highlight {background:#bcdbda;}
Javascript re. highlighting
function highlightSpan(spanTitle)
{
var spans = document.getElementsByTagName("span");
// take away color
for (var i = 0; i < spans.length; ++i)
{
spans[i].style.backgroundColor = "transparent";
}
// add color
for (var i = 0; i < spans.length; ++i)
{
if (spans[i].getAttribute('title') == spanTitle)
{
spans[i].style.backgroundColor = "#bcdbda";
}
}
}

I recognise that this is an old thread, but this problem can now be addressed for Chrome using the Scroll to Text Fragment feature described here:
https://chromestatus.com/feature/4733392803332096
In short, it allows you to provide a link which jumps to a specific string of text and (in Chrome's implementation) highlights that section. A basic version of the link would look like this:
https://en.wikipedia.org/wiki/Cat#:~:text=Felis%20catus

when your clicking the links to the page where the highlighting takes action (<a href="j_62sept.html?highlight=Warscape">
) you need to somehow read querystring value on that page to highlight the right span. You can use javascript for this. See this example: http://www.bloggingdeveloper.com/post/JavaScript-QueryString-ParseGet-QueryString-with-Client-Side-JavaScript.aspx

This is an interesting question. If you'd like to have the javascript pick up on parameters in the url, you can use the window.location.href parameter to pull it out. So, quite simply the following function:
function CheckForHighlight(){
href = window.location.href;
values = href.split('?')[1] // Remove the url
highlight = values.split('=')[1]; // Grab the second parmeter
highlightSpan(highlight); // Highlight it!
}
Please Note that this is a very basic example. I encourage learning through simplicity, and this function can be expanded to dynamically parse all url varaibles. Brain Exersise for you!

Tree Menu? In JS?

I need a tree menu. But instead of a listview where you expand/collapse i need a dropdown box with the list and when you click on a element i need the box to update (with the first entry being 'Back') so the menu stays in a neat little dialog.
Does this menu have a name? Does anyone know where i can get code to do this?

I can think of several jQuery plugins which would soot your purposes. However, I would recommend jQuery iPod Style Drilldown Menu (Newer Version), which is exactly what it sounds like. The dropdown box updates in place, uses a cool sideways slide animation, and includes a "Back" button (as you desired). Finally, if you don't want any animation, you can try tweaking the plugin's many options. Setting crossSpeed to 0 may work, for example.

Adam is right, jQuery offers an assortment of menu's which you could use. Really though, this is a somewhat trivial problem, the code to write it would take up about 1/10th the space that jQuery's code will. So if possible I would say write it without jQuery.
The most effective method would be to do it JS OOP (Javascript Object-Oriented), but understandably this is a confusing topic.
Basically you just want something like:
function drillDown(){
//Any code that multiple drilldowns
// might need on the same page goes here
//Every instance of a drillDown will
// instantiate a new set of all functions/variables
// which are contained here
//A reference to the parent node the dropdown is placed in
this.parent;
//A reference to the div the dropdown is incased in
this.object;
//Returns a reference to this object so it can be
// stored/referenced from a variable in it's
// superclass
return this;
}
//Prototype Functions
//prototypes are shared by all
// instances so as to not double up code
//this function will build the dropdown
drillDown.prototype.build = function(parent){
//Too lazy to write all this, but build a div and your select box
// Add the select box to the div,
// Add the div to the parent (which is in your document somewhere)
var divEle = document.createElement('div');
var inputBox = document.createElement('input');
//code code code
divEle.appendChild(inputBox);
parent.appendChild(divEle);
}
//this function loads the newest dataset of
drillDown.prototype.loadNewDataSet = function(data){
//first clear out the old list
// remember we have a reference to both the
// 'object' and 'parent' by using
// this.object and this.parent
//load the data, we are going to use the text from
// the select boxes to load each new dataset, woo eval();
// If you didn't know, eval() turns a string into JS code,
// in this case referencing an array somewhere
var dataSet = eval(data);
//then loop through your list adding each new item
for(item in dataSet){
//add item to the list
//change the .onClick() of each one to load the next data set
// a la ->
selectItem.onClick = function(){this.loadNewDataSet(item);};
//if you name your datasets intelligently,
// say a bunch of arrays named for their respective selectors,
// this is mad easy
}
}
//Then you can just build it
var drillDownBox = new drillDown();
drillDownBox.build(document.getElementsByTagName('body')[0]);
drillDownBox.loadNewDataSet("start");
//assuming your first dataset array is named "start",
// it should just go
And by the way, Adam also said it, but wasn't explicit, this is refered to as a drill-down.