version 0.3.0

dotnetCarpenter · May 27, 2013 · e8f88d4 · e8f88d4
1 parent 195d296
commit e8f88d4
Show file tree

Hide file tree

Showing 17 changed files with 2,073 additions and 11 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,14 @@
+            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+                    Version 2, December 2004
+
+ Copyright (C) 2004 Sam Hocevar <[email protected]>
+
+ Everyone is permitted to copy and distribute verbatim or modified
+ copies of this license document, and changing it is allowed as long
+ as the name is changed.
+
+            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. You just DO WHAT THE FUCK YOU WANT TO.
+
diff --git a/README.md b/README.md
@@ -3,39 +3,49 @@
 
 ## Polyfill for the proposed white-space:none; CSS property
 
-This is a proof of concept and is only tested to work in current browsers (as of April 2013).
+Original written as a proof-of-concept, I've found `white-space: none;` really useful and it's now ready for development usage. You're probably better off using HTML comments, minification or similar in production but for development, it's pretty *tight*.
+
+`white-space: none;` comes with a few known limitations, you need to cater for.
+
+1. Don't use `white-space: none;` inside @media queries - unless you want to apply `white-space: none;` to the selector regardless of your media query.
+2. Only use `white-space: none;` in external style sheets - the script won't look anywhere else.
+3. If your external style sheet is on a different domain, make sure you use [CORS](http://www.w3.org/TR/cors/).
+Let me know, in the [issue tracker](https://github.com/dotnetCarpenter/white-space/issues), if you stumple upon anything weird.
 
 The implementation works by removing empty nodes in the DOM, that are siblings to a node with ``white-space: none;``. The child nodes doesn't inherite ``white-space: none;``.
 Furthermore, this polyfill only parse external CSS. So it won't even look at CSS in the header or inline.
-Another issue, might be that the DOM is not ready before the script tries to remove empty nodes.
 
 You can find a list of sites and people discussing issues with not having `white-space: none;` on the [wiki](https://github.com/dotnetCarpenter/white-space/wiki).
 
-So far there is three test cases and one test case that include all three:
+I decided to include a realistic use-case, which really isn't a test-case but included as such, because
+it's useful to test `white-space: none;` in a realistic environment.
+So far there is one use case, three test cases and one test case that include all three:
+
 + [unordered-list.html](http://dotnetcarpenter.github.io/white-space/test-cases/unordered-list.html)*
 + [images-as-list.html](http://dotnetcarpenter.github.io/white-space/test-cases/images-as-list.html)*
 + [trebuchet-overflow.html](http://dotnetcarpenter.github.io/white-space/test-cases/trebuchet-overflow.html)
 + [all.html](http://dotnetcarpenter.github.io/white-space/test-cases/all.html)
++ [real.html](http://dotnetcarpenter.github.io/white-space/test-cases/real.html)
 
 \* Click the "Run white-space:none; script" button at the top
 
 ## Tested in
 + IE10, IE9, IE8 on Win8
-+ FF20, Saf6, Chr26, Op12 on OSX10.7 (Lion)
++ FF21, Saf6, Chr27, Op12 on OSX10.7 (Lion)
 
 **NOTE:** IE7 support requires that `querySelectorAll` is replaced with something similar.
 
-###
+## Discussion
 + http://lists.w3.org/Archives/Public/www-style/2013Mar/subject.html#msg756
 + http://lists.w3.org/Archives/Public/www-style/2013Apr/subject.html#msg497
 
 ### Changelog
-=======
++ 0.3.0 - DOMready feature, improved CSS tokenizer, better IE8 handling and a new test-case (real.html)
 + 0.2.2 - exclude @charset declaration kind of rules and fixed broken selector when `;` was missing at the end of the `white-space:none;` declaration (e.i. when minified).
 + 0.2.1 - excluding comments when looking for `white-space: none;`
 + 0.2.0 - added support for IE8
 + 0.1.2 - fix bug when no `white-space:none` was found in CSS
-+ 0.1.1 - switch to monad implementation
++ 0.1.1 - switch to monadish implementation
 + 0.1.0 - proof of concept
 
 

diff --git a/test-cases/all.html b/test-cases/all.html
@@ -6,6 +6,7 @@
 	<link href="unordered-list.css" rel="stylesheet"/>
 	<link href="trebuchet-overflow.css" rel="stylesheet"/>
 	<link href="images-as-list.css" rel="stylesheet"/>
+  <script type="text/javascript" src="../white-space.js"></script>
 </head>
 <body>
 	<label>UL with white space</label>
@@ -63,6 +64,5 @@
     /><img src="http://spaceholder.co/p/256" alt="lorem ipsum"
     /><img src="http://spaceholder.co/p/256" alt="lorem ipsum" />
   </div>
-	<script type="text/javascript" src="../white-space.js"></script>
 </body>
 </html>
diff --git a/test-cases/real.html b/test-cases/real.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<!-- saved from url=(0029)http://www.pragmaticcoach.dk/ -->
+<html lang="da-DK"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta charset="utf-8">
+  <!--<meta name="viewport" content="width=device-width, initial-scale=1"/>-->
+  <title>Pragmatic</title>
+  <link rel="stylesheet" type="text/css" href="./real_files/css/style.css"/>
+  <!--[if lt IE 9]>
+    <script src="scripts/html5shiv.js"></script>
+  <![endif]-->
+  <script type="text/javascript" src="../white-space.js"></script>
+  <script type="text/javascript" src="./real_files/scripts/jquery.js"></script>
+  <script type="text/javascript" src="./real_files/scripts/jquery.cycle2.min.js"></script>
+  <script type="text/javascript" src="./real_files/scripts/jquery.cycle2.swipe.min.js"></script>
+</head>
+<body class="home page page-id-2 page-template-default">
+  <div class="beam"></div>
+
+  <div class="grid">
+    <header>
+      <div class="grid__item one-twelfth"></div><div class="grid__item seven-twelfths">        
+        <a href="#">
+          <div class="logo">              
+            <div class="logo_body">              
+              <h1>Pragmatic</h1>
+              <p>Effektiv salgs- og forretningsudvikling</p>
+            </div>              
+          </div>
+        </a>
+      </div><div class="grid__item three-twelfths">
+        <div id="search">
+          <form method="get" id="searchform" action="./real_files/real.html">
+<div id="search-inputs">
+  <input type="text" placeholder="Search this website…" name="s" id="s">
+  <input type="submit" id="searchsubmit" value="">
+</div>
+</form>        </div>
+      </div><div class="grid__item one-twelfth"></div></header>
+
+    <nav>
+<div class="grid__item one-twelfth"></div>
+<div class="grid__item ten-twelfths">
+  <!-- eller wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); -->
+  <div class="menu-top-menu-container">
+    <ul id="menu-top-menu" class="menu">
+      <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-22">
+        <a title="forside" href="#">Forside</a>
+      </li>
+      <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24">
+        <a href="#">Erfaring at a glance</a>
+      </li>
+      <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25">
+        <a href="#">Kontakt</a>
+      </li>
+    </ul>
+  </div>
+</div>
+<div class="grid__item one-twelfth"></div></nav>  <section class="hero">
+
+    <div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="8000" data-cycle-slides="&gt; .slider" data-cycle-pager="nav.cycle-pager" data-cycle-pager-template="&lt;span&gt;·&lt;/span&gt;" data-cycle-swipe="true"><div class="slider cycle-slide cycle-sentinel">
+        <div class="grid__item one-twelfth">&nbsp;</div><div class="grid__item six-twelfths">
+          <h1>Vi samarbejder med jer om at udvikle salget og forretningen.</h1>
+        </div><div class="grid__item one-twelfth"></div><div class="grid__item three-twelfths">
+          <img width="341" height="341" src="./real_files/images/henrik_mortensen.jpg" class="attachment-post-thumbnail wp-post-image" alt="Henrik Mortensen">        </div><div class="grid__item one-twelfth">&nbsp;</div></div>
+
+
+
+
+      <div class="slider cycle-slide">
+        <div class="grid__item one-twelfth">&nbsp;</div><div class="grid__item six-twelfths">
+          <h1>Vi samarbejder med jer om at udvikle salget og forretningen.</h1>
+        </div><div class="grid__item one-twelfth"></div><div class="grid__item three-twelfths">
+          <img width="341" height="341" src="./real_files/images/henrik_mortensen.jpg" class="attachment-post-thumbnail wp-post-image" alt="Henrik Mortensen">        </div><div class="grid__item one-twelfth">&nbsp;</div></div><div class="slider cycle-slide cycle-slide-active">
+        <div class="grid__item one-twelfth">&nbsp;</div><div class="grid__item ten-twelfths">
+          <h1>Et eksternt bestyrelsesmedlem i en ejerledet virksomhed skal skabe værdi ud over de 6 bestyrelsesmøder om året.</h1>
+        </div><div class="grid__item one-twelfth">&nbsp;</div></div><div class="slider cycle-slide">
+        <div class="grid__item one-twelfth">&nbsp;</div><div class="grid__item six-twelfths">
+          <h1>Eksport udvider dit potentiale enormt.</h1>
+        </div><div class="grid__item one-twelfth"></div><div class="grid__item three-twelfths">
+          <img width="200" height="200" src="./real_files/images/logo_frit_200.png" class="attachment-post-thumbnail wp-post-image" alt="logo_frit_200">        </div><div class="grid__item one-twelfth">&nbsp;</div></div><div class="slider cycle-slide">
+        <div class="grid__item one-twelfth">&nbsp;</div><div class="grid__item ten-twelfths">
+          <h1>Marketing er et akademisk ord for salg. Marketing, der ikke skaber salg, er “sunk cost”.</h1>
+        </div><div class="grid__item one-twelfth">&nbsp;</div></div></div><!-- end slider -->
+    <nav class="cycle-pager grid__item center"></nav><!-- might need ontouchstart="" on spans for touch devices -->
+  </section>
+
+  <div class="teaser">
+    <div class="grid__item one-twelfth"></div><div class="grid__item seven-twelfths">
+          <h2>Pragmatic har mange års erfaring lige fra eksportsalg, salgsledelse, udvikling af marketingkoncepter til virksomhedssalg og bestyrelsesarbejde.</h2>
+      </div><div class="grid__item four-twelfth"></div></div>
+
+<div class="grid__item one-twelfth"></div><div class="grid__item seven-twelfths">
+  <section class="panel lifted">
+  <h2><img class="alignright size-full wp-image-155" alt="spiral_500d" src="./real_files/images/spiral_500d.png" width="249" height="500">Vi&nbsp;kan hjælpe med at udvikle jeres forretning – især med fokus på:</h2>
+<ul>
+<li>Strategisk forretningsplanlægning</li>
+<li>Eksportmarkedsføring: Tysk og engelsksprogede markeder</li>
+<li>Markedsanalyse, værdikæder, partnersearch og –valg, partnerkontrakter, salgsplanlægning.</li>
+<li>Planlægning og gennemførelse af personligt salg og forhandling</li>
+<li>Coaching af sælgere</li>
+<li>Udvikling af salgsmateriale: Print, web, præsentationer</li>
+<li>Udvikling af salgskontrakter</li>
+<li>Due diligence analyser</li>
+<li>Økonomistyringssystemer</li>
+<li>Kompetenceudviklingsplaner</li>
+<li>Ansøgninger til støtteprogrammer</li>
+<li>Turn-arounds</li>
+<li>Deltage i jeres bestyrelsesarbejde</li>
+</ul>
+<p>&nbsp;</p>
+      </section>
+</div><div class="grid__item three-twelfths">
+
+    <aside class="panel flat"><h3>Forretnings-og salgsplanlægning</h3><div class="menu-ydelser_1-container"><ul id="menu-ydelser_1" class="menu"><li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-166"><a href="#">Strategisk forretningsplanlægning</a></li>
+<li id="menu-item-162" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-162"><a href="#">Eksportmarkedsføring: Tysk og engelsksprogede markeder</a></li>
+<li id="menu-item-164" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-164"><a href="#">Markedsanalyse, værdikæder, partnersearch og –valg, partnerkontrakter, salgsplanlægning</a></li>
+</ul></div></aside><aside class="panel flat"><h3>Operationelt salg</h3><div class="menu-ydelser_2-container"><ul id="menu-ydelser_2" class="menu"><li id="menu-item-172" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-172"><a href="#">Planlægning og gennemførelse af personligt salg og forhandling</a></li>
+<li id="menu-item-171" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-171"><a href="#">Coaching af sælgere</a></li>
+</ul></div></aside><aside class="panel flat"><h3>Udvikling af salgsmateriale</h3><div class="menu-ydelser_3-container"><ul id="menu-ydelser_3" class="menu"><li id="menu-item-174" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-174"><a href="#">Print, web, præsentationer</a></li>
+<li id="menu-item-173" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-173"><a href="#">Udvikling af salgskontrakter</a></li>
+</ul></div></aside><aside class="panel flat"><h3>Støtteprogrammer</h3><div class="menu-ydelser_4-container"><ul id="menu-ydelser_4" class="menu"><li id="menu-item-175" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-175"><a href="#">Ansøgninger til støtteprogrammer</a></li>
+</ul></div></aside><aside class="panel flat"><h3>General management</h3><div class="menu-ydelser_5-container"><ul id="menu-ydelser_5" class="menu"><li id="menu-item-176" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-176"><a href="#">Due diligence analyser</a></li>
+<li id="menu-item-179" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-179"><a href="#">Økonomistyringssystemer</a></li>
+<li id="menu-item-177" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-177"><a href="#">Kompetenceudviklingsplaner</a></li>
+<li id="menu-item-178" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-178"><a href="#">Turn-arounds</a></li>
+</ul></div></aside><aside class="panel flat"><h3>Bestyrelsesarbejde</h3><div class="menu-ydelser_6-container"><ul id="menu-ydelser_6" class="menu"><li id="menu-item-180" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-180"><a href="#">Deltage i jeres bestyrelsesarbejde</a></li>
+</ul></div></aside></div><div class="grid__item one-twelfth"></div><footer>
+    <div class="grid__item one-twelfth"></div><div class="grid__item special-one-third">
+    				<h3>Nye indlæg</h3>		<ul>
+					<li>
+				<a href="#">Slide 1</a>
+						</li>
+					<li>
+				<a href="#">Slider 4</a>
+						</li>
+					<li>
+				<a href="#">Slider 3</a>
+						</li>
+					<li>
+				<a href="#">Slider 2</a>
+						</li>
+				</ul>
+		    </div><div class="grid__item special-one-third">
+    <h3>Kategorier</h3>		<ul>
+	<li class="cat-item cat-item-3"><a href="#">Forsideslider</a>
+</li>
+		</ul>
+    </div><div class="grid__item special-one-third">
+    <h3>Sider</h3>		<ul>
+			<li class="page_item page-item-10"><a href="#">Erfaring at a glance</a></li>
+<li class="page_item page-item-14"><a href="#">Kontakt</a></li>
+<li class="page_item page-item-2 current_page_item"><a href="#">Pragmatic har mange års erfaring lige fra eksportsalg, salgsledelse, udvikling af marketingkoncepter til virksomhedssalg og bestyrelsesarbejde.</a></li>
+<li class="page_item page-item-8"><a href="#">Ydelser</a>
+<ul class="children">
+	<li class="page_item page-item-91"><a href="#">Ansøgninger til støtteprogrammer</a></li>
+	<li class="page_item page-item-79"><a href="#">Coaching af sælgere</a></li>
+	<li class="page_item page-item-95"><a href="#">Deltage i jeres bestyrelsesarbejde</a></li>
+	<li class="page_item page-item-85"><a href="#">Due diligence analyser</a></li>
+	<li class="page_item page-item-71"><a href="#">Eksportmarkedsføring</a></li>
+	<li class="page_item page-item-89"><a href="#">Kompetenceudviklingsplaner</a></li>
+	<li class="page_item page-item-74"><a href="#">Markedsanalyse, værdikæder, partnersearch og –valg, partnerkontrakter, salgsplanlægning</a></li>
+	<li class="page_item page-item-76"><a href="#">Planlægning og gennemførelse af personligt salg og forhandling</a></li>
+	<li class="page_item page-item-70"><a href="#">Strategisk forretningsplanlægning</a></li>
+	<li class="page_item page-item-93"><a href="#">Turn-arounds</a></li>
+	<li class="page_item page-item-83"><a href="#">Udvikling af salgskontrakter</a></li>
+	<li class="page_item page-item-81"><a href="#">Udvikling af salgsmateriale: Print, web, præsentationer</a></li>
+	<li class="page_item page-item-87"><a href="#">Økonomistyringssystemer</a></li>
+</ul>
+</li>
+		</ul>
+		    </div><div class="grid__item one-twelfth"></div></footer>
+  <div class="beam palm--none split">
+  <div class="grid__item one-twelfth"></div><div class="grid__item ten-twelfths">
+    <span class="split__title">©&nbsp;
+      2013&nbsp;Pragmatic    </span>
+    <span>Powered by <a href="#">WordPress</a></span>
+  </div><div class="grid__item one-twelfth"></div></div><!-- end div class="grid" -->
+</div></body></html>