From 80dcc6c80fe8225742253f748b9777f06eb460ad Mon Sep 17 00:00:00 2001 From: Yannick Warnier Date: Wed, 17 Aug 2016 15:31:44 -0500 Subject: [PATCH 1/2] Use Essence lib 2.6.1 upstream repo in composer (2.6.0 was not registered by Packagist) - refs CT#8402 --- composer.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/composer.json b/composer.json index cbd9165389..c94cb5c3ac 100755 --- a/composer.json +++ b/composer.json @@ -103,7 +103,7 @@ "phpoffice/phpword": "^0.12.1", "facebook/php-sdk-v4" : "~5.0", "kigkonsult/icalcreator" : "0.1.0", - "essence/essence": "2.6.0", + "essence/essence": "2.6.1", "pclzip/pclzip": "2.8.2" }, "require-dev": { From 41534b159f4e462807f87b88f6d5a6ff70332b9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Loguercio?= Date: Wed, 17 Aug 2016 15:39:06 -0500 Subject: [PATCH 2/2] Added Size to Glyph in Badge Editor --- .../badge-studio/media/js/studio.js | 1320 +++++++++-------- main/template/default/skill/badge_create.tpl | 26 +- 2 files changed, 684 insertions(+), 662 deletions(-) diff --git a/main/inc/lib/javascript/badge-studio/media/js/studio.js b/main/inc/lib/javascript/badge-studio/media/js/studio.js index 3e153cea6f..e3d0e6b7a0 100644 --- a/main/inc/lib/javascript/badge-studio/media/js/studio.js +++ b/main/inc/lib/javascript/badge-studio/media/js/studio.js @@ -1,824 +1,832 @@ -(function () { - var SVG_NS = "http://www.w3.org/2000/svg"; +// set superglobal js var by default 100 for glyph +window.size = 100; - var svgCache = {}; - var options = {}; +var SVG_NS = "http://www.w3.org/2000/svg"; - var $badge; - var $badgeRaster; - var $studio = document.getElementById('studio'); +var svgCache = {}; +var options = {}; - var $template = document.getElementById('studio-template'); - var $palette = document.getElementById('studio-palette'); - var $mask = document.getElementById('studio-mask'); - var $glyph = document.getElementById('studio-glyph'); +var $badge; +var $badgeRaster; +var $studio = document.getElementById('studio'); - var $glyphSelector; - var $glyphSelectorButton; +var $template = document.getElementById('studio-template'); +var $palette = document.getElementById('studio-palette'); +var $mask = document.getElementById('studio-mask'); +var $glyph = document.getElementById('studio-glyph'); - window.addEventListener('load', function init () { - $badgeRaster = new Image(); - $badgeRaster.id = 'raster'; - document.getElementById('output').appendChild($badgeRaster); +var $glyphSelector; +var $glyphSelectorButton; - $template.addEventListener('change', updateTemplate); - $palette.addEventListener('change', updatePalette); - $mask.addEventListener('change', updateMask); - $glyph.addEventListener('change', updateGlyph); +window.addEventListener('load', function init () { + $badgeRaster = new Image(); + $badgeRaster.id = 'raster'; + document.getElementById('output').appendChild($badgeRaster); - initStudio(); + $template.addEventListener('change', updateTemplate); + $palette.addEventListener('change', updatePalette); + $mask.addEventListener('change', updateMask); + $glyph.addEventListener('change', updateGlyph); - initTemplates(); - initPalettes(); - initMasks(); - initOptions(); - initGlyphs(); + initStudio(); - updateTemplate(); - }); + initTemplates(); + initPalettes(); + initMasks(); + initOptions(); - // ==[ General Methods ]====================================================== + updateTemplate(); +}); - /** - * - */ - function showError (err) { - // TO DO - show errors :) - console.err(err); - } +// ==[ General Methods ]====================================================== - // ==[ Studio ]=============================================================== +/** + * + */ +function showError (err) { + // TO DO - show errors :) + console.err(err); +} - /** - * - */ - function initStudio () { - initGlyphSelector(); +// ==[ Studio ]=============================================================== - document.addEventListener('keydown', function(event) { - if (event.keyCode === 27) { // Escape - if ($glyphSelector && $glyphSelector.offsetWidth) - closeGlyphSelector(); - } - }, true); - - document.addEventListener('focus', function(event) { - [$glyphSelector].forEach(function ($overlay) { - if ($overlay && $overlay.offsetWidth && !$overlay.contains(event.target)) { - event.stopPropagation(); - $overlay.focus(); - } - }); - }, true); - } +/** + * + */ +function initStudio () { + initGlyphSelector(); - // ==[ Glyph Selector ]======================================================= + document.addEventListener('keydown', function(event) { + if (event.keyCode === 27) { // Escape + if ($glyphSelector && $glyphSelector.offsetWidth) + closeGlyphSelector(); + } + }, true); - /** - * - */ - function initGlyphSelector () { - if ($glyphSelector) - return false; + document.addEventListener('focus', function(event) { + [$glyphSelector].forEach(function ($overlay) { + if ($overlay && $overlay.offsetWidth && !$overlay.contains(event.target)) { + event.stopPropagation(); + $overlay.focus(); + } + }); + }, true); +} - var glyphLog = []; +// ==[ Glyph Selector ]======================================================= - $glyphSelectorButton = document.createElement('button'); - $glyphSelectorButton.className = 'btn btn-default'; - $glyphSelectorButton.id = 'search-glyphs'; - $glyphSelectorButton.type = 'button'; - $glyphSelectorButton.innerHTML = ' Search'; - $glyphSelectorButton.addEventListener('click', openGlyphSelector); +/** + * + */ +function initGlyphSelector () { + if ($glyphSelector) + return false; - $glyph.parentNode.insertBefore($glyphSelectorButton, $glyph.nextSibling); + var glyphLog = []; - var $$options = $glyph.querySelectorAll('option'); + $glyphSelectorButton = document.createElement('button'); + $glyphSelectorButton.className = 'btn btn-default pull-right'; + $glyphSelectorButton.id = 'search-glyphs'; + $glyphSelectorButton.type = 'button'; + $glyphSelectorButton.innerHTML = ' Search'; + $glyphSelectorButton.addEventListener('click', openGlyphSelector); - $glyphSelector = importTemplate('glyph-selector', function ($template) { + $glyph.parentNode.insertBefore($glyphSelectorButton, $glyph.nextSibling); - var $list = $template.querySelector('ul'); + var $$options = $glyph.querySelectorAll('option'); - for (var i = 0, l = $$options.length; i < l; i++) { - (function ($option, index) { - var value = $option.value; - var id = 'glyph-selector-item-' + value; + $glyphSelector = importTemplate('glyph-selector', function ($template) { - var $node = importTemplate('glyph-selector-item', function ($template) { - var $input = $template.querySelector('input'); - $input.id = id; - $input.value = index; + var $list = $template.querySelector('ul'); - var checked = $glyph.selectedIndex === index; - $input[checked ? 'setAttribute' : 'removeAttribute']('checked', 'checked'); + for (var i = 0, l = $$options.length; i < l; i++) { + (function ($option, index) { + var value = $option.value; + var id = 'glyph-selector-item-' + value; - var $label = $template.querySelector('label'); - $label.id = id + '-label'; - $label.className = 'fa fa-' + value; - $label.setAttribute('for', id); - $label.setAttribute('title', $option.text); - }).querySelector('li'); + var $node = importTemplate('glyph-selector-item', function ($template) { + var $input = $template.querySelector('input'); + $input.id = id; + $input.value = index; - $list.appendChild($node); + var checked = $glyph.selectedIndex === index; + $input[checked ? 'setAttribute' : 'removeAttribute']('checked', 'checked'); - glyphLog.push({ - id: id, - value: value - }); - })($$options[i], i); - } + var $label = $template.querySelector('label'); + $label.id = id + '-label'; + $label.className = 'fa fa-' + value; + $label.setAttribute('for', id); + $label.setAttribute('title', $option.text); + }).querySelector('li'); - }).querySelector('#glyph-selector'); + $list.appendChild($node); - $glyphSelector.querySelector('.header').appendChild(makeCloseButton(closeGlyphSelector)); - $studio.appendChild($glyphSelector); + glyphLog.push({ + id: id, + value: value + }); + })($$options[i], i); + } - $glyphSelector.addEventListener('change', function (event) { + }).querySelector('#glyph-selector'); - event.stopPropagation(); - var index = event.target.value; - $glyph.selectedIndex = index; + $glyphSelector.querySelector('.header').appendChild(makeCloseButton(closeGlyphSelector)); + $studio.appendChild($glyphSelector); - updateGlyph(); - }); + $glyphSelector.addEventListener('change', function (event) { - $glyphSelector.addEventListener('click', function (event) { - if (event.target.nodeName.toLowerCase() !== 'label') - return; + event.stopPropagation(); + var index = event.target.value; + $glyph.selectedIndex = index; - event.stopPropagation(); - closeGlyphSelector(); - }); + updateGlyph(); + }); + + $glyphSelector.addEventListener('click', function (event) { + if (event.target.nodeName.toLowerCase() !== 'label') + return; - $glyphSelector.addEventListener('keydown', function (event) { + event.stopPropagation(); + closeGlyphSelector(); + }); - if (event.keyCode === 13) { // Enter - if (event.target.name) - $glyph.selectedIndex = event.target.value; - return updateGlyph(closeGlyphSelector); - } + $glyphSelector.addEventListener('keydown', function (event) { - if (event.keyCode === 38 || event.keyCode === 40) { // Up / Down - event.preventDefault(); - - var $container = event.target.parentNode.parentNode; - var itemSize = event.target.parentNode.offsetWidth; - var containerSize = $container.offsetWidth; - var rowCount = Math.floor(containerSize / itemSize); - var currentIndex = parseInt(event.target.value); - var newIndex = currentIndex; - var altFinder; - - if (event.keyCode === 38) { - // Move up a row - newIndex = currentIndex - rowCount; - altFinder = 'firstElementChild'; - } else { - // Move down a row - newIndex = currentIndex + rowCount; - altFinder = 'lastElementChild'; - } - - var newItem = $container.querySelector('input[value="'+newIndex+'"]') || - $container[altFinder].querySelector('input'); - - $glyph.selectedIndex = newItem.value; - newItem.checked = true; - newItem.focus(); - rasterize(); + if (event.keyCode === 13) { // Enter + if (event.target.name) + $glyph.selectedIndex = event.target.value; + return updateGlyph(closeGlyphSelector); + } + + if (event.keyCode === 38 || event.keyCode === 40) { // Up / Down + event.preventDefault(); + + var $container = event.target.parentNode.parentNode; + var itemSize = event.target.parentNode.offsetWidth; + var containerSize = $container.offsetWidth; + var rowCount = Math.floor(containerSize / itemSize); + var currentIndex = parseInt(event.target.value); + var newIndex = currentIndex; + var altFinder; + + if (event.keyCode === 38) { + // Move up a row + newIndex = currentIndex - rowCount; + altFinder = 'firstElementChild'; + } else { + // Move down a row + newIndex = currentIndex + rowCount; + altFinder = 'lastElementChild'; } - }); - $glyphSelector.addEventListener('focus', function (event) { - if (event.target !== $glyphSelector) - return; + var newItem = $container.querySelector('input[value="'+newIndex+'"]') || + $container[altFinder].querySelector('input'); - event.stopPropagation(); - }, true); + $glyph.selectedIndex = newItem.value; + newItem.checked = true; + newItem.focus(); + rasterize(); + } + }); - $glyph.addEventListener('change', function (event) { - var $selectorItem = document.getElementById('glyph-selector-item-' + this.value); - if ($selectorItem) { - $selectorItem.click(); - } - }); - } + $glyphSelector.addEventListener('focus', function (event) { + if (event.target !== $glyphSelector) + return; + + event.stopPropagation(); + }, true); - /** - * - */ - function openGlyphSelector () { - if (!$glyphSelector) - initGlyphSelector(); + $glyph.addEventListener('change', function (event) { + var $selectorItem = document.getElementById('glyph-selector-item-' + this.value); + if ($selectorItem) { + $selectorItem.click(); + } + }); +} - $glyphSelector.classList.remove('hidden'); +/** + * + */ +function openGlyphSelector () { + if (!$glyphSelector) + initGlyphSelector(); - if ($glyph.value) - document.getElementById('glyph-selector-item-' + $glyph.value + '-label').focus(); + $glyphSelector.classList.remove('hidden'); - $glyphSelector.focus(); - } + if ($glyph.value) + document.getElementById('glyph-selector-item-' + $glyph.value + '-label').focus(); - /** - * - */ - function closeGlyphSelector () { - if (!$glyphSelector) - return; + $glyphSelector.focus(); +} - $glyphSelector.classList.add('hidden'); - $glyphSelectorButton.focus(); - } +/** + * + */ +function closeGlyphSelector () { + if (!$glyphSelector) + return; - // ==[ Templates ]============================================================ + $glyphSelector.classList.add('hidden'); + $glyphSelectorButton.focus(); +} - /** - * - */ - function initTemplates () { +// ==[ Templates ]============================================================ - } +/** + * + */ +function initTemplates () { - /** - * - */ - function getCurrentTemplate () { - return $template.value; - } +} + +/** + * + */ +function getCurrentTemplate () { + return $template.value; +} - /** - * - */ - function updateTemplate (callback) { - callback = cb(callback); +/** + * + */ +function updateTemplate (callback) { + callback = cb(callback); - var path = $template.dataset.path; - var shape = getCurrentTemplate(); + var path = $template.dataset.path; + var shape = getCurrentTemplate(); - loadSVG(path + '/' + shape + '.svg', function (err, $svg) { - if (err) - return showError(err); + loadSVG(path + '/' + shape + '.svg', function (err, $svg) { + if (err) + return showError(err); - $badge = $svg; + $badge = $svg; - extractOptions(); - setCustomPalette($svg); - updatePalette(function() { - updateMask(callback); - }); + extractOptions(); + setCustomPalette($svg); + updatePalette(function() { + updateMask(callback); }); - } + }); +} - // ==[ Palettes ]============================================================= +// ==[ Palettes ]============================================================= - function Palette (colors) { - this._colors = {}; - if (colors) { - for (var color in colors) { - if (colors.hasOwnProperty(color)) { - this._colors[color] = Palette.parseColor(colors[color]); - } +function Palette (colors) { + this._colors = {}; + if (colors) { + for (var color in colors) { + if (colors.hasOwnProperty(color)) { + this._colors[color] = Palette.parseColor(colors[color]); } } - if (!this._colors.hasOwnProperty('glyph')) - this._colors['glyph'] = '#000000'; } + if (!this._colors.hasOwnProperty('glyph')) + this._colors['glyph'] = '#000000'; +} - Palette.prototype.toNode = function (id) { - var content = []; - for (var color in this._colors) { - if (this._colors.hasOwnProperty(color)) { - content.push('.color-' + color + ' { fill: ' + this._colors[color] + '; }'); - } +Palette.prototype.toNode = function (id) { + var content = []; + for (var color in this._colors) { + if (this._colors.hasOwnProperty(color)) { + content.push('.color-' + color + ' { fill: ' + this._colors[color] + '; }'); } - - var $node = document.createElement('style'); - $node.type = 'text/css'; - $node.id = id || 'palette'; - $node.textContent = content.join('\n'); - return $node; } - Palette.prototype.colors = function () { - return Object.keys(this._colors); - } - - Palette.prototype.color = function (name) { - return this._colors[name] || '#000'; - } - - Palette.parseColor = function (str) { - // Should probably be a bit more robust about this! - if (!/^#[a-f0-9]{3}$/i.test(str)) - return str.toLowerCase(); - return '#' + str.charAt(1) + str.charAt(1) - + str.charAt(2) + str.charAt(2) - + str.charAt(3) + str.charAt(3); - } - - Palette.fromDataset = function (dataset) { - var colors = {}; - for (var item in dataset) { - if (/^color\w+/i.test(item)) { - var color = item - .replace(/^color(\w)/i, function (m, c) { return c.toLowerCase(); }) - .replace(/[A-Z]/, function (m) { return '-' + m.toLowerCase(); }); - colors[color] = dataset[item]; - } + var $node = document.createElement('style'); + $node.type = 'text/css'; + $node.id = id || 'palette'; + $node.textContent = content.join('\n'); + return $node; +} + +Palette.prototype.colors = function () { + return Object.keys(this._colors); +} + +Palette.prototype.color = function (name) { + return this._colors[name] || '#000'; +} + +Palette.parseColor = function (str) { + // Should probably be a bit more robust about this! + if (!/^#[a-f0-9]{3}$/i.test(str)) + return str.toLowerCase(); + return '#' + str.charAt(1) + str.charAt(1) + + str.charAt(2) + str.charAt(2) + + str.charAt(3) + str.charAt(3); +} + +Palette.fromDataset = function (dataset) { + var colors = {}; + for (var item in dataset) { + if (/^color\w+/i.test(item)) { + var color = item + .replace(/^color(\w)/i, function (m, c) { return c.toLowerCase(); }) + .replace(/[A-Z]/, function (m) { return '-' + m.toLowerCase(); }); + colors[color] = dataset[item]; } - return new Palette(colors); } - - Palette.fromSVG = function ($svg) { - var colors = {}; - var $node = $svg.getElementById('palette'); - if (!$node || $node.nodeName !== 'style') - return new Palette(); - - var $stylesheet = document.createElement('style'); - $stylesheet.setAttribute('media', 'print'); - $stylesheet.appendChild(document.createTextNode($node.textContent)); - document.head.appendChild($stylesheet); - var sheet = $stylesheet.sheet; - document.head.removeChild($stylesheet); - - var rules = sheet.rules || sheet.cssRules; - for (var i = 0, l = rules.length; i < l; i++) { - var rule = rules[i]; - var selector = rule.selectorText; - if (/^\.color-/.test(selector)) { - var key = selector.replace(/^\.color-/, ''); - var value = rule.style.fill || '#000'; - colors[key] = value; - } + return new Palette(colors); +} + +Palette.fromSVG = function ($svg) { + var colors = {}; + var $node = $svg.getElementById('palette'); + if (!$node || $node.nodeName !== 'style') + return new Palette(); + + var $stylesheet = document.createElement('style'); + $stylesheet.setAttribute('media', 'print'); + $stylesheet.appendChild(document.createTextNode($node.textContent)); + document.head.appendChild($stylesheet); + var sheet = $stylesheet.sheet; + document.head.removeChild($stylesheet); + + var rules = sheet.rules || sheet.cssRules; + for (var i = 0, l = rules.length; i < l; i++) { + var rule = rules[i]; + var selector = rule.selectorText; + if (/^\.color-/.test(selector)) { + var key = selector.replace(/^\.color-/, ''); + var value = rule.style.fill || '#000'; + colors[key] = value; } - - return new Palette(colors); } - /** - * - */ - function initPalettes () { - var $custom = document.createElement('option'); - $custom.disabled = true; - $custom.value = 'custom'; - $custom.text = 'Custom'; - $custom.id = 'custom-color-option'; - $palette.options.add($custom); - - var $container = document.getElementById('custom-palette'); - - $palette.addEventListener('change', function () { - var isCustom = (this.options[this.selectedIndex] === $custom); - $custom.disabled = !isCustom; - - setCustomColors(); - updatePalette(); - }); + return new Palette(colors); +} - var changeTimer; +/** + * + */ +function initPalettes () { + var $custom = document.createElement('option'); + $custom.disabled = true; + $custom.value = 'custom'; + $custom.text = 'Custom'; + $custom.id = 'custom-color-option'; + $palette.options.add($custom); - $container.addEventListener('change', function (event) { - var $input = event.target; - $custom.setAttribute('data-color-'+$input.name, $input.value); - $custom.disabled = false; - $palette.selectedIndex = $palette.options.length - 1; + var $container = document.getElementById('custom-palette'); - updatePalette(); - }); + $palette.addEventListener('change', function () { + var isCustom = (this.options[this.selectedIndex] === $custom); + $custom.disabled = !isCustom; setCustomColors(); - } + updatePalette(); + }); - /** - * - */ - function getCurrentPalette () { - var $option = $palette.options[$palette.selectedIndex]; - return Palette.fromDataset($option.dataset); - } + var changeTimer; - /** - * - */ - function updatePalette (callback) { - callback = cb(callback); + $container.addEventListener('change', function (event) { + var $input = event.target; + $custom.setAttribute('data-color-'+$input.name, $input.value); + $custom.disabled = false; + $palette.selectedIndex = $palette.options.length - 1; - var $oldPalette = $badge.getElementById('palette'); - var $newPalette = getCurrentPalette().toNode(); + updatePalette(); + }); - if ($oldPalette) { - $oldPalette.parentNode.insertBefore($newPalette, $oldPalette); - $oldPalette.parentNode.removeChild($oldPalette); - } else { - var $defs = $badge.querySelector('defs') || document.createElement('defs'); + setCustomColors(); +} - if (!$defs.parentNode) - $badge.insertBefore($defs, $badge.childNodes[0]); +/** + * + */ +function getCurrentPalette () { + var $option = $palette.options[$palette.selectedIndex]; + return Palette.fromDataset($option.dataset); +} - $defs.appendChild($newPalette) - } +/** + * + */ +function updatePalette (callback) { + callback = cb(callback); - updateGlyph(callback); - } + var $oldPalette = $badge.getElementById('palette'); + var $newPalette = getCurrentPalette().toNode(); - /** - * - */ - function setCustomPalette ($svg, callback) { - callback = cb(callback); - - var colors = Palette.fromSVG($svg).colors(); - - var $container = document.getElementById('custom-palette'); - var display = $container.style.display; - $container.innerHTML = ''; - $container.style.display = 'none'; - $container.className = 'item'; - - for (var i = 0, l = colors.length; i < l; i++) { - var name = colors[i]; - var label = name.replace(/(^|-)(\w)/g, function (m, x, c) { - return (x ? ' ' : '') + c.toUpperCase(); - }); - - $container.appendChild(importTemplate('custom-color', function ($template) { - var $label = $template.querySelector('span'); - $label.textContent = label; - var $input = $template.querySelector('input'); - $input.name = name; - $input.id = 'custom-color-picker-' + name; - })); - } + if ($oldPalette) { + $oldPalette.parentNode.insertBefore($newPalette, $oldPalette); + $oldPalette.parentNode.removeChild($oldPalette); + } else { + var $defs = $badge.querySelector('defs') || document.createElement('defs'); - if (colors.length) - $container.style.display = display; + if (!$defs.parentNode) + $badge.insertBefore($defs, $badge.childNodes[0]); - setCustomColors(); + $defs.appendChild($newPalette) } - /** - * - */ - function setCustomColors () { - var $custom = document.getElementById('custom-color-option'); - var $option = $palette.options[$palette.selectedIndex]; - var palette = Palette.fromDataset($option.dataset); - var colors = palette.colors(); - - for (var i = 0, l = colors.length; i < l; i++) { - var colorName = colors[i]; - var colorValue = palette.color(colorName); - $custom.setAttribute('data-color-' + colorName, colorValue); - var $input = document.getElementById('custom-color-picker-' + colorName); - if ($input) { - $input.value = colorValue; - } - } - } + updateGlyph(callback); +} - // ==[ Masks ]================================================================ +/** + * + */ +function setCustomPalette ($svg, callback) { + callback = cb(callback); - /** - * - */ - function initMasks () { + var colors = Palette.fromSVG($svg).colors(); - } + var $container = document.getElementById('custom-palette'); + var display = $container.style.display; + $container.innerHTML = ''; + $container.style.display = 'none'; + $container.className = 'item'; - function getCurrentMask () { - return $mask.value; - } + for (var i = 0, l = colors.length; i < l; i++) { + var name = colors[i]; + var label = name.replace(/(^|-)(\w)/g, function (m, x, c) { + return (x ? ' ' : '') + c.toUpperCase(); + }); - /** - * - */ - function updateMask (callback) { - callback = cb(callback); - - var path = $mask.dataset.path; - var mask = getCurrentMask(); - - if (!mask) { - var $svg = document.createElementNS(SVG_NS, 'svg'); - var $g = document.createElementNS(SVG_NS, 'g'); - $g.id = 'mask'; - $svg.appendChild($g); - return done(null, $svg); + $container.appendChild(importTemplate('custom-color', function ($template) { + var $label = $template.querySelector('span'); + $label.textContent = label; + var $input = $template.querySelector('input'); + $input.name = name; + $input.id = 'custom-color-picker-' + name; + })); + } + + if (colors.length) + $container.style.display = display; + + setCustomColors(); +} + +/** + * + */ +function setCustomColors () { + var $custom = document.getElementById('custom-color-option'); + var $option = $palette.options[$palette.selectedIndex]; + var palette = Palette.fromDataset($option.dataset); + var colors = palette.colors(); + + for (var i = 0, l = colors.length; i < l; i++) { + var colorName = colors[i]; + var colorValue = palette.color(colorName); + $custom.setAttribute('data-color-' + colorName, colorValue); + var $input = document.getElementById('custom-color-picker-' + colorName); + if ($input) { + $input.value = colorValue; } + } +} - loadSVG(path + '/' + mask + '.svg', done); +// ==[ Masks ]================================================================ - function done (err, $svg) { - if (err) - return showError(err); +/** + * + */ +function initMasks () { - var $oldMask = $badge.querySelector('#mask'); - var $newMask = $svg.querySelector('#mask'); +} - $oldMask.parentNode.insertBefore($newMask, $oldMask); - $oldMask.parentNode.removeChild($oldMask); +function getCurrentMask () { + return $mask.value; +} - rasterize(callback); - } +/** + * + */ +function updateMask (callback) { + callback = cb(callback); + + var path = $mask.dataset.path; + var mask = getCurrentMask(); + + if (!mask) { + var $svg = document.createElementNS(SVG_NS, 'svg'); + var $g = document.createElementNS(SVG_NS, 'g'); + $g.id = 'mask'; + $svg.appendChild($g); + return done(null, $svg); } - // ==[ Options ]============================================================== + loadSVG(path + '/' + mask + '.svg', done); - /** - * - */ - function initOptions () { - if ($badge) - extractOptions(); + function done (err, $svg) { + if (err) + return showError(err); - var $options = document.getElementById('options'); - $options.addEventListener('change', function (event) { - event.stopPropagation(); - var option = event.target.name; - if (!options.hasOwnProperty(option)) - return; + var $oldMask = $badge.querySelector('#mask'); + var $newMask = $svg.querySelector('#mask'); - options[option] = !!event.target.checked; - setOptions(); - }); + $oldMask.parentNode.insertBefore($newMask, $oldMask); + $oldMask.parentNode.removeChild($oldMask); + + rasterize(callback); } +} - /** - * - */ - function extractOptions () { - var $options = document.getElementById('options'); - $options.innerHTML = ''; +// ==[ Options ]============================================================== - var $optional = $badge.querySelectorAll('.optional'); +/** + * + */ +function initOptions () { + if ($badge) + extractOptions(); - if (!$optional.length) { - $options.innerHTML = 'None'; + var $options = document.getElementById('options'); + $options.addEventListener('change', function (event) { + event.stopPropagation(); + var option = event.target.name; + if (!options.hasOwnProperty(option)) return; - } - for (var i = 0, l = $optional.length; i < l; i++) { - var $option = $optional[i]; - var label = $option.getAttribute('title'); - var name = $option.id; - var enabled = ($option.getAttribute('display') !== 'none'); - if (!options.hasOwnProperty(name)) - options[name] = enabled; + options[option] = !!event.target.checked; + setOptions(); + }); +} - $option[!!options[name] ? 'removeAttribute' : 'setAttribute']('display', 'none'); +/** + * + */ +function extractOptions () { + var $options = document.getElementById('options'); + $options.innerHTML = ''; - $options.appendChild(importTemplate('option', function ($template) { - var $checkbox = $template.querySelector('input'); - $checkbox.name = name; - $checkbox.checked = !!options[name]; + var $optional = $badge.querySelectorAll('.optional'); - var $label = $template.querySelector('span'); - $label.textContent = label; - })); - } + if (!$optional.length) { + $options.innerHTML = 'None'; + return; } - /** - * - */ - function setOptions (callback) { - callback = cb(callback); + for (var i = 0, l = $optional.length; i < l; i++) { + var $option = $optional[i]; + var label = $option.getAttribute('title'); + var name = $option.id; + var enabled = ($option.getAttribute('display') !== 'none'); + if (!options.hasOwnProperty(name)) + options[name] = enabled; - if (!$badge) - return callback(); + $option[!!options[name] ? 'removeAttribute' : 'setAttribute']('display', 'none'); - for (var option in options) { - if (options.hasOwnProperty(option)) { - var $node = $badge.getElementById(option); - var visible = !!options[option]; - $node && ($node[visible ? 'removeAttribute' : 'setAttribute']('display', 'none')); - } - } + $options.appendChild(importTemplate('option', function ($template) { + var $checkbox = $template.querySelector('input'); + $checkbox.name = name; + $checkbox.checked = !!options[name]; - rasterize(callback) + var $label = $template.querySelector('span'); + $label.textContent = label; + })); } +} - // ==[ Glyphs ]=============================================================== +/** + * + */ +function setOptions (callback) { + callback = cb(callback); - /** - * - */ - function initGlyphs () { + if (!$badge) + return callback(); + for (var option in options) { + if (options.hasOwnProperty(option)) { + var $node = $badge.getElementById(option); + var visible = !!options[option]; + $node && ($node[visible ? 'removeAttribute' : 'setAttribute']('display', 'none')); + } } - /** - * - */ - function getCurrentGlyph () { - return $glyph.value; - } + rasterize(callback) +} - /** - * - */ - function getCurrentGlyphValue () { - if (!$glyph.value) - return ''; - - var $i = document.createElement('i'); - $i.className = 'fa fa-' + getCurrentGlyph(); - document.body.appendChild($i); - var chr = window.getComputedStyle($i, ':before').content; - document.body.removeChild($i); - - chr = chr.replace(/["']/g, ''); - return chr; - } +// ==[ Glyphs ]=============================================================== - /** - * - */ - function updateGlyph (callback) { - var glyph = getCurrentGlyphValue(); - - if (!glyph) - return setGlyphImage(null, callback); - - var $canvas = document.createElement('canvas'); - $canvas.width = parseInt($badgeRaster.offsetWidth); - $canvas.height = parseInt($badgeRaster.offsetHeight); - - var ctx = $canvas.getContext('2d'); - ctx.font = parseInt($canvas.width / 3) + "px FontAwesome"; - ctx.fillStyle = getCurrentPalette().color('glyph'); - ctx.textAlign = "center"; - ctx.textBaseline = "middle"; - ctx.shadowColor = "rgba(0,0,0,0.5)"; - ctx.shadowOffsetX = 0; - ctx.shadowOffsetY = 0; - ctx.shadowBlur = 5; - - ctx.fillText(glyph, $canvas.width / 2, $canvas.height / 2); - - var $image = new Image(); - $image.onload = function () { - setGlyphImage($image, callback); - } - $image.src = $canvas.toDataURL("image/png"); - // $image.src = "./media/images/cheese.jpg"; - } +/** + * + */ +function getCurrentGlyph () { + return $glyph.value; +} - /** - * - */ - function setGlyphImage ($image, callback) { - callback = cb(callback); +/** + * + */ +function getCurrentGlyphValue () { + if (!$glyph.value) + return ''; - var $newGlyph = document.createElementNS(SVG_NS, 'g'); - $newGlyph.id = 'glyph'; + var $i = document.createElement('i'); + $i.className = 'fa fa-' + getCurrentGlyph(); + document.body.appendChild($i); + var chr = window.getComputedStyle($i, ':before').content; + document.body.removeChild($i); - if (!$image) - return done(); + chr = chr.replace(/["']/g, ''); + return chr; +} - var iWidth = $image.width; - var iHeight = $image.height; +/** + * + */ +function updateGlyph (callback) { + var glyph = getCurrentGlyphValue(); - var rWidth = $badgeRaster.width; - var rHeight = $badgeRaster.height; + if (!glyph) + return setGlyphImage(null, callback); - var box = $badge.getAttribute('viewBox').split(' '); + var $canvas = document.createElement('canvas'); + $canvas.width = parseInt($badgeRaster.offsetWidth); + $canvas.height = parseInt($badgeRaster.offsetHeight); - var bWidth = parseInt(box[2]); - var bHeight = parseInt(box[3]); + var ctx = $canvas.getContext('2d'); + ctx.font = parseInt($canvas.width / 3) + "px FontAwesome"; + ctx.fillStyle = getCurrentPalette().color('glyph'); + ctx.textAlign = "center"; + ctx.textBaseline = "middle"; + ctx.shadowColor = "rgba(0,0,0,0.5)"; + ctx.shadowOffsetX = 0; + ctx.shadowOffsetY = 0; + ctx.shadowBlur = 5; - var cx = bWidth / 2 + parseInt(box[0]); - var cy = bHeight / 2 + parseInt(box[1]); + ctx.fillText(glyph, $canvas.width / 2, $canvas.height / 2); - var gWidth = iWidth / (rWidth / bWidth); - var gHeight = iHeight / (rHeight / bHeight); - var gx = cx - (gWidth / 2); - var gy = cy - (gHeight / 2); + var $image = new Image(); + $image.onload = function () { + setGlyphImage($image, callback); + } + $image.src = $canvas.toDataURL("image/png"); + // $image.src = "./media/images/cheese.jpg"; +} - var $glyph = document.createElementNS(SVG_NS, 'image'); - $glyph.setAttribute('x', gx); - $glyph.setAttribute('y', gy); - $glyph.setAttribute('width', gWidth); - $glyph.setAttribute('height', gHeight); - $glyph.setAttribute('xlink:href', $image.src); - $newGlyph.appendChild($glyph); +/** + * + */ +function setGlyphImage ($image, callback) { + callback = cb(callback); - done(); + var $newGlyph = document.createElementNS(SVG_NS, 'g'); + $newGlyph.id = 'glyph'; - function done () { - var $oldGlyph = $badge.getElementById('glyph'); + if (!$image) + return done(); - $oldGlyph.parentNode.insertBefore($newGlyph, $oldGlyph); - $oldGlyph.parentNode.removeChild($oldGlyph); + var gxyAdd = 0; + var whAdd = 0; - rasterize(callback); - } + + if (window.size == 200) { + gxyAdd = 30; + whAdd = 60 + } else if (window.size == 50) { + gxyAdd = -30; + whAdd = -60 } - // ==[ Helpers ]============================================================== + var iWidth = $image.width; + var iHeight = $image.height; - /** - * - */ - function rasterize (callback) { - callback = cb(callback); + var rWidth = $badgeRaster.width; + var rHeight = $badgeRaster.height; - var $svg = $badge.cloneNode(true); + var box = $badge.getAttribute('viewBox').split(' '); - var $canvas = document.createElement('canvas'); - $canvas.width = parseInt($svg.getAttribute('width')); - $canvas.height = parseInt($svg.getAttribute('height')); + var bWidth = parseInt(box[2]); + var bHeight = parseInt(box[3]); - var ctx = $canvas.getContext('2d'); - var svg_xml = (new XMLSerializer()).serializeToString($svg); + var cx = bWidth / 2 + parseInt(box[0]); + var cy = bHeight / 2 + parseInt(box[1]); - /* - // This is the 'official' way of doing this. However, Firefox seems to have - // an issue referencing relative fragment URIs created by `createObjectURL`. - // So we're using a base64 encoding hack instead :( Worth noting that if - // there are non-standard unicode characters in the XML, it'll die a death. + var gWidth = iWidth / (rWidth / bWidth); + var gHeight = iHeight / (rHeight / bHeight); + var gx = cx - (gWidth / 2); + var gy = cy - (gHeight / 2); - var DOMURL = window.URL || window.webkitURL || window; - var blob = new Blob([svg_xml], {type: 'image/svg+xml;charset=utf-8'}); - var url = DOMURL.createObjectURL(blob); - */ + var $glyph = document.createElementNS(SVG_NS, 'image'); + $glyph.setAttribute('x', gx - gxyAdd); + $glyph.setAttribute('y', gy - gxyAdd); + $glyph.setAttribute('width', gWidth + whAdd); + $glyph.setAttribute('height', gHeight + whAdd); + $glyph.setAttribute('xlink:href', $image.src); + $newGlyph.appendChild($glyph); - var url = 'data:image/svg+xml;base64,' + btoa(svg_xml); + done(); - var $img = new Image(); - $img.onload = function() { - ctx.drawImage($img, 0, 0); - $badgeRaster.src = $canvas.toDataURL("image/png"); - callback(); - } - $img.src = url; - } + function done () { + var $oldGlyph = $badge.getElementById('glyph'); + + $oldGlyph.parentNode.insertBefore($newGlyph, $oldGlyph); + $oldGlyph.parentNode.removeChild($oldGlyph); - /** - * - */ - function cb (fn) { - if (typeof fn === 'function') - return fn; - return function () {}; + rasterize(callback); } +} - /** - * - */ - function load (url, method, callback) { - var request = new XMLHttpRequest(); +// ==[ Helpers ]============================================================== - request.onload = function () { - callback(null, request.responseXML || request.responseText, request); - } +/** + * + */ +function rasterize (callback) { - request.onerror = function (err) { - callback(err, null, request); - } + callback = cb(callback); - request.open(method, url, true); - request.send(); - } + var $svg = $badge.cloneNode(true); + + var $canvas = document.createElement('canvas'); + $canvas.width = parseInt($svg.getAttribute('width')); + $canvas.height = parseInt($svg.getAttribute('height')); - /** - * - */ - function loadSVG (path, callback) { - if (svgCache[path]) - return callback(null, svgCache[path].cloneNode(true)); + var ctx = $canvas.getContext('2d'); + var svg_xml = (new XMLSerializer()).serializeToString($svg); - load(path, 'GET', function (err, $doc, request) { - if (err) - return callback(err); + /* + // This is the 'official' way of doing this. However, Firefox seems to have + // an issue referencing relative fragment URIs created by `createObjectURL`. + // So we're using a base64 encoding hack instead :( Worth noting that if + // there are non-standard unicode characters in the XML, it'll die a death. - if (!$doc || typeof $doc === 'string') - return callback(new Error('Not valid SVG')); + var DOMURL = window.URL || window.webkitURL || window; + var blob = new Blob([svg_xml], {type: 'image/svg+xml;charset=utf-8'}); + var url = DOMURL.createObjectURL(blob); + */ - svgCache[path] = $doc.getElementsByTagName('svg')[0]; - callback(null, svgCache[path].cloneNode(true)); - }) + var url = 'data:image/svg+xml;base64,' + btoa(svg_xml); + + var $img = new Image(); + + $img.onload = function() { + ctx.drawImage($img, 0, 0); + $badgeRaster.src = $canvas.toDataURL("image/png"); + callback(); } - /** - * - */ - function importTemplate (name, builder) { - var $template = document.getElementById(name + '-template'); - if (typeof builder === 'function') - builder($template.content); - return document.importNode($template.content, true); + $img.src = url; +} + +/** + * + */ +function cb (fn) { + if (typeof fn === 'function') + return fn; + return function () {}; +} + +/** + * + */ +function load (url, method, callback) { + var request = new XMLHttpRequest(); + + request.onload = function () { + callback(null, request.responseXML || request.responseText, request); } - /** - * - */ - function makeCloseButton (callback) { - var $template = importTemplate('close-button'); - $template.querySelector('button').addEventListener('click', callback); - return $template; + request.onerror = function (err) { + callback(err, null, request); } -})(); + request.open(method, url, true); + request.send(); +} + +/** + * + */ +function loadSVG (path, callback) { + if (svgCache[path]) + return callback(null, svgCache[path].cloneNode(true)); + + load(path, 'GET', function (err, $doc, request) { + if (err) + return callback(err); + + if (!$doc || typeof $doc === 'string') + return callback(new Error('Not valid SVG')); + + svgCache[path] = $doc.getElementsByTagName('svg')[0]; + callback(null, svgCache[path].cloneNode(true)); + }) +} + +/** + * + */ +function importTemplate (name, builder) { + var $template = document.getElementById(name + '-template'); + if (typeof builder === 'function') + builder($template.content); + return document.importNode($template.content, true); +} + +/** + * + */ +function makeCloseButton (callback) { + var $template = importTemplate('close-button'); + $template.querySelector('button').addEventListener('click', callback); + return $template; +} + diff --git a/main/template/default/skill/badge_create.tpl b/main/template/default/skill/badge_create.tpl index 6b3982c54b..a34491379e 100644 --- a/main/template/default/skill/badge_create.tpl +++ b/main/template/default/skill/badge_create.tpl @@ -652,6 +652,14 @@

+

+

+ +

{{ 'UseThisBadge' | get_lang }} @@ -737,11 +745,17 @@ {{ badge_studio.script_js }} \ No newline at end of file