Skip to content

Commit

Permalink
Merge branch 'T4-asset' v1
Browse files Browse the repository at this point in the history
  • Loading branch information
tony-vectroda committed Oct 11, 2023
2 parents 0b88fb0 + 0c74f19 commit f7c65ef
Show file tree
Hide file tree
Showing 31 changed files with 4,705 additions and 1,300 deletions.
19 changes: 19 additions & 0 deletions FullEditorUpgrade/cs/FullEditorUpgrade.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
div {
background-color: #17a2b8;
}

H4 {
background-color: red;
}

p {
background-color: #3a17b8;
}

button {
background-color: #1798b8;
}

.test_cls {
background-color: green;
}
55 changes: 55 additions & 0 deletions FullEditorUpgrade/js/FullEditorUpgrade.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
tinymce.PluginManager.add('am_add_button10_CP', function (editor, url) {
// Add a button that opens a window
editor.addButton('am_add_button10_CP', {
text: 'am_add_button10_CP',
icon: false,
onclick: function () {
var content = tinymce.activeEditor.getContent();
var btn = document.createElement("button");
editor.insertContent('<br><button class="test_cls" >hello world</button><br>');
btn.className = "test_cls";
btn.value = "from js";
document.appendChild(btn);

}
});

// Adds a menu item to the tools menu
editor.addMenuItem('am_add_button10_CP', {
text: 'AddButton4',
context: 'tools',
onclick: function () {
var btn = document.createElement("button");
editor.insertContent('<br><button class="test_cls" >hello world</button><br>');
editor.insertContent('<br><button style="background-color: red;">hello world2</button><br>');
debugger;
btn.className = "test_cls";
btn.value = "from js";

$("#breadcrumbs").html("<textarea>THIS IS INSERTED FROM Tiny MCE</textarea>")
}
});

editor.addMenuItem('am_add_button10_CP', {
text: 'AddButton5',
context: 'tools',
onclick: function () {


$("#breadcrumbs").html("<textarea>THIS IS INSERTED FROM Tiny MCE</textarea>")
}
});

return {
getMetadata: function () {
return {
name: "am_add_button10_CP"
};
}
};
});
tinymce.init({
selector: 'textarea',
plugins: 'am_add_button10_CP',
toolbar: 'am_add_button10_CP'
});
72 changes: 72 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,74 @@
# T4-SDK
The software development repository for Terminal Four in the CSO

## Structure of Project

**high_chart_fix**
: Solution to printing highcharts without truncating the side.
This fix replaces the interactive chart with an svg when printing by ctrl+p or when called explicitly by adding ?export2pdf to the end of the url

**html2image**
: add a wrapper around a block of code (e.g. infobyte or mini visualisation) to add a download symbol which offers a download of jpg, png or svg

**html2pdf**
: add a wrapper around a block of code to add a download symbol which offers a pdf download
After the chart has been fixed, 'export2pdf_completed' has been applied. This can be used from backend side to detect when process has been finished.

**t4_media**
: this library contains the T4 assets of the website
| directory | assets |
| --------- | ------ |
| css | media library extracted js |
| - core | universal |
| - module | feature-specific |
| --------- | ------ |
| from_db | |
| - blank | |
| - html | |
| - html_old_ver | |
| - js | multi-use scripts extracted from page layouts |
| - non-automated | |
| --------- | ------ |
| html | |
| - content_type | extracted and synced content types |
| - layout | extracted and synced page layouts |
| -- landing pages | 1:1 layouts used for a single page |
| -- templates | layouts used for multiple pages |
| -- themes | themed areas of the site e.g. surveys and careers |
| - ManuallyAdded | Added after the initial extraction |
| -- Extracted | Refactoring assets |
| -- megaNav | Meganav POC assets |
| --------- | ------ |
| includes | reusable code included via navigation objects |
| - manually_edited | new includes for Refactor |
| --------- | ------ |
| js | media library extracted js files |

**t4-sdk-bootstrap**
: local bootstrap assets create db using this method:
How to do prefix:
Notepad++
find:(\.)([a-zA-Z]+[-][a-zA-Z]+[-]?[a-zA-Z]*)
replace:$1t4-sdk-$2
It adds t4-sdk- prefix to .css class.
There is no local bootstrap.js , t4-sdk-megaNav.js is used to create meganav functionality

**includes.html**
: Working file helps to create includes related with this project using VS Code formatting

**megaNav**
: Changes related with content of megaNav, should be pasted here:
https://test-t4.cso.ie/terminalfour/page/content#edit/47688/360608

**FullEditorUpgrade**
:Custom TinyMCE plugin
https://test-t4.cso.ie/terminalfour/page/htmleditorconfig#htmleditors

**https://dev-incubator.cso.ie/t4sdk/t4helper/client/t4_helper.html**

ReadMe file : Z:\t4sdk\t4helper\readme\readme.txt
ReadMe file : Z:\t4sdk\t4helper\readme\readme.txt


**source code for C# for T4Helper**
Z:\t4sdk\T4_MetaData
167 changes: 89 additions & 78 deletions html2image/js/html2image.library.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

//#region Add Namespace
var t4Sdk = t4Sdk || {};
t4Sdk.html2image = t4Sdk.html2image || {};
Expand All @@ -17,26 +16,26 @@ t4Sdk.html2image.svg = "Download SVG";


//Executes export to image on user click
t4Sdk.html2image.download = function (e) {
var list = e.target.parentElement;
if (list.div2export) {
e.target.parentElement.icon.className = "fa fa-solid fa-spinner fa-pulse";
t4Sdk.html2image.active_mode = false;
list.div2export.style.margin = "0";
list.div2export.style.padding = "0";
t4Sdk.html2image.fnExport(list.div2export, e.target.innerHTML, e.target.parentElement.icon);
t4Sdk.html2image.download = function(e) {
var list = e.target.parentElement;
if (list.div2export) {
e.target.parentElement.icon.className = "fa fa-solid fa-spinner fa-pulse";
t4Sdk.html2image.active_mode = false;
list.div2export.style.margin = "0";
list.div2export.style.padding = "0";
t4Sdk.html2image.fnExport(list.div2export, e.target.innerHTML, e.target.parentElement.icon);

} else if (t4Sdk.html2image.active_mode)
alert("No Element with class:dashboard-snapshot to export as Image!");
}
//Creates image from html
t4Sdk.html2image.fnExport = function (tgt, type, icon) {
} else if (t4Sdk.html2image.active_mode)
alert("No Element with class:dashboard-snapshot to export as Image!");
}
//Creates image from html
t4Sdk.html2image.fnExport = function(tgt, type, icon) {
tgt.style.backgroundColor = "white";
var opt = { "bgcolor": tgt.style.backgroundColor };
switch (type) {
case t4Sdk.html2image.png:
domtoimage.toPng(tgt, opt)
.then(function (dataUrl) {
.then(function(dataUrl) {
const link = document.createElement('a');
link.href = dataUrl;
t4Sdk.html2image.file_index += 1;
Expand All @@ -49,13 +48,13 @@ t4Sdk.html2image.fnExport = function (tgt, type, icon) {
tgt.style.margin = null;
tgt.style.padding = null;
})
.catch(function (error) {
.catch(function(error) {
console.error('oops, something went wrong!', error);
});
break;
case t4Sdk.html2image.svg:
domtoimage.toSvg(tgt, opt)
.then(function (dataUrl) {
.then(function(dataUrl) {
const link = document.createElement('a');
link.href = dataUrl;
t4Sdk.html2image.file_index += 1;
Expand All @@ -68,14 +67,14 @@ t4Sdk.html2image.fnExport = function (tgt, type, icon) {
tgt.style.margin = null;
tgt.style.padding = null;
})
.catch(function (error) {
.catch(function(error) {
console.error('oops, something went wrong!', error);
});
break;
case t4Sdk.html2image.jpg:

domtoimage.toJpeg(tgt, opt)
.then(function (dataUrl) {
.then(function(dataUrl) {
const link = document.createElement('a');
link.href = dataUrl;
t4Sdk.html2image.file_index += 1;
Expand All @@ -88,72 +87,85 @@ t4Sdk.html2image.fnExport = function (tgt, type, icon) {
tgt.style.margin = null;
tgt.style.padding = null;
})
.catch(function (error) {
.catch(function(error) {
console.error('oops, something went wrong!', error);
});
break;
}
};
//Converts Base64 to Blob- much slower
t4Sdk.html2image.b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
const byteCharacters = window.atob(b64Data);
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
const byteCharacters = window.atob(b64Data);
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays, { type: contentType });
return blob;
}
//Converts Base64 to Blob- much faster
t4Sdk.html2image.dataURItoBlob = function(dataURI) {
const byteString = window.atob(dataURI);
const arrayBuffer = new ArrayBuffer(byteString.length);
const int8Array = new Uint8Array(arrayBuffer);
for (let i = 0; i < byteString.length; i++) {
int8Array[i] = byteString.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
const blob = new Blob([int8Array], { type: 'application/pdf' });
return blob;
}
const blob = new Blob(byteArrays, { type: contentType });
return blob;
}
//Converts Base64 to Blob- much faster
t4Sdk.html2image.dataURItoBlob = function (dataURI) {
const byteString = window.atob(dataURI);
const arrayBuffer = new ArrayBuffer(byteString.length);
const int8Array = new Uint8Array(arrayBuffer);
for (let i = 0; i < byteString.length; i++) {
int8Array[i] = byteString.charCodeAt(i);
//Enumerates elements marked for export as images
t4Sdk.html2image.addListItem = function(div, item_text) {
var span = document.createElement("div");
span.innerHTML = item_text;
span.className = "custom_dd";
span.addEventListener("click", t4Sdk.html2image.download);
div.appendChild(span);
}
const blob = new Blob([int8Array], { type: 'application/pdf' });
return blob;
}
//Enumerates elements marked for export as images
t4Sdk.html2image.addListItem = function (div, item_text) {
var span = document.createElement("div");
span.innerHTML = item_text;
span.className = "custom_dd";
span.addEventListener("click", t4Sdk.html2image.download);
div.appendChild(span);
}
//shows context menu
t4Sdk.html2image.fnContextMenu = function (iDiv, el, icon) {
var list = document.createElement("div");
list.div2export = el;
list.icon = icon;
list.style.position = "absolute";
list.className = "custom_list";
list.style.width = "130px";
list.style.background = "white";
list.style.display = "none";
t4Sdk.html2image.addListItem(list, t4Sdk.html2image.jpg);
cnt++;
t4Sdk.html2image.addListItem(list, t4Sdk.html2image.png);
t4Sdk.html2image.addListItem(list, t4Sdk.html2image.svg);
var rct = iDiv.getBoundingClientRect();
var lsty = T4SDK_HTML2IMAGE_FIX_Y_POSITION_PX + rct.y + rct.height + window.scrollY;
var lstx = rct.x + rct.width - T4SDK_HTML2IMAGE_FIX_X_POSITION_PX;
list.style.left = lstx + "px";
list.style.top = lsty + "px";
iDiv.exportList = list;
iDiv.addEventListener("click", t4Sdk.html2image.showContextMenu);;
document.body.appendChild(list);
}
//enumerates elements which needs to be converted
t4Sdk.html2image.enumSaveAsImage = function (e) {
//missed in refactoring 22/5/2023
t4Sdk.html2image.showContextMenu = function(e) {
var tgt = e.target.parentElement;
var lst = tgt.exportList;
if (t4Sdk.html2image.openedList && lst != t4Sdk.html2image.openedList) {
t4Sdk.html2image.openedList.style.display = "none";
}
t4Sdk.html2image.openedList = lst;
if (lst.style.display == "none")
lst.style.display = "block";
else
lst.style.display = "none";
}
//shows context menu
t4Sdk.html2image.fnContextMenu = function(iDiv, el, icon) {
var list = document.createElement("div");
list.div2export = el;
list.icon = icon;
list.style.position = "absolute";
list.className = "custom_list";
list.style.width = "130px";
list.style.background = "white";
list.style.display = "none";
t4Sdk.html2image.addListItem(list, t4Sdk.html2image.jpg);
//cnt++;
t4Sdk.html2image.addListItem(list, t4Sdk.html2image.png);
t4Sdk.html2image.addListItem(list, t4Sdk.html2image.svg);
var rct = iDiv.getBoundingClientRect();
var lsty = T4SDK_HTML2IMAGE_FIX_Y_POSITION_PX + rct.y + rct.height + window.scrollY;
var lstx = rct.x + rct.width - T4SDK_HTML2IMAGE_FIX_X_POSITION_PX;
list.style.left = lstx + "px";
list.style.top = lsty + "px";
iDiv.exportList = list;
iDiv.addEventListener("click", t4Sdk.html2image.showContextMenu);;
document.body.appendChild(list);
}
//enumerates elements which needs to be converted
t4Sdk.html2image.enumSaveAsImage = function(e) {
var children = document.getElementsByClassName("html2image_container");
for (var i = 0; i < children.length; i++) {
var el = children[i];
Expand All @@ -163,8 +175,7 @@ t4Sdk.html2image.enumSaveAsImage = function (e) {

if (el.children.length == 1) {
ex_el = el.children[0];
}
else {
} else {
alert("The object number:" + (i + 1) + ", must have only one child!");
throw new Error("The object must have only one child!");
}
Expand Down Expand Up @@ -202,4 +213,4 @@ t4Sdk.html2image.enumSaveAsImage = function (e) {
if (t4Sdk.html2image.loadEventAttached == null) {
t4Sdk.html2image.loadEventAttached = true;
window.addEventListener("load", t4Sdk.html2image.enumSaveAsImage);
}
}
Loading

0 comments on commit f7c65ef

Please sign in to comment.