[4.3] Template Diff View

[brianteeman]

Pull Request for Issue multiple .

Summary of Changes

Replace the very limited javascript used to display the diff between the core and the overriden file in com_templates with something much more useful

Testing Instructions

Apply this PR and then composer install and npm i
or use on of the prebuilt packages

There are two different views for the override: side by side and inline
side by side is the default - you can swtich to the inline version in the component options
both show the line numbers

A message is displayed if the override is identical to the core original file

Actual result BEFORE applying this Pull Request

too ugly to display ;)

Expected result AFTER applying this Pull Request

Default Side By Side View

Optional Inline View

Identical file View

Visible display of tabs and spaces

Documentation Changes Required

probably just updated screenshot

More Info

For more information on the library used and possible extras that could be added see https://github.com/jfcherng/php-diff

@richard67 a file is removed - shall I add it to the script or shall I ?

There may be some tweaks to the build scripts required to remove stuff from the library but I can only check when the package is built here ;)

[Kostelano]

Cool feature!

A "double" border of 1 px on the block, because of this, the frame is thicker than on the blocks above. And an empty space in case we only need to change a couple of lines - it should be removed.

[Kostelano]

Another suggestion: make the table header fixed when scrolling.

[brianteeman]

@Kostelano I agree BUT I might have to ask for some help with the css from someone

[crystalenka]

@Kostelano I agree BUT I might have to ask for some help with the css from someone

Add to that first row:

position: sticky;
top: 0;

[brianteeman]

Not quite that simple.

You can only add it to a th not a tr. But that's not the problem I have. It's messing up all the borders

[crystalenka]

If there is nothing in the old column (only difference is code added) the column widths go weird:

Adding the CSS:

tbody th {
	width: 5%;
}
tbody td {
	width: 45%;
}

Should fix it.

[crystalenka]

Not quite that simple.

You can only add it to a th not a tr. But that's not the problem I have. It's messing up all the borders

Applying it to the thead th works. Regarding the borders-something to do with border-collapse on the table: https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element

[brianteeman]

dont forget the css needs to work in both inline and sidebyside

[jfcherng]

Those tables have different classes btw.

• <table class="diff diff-html diff-inline">
• <table class="diff diff-html diff-side-by-side">

[brianteeman]

Thanks Jack - I will probably spend a little time later to create unique css for this using your tip

[brianteeman]

will be updated - hopefu;lly soon - with support for displaying tabs and spaces

[RickR2H]

@brianteeman Just Double checking. I create an override and added some text. For some reason the whole compare area is colored. At first the added line was darker green after adding a second line. the darker color is gone. I'm on windows.

Just saving the override without adding text will add the full color background.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/38823.}

[brianteeman]

This is what I have for the same changes

[RickR2H]

I just checked out the 4.3 branch and did an install. I'm curious what went wrong in my installation... I'll check tomorrow.

[jfcherng]

the line ending changed?

[RickR2H]

Brian is on Windows too. Line endings shouldn't be the problem I guess.

[jfcherng]

Just saving the override without adding text will add the full color background.

not sure whether he was aware of this "saving" step.

[RickR2H]

Did some further investigation. When I edit the file in VScode the diff works. When I edit and save the override in Joomla the color problem occurs.

@brianteeman Hope you have a tip or a fix. IMHO this is the most useful new feature in J4.3.

[jfcherng]

I have strong feeling that this is a line ending issue. If it is, @brianteeman can rtrim($line, '\r\n') before sending to the diff lib. Or maybe I can add a new option to ignore line ending in my diff lib.

[brianteeman]

@jfcherng I understand what you are saying but its odd that I cant replicate this

[RickR2H]

@brianteeman if you create a new PR, please let me know so I do the tests!

[jfcherng]

Maybe ask @RickR2H to look up what's actually stored in the database?

[brianteeman]

@RickR2H please open a new issue with this report. that will get more visibility. Don't have time to look at it today.