- From: Vincent Hardy via cvs-syncmail <cvsmail@w3.org>
- Date: Sat, 04 Feb 2012 06:13:14 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-regions
In directory hutz:/tmp/cvs-serv11184
Modified Files:
Overview.html Overview.src.html
Added Files:
BugzillaTracker.js BugzillaTrackerCSSRegions.js
Removed Files:
issue_tracker.js
Log Message:
Added missing issue. Integrated issue manager script (needs to be uncommented to work)
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-regions/Overview.html,v
retrieving revision 1.49
retrieving revision 1.50
diff -u -d -r1.49 -r1.50
--- Overview.html 3 Feb 2012 13:09:40 -0000 1.49
+++ Overview.html 4 Feb 2012 06:13:11 -0000 1.50
@@ -55,31 +55,130 @@
display: none;
}
- @media screen and (min-width: 68em){
+ @media screen and (min-width: 68em){
+
.issue-marker {
position: absolute;
width: 20ex;
margin-left: -22ex;
text-align: right;
+ margin-bottom: 1em;
+ }
+
+ div.issue-marker .issue-marker {
+ position: static;
+ width: auto;
+ margin-left: 0;
+ text-align: right;
+ }
+
+ div.issue-marker {
+ position: absolute;
+ width: 20ex;
+ margin-left: -22ex;
}
}
@media screen and (max-width: 68em){
.issue-marker {
+ margin-bottom: 1em;
}
.issue-marker a:link {
padding-left: 0.5em;
}
+ }
+
+ #issue-manager form{
+ background: #eee;
+ padding:10px 1em;
+ }
+
+ /* hide all non-"updated" issues */
+ #issue-manager[data-view_state="updated"] #issue-list>div:not([data-issue_state="updated"]){
+ display:none;
+ }
+
+ /* hide all non-"new" issues */
+ #issue-manager[data-view_state="new"] #issue-list>div:not([data-issue_state="new"]){
+ display:none;
}
+
+ #issue-manager .issue-marker{
+ background: none;
+ position: relative;
+ margin:0;
+ width:auto;
+ text-align:left;
+ padding:0.5em 0;
+ }
+
+ #issue-manager .issue-marker a:link{
+ padding:0.5em;
+ }
+
+ #issue-list div[data-issue_state="new"]{
+ background:#C1FFC1;
+ }
+ #issue-list div[data-issue_state="resolved"]{
+ background:white;
+ color: #a0a0a0;
+ }
+ #issue-list div[data-issue_state="updated"]{
+ background:papayawhip;
+ }
+
+ #issue-list{
+ margin-top:20px;
+ }
+ #issue-list pre{
+ padding:1em;
+ margin:0;
+ }
+
+ #issue-list>div{
+ position:relative;
+ }
+
+ #issue-list a.issue-markup-trigger{
+ font-size: 0.8em;
+ padding: 0.2em 0.5em;
+ background: #eee;
+ text-decoration: none;
+ color: #444;
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ z-index: 1;
+ }
+
+ #issue-list a.issue-markup-trigger:hover{
+ background: #ddd;
+ color: #000;
+ }
+
+ #issue-list .showMarkup pre{
+ display: block;
+ }
+
+ #issue-list .showMarkup .issue-marker,
+ #issue-list pre{
+ display: none;
+ }
+
.issue-marker {
background:#eee;
border:1px solid #ddd;
font-size: 1em;
}
+
+ .issue-marker.wrapper {
+ background: none;
+ border: none;
+ }
.issue-marker a:link {
color: #c00;
@@ -113,7 +212,6 @@
type="text/css">
<link href="../alternate-spec-style.css" id=st rel=stylesheet
title="alternate spec style" type="text/css">
- <!-- <script type="text/javascript" src="issue_tracker.js"></script> -->
<body>
<div class=head id=div-head>
@@ -126,14 +224,14 @@
<h1 id=css-regions-module>CSS Regions Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 3 February
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 4 February
2012</h2>
<dl>
<dt>This version:
<dd><a
- href="http://www.w3.org/TR/2012/ED-css3-regions-20120203/">http://www.w3.org/csswg/css3-regions</a>
+ href="http://www.w3.org/TR/2012/ED-css3-regions-20120204/">http://www.w3.org/csswg/css3-regions</a>
<dt>Latest version:
@@ -348,6 +446,9 @@
<li class=no-num><a href="#index">Index</a>
<li class=no-num><a href="#property-index">Property index</a>
+
+ <li><a href="#issue-manager0"><span class=secno>11. </span>Issue
+ manager</a>
</ul>
<!--end-toc-->
@@ -355,7 +456,7 @@
<p><em>This section is non-normative.</em>
- <div class=issue-marker> <a
+ <div class=issue-marker data-bug_id=15159 data-bug_status=NEW> <a
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15159">Bug-15159</a>
<div class=issue-details>
<p class=short-desc>Add code samples to the CSS regions use cases page</p>
@@ -376,7 +477,7 @@
another, where the areas are the multi-column element's column boxes and
the flow is made of the multi-column element's children.
- <div class=issue-marker> <a
+ <div class=issue-marker data-bug_id=15733 data-bug_status=NEW> <a
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15733">Bug-15733</a>
<div class=issue-details>
<p class=short-desc>Should the region specification define a mechanism to
@@ -403,7 +504,7 @@
<p class=caption>Layout requiring sophisticated content flow</p>
</div>
- <div class=issue-marker> <a
+ <div class=issue-marker data-bug_id=15131 data-bug_status=NEW> <a
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15131">Bug-15131</a>
<div class=issue-details>
<p class=short-desc>Add layout to initial example</p>
@@ -562,11 +663,24 @@
<h3 id=regions><span class=secno>2.1. </span>Regions</h3>
- <div class=issue-marker> <a
- href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15186">Bug-15186</a>
- <div class=issue-details>
- <p class=short-desc>Is a mechanism to auto-generate regions necessary in
- order to support reusable style sheets?</p>
+ <div class="issue-marker wrapper">
+ <div class=issue-marker data-bug_id=15186 data-bug_status=NEW> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15186">Bug-15186</a>
+
+ <div class=issue-details>
+ <p class=short-desc>Is a mechanism to auto-generate regions necessary in
+ order to support reusable style sheets?</p>
+ </div>
+ </div>
+
+ <div class=issue-marker data-bug_id=15187 data-bug_status=NEW> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15187">Bug-15187</a>
+
+ <div class=issue-details>
+ <p class=short-desc>Explain how regions and pages interact. How can
+ regions be placed onto certain pages, and how can they be positiond
+ wrt. pages.</p>
+ </div>
</div>
</div>
@@ -636,7 +750,7 @@
href="#flow-into"><code class=property>flow-into</code></a>’
property</h3>
- <div class=issue-marker> <a
+ <div class=issue-marker data-bug_id=15811 data-bug_status=NEW> <a
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15811">Bug-15811</a>
<div class=issue-details>
<p class=short-desc>Creating a named flow from external resource</p>
@@ -729,10 +843,22 @@
formatting of elements placed into a named flow and of regions laying out
content from a named flow.
- <div class=issue-marker> <a
- href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15858">Bug-15858</a>
- <div class=issue-details>
- <p class=short-desc>Should first region be ICB for flow content?</p>
+ <div class="issue-marker wrapper">
+ <div class=issue-marker data-bug_id=15858 data-bug_status=NEW> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15858">Bug-15858</a>
+
+ <div class=issue-details>
+ <p class=short-desc>Should first region be ICB for flow content?</p>
+ </div>
+ </div>
+
+ <div class=issue-marker data-bug_id=15870 data-bug_status=NEW> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15870">Bug-15870</a>
+
+ <div class=issue-details>
+ <p class=short-desc>Describe how containing blocks are used for element
+ fragments</p>
+ </div>
</div>
</div>
@@ -800,7 +926,7 @@
class=property>flow-from</code></a>’ property makes an element a
region and associates it with a named flow.
- <div class=issue-marker> <a
+ <div class=issue-marker data-bug_id=15191 data-bug_status=NEW> <a
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15191">Bug-15191</a>
<div class=issue-details>
<p class=short-desc>Should we allow multi-column elements to be regions?</p>
@@ -911,21 +1037,30 @@
empty named flow and, consequently, its children are not formatted
visually.</div>
- <div class=issue-marker> <a
- href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15189">Bug-15189</a>
- <div class=issue-details>
- <p class=short-desc>Should regions be non-breakable?</p>
+ <div class="issue-marker wrapper">
+ <div class=issue-marker data-bug_id=15189 data-bug_status=NEW> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15189">Bug-15189</a>
+
+ <div class=issue-details>
+ <p class=short-desc>Should regions be non-breakable?</p>
+ </div>
</div>
- <a
- href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15824">Bug-15824</a>
- <div class=issue-details>
- <p class=short-desc>Should regions not create a new stacking context?</p>
+
+ <div class=issue-marker data-bug_id=15824 data-bug_status=NEW> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15824">Bug-15824</a>
+
+ <div class=issue-details>
+ <p class=short-desc>Should regions not create a new stacking context?</p>
+ </div>
</div>
- <a
- href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15824">Bug-15827</a>
- <div class=issue-details>
- <p class=short-desc>Specify behavior of stacking contexts that are split
- between regions</p>
+
+ <div class=issue-marker data-bug_id=15827 data-bug_status=NEW> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15824">Bug-15827</a>
+
+ <div class=issue-details>
+ <p class=short-desc>Specify behavior of stacking contexts that are split
+ between regions</p>
+ </div>
</div>
</div>
@@ -987,7 +1122,7 @@
<h4 id=auto-width-on-regions><span class=secno>4.2.1. </span>Auto width on
regions</h4>
- <div class=issue-marker> <a
+ <div class=issue-marker data-bug_id=15741 data-bug_status=NEW> <a
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15741">Bug-15741</a>
<div class=issue-details>
<p class=short-desc>Regions intrinsic size</p>
@@ -1230,7 +1365,7 @@
<td>specified value
</table>
- <div class=issue-marker> <a
+ <div class=issue-marker data-bug_id=15832 data-bug_status=NEW> <a
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15832">Bug-15832</a>
<div class=issue-details>
<p class=short-desc>Should we have region-overflow:nobreak and have
@@ -1353,6 +1488,13 @@
<h3 id=the-at-region-style-rule><span class=secno>4.5. </span>The @region
rule</h3>
+ <div class=issue-marker data-bug_id=15116 data-bug_status=NEW> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15116">Bug-15116</a>
+ <div class=issue-details>
+ <p class=short-desc>Add CSS OM Interface for @region style rules</p>
+ </div>
+ </div>
+
<p>An ‘<code class=css>@region</code>’ rule contains style
declarations specific to particular regions.
@@ -1374,7 +1516,7 @@
rel=biblioentry>[DOM-LEVEL-2-TRAVERSAL-RANGE]<!--{{DOM-LEVEL-2-TRAVERSAL-RANGE}}--></a>)
from the region's flow that flows in the selected region(s).
- <div class=issue-marker> <a
+ <div class=issue-marker data-bug_id=15713 data-bug_status=NEW> <a
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15713">Bug-15713</a>
<div class=issue-details>
<p class=short-desc>Model for styling element fragments</p>
@@ -1388,7 +1530,7 @@
<p>Only a limited list of properties can be set in a region style rule:
- <div class=issue-marker> <a
+ <div class=issue-marker data-bug_id=15190 data-bug_status=NEW> <a
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15190">Bug-15190</a>
<div class=issue-details>
<p class=short-desc>List of region style properties</p>
@@ -1544,7 +1686,7 @@
class=html>region_1</code> is styled with this rule.</p>
</div>
- <div class=issue-marker> <a
+ <div class=issue-marker data-bug_id=15734 data-bug_status=NEW> <a
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15734">Bug-15734</a>
<div class=issue-details>
<p class=short-desc>@region and specificity</p>
@@ -1578,10 +1720,10 @@
<h2 id="pseudo_elements"><span class=secno>5. </span>Pseudo-elements</h2>
- <div class=issue-marker> <a
+ <div class=issue-marker data-bug_id=15188 data-bug_status=NEW> <a
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15188">Bug-15188</a>
<div class=issue-details>
- <p class=short-desc>add functionality for having textual describtion like
+ <p class=short-desc>add functionality for having textual description like
"continued here" or "continued on page x" to regions.</p>
</div>
</div>
@@ -1628,7 +1770,7 @@
<h2 id="cssom_view_and_css_regions"><span class=secno>6. </span>CSSOM view
and CSS regions</h2>
- <div class=issue-marker> <a
+ <div class=issue-marker data-bug_id=15679 data-bug_status=NEW> <a
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15679">Bug-15679</a>
<div class=issue-details>
<p class=short-desc>elementFromPoint and CSS regions</p>
@@ -1642,7 +1784,7 @@
content on a mobile phone with a small screen may require more regions
than on a large desktop display.
- <div class=issue-marker> <a
+ <div class=issue-marker data-bug_id=15010 data-bug_status=NEW> <a
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15010">Bug-15010</a>
<div class=issue-details>
<p class=short-desc>Need to add a CSSRegionRule to Region OM</p>
@@ -1665,7 +1807,7 @@
<h3 id=the-namedflow-interface><span class=secno>6.1. </span>The NamedFlow
interface</h3>
- <div class=issue-marker> <a
+ <div class=issue-marker data-bug_id=14948 data-bug_status=NEW> <a
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14948">Bug-14948</a>
<div class=issue-details>
<p class=short-desc>What should getFlowByName return if there is no flow
@@ -1698,7 +1840,7 @@
class=idl>Document</code></a> interface provides access to the document's
<a href="#named-flow0">named flow</a> instances.
- <div class=issue-marker> <a
+ <div class=issue-marker data-bug_id=15828 data-bug_status=NEW> <a
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15828">Bug-15828</a>
<div class=issue-details>
<p class=short-desc>Should add a ‘<a
@@ -1864,7 +2006,7 @@
<h3 id=region-flow-layout-events><span class=secno>6.3. </span>Region flow
layout events</h3>
- <div class=issue-marker> <a
+ <div class=issue-marker data-bug_id=15009 data-bug_status=NEW> <a
href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15009">Bug-15009</a>
<div class=issue-details>
<p class=short-desc>Should we have additional events for CSS Regions?</p>
@@ -2536,6 +2678,35 @@
<!--end-index-->
<h2 class=no-num id=property-index>Property index</h2>
+ <!-- template markup for issues pulled from Bugzilla -->
+ <script id=issue-template type="text/template">
+</script>
+
+ <div class=issue-marker data-bug_id="{{bug_id}}"
+ data-bug_status="{{bug_status}}"> <a
+ href="https://www.w3.org/Bugs/Public/show_bug.cgi?id={{bug_id}}">Bug-{{bug_id}}</a>
+
+ <div class=issue-details>
+ <p class=short-desc>{{short_desc}}</p>
+ </div>
+ </div>
+ <!--
+ <script type="text/javascript" src="BugzillaTracker.js"></script>
+ <script type="text/javascript" src="BugzillaTrackerCSSRegions.js"></script>
+ -->
+
+ <div id=issue-manager>
+ <h2 id=issue-manager0><span class=secno>11. </span>Issue manager</h2>
+
+ <form action="#"></form>
+ <label> <input checked name=issue-filter type=radio value=all> All issues
+ </label> <label> <input name=issue-filter type=radio value=updated>
+ Updated issues </label> <label> <input name=issue-filter type=radio
+ value=new> New issues </label>
+ <!-- all the bugs are dumped the #issue-list after being retreived and matched to the ones in the page -->
+
+ <div id=issue-list></div>
+ </div>
</html>
<!-- Keep this comment at the end of the file
Local variables:
--- issue_tracker.js DELETED ---
--- NEW FILE: BugzillaTrackerCSSRegions.js ---
(function(){
function getIssuesFromDocument(){
var list = {},
issues = document.querySelectorAll(".issue-marker");
if (issues){
// make issue an array
issues = Array.prototype.slice.call(issues);
// pluck out the bug data from the DOM object
issues.forEach(function(issue){
var bugId = issue.dataset["bug_id"];
if (bugId){
list[bugId] = {
"bug_status": issue.dataset["bug_status"],
"short_desc": issue.querySelector(".short-desc").innerText
}
}
})
}
return list;
}
// Decorate the issues received from the sever with their state related to the issues in the page (new, changed)
function setIssueStates(serverIssues, documentIssues){
var serverIssue, documentIssue;
if (!serverIssues){
throw new TypeError("Missing 'serverIssues' from server. Expected Object, got "+ typeof serverIssues)
}
if (!documentIssues){
throw new TypeError("Missing 'documentIssues' from document. Expected Object, got "+ typeof documentIssues)
}
for (var bugId in serverIssues){
serverIssue = serverIssues[bugId];
documentIssue = documentIssues[bugId];
// is the bug in the doument?
if (documentIssues[bugId]){
// bug status has changed. it's an updated issue
if ( (documentIssue.bug_status !== serverIssue.bug_status) ||
(documentIssue.short_desc !== serverIssue.short_desc) ){
serverIssue.issue_state = "updated";
}
}
else{
// not found in the document. it's a new issue if the bug_status
// is not RESOLVED
if (serverIssue.bug_status === "RESOLVED") {
serverIssue.issue_state = 'resolved';
} else {
serverIssue.issue_state = "new";
}
}
}
return serverIssues;
}
// "this" is bound to the "BugzillaTracker" instance
function renderIssues(serverIssues){
if (!serverIssues && !serverIssues.length){
return;
}
// get a list of bugs from the document
var documentIssues = getIssuesFromDocument();
// get the bugs list with the updated state (not bug status) related to the bugs already in the page
var issueList = setIssueStates(serverIssues, documentIssues);
var fragment = document.createDocumentFragment();
for (var issueId in issueList){
// bind the bug data to the bug template
var issueFragment = this.renderIssue(issueList[issueId]);
var wrapper = document.createElement("div");
var trigger = document.createElement("a");
trigger.className = "issue-markup-trigger";
trigger.href = "#";
trigger.innerHTML = "toggle markup"
if (issueList[issueId]["issue_state"]){
wrapper.setAttribute("data-issue_state", issueList[issueId]["issue_state"]);
}
wrapper.appendChild(trigger);
wrapper.appendChild(issueFragment);
fragment.appendChild(wrapper);
}
var issueListContainer = document.querySelector("#issue-list");
issueListContainer.appendChild(fragment);
// show/hide the markup for a bug entry
issueListContainer.addEventListener("click", toggleMarkup);
}
function toggleMarkup(e){
if (e.target.className && e.target.classList.contains("issue-markup-trigger")){
e.preventDefault();
var parent = e.target.parentNode,
issueEl = parent.querySelector(".issue-marker"),
markup = issueEl.outerHTML;
parent.classList.toggle("showMarkup");
// already generated the markup
if (parent.querySelector("pre")){
return
}
else{
var pre = document.createElement("pre");
pre.textContent = markup;
parent.appendChild(pre);
}
}
}
function filterIssues(e){
if (e.target.name !== "issue-filter"){
return
}
var issueManager = document.querySelector("#issue-manager");
switch(e.target.value){
case "all":
issueManager.removeAttribute("data-view_state");
break;
case "new":
issueManager.setAttribute("data-view_state", "new");
break;
case "updated":
issueManager.setAttribute("data-view_state", "updated");
break;
}
}
document.addEventListener("DOMContentLoaded", function(){
BugzillaTracker.setIssueTemplate(document.querySelector("#issue-template").innerHTML);
BugzillaTracker.sync(
{
product: "CSS",
component: "CSS Regions",
},
renderIssues);
document.querySelector("#issue-manager form").addEventListener("change", filterIssues)
})
})()
--- NEW FILE: BugzillaTracker.js ---
(function(){
// Templating engine
var TemplateManager = (function(){
/*
Convert an HTML string into a valid node structure.
@param {String} string The string HTML to be converted to nodes
@return {DocumentFragment} a DocumentFragment with the node structure
*/
var _convertStringToNode = function(string){
// make a temporary container
var temp = document.createElement("div");
// let the parser turn the template into a valid node structure
temp.innerHTML = string;
// create document fragment as payload container
var fragment = document.createDocumentFragment();
while(temp.firstChild){
// extract nodes from the temp container into the payload container
fragment.appendChild(temp.firstChild)
}
return fragment;
}
var _createTemplateFn = function(replaceVars, template){
return function(data){
if (replaceVars.length && data !== null){
var templateClone = template;
for (var i = 0, len = replaceVars.length; i < len; i++){
// extract just the variable name, without template markers
var key = replaceVars[i].replace("{{","").replace("}}","");
// do we have a value for this template variable?
if (data[key]){
// global regex pattern based on template variable
var pattern = new RegExp(replaceVars[i], "g");
// replace template variable with real data
templateClone = templateClone.replace(pattern, data[key]);
}
}
}
// return a nicely wrapped node structure to be appended to the document
return _convertStringToNode(templateClone)
}
}
return {
/*
Create a template function from a string of HTML markup
Extract template variables for quick reuse.
@param {String} template A string of HTML with template variables marked as {{variable-name}}
@return {Function} A function that expects a data object to populate the template
*/
compile: function(template){
if (typeof template !== "string"){
throw new TypeError("Invalid templateString type. Expected 'String', got " + typeof templateString)
}
// look for all the varialbes to be replaced. they look like {{varName}}
var replaceVars = template.match(/{{[\w_-]*}}/g);
return _createTemplateFn(replaceVars, template)
}
}
})();
// Bugzilla tracker
var BugzillaTracker = (function(){
var _cache = {},
_config = {
bugSearchURL: "https://www.w3.org/Bugs/Public/buglist.cgi",
scriptId: "BugzillaTracker",
onSync: _onSync
},
_queryParams = {
product: "CSS",
component: "CSS Regions",
ctype: "js"
};
function _getScript(url){
var script = document.createElement("script"),
oldScript = document.getElementById(_config.scriptId),
target = document.getElementsByTagName("script")[0];
// Bugzilla returns results in the global namespace.
// Remove old script references to avoid poluted results
if (oldScript){
oldScript.parentNode.removeChild(oldScript)
}
script.type = "text/javascript";
script.src = url;
script.id = _config.scriptId;
return target.parentNode.insertBefore(script, target);
}
/*
Extend an object with the properties and value of other objects.
Uses the function arguments as source objects.
Same-name properties will be overwritten if found in subsequent source objects.
@param {Object} object The target object that will be extended
@return {Object} an object containing all the keys and the values of the source objects
@example
_extend({}, {value: "1"}, {isPublic: false })
*/
function _extend(object){
// make arguments an array and get all the arguments, except the first one
var sources = Array.prototype.slice.call(arguments, 1);
if (sources && sources.length){
sources.forEach(function(source){
for (var property in source){
object[property] = source[property]
}
})
}
return object;
}
/*
Convert an object with key/value pairs into a query string.
Value entities are encoded for use in HTTP requests.
@param {Object} object The object to be serialized.
@return {String} The serialized object;
*/
function _serialize(object){
var pairs = [];
for (var key in object){
pairs.push( key + "=" + encodeURIComponent(object[key]) )
}
return pairs.join("&");
}
/*
Convert the Bugzilla bug data array into an object.
To maintain consistency where Bugzilla didn't, the object keys are named as the ones returned by the Bugzilla API when requesting a single bug.
When requesting bugLists as JavaScript Bugzilla returns each bug's data as an array of 7 values in this order:
[
bug severity,
bug priority,
operating system,
username assigned to bug,
bug status,
bug resolution,
bug description (title)
]
@param {Array} array The bug details as values of a 7 items array;
@return {Object} An object with keys an values describing the bug ( The way we like it in the real world! )
*/
function _createBugObject(array){
if (array.length !== 7){
throw new Error("Invalid bug data. Expected array of 7 values.")
}
return {
"bug_severity": array[0],
"priority": array[1],
"op_sys": array[2], // operating system
"assigned_to": array[3],
"bug_status": array[4],
"resolution": array[5],
"short_desc": array[6]
}
}
function _onSync(bugList){
console.log("onsync", bugList)
}
function _getCallbackFn(){
return function(bugList){
// No bugs; Silent failure
if (!bugList || !bugList.length){
return
}
var bugObj,
bugs = {};
bugList.forEach(function(bug, index){
var bugObj = _createBugObject(bug, index);
if (bugObj){
bugObj["bug_id"] = index;
bugs[index] = bugObj;
}
})
// run user-provided callback with the bug list
_config.onSync.call(BugzillaTracker, bugs)
// restore any previously buglistCallback function
if (typeof _cache.buglistCallback == "function"){
window.buglistCallback = _cache.buglistCallback
}
}
}
return {
/*
Request bugs from Bugzilla based on seach query parameters.
@param {Object} queryParams A map of query parameters for the Bugzilla API
@example
{
product: "CSS",
component: "CSS Regions"
}
*/
sync: function(queryParams, callbackFn){
var params = _extend({}, _queryParams, queryParams),
queryString = _serialize(params),
url = _config.bugSearchURL + "?" + queryString;
if (typeof callbackFn == "function"){
_config.onSync = callbackFn;
}
/*
Bugzilla has a hardcoded callback function in the response when returning results as JavaScript (ctype=js).
It is window.buglistCallback(array); It receives a single paramter: an array of objects describing bugs.
Cache the reference to this callback if it already exists.
Avoid collisions, replace with our own callback method, then restore the old function it other scripts may need it.
*/
if (typeof window.buglistCallback == "function"){
_cache.buglistCallback = window.buglistCallback;
}
// Set our own handler. After running, it will replace itself with the original callback, if function was defined.
window.buglistCallback = _getCallbackFn();
_getScript(url);
},
// overwrite default configuration (ex: Bugzilla buglist.cgi URL)
setOptions: function(options){
_config = _extend({}, _config, options)
},
setIssueTemplate: function(string){
if (string && typeof string){
_config.issueTemplate = TemplateManager.compile(string);
// usage
// _config.issueTemplate({bug_id: "1234", short_desc: "oprea e aici!"})
}
},
renderIssue: function(bugData){
return _config.issueTemplate(bugData)
}
}
})();
window.BugzillaTracker = BugzillaTracker;
})()
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-regions/Overview.src.html,v
retrieving revision 1.54
retrieving revision 1.55
diff -u -d -r1.54 -r1.55
--- Overview.src.html 3 Feb 2012 13:09:40 -0000 1.54
+++ Overview.src.html 4 Feb 2012 06:13:11 -0000 1.55
@@ -58,31 +58,130 @@
display: none;
}
- @media screen and (min-width: 68em){
+ @media screen and (min-width: 68em){
+
.issue-marker {
position: absolute;
width: 20ex;
margin-left: -22ex;
text-align: right;
+ margin-bottom: 1em;
+ }
+
+ div.issue-marker .issue-marker {
+ position: static;
+ width: auto;
+ margin-left: 0;
+ text-align: right;
+ }
+
+ div.issue-marker {
+ position: absolute;
+ width: 20ex;
+ margin-left: -22ex;
}
}
@media screen and (max-width: 68em){
.issue-marker {
+ margin-bottom: 1em;
}
.issue-marker a:link {
padding-left: 0.5em;
}
+ }
+
+ #issue-manager form{
+ background: #eee;
+ padding:10px 1em;
}
+
+ /* hide all non-"updated" issues */
+ #issue-manager[data-view_state="updated"] #issue-list>div:not([data-issue_state="updated"]){
+ display:none;
+ }
+
+ /* hide all non-"new" issues */
+ #issue-manager[data-view_state="new"] #issue-list>div:not([data-issue_state="new"]){
+ display:none;
+ }
+
+ #issue-manager .issue-marker{
+ background: none;
+ position: relative;
+ margin:0;
+ width:auto;
+ text-align:left;
+ padding:0.5em 0;
+ }
+
+ #issue-manager .issue-marker a:link{
+ padding:0.5em;
+ }
+
+ #issue-list div[data-issue_state="new"]{
+ background:#C1FFC1;
+ }
+ #issue-list div[data-issue_state="resolved"]{
+ background:white;
+ color: #a0a0a0;
+ }
+ #issue-list div[data-issue_state="updated"]{
+ background:papayawhip;
+ }
+
+ #issue-list{
+ margin-top:20px;
+ }
+ #issue-list pre{
+ padding:1em;
+ margin:0;
+ }
+
+ #issue-list>div{
+ position:relative;
+ }
+
+ #issue-list a.issue-markup-trigger{
+ font-size: 0.8em;
+ padding: 0.2em 0.5em;
+ background: #eee;
+ text-decoration: none;
+ color: #444;
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ z-index: 1;
+ }
+
+ #issue-list a.issue-markup-trigger:hover{
+ background: #ddd;
+ color: #000;
+ }
+
+ #issue-list .showMarkup pre{
+ display: block;
+ }
+
+ #issue-list .showMarkup .issue-marker,
+ #issue-list pre{
+ display: none;
+ }
+
.issue-marker {
background:#eee;
border:1px solid #ddd;
font-size: 1em;
}
+
+ .issue-marker.wrapper {
+ background: none;
+ border: none;
+ }
.issue-marker a:link {
color: #c00;
@@ -118,9 +217,6 @@
<link id="st" href="../alternate-spec-style.css" rel="stylesheet"
type="text/css" title="alternate spec style">
-
- <!-- <script type="text/javascript" src="issue_tracker.js"></script> -->
-
</head>
@@ -215,7 +311,7 @@
<p><em>This section is non-normative.</em></p>
- <div class="issue-marker">
+ <div class="issue-marker" data-bug_id="15159" data-bug_status="NEW">
<a href=
"https://www.w3.org/Bugs/Public/show_bug.cgi?id=15159">Bug-15159</a>
@@ -238,7 +334,7 @@
another, where the areas are the multi-column element's column boxes and
the flow is made of the multi-column element's children.</p>
- <div class="issue-marker">
+ <div class="issue-marker" data-bug_id="15733" data-bug_status="NEW">
<a href=
"https://www.w3.org/Bugs/Public/show_bug.cgi?id=15733">Bug-15733</a>
@@ -268,7 +364,7 @@
<p class="caption">Layout requiring sophisticated content flow</p>
</div>
- <div class="issue-marker">
+ <div class="issue-marker" data-bug_id="15131" data-bug_status="NEW">
<a href=
"https://www.w3.org/Bugs/Public/show_bug.cgi?id=15131">Bug-15131</a>
@@ -417,7 +513,8 @@
<h3 id="regions">Regions</h3>
- <div class="issue-marker">
+ <div class="issue-marker wrapper">
+ <div class="issue-marker" data-bug_id="15186" data-bug_status="NEW">
<a href=
"https://www.w3.org/Bugs/Public/show_bug.cgi?id=15186">Bug-15186</a>
@@ -427,6 +524,14 @@
</div>
</div>
+ <div class="issue-marker" data-bug_id="15187" data-bug_status="NEW">
+ <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15187">Bug-15187</a>
+ <div class="issue-details">
+ <p class="short-desc">Explain how regions and pages interact. How can regions be placed onto certain pages, and how can they be positiond wrt. pages.</p>
+ </div>
+ </div>
+ </div>
+
<p class="index" title="region" id="region">A region is an element that
generates a <a href=
"http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block container
@@ -487,7 +592,7 @@
<h3 id="the-flow-into-property">The 'flow-into' property</h3>
- <div class="issue-marker">
+ <div class="issue-marker" data-bug_id="15811" data-bug_status="NEW">
<a href=
"https://www.w3.org/Bugs/Public/show_bug.cgi?id=15811">Bug-15811</a>
@@ -582,7 +687,8 @@
formatting of elements placed into a named flow and of regions laying out
content from a named flow.</p>
- <div class="issue-marker">
+ <div class="issue-marker wrapper">
+ <div class="issue-marker" data-bug_id="15858" data-bug_status="NEW">
<a href=
"https://www.w3.org/Bugs/Public/show_bug.cgi?id=15858">Bug-15858</a>
@@ -590,7 +696,15 @@
<p class="short-desc">Should first region be ICB for flow content?</p>
</div>
</div>
-
+
+ <div class="issue-marker" data-bug_id="15870" data-bug_status="NEW">
+ <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15870">Bug-15870</a>
+ <div class="issue-details">
+ <p class="short-desc">Describe how containing blocks are used for element fragments</p>
+ </div>
+ </div>
+ </div>
+
<p>The edges of the first region in a region chain associated with a named flow establish
the rectangle that is the
<a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing block</a>
@@ -628,7 +742,7 @@
<h3 id="the-flow-from-property">The 'flow-from' property</h3>
<p>The 'flow-from' property makes an element a region and associates it with a named flow.</p>
- <div class="issue-marker">
+ <div class="issue-marker" data-bug_id="15191" data-bug_status="NEW">
<a href=
"https://www.w3.org/Bugs/Public/show_bug.cgi?id=15191">Bug-15191</a>
@@ -738,21 +852,25 @@
are not formatted visually.
</div>
-
- <div class="issue-marker">
+ <div class="issue-marker wrapper">
+ <div class="issue-marker" data-bug_id="15189" data-bug_status="NEW">
<a href=
"https://www.w3.org/Bugs/Public/show_bug.cgi?id=15189">Bug-15189</a>
<div class="issue-details">
<p class="short-desc">Should regions be non-breakable?</p>
</div>
+ </div>
+ <div class="issue-marker" data-bug_id="15824" data-bug_status="NEW">
<a href=
"https://www.w3.org/Bugs/Public/show_bug.cgi?id=15824">Bug-15824</a>
<div class="issue-details">
<p class="short-desc">Should regions not create a new stacking context?</p>
- </div>
+ </div>
+ </div>
+ <div class="issue-marker" data-bug_id="15827" data-bug_status="NEW">
<a href=
"https://www.w3.org/Bugs/Public/show_bug.cgi?id=15824">Bug-15827</a>
@@ -760,9 +878,8 @@
<div class="issue-details">
<p class="short-desc">Specify behavior of stacking contexts that are split between regions</p>
</div>
-
-
- </div>
+ </div>
+ </div>
<p><span title="region">Regions</span> create a new <a href="http://www.w3.org/TR/CSS2/visuren.html#z-index">stacking context</a>. <span title="region">Regions</span> establish a new <a href="http://www.w3.org/TR/CSS2/visuren.html#block-formatting">block formatting Context</a>.</p>
@@ -818,7 +935,7 @@
<h4>Auto width on regions</h4>
- <div class="issue-marker">
+ <div class="issue-marker" data-bug_id="15741" data-bug_status="NEW">
<a href=
"https://www.w3.org/Bugs/Public/show_bug.cgi?id=15741">Bug-15741</a>
@@ -1077,7 +1194,7 @@
</tr>
</table>
- <div class="issue-marker">
+ <div class="issue-marker" data-bug_id="15832" data-bug_status="NEW">
<a href=
"https://www.w3.org/Bugs/Public/show_bug.cgi?id=15832">Bug-15832</a>
@@ -1198,6 +1315,13 @@
<h3 id="the-at-region-style-rule">The @region rule</h3>
+ <div class="issue-marker" data-bug_id="15116" data-bug_status="NEW">
+ <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15116">Bug-15116</a>
+ <div class="issue-details">
+ <p class="short-desc">Add CSS OM Interface for @region style rules</p>
+ </div>
+ </div>
+
<p>An '@region' rule contains style declarations specific to particular
regions.</p>
@@ -1216,7 +1340,7 @@
[[DOM-LEVEL-2-TRAVERSAL-RANGE]]) from the region's flow that flows in the
selected region(s).</p>
- <div class="issue-marker">
+ <div class="issue-marker" data-bug_id="15713" data-bug_status="NEW">
<a href=
"https://www.w3.org/Bugs/Public/show_bug.cgi?id=15713">Bug-15713</a>
@@ -1233,7 +1357,7 @@
<p>Only a limited list of properties can be set in a region style rule:</p>
- <div class="issue-marker">
+ <div class="issue-marker" data-bug_id="15190" data-bug_status="NEW">
<a href=
"https://www.w3.org/Bugs/Public/show_bug.cgi?id=15190">Bug-15190</a>
@@ -1351,7 +1475,7 @@
- <div class="issue-marker">
+ <div class="issue-marker" data-bug_id="15734" data-bug_status="NEW">
<a href=
"https://www.w3.org/Bugs/Public/show_bug.cgi?id=15734">Bug-15734</a>
@@ -1380,14 +1504,12 @@
<h2 id="pseudo_elements">Pseudo-elements</h2>
- <div class="issue-marker">
+ <div class="issue-marker" data-bug_id="15188" data-bug_status="NEW">
<a href=
"https://www.w3.org/Bugs/Public/show_bug.cgi?id=15188">Bug-15188</a>
<div class="issue-details">
- <p class="short-desc">add functionality for having textual
- describtion like "continued here" or "continued on page x" to
- regions.</p>
+ <p class="short-desc">add functionality for having textual description like "continued here" or "continued on page x" to regions.</p>
</div>
</div>
@@ -1419,7 +1541,7 @@
<h2 id="cssom_view_and_css_regions">CSSOM view and CSS regions</h2>
- <div class="issue-marker">
+ <div class="issue-marker" data-bug_id="15679" data-bug_status="NEW">
<a href=
"https://www.w3.org/Bugs/Public/show_bug.cgi?id=15679">Bug-15679</a>
@@ -1435,7 +1557,7 @@
content on a mobile phone with a small screen may require more regions than
on a large desktop display.</p>
- <div class="issue-marker">
+ <div class="issue-marker" data-bug_id="15010" data-bug_status="NEW">
<a href=
"https://www.w3.org/Bugs/Public/show_bug.cgi?id=15010">Bug-15010</a>
@@ -1460,7 +1582,7 @@
<h3 id="the-namedflow-interface">The NamedFlow interface</h3>
- <div class="issue-marker">
+ <div class="issue-marker" data-bug_id="14948" data-bug_status="NEW">
<a href=
"https://www.w3.org/Bugs/Public/show_bug.cgi?id=14948">Bug-14948</a>
@@ -1493,7 +1615,7 @@
>named flow</span> instances.</p>
- <div class="issue-marker">
+ <div class="issue-marker" data-bug_id="15828" data-bug_status="NEW">
<a href=
"https://www.w3.org/Bugs/Public/show_bug.cgi?id=15828">Bug-15828</a>
@@ -1636,7 +1758,7 @@
<h3 id="region-flow-layout-events">Region flow layout events</h3>
- <div class="issue-marker">
+ <div class="issue-marker" data-bug_id="15009" data-bug_status="NEW">
<a href=
"https://www.w3.org/Bugs/Public/show_bug.cgi?id=15009">Bug-15009</a>
@@ -1883,7 +2005,44 @@
<h2 class="no-num" id="index">Index</h2><!--index-->
<h2 class="no-num" id="property-index">Property index</h2>
-
+
+ <!-- template markup for issues pulled from Bugzilla -->
+ <script type="text/template" id="issue-template">
+<div class="issue-marker" data-bug_id="{{bug_id}}" data-bug_status="{{bug_status}}">
+ <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id={{bug_id}}">Bug-{{bug_id}}</a>
+ <div class="issue-details">
+ <p class="short-desc">{{short_desc}}</p>
+ </div>
+</div>
+ </script>
+ <!--
+ <script type="text/javascript" src="BugzillaTracker.js"></script>
+ <script type="text/javascript" src="BugzillaTrackerCSSRegions.js"></script>
+ -->
+
+ <div id="issue-manager">
+ <h2>Issue manager</h2>
+ <form action="#">
+ <label>
+ <input type="radio" name="issue-filter" value="all" checked/>
+ All issues
+ </label>
+ <label>
+ <input type="radio" name="issue-filter" value="updated" />
+ Updated issues
+ </label>
+ <label>
+ <input type="radio" name="issue-filter" value="new" />
+ New issues
+ </label>
+ </form>
+
+ <!-- all the bugs are dumped the #issue-list after being retreived and matched to the ones in the page -->
+ <div id="issue-list">
+
+ </div>
+ </div>
+
</body>
</html>
<!-- Keep this comment at the end of the file
Received on Saturday, 4 February 2012 06:13:17 UTC