From 9afff1a4baa601c1f8fc8dd0aad496c334c8f7be Mon Sep 17 00:00:00 2001 From: Larry Powelson Date: Fri, 10 Feb 2017 10:00:50 -0800 Subject: [PATCH 1/4] Checkpoint of changes so far --- apps/src/applab/designMode.js | 12 ++++++++++++ apps/src/applab/setPropertyDropdown.js | 2 ++ 2 files changed, 14 insertions(+) diff --git a/apps/src/applab/designMode.js b/apps/src/applab/designMode.js index 8d61302fe3560..814857fcf6e2d 100644 --- a/apps/src/applab/designMode.js +++ b/apps/src/applab/designMode.js @@ -249,7 +249,19 @@ designMode.updateProperty = function (element, name, value) { element.style.textAlign = value; break; case 'icon-color': + // This property name is used when changing the icon color in design mode + + + debugger; element.setAttribute('data-icon-color', value); + // break; + //case 'iconColor': + // This property name is used when changing the icon color programatically + var imageUrl = element.getAttribute('data-canonical-image-url'); + if (ICON_PREFIX_REGEX.test(imageUrl)) { + element.style.backgroundImage = 'url(' + assetPrefix.renderIconToString(imageUrl, element) + ')'; + } + break; case 'image': var originalValue = element.getAttribute('data-canonical-image-url'); diff --git a/apps/src/applab/setPropertyDropdown.js b/apps/src/applab/setPropertyDropdown.js index b6c7174bf30ed..7b1db3ae1bb13 100644 --- a/apps/src/applab/setPropertyDropdown.js +++ b/apps/src/applab/setPropertyDropdown.js @@ -41,6 +41,7 @@ var PROP_INFO = { // it won't show up in the dropdown. pictureImage: { friendlyName: 'image', internalName: 'picture', type: 'string' }, picture: { friendlyName: 'picture', internalName: 'picture', type: 'string', alias: true }, + iconColor: { friendlyName: 'icon-color', internalName: 'icon-color', type: 'string' }, groupId: { friendlyName: 'group-id', internalName: 'groupId', type: 'string' }, checked: { friendlyName: 'checked', internalName: 'checked', type: 'boolean' }, readonly: { friendlyName: 'readonly', internalName: 'readonly', type: 'boolean' }, @@ -156,6 +157,7 @@ PROPERTIES[ElementType.IMAGE] = { 'y', 'pictureImage', 'picture', // Since this is an alias, it is not shown in the dropdown but is allowed as a value + 'iconColor', 'hidden' ] }; From 2c6725217bbba5184c84953aa71b74aac4b93064 Mon Sep 17 00:00:00 2001 From: Larry Powelson Date: Fri, 10 Feb 2017 20:45:11 -0800 Subject: [PATCH 2/4] Fixed double image issue. --- apps/src/applab/designMode.js | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/apps/src/applab/designMode.js b/apps/src/applab/designMode.js index 814857fcf6e2d..a4818a9b0da73 100644 --- a/apps/src/applab/designMode.js +++ b/apps/src/applab/designMode.js @@ -249,19 +249,11 @@ designMode.updateProperty = function (element, name, value) { element.style.textAlign = value; break; case 'icon-color': - // This property name is used when changing the icon color in design mode - - - debugger; element.setAttribute('data-icon-color', value); - // break; - //case 'iconColor': - // This property name is used when changing the icon color programatically - var imageUrl = element.getAttribute('data-canonical-image-url'); + const imageUrl = element.getAttribute('data-canonical-image-url'); if (ICON_PREFIX_REGEX.test(imageUrl)) { - element.style.backgroundImage = 'url(' + assetPrefix.renderIconToString(imageUrl, element) + ')'; + element.src = assetPrefix.renderIconToString(imageUrl, element); } - break; case 'image': var originalValue = element.getAttribute('data-canonical-image-url'); @@ -487,6 +479,8 @@ designMode.readProperty = function (element, name) { return parseFloat(element.style.fontSize); case 'textAlign': return element.style.textAlign; + case 'icon-color': + return element.getAttribute('data-icon-color'); case 'image': return element.getAttribute('data-canonical-image-url'); case 'screen-image': From 30fe3761f4cfd85e600770bcefdb7b3ed2d0c0a5 Mon Sep 17 00:00:00 2001 From: Larry Powelson Date: Fri, 17 Feb 2017 16:07:44 -0800 Subject: [PATCH 3/4] Added icon-color to button and screen as well. Still TBD: Unit tests --- apps/src/applab/designMode.js | 7 ++++++- apps/src/applab/setPropertyDropdown.js | 4 +++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/apps/src/applab/designMode.js b/apps/src/applab/designMode.js index a4818a9b0da73..f91a8add3316b 100644 --- a/apps/src/applab/designMode.js +++ b/apps/src/applab/designMode.js @@ -252,7 +252,12 @@ designMode.updateProperty = function (element, name, value) { element.setAttribute('data-icon-color', value); const imageUrl = element.getAttribute('data-canonical-image-url'); if (ICON_PREFIX_REGEX.test(imageUrl)) { - element.src = assetPrefix.renderIconToString(imageUrl, element); + const url = assetPrefix.renderIconToString(imageUrl, element); + if (element.nodeName == "IMG") { + element.src = url; + } else { + element.style.backgroundImage = 'url(' + url + ')'; + } } break; case 'image': diff --git a/apps/src/applab/setPropertyDropdown.js b/apps/src/applab/setPropertyDropdown.js index 101a4133b7844..ee566b555e1a6 100644 --- a/apps/src/applab/setPropertyDropdown.js +++ b/apps/src/applab/setPropertyDropdown.js @@ -79,6 +79,7 @@ PROPERTIES[ElementType.BUTTON] = { 'fontSize', 'textAlign', 'image', + 'iconColor', 'hidden' ] }; @@ -175,7 +176,8 @@ PROPERTIES[ElementType.SCREEN] = { propertyNames: [ 'text', 'backgroundColor', - 'screenImage' + 'screenImage', + 'iconColor' ] }; PROPERTIES[ElementType.TEXT_AREA] = { From d1968135ddc69fc4ca34edecce90d2cb65dcd8c5 Mon Sep 17 00:00:00 2001 From: Larry Powelson Date: Fri, 17 Feb 2017 17:07:21 -0800 Subject: [PATCH 4/4] Added integration unit test. --- .../levelSolutions/applab/ec_setprop.js | 35 +++++++++++++++---- 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/apps/test/integration/levelSolutions/applab/ec_setprop.js b/apps/test/integration/levelSolutions/applab/ec_setprop.js index 5dbe0f857b29c..343fce1027a70 100644 --- a/apps/test/integration/levelSolutions/applab/ec_setprop.js +++ b/apps/test/integration/levelSolutions/applab/ec_setprop.js @@ -31,6 +31,8 @@ module.exports = { console.log("font-size: " + getProperty("my_button", "font-size")); setProperty("my_button", "image", "${facebookImage}"); console.log("image: " + getProperty("my_button", "image")); + setProperty("my_button", "icon-color", "blue"); + console.log("icon-color: " + getProperty("my_button", "icon-color")); `, runBeforeClick: function (assert) { // add a completion on timeout since this is a freeplay level @@ -43,6 +45,7 @@ module.exports = { assert.equal(button.style.fontSize, '21px'); assert(/facebook_purple.png$/.test(button.getAttribute('data-canonical-image-url'))); + assert(/blue/.test(button.getAttribute('data-icon-color'))); Applab.onPuzzleComplete(); }); @@ -54,7 +57,8 @@ module.exports = { expect(debugOutput.textContent).to.contain('text-color: red\n'); expect(debugOutput.textContent).to.contain('background-color: green\n'); expect(debugOutput.textContent).to.contain('font-size: 21\n'); - expect(debugOutput.textContent).to.match(/image: .*facebook_purple.png$/); + expect(debugOutput.textContent).to.match(/image: .*facebook_purple.png\n/); + expect(debugOutput.textContent).to.contain('icon-color: blue'); return true; }, @@ -78,7 +82,10 @@ module.exports = { setProperty("my_button", "font-size", 21); console.log("font-size: " + getProperty("my_button", "font-size")); setProperty("my_button", "image", "${facebookImage}"); - console.log("image: " + getProperty("my_button", "image"));`, + console.log("image: " + getProperty("my_button", "image")); + setProperty("my_button", "icon-color", "blue"); + console.log("icon-color: " + getProperty("my_button", "icon-color")); +`, runBeforeClick: function (assert) { // add a completion on timeout since this is a freeplay level tickWrapper.runOnAppTick(Applab, 2, function () { @@ -90,6 +97,7 @@ module.exports = { assert.equal(button.style.fontSize, '21px'); assert(/facebook_purple.png$/.test(button.getAttribute('data-canonical-image-url'))); + assert(/blue/.test(button.getAttribute('data-icon-color'))); Applab.onPuzzleComplete(); }); @@ -101,7 +109,8 @@ module.exports = { expect(debugOutput.textContent).to.contain('text-color: red\n'); expect(debugOutput.textContent).to.contain('background-color: green\n'); expect(debugOutput.textContent).to.contain('font-size: 21\n'); - expect(debugOutput.textContent).to.match(/image: .*facebook_purple.png$/); + expect(debugOutput.textContent).to.match(/image: .*facebook_purple.png\n/); + expect(debugOutput.textContent).to.contain('icon-color: blue'); return true; }, @@ -194,7 +203,9 @@ step: 3`); setProperty("my_image", "picture", "${facebookImage}"); console.log("picture: " + getProperty("my_image", "picture")); setProperty("my_image", "hidden", true); - console.log("hidden: " + getProperty("my_image", "hidden"));`, + console.log("hidden: " + getProperty("my_image", "hidden")); + setProperty("my_image", "icon-color", "blue"); + console.log("icon-color: " + getProperty("my_image", "icon-color"));`, runBeforeClick: function (assert) { // add a completion on timeout since this is a freeplay level tickWrapper.runOnAppTick(Applab, 2, function () { @@ -210,6 +221,7 @@ step: 3`); assert.equal(image.style.top, '14px'); assert(/facebook_purple.png$/.test(image.src)); + assert(/blue/.test(image.getAttribute('data-icon-color'))); // visibility is set via a class, so use getComputedStyle assert(window.getComputedStyle(image).visibility, 'hidden'); @@ -227,6 +239,7 @@ step: 3`); expect(debugOutput.textContent).to.contain('y: 14\n'); expect(debugOutput.textContent).to.match(/picture: .*facebook_purple.png\n/); expect(debugOutput.textContent).to.contain('hidden: true'); + expect(debugOutput.textContent).to.contain('icon-color: blue'); return true; }, @@ -253,7 +266,9 @@ step: 3`); setProperty("my_image", "picture", "${facebookImage}"); console.log("picture: " + getProperty("my_image", "picture")); setProperty("my_image", "hidden", true); - console.log("hidden: " + getProperty("my_image", "hidden"));`, + console.log("hidden: " + getProperty("my_image", "hidden")); + setProperty("my_image", "icon-color", "blue"); + console.log("icon-color: " + getProperty("my_image", "icon-color"));`, runBeforeClick: function (assert) { // add a completion on timeout since this is a freeplay level tickWrapper.runOnAppTick(Applab, 2, function () { @@ -269,6 +284,7 @@ step: 3`); assert.equal(image.style.top, '14px'); assert(/facebook_purple.png$/.test(image.src)); + assert(/blue/.test(image.getAttribute('data-icon-color'))); // visibility is set via a class, so use getComputedStyle assert(window.getComputedStyle(image).visibility, 'hidden'); @@ -286,6 +302,7 @@ step: 3`); expect(debugOutput.textContent).to.contain('y: 14\n'); expect(debugOutput.textContent).to.match(/picture: .*facebook_purple.png\n/); expect(debugOutput.textContent).to.contain('hidden: true'); + expect(debugOutput.textContent).to.contain('icon-color: blue'); return true; }, @@ -400,7 +417,9 @@ step: 3`); '', xml: `setProperty("screen1", "image", "${flappyImage}"); - console.log("image: " + getProperty("screen1", "image"));`, + console.log("image: " + getProperty("screen1", "image")); + setProperty("screen1", "icon-color", "blue"); + console.log("icon-color: " + getProperty("screen1", "icon-color"));`, runBeforeClick: function (assert) { // add a completion on timeout since this is a freeplay level tickWrapper.runOnAppTick(Applab, 2, function () { @@ -410,12 +429,14 @@ step: 3`); console.log(screen.style.backgroundImage); assert(/url\(.*flappy_promo.png['"]?\)$/.test(screen.style.backgroundImage), 'screen background image should be flappy_promo.png. Instead: '+screen.style.backgroundImage); + assert(/blue/.test(screen.getAttribute('data-icon-color'))); Applab.onPuzzleComplete(); }); }, customValidator: function (assert) { var debugOutput = document.getElementById('debug-output'); - expect(debugOutput.textContent).to.match(/image: .*flappy_promo.png$/); + expect(debugOutput.textContent).to.match(/image: .*flappy_promo.png\n/); + expect(debugOutput.textContent).to.contain('icon-color: blue'); return true; }, expected: {