Skip to content

Loading…

Prefix URLs in CSS templates #972

Closed
wants to merge 1 commit into from

3 participants

@fab-b
Aria Templates member

This commit introduces the possibility to define a method to be used to prefix all the image urls inside css templates.

@fab-b fab-b added a commit to fab-b/ariatemplates that referenced this pull request
@fab-b fab-b feat #972 prefix URLs in CSS templates
This commit introduces the possibility to define a method to be used to prefix all the image urls inside css templates.
8b58b16
@benouat
Aria Templates member

How to do you manage the fact that people might need to define multiple prefixing mechanism ?

In your implementation imgUrlMapping is a single method. My concern here, is that it might be useful to be able to register multiple different imgUrlMapping.

This might be handy in applications that might be composed from pieces produced by different teams (each one might want to deal with its own method).

Appart from this consideration, I am fine with the single implementation

@fab-b fab-b feat #972 prefix URLs in CSS templates
This commit introduces the possibility to define a method to be used to prefix all the image urls inside css templates.
193a2e2
@fab-b fab-b added a commit that referenced this pull request
@fab-b fab-b feat #972 prefix URLs in CSS templates
This commit introduces the possibility to define a method to be used to prefix all the image urls inside css templates.
6ad6d16
@fab-b
Aria Templates member
@fab-b fab-b closed this
@flongo flongo added this to the 1.4.16 milestone
@benouat benouat was assigned by flongo
@carlo-mr carlo-mr added a commit to carlo-mr/ariatemplates that referenced this pull request
@fab-b fab-b feat #972 prefix URLs in CSS templates
This commit introduces the possibility to define a method to be used to prefix all the image urls inside css templates.
1135eba
@fab-b fab-b deleted the fab-b:css_prefix branch
@jakub-g jakub-g added a commit to jakub-g/ariatemplates that referenced this pull request
@jakub-g jakub-g fix #1468 Prefix URLs in CSS templates feature not working
Feature implemented in #972 did not work due to invalid CSS
generated: a space between `url` keyword and the parentheses
made the whole CSS rule invalid and hence not applied
cd79cbd
@jakub-g jakub-g added a commit to jakub-g/ariatemplates that referenced this pull request
@jakub-g jakub-g fix #1468 Prefix URLs in CSS templates feature not working
Feature implemented in #972 did not work due to invalid CSS
generated: a space between `url` keyword and the parentheses
made the whole CSS rule invalid and hence not applied
ac19f71
@jakub-g jakub-g added a commit to jakub-g/ariatemplates that referenced this pull request
@jakub-g jakub-g fix #1468 Prefix URLs in CSS templates feature not working
Feature implemented in #972 did not work due to invalid CSS
generated: a space between `url` keyword and the parentheses
made the whole CSS rule invalid and hence not applied
203fe01
@jakub-g jakub-g added a commit to jakub-g/ariatemplates that referenced this pull request
@jakub-g jakub-g fix #1468 Prefix URLs in CSS templates feature not working
Feature implemented in #972 did not work due to invalid CSS
generated: a space between `url` keyword and the parentheses
made the whole CSS rule invalid and hence not applied
8d38b0d
@jakub-g jakub-g added a commit that referenced this pull request
@jakub-g jakub-g fix #1468 Prefix URLs in CSS templates feature not working
Feature implemented in #972 did not work due to invalid CSS
generated: a space between `url` keyword and the parentheses
made the whole CSS rule invalid and hence not applied

(cherry picked from commit 8d38b0d)
e12fce5
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 10, 2014
  1. @fab-b

    feat #972 prefix URLs in CSS templates

    fab-b committed
    This commit introduces the possibility to define a method to be used to prefix all the image urls inside css templates.
View
3 build/config/files-prod.json
@@ -64,7 +64,8 @@
"aria/templates/TextTemplate.js",
"aria/templates/TxtClassGenerator.js",
"aria/templates/TxtCtxt.js",
- "aria/templates/ViewCfgBeans.js"
+ "aria/templates/ViewCfgBeans.js",
+ "aria/templates/environment/*"
]
},
{
View
40 src/aria/templates/CSSCtxt.js
@@ -21,7 +21,7 @@
*/
Aria.classDefinition({
$classpath : 'aria.templates.CSSCtxt',
- $dependencies : ['aria.templates.CfgBeans', 'aria.utils.String'],
+ $dependencies : ['aria.templates.CfgBeans', 'aria.utils.String', 'aria.utils.Function'],
$implements : ['aria.templates.ICSS'],
$extends : "aria.templates.BaseCtxt",
$constructor : function (classPath) {
@@ -179,6 +179,9 @@ Aria.classDefinition({
this._out = [];
this._callMacro(null, "main");
var text = this._out.join("");
+ if (aria.core.AppEnvironment.applicationSettings.hasOwnProperty("imgUrlMapping") && aria.core.AppEnvironment.applicationSettings.imgUrlMapping !== null) {
+ text = this._prefixCSSImgUrl(text);
+ }
this._out = null;
this.__cachedOutput = text;
@@ -201,6 +204,41 @@ Aria.classDefinition({
},
/**
+ * Prefix the image URLs calling the method set inside the app environment
+ * @param {String} cssText CSS text
+ * @return {String}
+ */
+ _prefixCSSImgUrl : function (cssText) {
+ cssText = cssText.replace(/\burl\s*\(\s*["']?([^"'\r\n,]+|[^'\r\n,]+|[^"\r\n,]+)["']?\s*\)/gi, aria.utils.Function.bind(function (match, urlpart) {
+ var prefixedUrl = aria.core.AppEnvironment.applicationSettings.imgUrlMapping(urlpart, this.tplClasspath);
+ return this._parseImgUrl(prefixedUrl);
+ }, this));
+
+ return cssText;
+ },
+
+ /**
+ * Return the CSS rule for image urls
+ * @param {String} url URL
+ * @return {String}
+ */
+ _parseImgUrl : function (url) {
+ return "url (\"" + url + "\")";
+ },
+
+ /**
+ * Clean the url removing brackets, quotes, etc.
+ * @param {String} url URL
+ * @return {String}
+ */
+ _cleanUrl : function (url) {
+ var tmp = url.replace(/\burl\s*/gi, ""); // removing url word
+ tmp = tmp[0] === "(" ? tmp.substring(1, tmp.length - 1) : tmp; // removing brackets
+ tmp = tmp[0] === "\'" || tmp[0] === "\"" ? tmp.substring(1, tmp.length - 1) : tmp; // removing quotes
+ return tmp;
+ },
+
+ /**
* Actual prefixing algorithm. It's in a different function to be unit testable
* @param {String} text CSS text to prefix, output of teh template engine
* @param {String} prefix prefix to be added to each selector for example '.prefix '
View
38 src/aria/templates/environment/ImgUrlMapping.js
@@ -0,0 +1,38 @@
+/*
+ * Copyright 2012 Amadeus s.a.s.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+Aria.classDefinition({
+ $classpath : "aria.templates.environment.ImgUrlMapping",
+ $dependencies : ["aria.templates.environment.ImgUrlMappingCfgBeans"],
+ $extends : "aria.core.environment.EnvironmentBase",
+ $singleton : true,
+ $prototype : {
+ /**
+ * Classpath of the bean which allows to validate the part of the environment managed by this class.
+ * @type String
+ */
+ _cfgPackage : "aria.templates.environment.ImgUrlMappingCfgBeans.AppCfg",
+
+ /**
+ * Get the imgUrlMapping classpath configuration. It is a copy of the current configuration and not a reference to
+ * the object itself.
+ * @public
+ * @return {aria.core.environment.environment.EnvironmentBaseCfgBeans:AppCfg} The classpath configuration
+ */
+ getImgUrlMappingCfg : function () {
+ return aria.utils.Json.copy(this.checkApplicationSettings("imgUrlMapping"));
+ }
+ }
+});
View
40 src/aria/templates/environment/ImgUrlMappingCfgBeans.js
@@ -0,0 +1,40 @@
+/*
+ * Copyright 2012 Amadeus s.a.s.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Bean definitions that are either common to multiple areas of the framework, or are needed before dependencies are
+ * loaded by the framework.
+ */
+Aria.beanDefinitions({
+ $package : "aria.templates.environment.ImgUrlMappingCfgBeans",
+ $description : "A definition of the JSON beans used to set the environment settings.",
+ $namespaces : {
+ "json" : "aria.core.JsonTypes"
+ },
+ $beans : {
+ "AppCfg" : {
+ $type : "json:Object",
+ $description : "Application environment variables",
+ $restricted : false,
+ $properties : {
+ "imgUrlMapping" : {
+ $type : "json:FunctionRef",
+ $description : "Method to map img urls inside CSS templates.",
+ $default : null
+ }
+ }
+ }
+ }
+});
View
1 test/aria/templates/css/CSSTestSuite.js
@@ -35,6 +35,7 @@ Aria.classDefinition({
this.addTests("test.aria.templates.css.widgetContext.ContextTest");
this.addTests("test.aria.templates.css.events.EventsTestCase");
this.addTests("test.aria.templates.css.global.GlobalCssTemplateTestCase");
+ this.addTests("test.aria.templates.css.imgprefix.ImgPrefixTemplateTestCase");
this.addTests("test.aria.templates.css.inheritance.InheritTestCase");
this.addTests("test.aria.templates.css.numberReload.OneLevelTemplate");
}
View
87 test/aria/templates/css/imgprefix/ImgPrefixTemplateTestCase.js
@@ -0,0 +1,87 @@
+/*
+ * Copyright 2013 Amadeus s.a.s.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+Aria.classDefinition({
+ $classpath : "test.aria.templates.css.imgprefix.ImgPrefixTemplateTestCase",
+ $extends : "aria.jsunit.TemplateTestCase",
+
+ $constructor : function () {
+
+ this.$TemplateTestCase.constructor.call(this);
+
+ this.setTestEnv({
+ template : "test.aria.templates.css.imgprefix.SimpleTemplate"
+ });
+
+ this.imgPaths = ["images/bg.jpg", "images/bg.jpg", "images/bg.jpg", "images)/bg.jpg", "images/?bg.jpg", "images'/bg.'jpg", "images\"/bg.\"jpg"];
+
+ // set the app environment
+ aria.core.AppEnvironment.setEnvironment({
+ "imgUrlMapping" : this._fakeUrlMapping
+ });
+ },
+ $prototype : {
+ _fakeUrlMapping : function (url, cssClasspath) {
+ return "ariatemplates/prefix/" + url;
+ },
+
+ runTemplateTest : function () {
+ var firstCSS = aria.templates.CSSCtxtManager.getContext("test.aria.templates.css.imgprefix.SimpleTemplateCss").getText();
+ var secondCSS = aria.templates.CSSCtxtManager.getContext("test.aria.templates.css.imgprefix.SimpleTemplateCss2").getText();
+
+ var urls = firstCSS.match(/\bariatemplates\/prefix\/([^"'\r\n,]+|[^'\r\n,]+|[^"\r\n,]+)["']?\s*\)/gi).concat(secondCSS.match(/\bariatemplates\/prefix\/([^"'\r\n,]+|[^'\r\n,]+|[^"\r\n,]+)["']?\s*\)/gi));
+
+ for (var i = 0; i < urls.length; i++) {
+ var tmp = this._cleanUrls(urls[i]);
+ this.assertTrue(tmp === "ariatemplates/prefix/" + this.imgPaths[i], "There isn't any prefix for image urls inside CSS templates");
+ }
+
+ aria.templates.CSSMgr.invalidate("test.aria.templates.css.imgprefix.SimpleTemplateCss", true);
+ aria.templates.CSSMgr.invalidate("test.aria.templates.css.imgprefix.SimpleTemplateCss2", true);
+
+ // reset app environment
+ aria.core.AppEnvironment.setEnvironment({
+ "imgUrlMapping" : null
+ }, { fn : this._afterAppEnvResetting, scope : this}, true);
+ },
+
+ _afterAppEnvResetting : function () {
+ // changing template
+ this._replaceTestTemplate({
+ template : "test.aria.templates.css.imgprefix.SimpleTemplateTwo"
+ }, this._afterSecondTemplateLoaded);
+ },
+
+ _afterSecondTemplateLoaded : function () {
+ // check that is not adding any prefix to image urls
+ var firstCSS = aria.templates.CSSCtxtManager.getContext("test.aria.templates.css.imgprefix.SimpleTemplateCss").getText();
+ var secondCSS = aria.templates.CSSCtxtManager.getContext("test.aria.templates.css.imgprefix.SimpleTemplateCss2").getText();
+
+ var urls = firstCSS.match(/\bimages([^"'\r\n,]+|[^"\r\n,]+|[^'\r\n,]+)["']?\s*\)/gi).concat(secondCSS.match(/\bimages([^"'\r\n,]+|[^"\r\n,]+|[^'\r\n,]+)["']?\s*\)/gi));
+
+ for (var i = 0; i < urls.length; i++) {
+ var tmp = this._cleanUrls(urls[i]);
+ this.assertTrue(tmp === this.imgPaths[i], "The framework is adding a prefix for image urls inside CSS templates, it shouldn't.");
+ }
+ this.end();
+ },
+
+ _cleanUrls : function (url) {
+ url = url[url.length - 1] === ")" ? url.substring(0, url.length - 1) : url;
+ url = url[url.length - 1] === "\"" || url[url.length - 1] === "\'" ? url.substring(0, url.length - 1) : url;
+ return url;
+ }
+ }
+});
View
48 test/aria/templates/css/imgprefix/SimpleTemplate.tpl
@@ -0,0 +1,48 @@
+/*
+ * Copyright 2013 Amadeus s.a.s.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+{Template {
+ $classpath : "test.aria.templates.css.imgprefix.SimpleTemplate",
+ $css : ["test.aria.templates.css.imgprefix.SimpleTemplateCss", "test.aria.templates.css.imgprefix.SimpleTemplateCss2"]
+}}
+
+{macro main ()}
+ <div class="container-1">
+ <p>Container 1</p>
+ </div>
+
+ <div class="container-2">
+ <p>Container 2</p>
+ </div>
+
+ <div class="container-3">
+ <p>Container 3</p>
+ </div>
+
+ <div class="container-4">
+ <p>Container 4</p>
+ </div>
+
+ <div class="container-5">
+ <p>Container 5</p>
+ </div>
+
+ <div class="container-6">
+ <p>Container 6</p>
+ </div>
+
+{/macro}
+
+{/Template}
View
75 test/aria/templates/css/imgprefix/SimpleTemplateCss.tpl.css
@@ -0,0 +1,75 @@
+/*
+ * Copyright 2013 Amadeus s.a.s.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+{CSSTemplate {
+ $classpath : "test.aria.templates.css.imgprefix.SimpleTemplateCss"
+}}
+
+{macro main ()}
+ * {
+ margin: 0;
+ padding: 0;
+ }
+
+ .container-1 {
+ height: 100%;
+ width: 100%;
+ background: url(images/bg.jpg) no-repeat center center fixed;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ width: 400px;
+ -moz-box-shadow: 0 0 20px black;
+ -webkit-box-shadow: 0 0 20px black;
+ box-shadow: 0 0 20px black;
+ }
+
+ .container-2 {
+ height: 100%;
+ width: 100%;
+ background: url("images/bg.jpg") no-repeat center center fixed;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ width: 400px;
+ -moz-box-shadow: 0 0 20px black;
+ -webkit-box-shadow: 0 0 20px black;
+ box-shadow: 0 0 20px black;
+ }
+
+ .container-3 {
+ height: 100%;
+ width: 100%;
+ background: url('images/bg.jpg') no-repeat center center fixed;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ width: 400px;
+ -moz-box-shadow: 0 0 20px black;
+ -webkit-box-shadow: 0 0 20px black;
+ box-shadow: 0 0 20px black;
+ }
+
+ p {
+ font: 15px/2 Georgia, Serif;
+ margin: 0 0 30px 0;
+ text-indent: 40px;
+ }
+{/macro}
+
+{/CSSTemplate}
View
89 test/aria/templates/css/imgprefix/SimpleTemplateCss2.tpl.css
@@ -0,0 +1,89 @@
+/*
+ * Copyright 2013 Amadeus s.a.s.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+{CSSTemplate {
+ $classpath : "test.aria.templates.css.imgprefix.SimpleTemplateCss2"
+}}
+
+{macro main ()}
+ * {
+ margin: 0;
+ padding: 0;
+ }
+
+ .container-4 {
+ height: 100%;
+ width: 100%;
+ background: url('images)/bg.jpg') no-repeat center center fixed;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ width: 400px;
+ -moz-box-shadow: 0 0 20px black;
+ -webkit-box-shadow: 0 0 20px black;
+ box-shadow: 0 0 20px black;
+ }
+
+ .container-5 {
+ height: 100%;
+ width: 100%;
+ background: url (images/?bg.jpg) no-repeat center center fixed;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ width: 400px;
+ -moz-box-shadow: 0 0 20px black;
+ -webkit-box-shadow: 0 0 20px black;
+ box-shadow: 0 0 20px black;
+ }
+
+ .container-6 {
+ height: 100%;
+ width: 100%;
+ background: url("images'/bg.'jpg") no-repeat center center fixed;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ width: 400px;
+ -moz-box-shadow: 0 0 20px black;
+ -webkit-box-shadow: 0 0 20px black;
+ box-shadow: 0 0 20px black;
+ }
+
+ .container-7 {
+ height: 100%;
+ width: 100%;
+ background: url('images"/bg."jpg') no-repeat center center fixed;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ width: 400px;
+ -moz-box-shadow: 0 0 20px black;
+ -webkit-box-shadow: 0 0 20px black;
+ box-shadow: 0 0 20px black;
+ }
+
+ p {
+ font: 15px/2 Georgia, Serif;
+ margin: 0 0 30px 0;
+ text-indent: 40px;
+ }
+{/macro}
+
+{/CSSTemplate}
View
52 test/aria/templates/css/imgprefix/SimpleTemplateTwo.tpl
@@ -0,0 +1,52 @@
+/*
+ * Copyright 2013 Amadeus s.a.s.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+{Template {
+ $classpath : "test.aria.templates.css.imgprefix.SimpleTemplateTwo",
+ $css : ["test.aria.templates.css.imgprefix.SimpleTemplateCss", "test.aria.templates.css.imgprefix.SimpleTemplateCss2"]
+}}
+
+{macro main ()}
+ <div class="container-1">
+ <p>Container 1</p>
+ </div>
+
+ <div class="container-2">
+ <p>Container 2</p>
+ </div>
+
+ <div class="container-3">
+ <p>Container 3</p>
+ </div>
+
+ <div class="container-4">
+ <p>Container 4</p>
+ </div>
+
+ <div class="container-5">
+ <p>Container 5</p>
+ </div>
+
+ <div class="container-6">
+ <p>Container 6</p>
+ </div>
+
+ <div class="container-7">
+ <p>Container 6</p>
+ </div>
+
+{/macro}
+
+{/Template}
Something went wrong with that request. Please try again.