Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Get rid of chosen in favor of select2 #194

Merged
merged 2 commits into from
Jun 27, 2014
Merged

Get rid of chosen in favor of select2 #194

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
72f4ddd
Purge any remaining trace of chosen.js for the embetterment of humanity.
makmanalp Jun 27, 2014
b0ddac1
Replace chosen with select2 on other pages
makmanalp Jun 27, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 1 addition & 7 deletions django_files/observatory/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -459,12 +459,6 @@ def explore(request, app_name, trade_flow, country1, country2, product, year="20

# Return page without visualization data

# Making sure we return the product list every time
if prod_class == "sitc4":
product_list = Sitc4.objects.get_all(lang)
else:
product_list = Hs4.objects.get_all(lang)

# Record views in redis for "newest viewed pages" visualization
if settings.REDIS:
views_image_path = settings.STATIC_URL + "data/" + request_hash_string + ".png"
Expand Down Expand Up @@ -506,6 +500,7 @@ def explore(request, app_name, trade_flow, country1, country2, product, year="20
"country1_3char": countries[0].name_3char if countries[0] else "",
"country2_3char": countries[1].name_3char if countries[1] else "",
"product": product,
"product_code": product.code if not isinstance(product, basestring) else product,
"years_available": years_available,
"year": year,
"year_start": year_start,
Expand All @@ -514,7 +509,6 @@ def explore(request, app_name, trade_flow, country1, country2, product, year="20
"year2_list": year2_list,
"year_interval_list": year_interval_list,
"trade_flow_list": trade_flow_list,
"product_list": product_list,
"api_uri": api_uri,
"app_type": app_type,
"redesign_api_uri": redesign_api_uri,
Expand Down
97 changes: 13 additions & 84 deletions html/explore/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,13 @@
<link rel="stylesheet" href="{{ STATIC_URL }}css/normalize.css">
<link rel="stylesheet" href="{{ STATIC_URL }}css/style.css?{{ VERSION }}">
<link rel="stylesheet" href="{{ STATIC_URL }}js/libs/toastr/toastr.min.css" />
<link rel="stylesheet" href="{{ STATIC_URL }}js/libs/chosen/chosen.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.css" />
<link rel="stylesheet" href="{{ STATIC_URL }}js/libs/vizwiz/src/utils.slider.css?{{ VERSION }}" />
<link rel="stylesheet" href="{{ STATIC_URL }}js/libs/bootstro/bootstro.min.css"/>
<link rel='stylesheet' type='text/css' href='../media/js/libs/tipsy/tipsy.css'>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<link rel="stylesheet" href="{{ STATIC_URL }}css/countries.css?{{ VERSION }}" />

<link rel="stylesheet" href="{{ STATIC_URL }}js/libs/jquery-ui/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/widgets.css?{{ VERSION }}">
<!-- VizWiz -->
Expand Down Expand Up @@ -142,7 +140,7 @@ <h2 style="margin-left:10px; width:700px;" id="text_title" >{% if title %}{{titl

<button type="button" onclick="update_viz()" class="glyphicon glyphicon-refresh show-partner tooltipbs" data-toggle="tooltip" title="Refresh" data-placement="top" style="float:right; margin-right:10px; width:25px; height:20px; font-size:8px; visibility:hidden;"></button>

<select data-placeholder="All Countries" id="country1_select" class="chosen-select-deselect" tabindex="-1" style="width:130px">
<select data-placeholder="All Countries" id="country1_select" style="width:130px">

<option value=""></option>
</select>
Expand Down Expand Up @@ -184,7 +182,7 @@ <h2 style="margin-left:10px; width:700px;" id="text_title" >{% if title %}{{titl

<button type="button" onclick="update_viz();" class="glyphicon glyphicon-refresh show-country-product tooltipbs" data-toggle="tooltip" title="Refresh" data-placement="top" style="float:right; margin-right:10px; width:25px; height:20px; font-size:8px; visibility:hidden;"></button>

<select data-placeholder="All Products" id="country_product_select" class="chosen-select-deselect" tabindex="-1" style="width:130px">
<select data-placeholder="All Products" id="country_product_select" " style="width:130px">
<option value=""></option>

</select>
Expand All @@ -197,7 +195,7 @@ <h2 style="margin-left:10px; width:700px;" id="text_title" >{% if title %}{{titl

<button type="button" onclick="update_viz();" class="glyphicon glyphicon-refresh show-trade-partner tooltipbs" data-toggle="tooltip" title="Refresh" data-placement="top" style="float:right; margin-right:10px; width:25px; height:20px; font-size:8px; visibility:hidden;"></button>

<select data-placeholder="All Countries" id="country_trade_partner_select" class="chosen-select-deselect" tabindex="-1" style="width:130px;">
<select data-placeholder="All Countries" id="country_trade_partner_select" style="width:130px;">
<option value=""></option>
</select>
</div>
Expand Down Expand Up @@ -274,8 +272,7 @@ <h2 style="margin-left:10px; width:700px;" id="text_title" >{% if title %}{{titl

<button type="button" onclick="update_viz();" class="glyphicon glyphicon-refresh over-time tooltipbs" data-toggle="tooltip" title="Refresh" data-placement="top"style="float:right; margin-right:10px; width:25px; height:20px; font-size:8px; visibility:hidden;"></button>

<div id="year1" style="float:left; margin-left:10px;">
<select data-url_pos="5" id="year1_select" class="chosen-select-deselect" data-placeholder="All Countries" style="width:80px;">
<select id="year1_select" style="margin-left: 10px;">
{% for y in year1_list %}
{% if y == year or y == year_start %}
<option value="{{y}}" selected="selected">{{ y }}</option>
Expand All @@ -284,10 +281,8 @@ <h2 style="margin-left:10px; width:700px;" id="text_title" >{% if title %}{{titl
{% endif %}
{% endfor %}
</select>
</div>

<div id="year2" style="float:left; margin-left:10px;">
<select data-placeholder="End" class="chosen-select-deselect" id="year2_select" tabindex="-1" style="display: none;">
<select data-placeholder="End " id="year2_select" style="margin-left: 10px;">
<option value=""></option>
{% for y in year1_list %}
{% if y == year_end %}
Expand All @@ -297,7 +292,6 @@ <h2 style="margin-left:10px; width:700px;" id="text_title" >{% if title %}{{titl
{% endif %}
{% endfor %}
</select>
</div>
</div>

</div>
Expand Down Expand Up @@ -580,17 +574,9 @@ <h1>Click Here To Refresh The Visualization</h1>
</div>
<div class="vizControl col-md-4" style="float:left; margin-top:10px; position:relative; z-index:100;">
<span class="definition" style="font-weight:bold; display:inline;">Highlight:</span>

<span id="highlight">
{% if app_type = "casy" or app_type = "ccsy" %}
<select data-placeholder="All Producs" id="highlight_select" class="chosen-select-deselect" tabindex="-1" style="display:none;" onchange="highlight();" >
</select>
{% elif app_type = "csay" or app_type = "cspy" or app_type = "sapy" %}
<select data-placeholder="All Countries" id="highlight_select" class="chosen-select-deselect" tabindex="-1" style="display: none;" onchange="highlight();">
</select>
{% endif %}
<select id="highlight_select" onchange="highlight();" style="width: 140px"><option/></select>
</span>

</div>

</div>
Expand Down Expand Up @@ -790,9 +776,9 @@ <h1>Click Here To Refresh The Visualization</h1>

function highlight(value) {

var v = value ? value : $("#highlight_select").select2("val").trim();
{% if app_name == "product_space" or app_name == "rings" or app_type = "cspy" %}

var v = value ? value : $("#highlight").find(":selected").val().trim();
d3.select("#viz").call(chart.highlight([]));
d3.select("#viz").call(chart.highlight(v));

Expand All @@ -804,8 +790,6 @@ <h1>Click Here To Refresh The Visualization</h1>

{% if app_name == "pie_scatter" or app_name == "tree_map" or app_name == "stacked" %}

var v = value ? value : $("#highlight").find(":selected").val().trim();

{% if app_type = "casy" %}

if(v.length>0)
Expand Down Expand Up @@ -835,8 +819,7 @@ <h1>Click Here To Refresh The Visualization</h1>

function reset_highlight() {

$("#highlight").find(":selected").prop("selected", false);
$("#highlight_select").trigger("chosen:updated");
$("#highlight_select").select2("val", "");
queryParameters["highlight"] = "";
if(queryActivated)
updateURLQueryParameters();
Expand All @@ -849,15 +832,7 @@ <h1>Click Here To Refresh The Visualization</h1>
<span class="definition" style="font-weight:bold; display:inline;">Highlight:</span>

<span id="highlight">
{% if app_type = "casy" or app_type = "ccsy" %}
<select data-placeholder="All Products" id="highlight_select" class="chosen-select-deselect" tabindex="-1" style="display:none;" onchange="highlight();" >
<option value=""></option>
</select>
{% elif app_type = "csay" or app_type = "cspy" or app_type = "sapy" %}
<select data-placeholder="All Countries" id="highlight_select" class="chosen-select-deselect" tabindex="-1" style="display: none;" onchange="highlight();">
<option value=""></option>
</select>
{% endif %}
<select id="highlight_select" onchange="highlight();" style="width: 140px"><option/></select>
</span>

</div>
Expand Down Expand Up @@ -904,7 +879,6 @@ <h1>Click Here To Refresh The Visualization</h1>
<a style=" margin-left:150px; float:left;" href="http://www.hks.harvard.edu/centers/cid"><img src="media/img/all/logo_cid.png" alt="Center for International Development Logo"/></a>

<div class="language_select" style="float:right; margin-right:150px;">

<div class="text">
Language:
</div>
Expand Down Expand Up @@ -1044,7 +1018,7 @@ <h4 style="border-bottom: solid 1px #999; font-family:'PT Sans Narrow',Helvetica
<script src="//s7.addthis.com/js/300/addthis_widget.js"></script>
<script src="{{ STATIC_URL }}js/libs/bootstrap/js/bootstrap.js"></script>
<script src="{{ STATIC_URL }}js/libs/bootstro/bootstro.min.js"></script>
<script src="{{ STATIC_URL }}js/libs/chosen/chosen.jquery.min.js" ></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.min.js" ></script>

<!-- App -->
<script src="{{ STATIC_URL }}js/explore/general.js?{{ VERSION }}"></script>
Expand Down Expand Up @@ -1182,13 +1156,8 @@ <h4 style="border-bottom: solid 1px #999; font-family:'PT Sans Narrow',Helvetica
previous_image = "{{ STATIC_URL }}/img/empty_static.png",
static_url = "{{STATIC_URL}}";

// Use chosen plugin to make dropdowns look fancy
$(".dropdown_container select").chosen()
$(".nesting select").chosen()
// language select dropdown
$(".language_select select").chosen();
$(".language_select .chzn-search").hide();
$(".language_select select").chosen().change(function(){
$(".language_select select").on("change", function(){
// set session data to new language
var language = $(this).val();
window.location = "/set_language/"+language+"/";
Expand Down Expand Up @@ -1222,8 +1191,7 @@ <h4 style="border-bottom: solid 1px #999; font-family:'PT Sans Narrow',Helvetica
updateURLQueryParameters();

// Put once the visualization is loaded
$("#highlight_select").find('[value="'+queryParameters['highlight']+'"]').prop("selected", true);
$("#highlight_select").trigger("chosen:updated")
$("#highlight_select").select2("val", queryParameters['highlight']);

// $("input[name='level_detail']").prop("selected", false);

Expand Down Expand Up @@ -1276,45 +1244,6 @@ <h4 style="border-bottom: solid 1px #999; font-family:'PT Sans Narrow',Helvetica
// Be sure we came back to the top of the page
$(this).scrollTop(0);

$('.chosen-container').css('width', '150px');
$('#country1_select_chosen').css('width', '170px');
//$('#country1_select_chosen').css('font-size', '18px');
$('#year1_select_chosen').css('width', '60px');
$('#year2_select_chosen').css('width', '80px');

$('#country_trade_partner_select_chosen').css('width', '140px');
$('#country_product_select_chosen').css('width', '140px');

$("#country1 select").change(function() {
$("#country1_select_chosen .chosen-single span").css("background", "url('{{ STATIC_URL }}img/icons/flag_"+$(this).val()+".png') no-repeat");
$("#country1_select_chosen .chosen-single span").css("background-size", "25px");
$("#country1_select_chosen .chosen-single span").css("padding-left", "30px");
$("#country1_select_chosen .chosen-single span").css("margin-top", "-2px");
$("#country1_select_chosen .chosen-single span").css("color", "black");
});

$("#country-trade-partner select").change(function() {
$("#country_trade_partner_select_chosen .chosen-single span").css("background", "url('{{ STATIC_URL }}img/icons/flag_"+$(this).val()+".png') no-repeat");
$("#country_trade_partner_select_chosen .chosen-single span").css("background-size", "25px");
$("#country_trade_partner_select_chosen .chosen-single span").css("padding-left", "30px");
$("#country_trade_partner_select_chosen .chosen-single span").css("margin-top", "-2px");
});

// For some reason, $("#country1_select_chosen select").trigger("chosen:updated"); does not work
$("#country1_select_chosen .chosen-single span").css("background", "url('{{ STATIC_URL }}img/icons/flag_"+$("#country1 select").val()+".png') no-repeat");
$("#country1_select_chosen .chosen-single span").css("background-size", "25px");
$("#country1_select_chosen .chosen-single span").css("padding-left", "30px");
$("#country1_select_chosen .chosen-single span").css("margin-top", "-2px");

$("#country1_select_chosen .chosen-results").hover(function() {
$("#country1_select_chosen .chosen-results").css("color", "black");
});

$("#country_trade_partner_select_chosen .chosen-single span").css("background", "url('{{ STATIC_URL }}img/icons/flag_"+$("#country-trade-partner select").val()+".png') no-repeat");
$("#country_trade_partner_select_chosen .chosen-single span").css("background-size", "25px");
$("#country_trade_partner_select_chosen .chosen-single span").css("padding-left", "30px");
$("#country_trade_partner_select_chosen .chosen-single span").css("margin-top", "-2px");

$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
Expand Down
22 changes: 10 additions & 12 deletions html/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Cardo' rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.css" />
<link rel="stylesheet" href="media/css/normalize.css">
<link rel="stylesheet" href="media/css/style.css">
<link rel="stylesheet" href="media/js/libs/chosen/chosen.css" />

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
Expand Down Expand Up @@ -66,20 +66,18 @@ <h2 style="font-size:18px; margin-top:-33px; text-align:center; margin-left:0px;
</div> <!-- END #container -->

<script src="media/js/libs/jquery/jquery-1.10.2.min.js"></script>
<script src="media/js/libs/chosen/chosen.jquery.min.js" ></script>
<script src="media/js/libs/bootstrap/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.min.js" ></script>

<script>

// language select dropdown
$(".language_select select").chosen();
$(".language_select .chzn-search").hide();
$(".language_select select").chosen().change(function(){
// set session data to new language
var language = $(this).val();
window.location = "/set_language/"+language+"/";
});


// language select dropdown
$(".language_select select").select2();
$(".language_select select").on("change", function(){
// set session data to new language
var language = $(this).val();
window.location = "/set_language/"+language+"/";
});
// google analytics

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
Expand Down
Loading