Skip to content

Commit

Permalink
Fixed styles and tested download
Browse files Browse the repository at this point in the history
  • Loading branch information
@navilan
navilan committed Oct 31, 2011
1 parent 3f6f0ba commit afcca4a
Show file tree
Hide file tree
Showing 6 changed files with 215 additions and 96 deletions.
4 changes: 4 additions & 0 deletions README.markdown
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
275 changes: 187 additions & 88 deletions content/download/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}

Expand Down Expand Up @@ -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') }}" />
Expand All @@ -188,16 +286,17 @@ <h3>{{ cat.category }}</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>

Expand Down
24 changes: 20 additions & 4 deletions content/media/css/download.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand All @@ -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

Expand Down
1 change: 1 addition & 0 deletions requirements.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
5 changes: 2 additions & 3 deletions site.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion tools.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
-
Expand Down

0 comments on commit afcca4a

Please sign in to comment.