MediaWiki: how to prevent template from inserting white space? - mediawiki

Today, I tried to create a template on Portuguese Wikipedia inside one of my subpages. It works fine with this code:
<includeonly>'''{{{num}}}''': <span style="font-family:monospace;">{{{date}}}</span> — [[{{{title}}}]]<!--
--> {{#if:{{{faults|}}}<!--
-->|({{{faults}}})<!--
--->|}}<br /></includeonly>
This code creates items like this:
81: 28/feb — Der heimliche Aufmarsch gegen die Sowjetunion (one source)
But, I want to do more! The purpose of creating this template isn't just to set the date to monospace fonts... I want to add support for information about translations, and about deletions. Every time I tried to add text about deletions (you can check in the page history), the space between the lines got enormous, making the "lists" very, very ugly...
For example, this is one of the solutions I tried to add deletion information:
<includeonly>'''{{{num}}}''': <span style="font-family:monospace;">{{{date}}}</span> — [[{{{title}}}]]<!--
--> {{#if:{{{faults|}}}<!--
-->|({{{faults}}})<!--
-->|}}<!--
-->{{#if:{{{Speedy-del|{{{Semi-speedy-del|{{{Consensus-del|}}}}}}}}}|
{{#if:{{{Speedy-del|}}}<!--
-->|<div style="margin-left:2em">✘ <small>Speedy deletion denied by {{{Speedy denier}}} on {{{Speedy date}}}</small></div><!--
-->|}}
{{#if:{{{Semi-speed-del|}}}<!--
-->|<div style="margin-left:2em">✘ <small>Semi-speedy deletion denied by {{{Semi-speedy denier}}} on {{{Semi-speedy date|}}}</small></div><!--
-->|}}
{{#if:{{{Consensus-del|}}}|<!--
--><div style="margin-left:2em">✘ <small>Consensus deletion denied on {{{Consensus date|}}}</small></div><!--
-->|}}
|<br />}}</includeonly>
Why is this happening to me? I could not find any typo. So the problem must be logical, and I gave up trying to find a solution alone. My logic must be broken.

You can use HTML comments if you want to make sure there is no extra output from your template, but still need linebreaks etc for readability:
<includeonly><!--
-->'''{{{num}}}''': {{{date}}}<!--
-->[[{{{title}}}]]<!--
-->{{#if:{{{faults|}}}| ({{{faults}}})|}}<br><!--
--></includeonly>

Related

How to get a web element with a class attribute with several values

This is my problem: i have this html
as you can see there are two <div class="sc-fjhmcy dbJOiq flight-information"></div> and, i want to get the element using the class attribute, but only with the flight-information value, because
I think the part that is written as nonsense code ("sc-fjhmcy dbJOiq...) change daily
I have already tried with this xmlpath, $x('//div[contains(#class, "flight-information)"'], but its not working,
What could I do?...
I checked your code and I think that there is no big issue with this.
You need to use one class name to get the element, not two names, as below.
$(".sc-fjhmcy")
Then, this will be run correctly.
Best regards

How to see if Chrome manipulates HTML by itself?

If you forget to close a HTML-Tag, Chrome will validate your code and try to fix problems like this.
I had a major problem because I forgot a closing Form-Tag, and instead of closing it correctly, Chrome deleted a following form, not the inputs, simply the Form-Tags.
When I looked at the Source Code itself, the Form-Tag was there, but not in the Elements-Tab in the console.
So at first, I thought it must have something to do with some JS deleting this DOM-Node and set a DOM-Breakpoint to find the script.
To cut a long story short, it took me hours to find out, that no JS deleted my form, but Chrome itself thought: There is a missing so I delete some other to fix that...
Is there any possibilty to see if Chrome automatically changes your DOM?
Thank You!
The browser Engine does indeed. They use string replace methods, although it happens internally.
<div>
</div>> // mistake
<div> //missing end tag
<div></div>
---------------------------------------------------
Methods
file=file.stringreplace('>>', '>')
an uneven count will add the missing div just after the next beginning div and conditionally if the missing is not found by the end of the file:
file=file.stringreplace('
<div>', '</div>
<div>')
The Parsing Engine after the missing and broken tags are repaired then parses the file and can then with a positive count set the screens GUI widgets by opening and closing tags as GUI Frames. It does this by adding tokens delimiters to the actual div tags making them easily distinguished from each other.
<div1s>
</div1e>
<div1s>//section columns
<div2s></div2e>
<div2s></div2e>
<div2s></div2e>
</div1e>
<div1s>Footer</div1e>
-----------------------------------------------------
The GUI Frame Tokens
for each "<dive1>"{
FrameCreate(CSS--ATTRIBUTES FROM ASSOCIATIVE ARRAYS--)
//the GUI Frame Widgets VERTICAL SECTIONS
}
//Next it finds the nested divs2 and embeds these into the thir parents above but with embedded Text Widgets also.
FrameTextBoxCreate(--CSS MATED ATTRIBUTES RULES--)
div3 etc------and so on.
In fact it is in the WebView GUI Widget Sets in its customized Mosaic Canvas Widget Sets in Chrome would be where they are repaired.

How to make this code work in a Wordpress

Here is the code:
a:4:{i:2;a:3:{s:5:"title";s:78:"[:lt]naujas numeris[:en]
latest publication";s:4:"text";s:212:"<a
href="http://www.example.com/p/post-post/" target="_blank"><img
src="http://www.example.com/wp-content/uploads/2015/03/200x300.jpg"
height="254" width="165"></a>";s:6:"filter";b:0;}i:3;a:3:{s:5:"title";
s:78:"[:lt]Naujausias numeris[:en]latest
publication";s:4:"text";s:212:"<a href="http://www.example/post/"
target="_blank"><img src="http://www.example.jpg" height="254" width="165"></a>";s:6:"filter";
b:0;}i:4;a:3:{s:5:"title";s:68:"[:lt]ATSARGIAI:
[:en]CAREFUL:";s:4:"text";s:809:"<div id="widgettext">
/div>
<table>
TABLE
</table>
<div id="tarpelis"></div>
<div id="rudalinija"></div>
<div id="tarpelis"></div>
<div id="tarpelis"></div>";s:6:"filter";b:0;}s:12:"_multiwidget";i:1;}
This piece of code is a record in a website wp_options DB table (optopn_name: widget_text). I had to change one element of the code (TABLE), but right after that some problems occured (like previous table dissapeared). I fixed back the code, but looks like whenever i change name of the person in this table it dissapears on the website.
<tr>
<td><!--:lt-->Name Surname<!--:--><!--:ru-->Name Surname<!--:--></td>
</tr>
Do you have an idea why could this happen?
Also that code a:4:{i:2... is a bit troubling me, can you explain me what that does? It may be the case.
This is a compressed, minimized version of the original javascript or markup or other code that had the names of functions and variables changed to make things as small as possible. You can spend time looking through it to find it all but it can take a while.
Somehow missed that, but solution was quite easy. Turns out the only way to change it was to go to appearance(widgets) where i found this table. Eventhrough it is still strange that changing data in the database (where is stored that post with table) resulting to invalid post. Still thank you for your suggestions :)

recursive/circular template calls

I have a setup with Angular 2 where the home.html has a
<widgetcontainer></widgetcontainer> call, which in turn calls certain widget templates.
Those widget templates however would need to call widgetcontainer again so their sub-widgets can be displayed as well.
It looks somewhat like this:
home.html:
<div> home site specific content </div>
<ul>
<widgetcontainer *ng-for="#widget of widgetList" [containerwidget]="widget"></widgetcontainer>
</ul>
widgetcontainer.html:
<li>
<div [ng-switch]="containerwidget.type">
<p *ng-switch-when="1"><widget1 [widget]="containerwidget"></widget1></p>
<p *ng-switch-when="2"><widget2 [widget]="containerwidget"></widget2></p>
<p *ng-switch-default>Error in widget-data</p>
</div>
</li>
now widget1 and widget2 are pretty much identical except for the first bit of content:
<div> widget 1 or 2 specific content </div>
<div *ng-if="widget.widgetSubList">
<div class="widget-sub-listing" *ng-for="#widget of widgetlocal.widgetSubList">
<widgetcontainer *ng-for="#widget of widgetlocal.widgetSubList" [containerwidget]="widget"></widgetcontainer>
</div>
</div>
The reason why I need to do it this way is that widget1 can contain a series of widget2 (and others) which in turn can contain widget1 again.
The .ts counterparts of each widget contain the required #Input part, so if I leave out the call to widgetcontainer, it does work just fine, though of course therefor can't display the subwidgets anymore. Reading out the subwidgets works as well, tested that with console.logs.
I found similiar problems like this one: How do I inject a parent component into a child component?
where, from what I gathered, the problem is solved by importing Input and forwardRef and using
constructor( #Inject(forwardRef(() => widgetcontainer)) private _parent: widgetcontainer) { }
in the children, in my case widget 1 and 2. I tried that as well, but I still get an error. Importing widgetcontainer to the widget.ts files works without trouble, adding it to the directives or adding the <widgetcontainer></widgetcontainer> call into the html of widget1 or 2 breaks the program and throws me the error message:
EXCEPTION: TypeError: Die Eigenschaft "length" eines undefinierten oder Nullverweises kann nicht abgerufen werden. in [null]
As a little translation-attempt: it basicly says
the property "length" of an undefined or null-reference can not be called. in [null]
And I can't locate where exactly the error is. Considering it works without adding widgetcontainer to the directives in widget1 or 2, I would guess that is where the whole thing breaks though.
Previously I had a similiar error, though instead of length it stated to have failed calling forEach though now I am unable to replicate the error.
From what I have been reading up on the problem is the circular reference/call of the <widgetcontainer></widgetcontainer> template. It should be possible to have it work, though it needs a stopping-condition to not turn into an infinite loop. Therefor I already have the *ng-if condition in my widget1 and 2 which is tested already with simple listings of the subwidget IDs and worked just fine as a condition.
The question is now where am I going wrong here? Or how can I get the circular call to work?

contenteditable br / p / div weirdness

I create <div contenteditable="true"></div>
The behaviour I want is:
Enter key press = <p></p> around the text line
Shift-Enter keys press = <br/> after the text line
To get the behaviour I want in Firefox, I have tried creating the following "keypress" event:
function(ev) {
if (ev.keyCode == '13') {
document.execCommand('formatBlock', false, 'p');
document.execCommand('insertBrOnReturn',false,false);
}
return false;
}
but Firefox (as at 33.1.1) insists on inserting <br></br> on first enter (which then gets wrapped in my paragraph). I understand it to a degree when a line is empty however I do not understand why it is not removed as soon as a character is inserted into the new line.
For example, assume I type:
hello<enter>goodbye
into the editable field, I will end up with the following markup (using the above event handler)
<p>hello</p>
<p>goodbye<br></br></p>
The <br></br> does indeed disappear if I hit enter again but then I am left with the following markup
<p>hello</p>
<p>goodbye</p>
<p><br></br></p>
There are 2 problems with this:
Users will not necessarily hit the second enter, leaving "invisible" <br></br> after the goodbye
Alternatively users will hit the second enter and end up with an essentially redundant line containing <p><br></br></p>.
In fact the only way I can see to get
<p>hello</p>
<p>goodbye</p>
ie. what I want, is to to use the following sequence hello<enter>goodbye<enter><backspace> which seems patently ridiculous.
At this point I should say that I personally love Firefox as a browser and my strong preference is to keep using it, however for our business clean editing markup is critical, and in Chrome, using the above method (excluding insertBrOnReturn) produces the desired markup (the above keypress event function switches Chrome cleanly to use p rather than its standard div)
So I am in a difficult position, and I would welcome any input from other Firefox enthusiasts as to how the above can be achieved elegantly if indeed it is possible (please don't invest time providing complex hacks though as we are unlikely to use them - in my limited experience complexity is diametrically opposed to reliability)
thanks in advance for any help!
(PS - after working with this, I'm really not sure that the Chrome div implementation is any better - see comments below)