Permalink
Browse files

Fixed styles and tested download

  • Loading branch information...
1 parent 3f6f0ba commit afcca4a3ca8c4008f1bf6ffba5fbc2a110e878a0 @lakshmivyas lakshmivyas committed Oct 31, 2011
Showing with 215 additions and 96 deletions.
  1. +4 −0 README.markdown
  2. +187 −88 content/download/index.html
  3. +20 −4 content/media/css/download.styl
  4. +1 −0 requirements.txt
  5. +2 −3 site.yaml
  6. +1 −1 tools.yaml
View
@@ -64,3 +64,7 @@ Ensure that you are in the correct virtual environment(`workon jqt`).
3. `hyde serve -c dev.yaml` - starts the built in web server with url's for
swf files pointing to the local version sunder `content/swf`.
+# Building jquerytools for the download page
+
+1. `npm install` - Installs dependencies for the builder
+2. `node build.js` - Creates a dist directory under downloads and pulls the jquery tools source and compresses them.
@@ -8,79 +8,131 @@
{% block extra_script %}
<script>
- $(function() {
- // global navi
- $("#jqt2").addClass("active");
-
- var els = $(".listing :checkbox").attr("checked", false);
-
- // tooltips
- $(".listing img").tooltip(
- { position: 'right top', offset: [60, 10], delay: 50 }
- );
-
- // checkbox change
- els.change(function() {
-
- // count size
- var size = 0,
- count = 0,
- tools = "";
-
- els.filter(":checked").each(function() {
-
- // 170 bytes for stripping down comment size
- size += parseFloat($(this).val()) - 170;
- count++;
- tools += "&t=" + this.name;
- });
-
- // user information
- $("#selected").html('('+count+' of '+els.size()+' selected)');
- $("#minified").html(Math.round(size / 10) / 100 + ' Kb');
- $("#gzipped") .html(
- Math.round(size * 0.0322) / 100 + ' Kb <em>gzipped</em>'
- );
-
-
- // download link
- $("#downloadLink").attr("href", "{{ jqt.js }}?download=true"+tools);
- $("#tokens").html(tools);
-
-
- // highlight row
- var tr = $(this).parents("tr"), checked = this.checked;
-
- if (checked) {
- tr.addClass("selected");
- } else {
- tr.removeClass("selected");
- }
-
- // show/hide plugins
- if (!tr.is(".plugin")) {
- tr.nextAll().each(function() {
- if ($(this).is(".plugin")) {
- if (checked) {
- $(this).fadeIn();
- } else {
- $(this).hide().removeClass("selected").
- find(":checkbox").attr("checked", false);
- }
-
- } else {
- return false;
- }
- });
- }
-
- });
-
- // default selection
- $("#t_tabs, #t_tooltip, #t_scrollable, #t_overlay").each(function() {
- $(this).find(":checkbox").click().triggerHandler("change");
- });
+$(function() {
+
+ // global navi
+ $("#jqt2").addClass("active");
+
+ var els = $(".listing :checkbox, .listing :radio").attr("checked", false);
+
+ // tooltips
+ $(".listing img").tooltip({ position: 'right top', offset: [60, 10], delay: 50 });
+
+ var INFO;
+ $.ajax({
+ url: 'http://builder.jquerytools.org/info',
+ dataType: 'jsonp',
+ success: function (info) {
+ INFO = info;
+ $('input[name="build"]').change();
+ }
+ });
+
+ // returns a string representing the size in kb
+ var bytes_to_kb = function (bytes) {
+ return (Math.round(bytes / 102.4) / 10) + ' Kb';
+ };
+
+ // checkbox change
+ els.change(function() {
+
+ // count size
+ var size = 0,
+ count = 0,
+ tools = "";
+
+
+ var version_info;
+ $('input[name="build"]').each(function () {
+ var tr = $(this).parents('tr');
+ if (this.checked) {
+ tr.addClass('selected');
+ if (INFO) {
+ version_info = INFO[this.value];
+ }
+ }
+ else {
+ tr.removeClass('selected');
+ }
});
+
+ if (version_info) {
+ $('#jquery_version').text(version_info.jquery.version);
+ $('#jquery_size').text(bytes_to_kb(version_info.jquery.size));
+ $('.listing :checkbox').each(function () {
+ if (this.name !== 'include_jquery') {
+ var size = version_info.sizes[decodeURIComponent(this.name)];
+ var el = $('.size', $(this).parent().parent().parent());
+ el.text(size ? bytes_to_kb(size): '');
+ this.value = size;
+ }
+ });
+ }
+
+ els.filter(":checked").each(function() {
+ if (this.name === 'include_jquery') {
+ tools += "&include_jquery=true";
+ if (version_info) {
+ size += version_info.jquery.size;
+ }
+ }
+ else if (this.name !== 'build') {
+ // 170 bytes for stripping down comment size
+ size += parseFloat($(this).val()) - 170;
+ count++;
+ tools += "&t=" + this.name;
+ }
+ });
+
+ // user information
+ $("#selected").html('(' +count+ ' of ' + els.size() + ' selected)');
+ $("#minified").html(bytes_to_kb(size));
+ $("#gzipped") .html(bytes_to_kb(size * 0.322) + ' <em>gzipped</em>');
+
+ // build choice
+ var build = $('input[name="build"]').filter(':checked').val() || 'v1.2.6';
+
+ // download link
+ $("#downloadLink").attr(
+ "href",
+ "http://builder.jquerytools.org/" + build + "/jquery.tools.min.js?" + tools
+ );
+ $("#tokens").html(tools);
+
+
+ // highlight row
+ var tr = $(this).parents("tr"), checked = this.checked;
+
+ if (checked) {
+ tr.addClass("selected");
+ } else {
+ tr.removeClass("selected");
+ }
+
+ // show/hide plugins
+ if (!tr.is(".plugin")) {
+ tr.nextAll().each(function() {
+ if ($(this).is(".plugin")) {
+ if (checked) {
+ $(this).fadeIn();
+ } else {
+ $(this).hide().removeClass("selected").find(":checkbox").attr("checked", false);
+ }
+
+ } else {
+ return false;
+ }
+ });
+ }
+
+ });
+
+ // default selection
+ $("#t_tabs, #t_tooltip, #t_scrollable, #t_overlay").each(function() {
+ $(this).find(":checkbox").click().triggerHandler("change");
+ });
+ $("#build_stable").click().triggerHandler("change");
+});
</script>
{% endblock %}
@@ -147,21 +199,67 @@ <h3 style="color:#7788FF;margin:5px 0 15px 0;">Or download the source code</h3>
versions</strong> are available.
</p>
+<div class="blurb">
+<h3>Version</h3>
+<div class="table">
+ <table class="listing">
+ <tr>
+ <td>
+ <label>
+ <input type="radio" checked="checked" value="v1.2.6" name="build" id="build_stable" />
+ {{ jqt.v }} stable
+ </label>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <label>
+ <input type="radio" value="dev" name="build" id="build_dev" />
+ {{ jqt.dev.v }}
+ </label>
+ </td>
+ </tr>
+ </table>
+</div>
+
+<h3>Include jQuery</h3>
+<div class="table">
+ <table class="listing">
+ <tr id="t_jquery" >
+ <td>
+ <label>
+ <input type="checkbox" name="include_jquery" value="72174" /> jQuery
+ <span id="jquery_version"></span>
+ </label>
+ </td>
+ <td><small></small></td>
+ <td class="size" id="jquery_size"></td>
+ <td style="text-align:right;padding-right:5px">
+ <img src="http://flowplayer.org/img/global/info_small.png" />
+ <div class="tooltip">
+ <h3>jQuery 1.6.4</h3>
+ <p>All tools depend on this library (except flashembed). Can alternatively be included from googleapis (see below)</p>
+ </div>
+ </td>
+ </tr>
+ </table>
+</div>
+
{% macro render_tool_row(tool, is_plugin) %}
-{% set base = content_url('download/'~jqt.v~'/'~tool.file) %}
-{% set source = base~'.js' %}
-{% set min = base~'.min.js' %}
+{% set base = 'download/dist/v'~jqt.v~'/'~tool.file %}
+{% set src, min = (base~'.js', base~'.min.js') %}
+{% set min_size = site.content.resource_from_relative_path(min).source.size|default(0)|float %}
+{% set source_size = site.content.resource_from_relative_path(src).source.size|default(0)|float %}
+
<tr id="t_{{ tool.key }}" {% if is_plugin %}class="plugin"{% endif %}>
<td>
<label>
- <input type="checkbox" name="{{ tool.key }}" value="{{ tool.min_size }}" /> {{ tool.name }}
+ <input type="checkbox" name="{{ tool.file }}.js" value="{{ min_size }}" /> {{ tool.name }}
</label>
</td>
<td><small>{{ tool.requires }}</small></td>
- <td><a href="{{ source }}?download=true">{{ tool.source_size }}</a></td>
- <td><a href="{{ min }}?download=true">{{ tool.min_size }}</a></td>
-
+ <td class="size">{{ source_size }}</td>
<td style="text-align:right;padding-right:5px">
<img src="{{ media_url('img/global/info_small.png') }}" />
@@ -188,16 +286,17 @@ <h3 style="color:#7788FF;margin:5px 0 15px 0;">Or download the source code</h3>
</div>
{% endfor %}
-<a href="#" id="downloadLink">
- <img src="{{ media_url('img/global/commerce/download.png') }}"
- alt="Download jQuery Tools" />
-</a>
-
-<h3 style="margin:10px 0 20px 0">
- <em>Size</em>: <span id="minified"></span> / <span id="gzipped"></span>
-</h3>
-
+<div class="footer">
+ <a href="#" id="downloadLink">
+ <img src="{{ media_url('img/global/commerce/download.png') }}"
+ alt="Download jQuery Tools" />
+ </a>
+ <h3>
+ <em>Size</em>: <span id="minified"></span> / <span id="gzipped"></span>
+ </h3>
+</div>
+</div>
<a name="cdn"></a>
<h2>jQuery Tools from CDN</h2>
@@ -5,6 +5,9 @@
@import "include/code"
@import "include/tables"
+.blurb
+ margin-top 0
+ clearfix()
#content h1#hero
background:url({{ media_url('img/hero/plain.jpg') }}) no-repeat -31px 16px;
@@ -101,16 +104,32 @@ label {
font-weight:bold;
}
+.footer
+ clearfix()
+ margin 12px
+ float right
+ text-align right
+
div.table table
+ border-bottom 1px solid almostwhite
width 100%
-
td
padding 1px 2px
border-right 0
border-left 0
+ &:first-child
+ width 420px
+
+ &.size
+ width 96px
+ font-size 11px
+
img
cursor pointer
+ margin-top 6px
+ a
+ font-size 11px
.plugin
td
@@ -121,9 +140,6 @@ div.table table
color #666
font-size 11px
- a
- font-size 11px
-
tr.selected
background #ECF9FA url({{ media_url('img/gradient/h80.png') }}) repeat-x !important
View
@@ -3,4 +3,5 @@ pygments
-e git://github.com/hyde/hyde.git#egg=hyde
argparse
-e git://github.com/hyde/typogrify.git#egg=typogrify
+-e git://github.com/mitsuhiko/jinja2.git#egg=jinja2
pyquery
View
@@ -17,9 +17,8 @@ context:
jqt:
js: http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js
v: 1.2.6
- size: 4.45
- form:
- size: 100
+ dev:
+ v: 1.2.7-dev
flowplayer:
swf: /media/swf/flowplayer/flowplayer-3.2.7.swf
js: /media/js/flowplayer/flowplayer-3.2.6.min.js
View
@@ -20,7 +20,7 @@ categories:
name: Tooltip
key: tooltip
description: The basics of UI design
- file: tooltip/tooltip,
+ file: tooltip/tooltip
link: tooltip/index.html
plugins:
-

0 comments on commit afcca4a

Please sign in to comment.