User:Polygnotus/Scripts/FavouriteTemplates.js: Difference between revisions

Revision as of 15:15, 9 July 2025

Latest revision as of 15:28, 9 July 2025

(6 intermediate revisions by the same user not shown)

Line 132:

const cleanTitle = title.replace(/^Template:/, '');

return `{{${cleanTitle}}}`;

}

// Function to create a text-based icon using data URL

function createTextIcon(text) {

// Calculate width based on text length (more generous estimation: 10px per character + padding)

const textWidth = text.length * 10 + 20;

const width = Math.max(textWidth, 80); // Minimum width of 80px

console.log(`Creating button for "${text}" with width: ${width}px`);

// Create a simple SVG with the text

const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="22" viewBox="0 0 ${width} 22">

<rect width="${width}" height="22" fill="#f8f9fa" stroke="#a2a9b1" stroke-width="1" rx="2"/>

<text x="${width/2}" y="14" font-family="sans-serif" font-size="11" text-anchor="middle" fill="#222">${text}</text>

</svg>`;

// Convert to data URL

return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);

}

Line 157 ⟶ 139:

if (favoriteTemplates && favoriteTemplates.length > 0) {

// AddFirst, add the Templates toolbar section

$textarea.wikiEditor( 'addToToolbar', {

sections: {

Line 167 ⟶ 149:

} );

// AddCreate athe grouptools object for favoritethe templatesbuttons

$textarea.wikiEditor(const 'addToToolbar',templateTools = {};

section: 'favorite-templates',

groups: {

favorites: {

label: 'My Favorites'

}

}

} );

// Add buttons for each favorite template as a tool

for (const template of favoriteTemplates) {

const buttonId = createButtonId(template.title);

Line 183 ⟶ 158:

const displayTitle = template.title.replace(/^Template:/, '');

$textarea.wikiEditor(templateTools[buttonId] 'addToToolbar',= {

sectiontype: 'favorite-templateselement',

groupelement: $('favorites<button>',)

tools: { .addClass('tool tool-button')

[buttonId]: {.text(displayTitle)

label: displayTitle,.css({

type'padding': 'button4px 8px',

icon'margin': createTextIcon(displayTitle)'2px',

action'border': {'1px solid #a2a9b1',

type'border-radius': 'encapsulate2px',

options'background': {'#f8f9fa',

pre'cursor': templateSyntax'pointer',

'font-size': '11px',

'font-family': 'sans-serif'

favorites: { })

} .hover(

function() { $(this).css('background', '#eaecf0'); },

function() { $(this).css('background', '#f8f9fa'); }

</svg>`; )

.click((function(syntax) {

return function(e) {

e.preventDefault();

// Get the textarea

const textarea = $('#wpTextbox1')[0];

if (textarea) {

// Insert the template syntax at cursor position

const start = textarea.selectionStart;

const end = textarea.selectionEnd;

const text = textarea.value;

textarea.value = text.substring(0, start) + syntax + text.substring(end);

// Move cursor to end of inserted text

textarea.selectionStart = textarea.selectionEnd = start + syntax.length;

textarea.focus();

}

};

})(templateSyntax))

};

}

// CreateThen aadd simplethe SVGgroup with theall texttools

$textarea.wikiEditor( 'addToToolbar', {

section: 'favorite-templates',

groups: {

groups 'favorites': {

labeltools: 'My Favorites'templateTools

}

} );

} );

console.log(`Added ${favoriteTemplates.length} favorite template buttons to toolbar`);