Skip to content
This repository was archived by the owner on Mar 14, 2020. It is now read-only.

[Widget] Support background images #84

Merged
sbryan merged 2 commits into from
Jun 26, 2012
+28 −5
Merged

[Widget] Support background images #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
05e29e9
[Serialize] Support htmlAttrbute value as a function
Jun 25, 2012
ac9d202
[Widget] Support background images
Jun 6, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/js/serialize.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,10 @@ var DEBUG = true,
if (typeof attrName === "object") {
var attrMap = attrName;
attrName = attrMap.name;
attrValue = attrMap.value[propValue];
if (typeof attrMap.value === "function")
attrValue = attrMap.value(propValue);
else
attrValue = attrMap.value[propValue];
}
if (attrName) {
propDefault = BWidget.getPropertyDefault(type, p);
Expand Down
28 changes: 24 additions & 4 deletions src/js/widgets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,14 +209,34 @@ var BWidgetRegistry = {
}
],
},

/**
*Support background images using <div>
*/
Background:{
parent: "Base",
properties: {
background: {
type: "string",
defaultValue: "",
htmlAttribute: {
name: "style",
value: function (propValue) {

@sbryan sbryan Jun 26, 2012

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in-line styles are "BAD"... absolutely not something we want to be promoting or encouraging developers to use or depend on.

While I'll accept this commit for initial implimentation, we REALLY need to move towards creating and maintaining a custom per-application CSS mapping that we generate during serialize steps, like for layout, code and live views, as well as on export. Then, these additional style attributes become available to be changed via CSS editing rather than adding more and more properties directly to the widgets.

@zhizhangchen zhizhangchen Jun 26, 2012

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, in the long run, we should do that.

return "background-image:url('" + propValue + "');" +
"background-attachment:scroll;" +
"background-repeat:no-repeat;" +
"background-size:cover;";
}
}
}
}
},
/**
* Represents a page or dialog in the application. Includes "top" zone
* for an optional header, "content" zone for the Content area, and "bottom"
* zone for an optional footer.
*/
Page: {
parent: "Base",
parent: "Background",
allowIn: "Design",
template: function (node) {
var prop, code = $('<div data-role="page"></div>');
Expand Down Expand Up @@ -273,7 +293,7 @@ var BWidgetRegistry = {
* for optional buttons, and "bottom" zone for an optional navbar.
*/
Header: {
parent: "Base",
parent: "Background",
allowIn: "Page",
dragHeader: true,
paletteImageName: "jqm_header.svg",
Expand Down Expand Up @@ -342,7 +362,7 @@ var BWidgetRegistry = {
* Represents a footer object at the bottom of a page.
*/
Footer: {
parent: "Base",
parent: "Background",
allowIn: "Page",
dragHeader: true,
paletteImageName: "jqm_footer.svg",
Expand Down