The ThemeHandler class is removed

In Wigbi 1.0, I have implemented a quite powerful JavaScript/CSS bundling component, which can bundle multiple files and folders into a single file. This is really handy and also saves a lot of bandwidth, which will make the pages load faster.

However, since this component is introduced in Wigbi 1.0, it is time to say goodbye to the good old ThemeHandler class. Since its role has been reduced to just list all .css files within a folder, I consider its golden days to be gone.

So, instead of the ThemeHandler class, Wigbi will use a new configuration file key – cssFolders – and just add its value to the default CSS bundle tag that it generates when it is started. Simple, eh?

To override the value of this configuration key, set the value of the new Wigbi::cssFolders(…) property before starting Wigbi.

CSS/JS bundling reinvented

I have created a really smooth JS/CSS bundle solution in Wigbi 2.0. Where the Wigbi 1.0 bundle script was Wigbi specific, the new solution is independent of Wigbi and can be used for bundling your own custom CSS and JS files.

Furthermore, I have made it possible to bundle both files and folders. If you want the bundle script to bundle all files in a folder, simply provide the bundle script with the folder name.

The new bundle script will be available in Wigbi 2.0. Now, it is stored in a php page, but I will probably extract it to a class before releasing it.

Bundle CSS files

In Wigbi 0.99.2, all CSS files within the selected theme folder (if any), as well as within the wigbi/css folder, were added to the virtual bundle file wigbi/wigbi.css. The Wigbi theme engine parsed all files and added them to the virtual file output, as one mega string (or quite small if not that much CSS was defined

This is how the output could look:

.validation-error{border: solid 1px #bb4444;background: #ffdddd;}.RatingBar .images a{display: inline-block; width: 20px;height: 20px;}.RatingBar .unrated { background-image: url(../../../wigbi/content/img/controls/RatingBar/rating_unrated.gif); }.RatingBar .rated { background-image: url(../../../wigbi/content/img/controls/RatingBar/rating_rated.gif); }.RatingBar .half { background-image: url(../../../wigbi/content/img/controls/RatingBar/rating_half.gif); }.RatingBar .createdBy { background-image: url(../../../wigbi/content/img/controls/RatingBar/rating_createdBy.gif); }.RatingBar .hover { background-image: url(../../../wigbi/content/img/controls/RatingBar/rating_createdBy.gif); }@import url(../../../box.css);@import url(../../../classes.css);@import url(../../../controls.css);@import url(../../../design.css);@import url(../../../elements.css);@import url(../../../grid.css);@import url(../../../lists.css);html, body{margin: 0px;background-color: #FFFFFF;background-image: none;}.box{border: solid 1px #bbbbbb;}.box .body{padding: 5px;border: solid 2px white;background: #f6f6f6;}.w100 { width: 100%; }.w95 { width: 95%; }.w90 { width: 90%; }.w85 { width: 85%; }.w80 { width: 80%; }.w75 { width: 75%; }.w70 { width: 70%; }.w65 { width: 65%; }.w60 { width: 60%; }.w55 { width: 55%; }.w50 { width: 50%; }.w45 { width: 45%; }.w40 { width: 40%; }.w35 { width: 35%; }.w30 { width: 30%; }.w25 { width: 25%; }.w20 { width: 20%; }.w15 { width: 15%; }.w10 { width: 10%; }.w5 { width: 5%; }.align-center { text-align: center; }.align-left { text-align: left; }.align-right { text-align: right; }.valign-middle { vertical-align: middle; }.valign-top { vertical-align: top; }.float-left { float: left; }.float-right { float: right; }.bold { font-weight: bold; }.bold-italic { font-weight: bold; font-style: italic; }.italic { font-style: italic; }.invisible { display: none; }.clear { clear: both; }span.large { font-size: 1.3em; }span.yellow { color: #ff9900; }img.border{padding: 3px;border: solid 1px #cccccc;}#main-content-middle img.top{padding-bottom: 15px;}div.separator{margin-top: 10px;margin-bottom: 10px; font-size: 1px;height: 5px;border-bottom: solid 1px #dddddd;background-image: url(../../../img/themes/pro/bg_lines.gif);}#main-content-right div.section-title{height: 25px;padding: 3px;background: #f6f6f6;border-top: solid 1px #cccccc;border-bottom: solid 1px #cccccc;}#main-content-right img.section-icon{float: left;margin-right: 8px;}#main-content-right div.section-text{font-weight: bold;margin-top: 7px;margin-bottom: 15px;}.control input[type="text"],.control input[type="password"]{width: 98%;}.control textarea{width: 99%;}.control-body div{margin-bottom: 10px;}.control-footer{margin-top: 10px;text-align: right;}.NewsletterSubscribeForm .email { margin-bottom: 0px; }.NewsletterSubscribeForm .unsubscribe { text-align: right; }html, body{background: #222222;margin: 0px;margin-top: 50px;margin-bottom: 100px;}#main-top, #main-bottom{color: #c4c4c4;}#main-top{padding-bottom: 50px;background-position: bottom;background-repeat: repeat-x;background-image: url(../../../img/themes/pro/bg_top.jpg);}#main-logo{padding: 0px;padding-left: 150px;padding-top: 30px;background-image: url(../../../img/themes/pro/logo.gif);background-repeat: no-repeat;}.main-width{width: 900px;margin: 0 auto;}#main-content { background: white; }#main-content-left { width: 210px; }#main-content-middle { width: 412px; }#main-content-right { width: 220px; }#main-content-left,#main-content-middle,#main-content-right{padding-left: 10px;padding-right: 10px;}#main-content-left, #main-content-right {border-left: solid 1px #cccccc;border-right: solid 1px #cccccc;}#main-bottom{padding-top: 60px;background-position: top;background-repeat: repeat-x;background-image: url(../../../img/themes/pro/bg_bottom.jpg);}#main-bottom-left, #main-bottom-right{color: white;font-size: 0.82em;}#main-bottom-left{padding-right: 10px;border-right: solid 1px #000000;}#main-bottom-right{padding-left: 10px;border-left: solid 1px #333333;}html, body{color: #333333;font-family: Helvetica, Tahoma, Arial, sans-serif, Verdana, Geneva;font-size: 0.9em;}a{color: #ff9900;font-weight: bold;text-decoration: none;}a:hover { color: #ffbb00; }a, ul a { outline: none; }form{padding: 0px;margin: 0px;}h1{font-size: 1.65em;}h2{font-size: 1.4em;margin-top: 25px;border-bottom: solid 1px #cccccc;}h3{margin-top: 25px;margin-bottom: 10px;}h1, h2, h3 { color: #444444; }h1, h2.first, h3.first { margin-top: 0px; }h1.nospace, h2.nospace, h3.nospace { margin-bottom: 0px; }img, a img{border: none}table{border-collapse: collapse;}table td{padding-right: 5px;vertical-align: top;}.grid {}.grid .row {}.grid .row .cell { float:left; width: 100%; }.grid .row.one .cell { float:none; width: 100%; }.grid .row.two .cell { width:50%; }.grid .row.three .cell { width:33.2%; }.grid .row.four .cell { width:25%; }.grid .row.five .cell { width:20%; }.grid .row.six .cell { width:16.6%; }.grid .row.seven .cell { width:14.2%; }.grid .row.eight .cell { width:12.5%; }.grid .row.nine .cell { width:11.1%; }.grid .row.ten .cell { width:10%; }.grid .row, .grid .row .cell.last { overflow: hidden; }.grid .row .cell.last { float:none; width:auto; }.grid.border .row { border-top: solid 1px black; }.grid.border .row.last { border-bottom: solid 1px black; }.grid.border .row .cell { border: none; border-left: solid 1px black; }.grid.border .row .cell.last, .grid.border .row.one .cell { border-right: solid 1px black; }ul.horizontal,#main-menu ul, #main-bottom ul,#main-content-middle ul.titleMenu,#main-content-middle ul.images{margin: 0px;padding: 0px;list-style: none;}ul.horizontal li,#main-menu ul li, #main-bottom ul li,#main-content-middle ul.titleMenu li,#main-content-middle ul.images li{display:inline;}ul.vertical-list,#main-subMenu ul, #main-content-middle ul{border-top: solid 1px #cccccc;margin: 0px;padding: 0px;list-style: none;}ul.vertical-list li,#main-subMenu ul li, #main-content-middle ul li{border-bottom: solid 1px #cccccc;margin: 0px;padding: 5px;}ul.vertical-list li.even,#main-subMenu ul li.even, #main-content-middle ul li.even{background-color: #f3f3f3;}ul.vertical-list li.selected,#main-content-middle ul li.selected{border-bottom: solid 1px #bbbbbb;background-color: #eaeaea;}ul.vertical-list li.separator,#main-subMenu ul li.separator, #main-content-middle ul li.separator{font-size: 0.1em;background: url(../../../img/themes/pro/bg_lines.gif);}ul.vertical-list li:hover,#main-subMenu ul li:hover, #main-content-middle ul li:hover{background-color: #f9f9f9;}#main-menu li{font-size: 1.5em;font-weight: bold;}#main-menu li { margin-right: 10px; }#main-menu li a { margin-right: 5px; }#main-bottom li { margin-right: 5px; }#main-bottom li a { margin-right: 3px; }#main-menu li a, #main-subMenu li a, #main-bottom li a { text-decoration: none; }#main-menu li a, #main-bottom li a { color: white; }#main-subMenu li a { color: black; }#main-subMenu li a, #main-bottom li a { font-weight: normal; }#main-menu li.selected a, #main-subMenu li.selected a, #main-menu li a:hover, #main-subMenu li a:hover, #main-bottom li a:hover, #main-bottom li.section, #main-bottom li a.more{color: #ff9900; }#main-subMenu li.selected{background-image: url(../../../img/themes/pro/bg_subMenu_selected.gif);background-repeat: no-repeat;}#main-subMenu li.selected a{font-weight: bold;padding-left: 5px;}#main-bottom li.section { width: 90px; }#main-bottom li.section, #main-bottom li a.more { font-weight: bold; }#main-content-middle ul.titleMenu{padding:5px;padding-top:7px;margin:0px;margin-top: 10px;text-align: center;background-color: #f8f8f8;border-bottom: solid 1px #cccccc;}#main-content-middle ul.titleMenu li,#main-content-middle ul.titleMenu li:hover{background: none;padding: 10px;border-bottom: none;}#main-content-middle ul.titleMenu li a{color: #505050;}#main-content-middle ul.titleMenu li a:hover{color: #ff9900;}#main-content-middle ul.images{border: none;text-align: center;}#main-content-middle ul.images li,#main-content-middle ul.images li:hover{padding: 5px;border-bottom: none;}#main-content-middle ul.images img{padding: 3px;border: solid 1px #cccccc;}#main-content-middle ul.images img { margin-bottom: 8px; }#main-content-middle ul.songs, ul.songs{margin-top: 10px;}ul.songs li,ul.songs li:hover{line-height: 23px;padding: 0px;padding-top: 4px;}ul.songs li span { float: right; }#lbOverlay {position: fixed;z-index: 9999;left: 0;top: 0;width: 100%;height: 100%;background-color: #000;cursor: pointer;}#lbCenter, #lbBottomContainer {position: absolute;z-index: 9999;overflow: hidden;background-color: #fff;}.lbLoading {background: #fff url(../../../img/slimbox/loading.gif) no-repeat center;}#lbImage {position: absolute;left: 0;top: 0;border: 10px solid #fff;background-repeat: no-repeat;}#lbPrevLink, #lbNextLink {display: block;position: absolute;top: 0;width: 50%;outline: none;}#lbPrevLink {left: 0;}#lbPrevLink:hover {background: transparent url(../../../img/slimbox/prevlabel.gif) no-repeat 0 15%;}#lbNextLink {right: 0;}#lbNextLink:hover {background: transparent url(../../../img/slimbox/nextlabel.gif) no-repeat 100% 15%;}#lbBottom {font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;font-size: 10px;color: #666;line-height: 1.4em;text-align: left;border: 10px solid #fff;border-top-style: none;}#lbCloseLink {display: block;float: right;width: 66px;height: 22px;background: transparent url(../../../img/slimbox/closelabel.gif) no-repeat center;margin: 5px 0;outline: none;}#lbCaption, #lbNumber {margin-right: 71px;}#lbCaption {font-weight: bold;}

This is great, right? However, this approach – which is seen in various CSS bundle solutions around the web – suffers from a major flaw…file paths.

Since the virtual file does not exist at the same place in the file system as the parsed files (or most likely does not), all url paths will be invalid. This especially is the case when parsing files from many different folders.

To account for this, it is possible to adjust the urls and make them relative to the virtual file. This, however, involves way too much work and testing for me to be interested in implementing such a solution…at least now.

So, in Wigbi 1.0, I have taken a step back. The bundle file still remains, but instead of adding all file content to the output as above, I simply import all files of interest. The virtual file output will thus look something like this:

@import url("../css/default.css");@import url("../../wigbi/css2/x.css");@import url("../../wigbi/css2/y.css");

I’m sure that this is not as fast as the compact first option, but by linking to the CSS files like this, I do not have to account for file paths within each file. It works automatically…like a charm