Skip to content

Commit 6d029b4

Browse files
dglazkovdglazkov
committed
[Samples]: Started on theming example.
1 parent 4873d91 commit 6d029b4

File tree

1 file changed

+130
-0
lines changed

1 file changed

+130
-0
lines changed

‎samples/widget-theming.html

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Widget Theming: Shadow DOM Example</title>
5+
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:700|Droid+Sans+Mono|Ovo" type="text/css">
6+
<link rel="stylesheet" href="../assets/styles/main.css" type="text/css">
7+
<link rel="stylesheet" href="../assets/styles/prettify.css" type="text/css" />
8+
<script src="../assets/scripts/bug-assist.js"></script>
9+
<script src="../assets/scripts/prettify.js"></script>
10+
<meta name="bug.blocked" content="14956">
11+
<meta name="bug.short_desc" content="[Samples]: ">
12+
<meta name="bug.product" content="WebAppsWG">
13+
<meta name="bug.component" content="Component Model">
14+
</head>
15+
<body>
16+
<header>
17+
<ul>
18+
<li><a href="../samples/index.html">Samples</a></li>
19+
<li><a href="../explainer/index.html">Explainer</a></li>
20+
<li><a href="../spec/shadow/index.html">Shadow DOM Spec</a></li>
21+
<li><a href="../spec/templates/index.html">HTML Templates</a></li>
22+
</ul>
23+
<h1>Contacts Widget</h1>
24+
</header>
25+
26+
<p>After Raj's <a href="contacts-widget.html">discovery of Shadow DOM</a> triggered company-wide conversion to properly incapsulated widgets, Howard&mdash;not to be outdone&mdash;gleans another great opportunity in this change. He realizes that with the help of <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#attr-style-scoped">scoped stylesheets</a> and <a href="../spec/shadow/index.html">shadow DOM</a>, he can separate the general framing of the widgets from the theming code. For years now, it's been bugging him that whenever the widget's author wanted to tweak the general layout of their widgets, they would have edit the <code>/src/ui/layout/widgets.css</code> stylesheet and muck with their gubbins of code there, creating a waterfall of lines that looks like this:<p>
27+
<pre class="prettyprint"><code>
28+
29+
/* General Widget properties */
30+
31+
.widget { &hellip; }
32+
33+
/* Contacts Widget layout. All rules must start with .contacts.widget */
34+
35+
.contacts.widget ul {
36+
margin: 0;
37+
list-style: none;
38+
&hellip;
39+
}
40+
41+
.contacts.widget ul li { &hellip; }
42+
43+
.contacts.widget ul li img.photo { &hellip; }
44+
45+
.contacts.widget ul li span.n { &hellip; }
46+
47+
&hellip;
48+
49+
/* Activity Stream Widget layout. All rules must start with .activity.widget */
50+
51+
.activity.widget ul { &hellip; }
52+
53+
.activity.widget li { &hellip; }
54+
55+
.activity.widget li.shared { &hellip; }
56+
57+
&hellip;
58+
59+
</code></pre>
60+
61+
<p>Then, a separate stylesheet in the <code>/src/ui/themes/</code> directory is used to apply colors, backgrounds, and all those wonderful barnacles that typically comprise a theme. Despite strictly enforced naming conventions, the structure is somewhat brittle and, on occasion, one rule clobbers another, subtly breaking the beautiful house of cards, causing users grief&mdash;and throwing Howard into panic mode. Panic mode gets old quickly.</p>
62+
63+
<p>Moving widget layout styles to <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#attr-style-scoped">scoped stylesheets</a> next to respective widgets goes a long way to make layout less brittle. Further, putting these scoped styles <em>inside</em> each widget's shadow DOM subtree ensures that the these styles are <strong>contained</strong> to the widgets. Sure, it's a bit of a refactoring, but that beats arguing with mom. Howard goes to work. An hour later, the <code>/src/ui/layout/widgets.css</code> stylesheet is drained and all widgets look like this ()<code>/src/ui/widgets/contacts.js</code>, for example):</p>
64+
65+
<pre class="prettyprint"><code>
66+
var ui = ui || {};
67+
ui.widgets = ui.widgets || {};
68+
69+
(function() {
70+
var MAX_USERS = 8;
71+
72+
function Contacts()
73+
{
74+
this.element = document.createElement('div');
75+
this.element.className = 'contacts widget';
76+
var shadow = new ShadowRoot(this.element);
77+
shadow.applyAuthorStyles = true;
78+
var users = shadow.appendChild(document.createElement('ul'));
79+
this.loadUsers(MAX_USERS, function(user) {
80+
var li = document.createElement('li');
81+
// Populate [li] with data from the [user] object.
82+
// &hellip;
83+
});
84+
}
85+
86+
// &hellip;
87+
88+
// Asynchronously loads users from server and invokes [callback] for each user loaded
89+
Contacts.prototype.loadUsers = function(callback)
90+
{
91+
// &hellip;
92+
}
93+
94+
// &hellip;
95+
96+
ui.widgets.Contacts = Contacts;
97+
98+
})();
99+
</code></pre>
100+
101+
</body>
102+
</html>
103+
104+
105+
106+
107+
108+
109+
110+
111+
112+
113+
114+
115+
116+
117+
118+
119+
120+
121+
122+
123+
124+
125+
126+
127+
128+
129+
130+

0 commit comments

Comments
 (0)