|
|
| (9 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| | + | {{HQ_Team_Information}} |
| | <html> | | <html> |
| | | | |
| − | <style>
| + | |
| − | /* BUTTON USED FOR DEMO */
| + | |
| − | .hide_info { background-color:#f2f2f2; padding:10px; text-align:center;font-weight:bold;padding-top:5px;cursor:pointer; float:right; z-index:50;}
| + | |
| − | .hide_info:hover { background-color:orange; }
| + | |
| − | </style>
| + | |
| | | | |
| | <div class="clear"></div> | | <div class="clear"></div> |
| Line 23: |
Line 20: |
| | | | |
| | <div class="clear"></div> | | <div class="clear"></div> |
| − |
| |
| − | <!--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <STYLE>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | .green_check_mark {background-color:green; color:white;}
| |
| − |
| |
| − | /* LAYOUT CLASSES */
| |
| − |
| |
| − | /* general layout class for team information page */
| |
| − | #team_information .layout { float:left; padding:10px 15px;}
| |
| − |
| |
| − | /* full width of content layout column */
| |
| − | #team_information .full_width{ width: 915px; }
| |
| − |
| |
| − | /* half width of content layout column */
| |
| − | #team_information .half_width { width: 442.3px; }
| |
| − |
| |
| − | /* third width of content layout column */
| |
| − | #team_information .third_width { width: 285px;}
| |
| − |
| |
| − |
| |
| − | /* GENERAL PAGE WRAPPING/HOLDING CLASSES */
| |
| − |
| |
| − | /* wrapping border for the content of the section, it can be collapse and expanded */
| |
| − | #team_information .section_collapse_wrapper { border: 2px solid white; background: white; float:left; width:auto; height:auto; margin-bottom:20px; }
| |
| − |
| |
| − | /* Section title ex:General - Checklist - Contact */
| |
| − | #team_information .section_title { background: white; color: #5ba88a; float:left; padding:10px; font-size:20px; font-weight: bold; width:98%; }
| |
| − |
| |
| − | /* Section title hover effect */
| |
| − | #team_information .section_title:hover { background: #5ba88a; color: white; cursor:pointer; }
| |
| − |
| |
| − | /* Section title triangle icon ▼ */
| |
| − | #team_information .section_title_icon{ float:left; }
| |
| − |
| |
| − | /*wrapper for the subtitle part ex: schools - team description - team status */
| |
| − | #team_information .subtitle_wrapper { border-bottom: 1px solid #d3d3d3; clear:both; float:left; height:30px; width:100%; }
| |
| − |
| |
| − | /*name holder*/
| |
| − | #team_information .subtitle_name{ float:left; width:78%; }
| |
| − |
| |
| − | /*info holder */
| |
| − | #team_information .subtitle_info { float:right; width:35px; height: 30px; padding-top:5px; }
| |
| − |
| |
| − | /*edit holder */
| |
| − | #team_information .subtitle_edit { float:right; width:55px; height: 25px; padding-top: 3px; }
| |
| − |
| |
| − | /* holds the data inside each section */
| |
| − | #team_information .subsection_content { padding: 15px; }
| |
| − |
| |
| − | /* items inside content part of each section */
| |
| − | #team_information .subsection_item { float:left;padding-right:15px; font-weight:bold; }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* STYLE AND CONTAINERS FOR THE BANNER PART */
| |
| − |
| |
| − | #team_information #ti_banner_wrapper { margin: 0px -15px 20px -15px; font-weight:bold; text-align:center; }
| |
| − |
| |
| − | #team_information .ti_banner_collapse { float: left; width: 59px; background-color: #f2f2f2; color: #5ba88a; padding: 12px 5px; font-size: 40px; height: 25px; }
| |
| − |
| |
| − | #team_information .ti_banner_collapse:hover { background-color: #5ba88a; color:white; cursor:pointer; }
| |
| − |
| |
| − | #team_information .ti_banner_team_name { float: left; font-size: 22px; width: 871px; text-align: left; padding: 15px 20px; background: #f2f2f2; }
| |
| − |
| |
| − |
| |
| − | .approved_green { padding-left: 10px; font-weight:bold; font-size:16px; padding-top:4px; margin-left:25px; color: green; }
| |
| − | .approved_red { padding-left: 10px; font-weight:bold; font-size:16px; padding-top:4px; margin-left:25px; color: red; }
| |
| − |
| |
| − |
| |
| − | /*#team_s_primary_pi .subsection_item, #team_s_secondary_pi .subsection_item, #team_s_instructor .subsection_item, #team_s_student_leader .subsection_item
| |
| − | {font-size:30px; font-weight:normal;} */
| |
| − |
| |
| − | .item_wrapper {clear:both;padding-top:10px; }
| |
| − |
| |
| − |
| |
| − | .check_item_wrap { margin-bottom:5px; height:25px;}
| |
| − |
| |
| − | .check_list_mark {width:25.5px; background-color: #e9232f; float:left;text-align:center; height:21px; padding-top:4px;}
| |
| − |
| |
| − | .mark_gray {background-color:#d3d3d3; color:#d3d3d3;}
| |
| − |
| |
| − | .mark_red {background-color:#e9232f; color:white;}
| |
| − |
| |
| − | .mark_green {background-color:green; color:white;}
| |
| − |
| |
| − | .mark_yellow {background-color: #f6af45; color:white;}
| |
| − |
| |
| − | .mark_rejected {background-color:#9d142a; color:#d3d3d3;}
| |
| − |
| |
| − |
| |
| − | .check_list_text { padding-left:40px; padding-top:4px; height:20.5px; border-bottom:1px solid #f2f2f2; background-color:white; color:#5ba88a; cursor:pointer; font-weight:bold; }
| |
| − |
| |
| − | .check_list_text:hover { color:white; border-bottom:1px solid #f27631; background-color:#f27631; }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* ROSTER ITEM WRAPPING */
| |
| − |
| |
| − | .roster_user_wrap { height:25px; margin-bottom:5px; clear:both; text-align:left; border-bottom:1px solid #f2f2f2; }
| |
| − |
| |
| − | .roster_user_s_name { float:left; width:240px; height: 22px; padding-top: 3px; }
| |
| − |
| |
| − | .roster_user_s_account { float:left;width:168px;height: 22px; padding-top: 3px; }
| |
| − |
| |
| − | .roster_user_s_mail { float:left; width:238px; height: 22px; padding-top: 3px; }
| |
| − |
| |
| − | .roster_user_s_age { float:left;width:70px; height: 22px; padding-top: 3px; text-align:center; }
| |
| − |
| |
| − | .roster_user_s_gender { float:left; width:88px; height: 22px; padding-top: 3px; text-align:center; }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* SPECIAL CLASSES */
| |
| − |
| |
| − | /* private info that is hidden by default */
| |
| − | #team_information .private_info {display:none;}
| |
| − |
| |
| − | #team_information .loading_info {color: #d3d3d3; }
| |
| − |
| |
| − |
| |
| − | /* link styling */
| |
| − | #team_information a { color:#f27631; font-weight:bold; text-decoration:none; }
| |
| − |
| |
| − | /* link styling hover */
| |
| − | #team_information a:hover { color: #fbceac; }
| |
| − |
| |
| − | /* list styling */
| |
| − | #team_information ul{ padding: 0px; }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* edit button */
| |
| − | #team_information .edit_button { background-color:white; color:#f27631; font-weight:bold; text-align:center; border: 2px solid #f27631; border-radius: 3px;
| |
| − | cursor:pointer; padding-right:2px;}
| |
| − |
| |
| − | /* edit button hover */
| |
| − | #team_information .edit_button:hover { background-color:#f27631; color: white;}
| |
| − |
| |
| − |
| |
| − | /* why button */
| |
| − | #team_information .why_button { border: 2px solid #5ba88a; color: #5ba88a; background-color: white; font-weight: bold; text-align: center; border-radius: 50%; float: none;
| |
| − | margin-right: 5px;margin-left: 5px; padding-left: 6px; padding-top: 2px; padding-right: 6px; padding-bottom: 2px; cursor: pointer; }
| |
| − |
| |
| − | /* why button hover */
| |
| − | #team_information .why_button:hover { background-color: #5ba88a; color:white; }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* Holds the content being loaded */
| |
| − |
| |
| − | .pop_box { display:none; left: 250px; top: 250px; background-color: white; padding: 15px; width: 500px; position: fixed;
| |
| − | border: 3px solid #f17530; border-radius: 3px; z-index: 100; }
| |
| − |
| |
| − |
| |
| − | .page_cover { display:none; z-index: 90; top: 0px; left: -20px; width: 100vw; height: 101%; float: left; position: absolute; opacity: 0.5; background-color: #b2b2b2; }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | /*For the pop why class,creates the close button X */
| |
| − | .pop_close { font-size: 25px; border: 3px solid #e9232f;; padding: 5px; padding-top: 0px; background-color: #e9232f; padding-right: 10px; color: white; border-radius: 5px;
| |
| − | cursor: pointer; font-weight: bold; width: 10px; height: 18px; float: right; }
| |
| − |
| |
| − |
| |
| − | .pop_close:hover { background-color: white; color: #e9232f; }
| |
| − |
| |
| − | #sideMenu {padding-bottom:0px; z-index: 0;}
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* save button */
| |
| − | #team_information .save_button { display:none; background:#177bf8; color: white; font-weight: bold; text-align: center; border: 3px solid #177bf8; width: 45px;
| |
| − | float: right; border-radius: 3px; cursor: pointer; padding-right: 2px; margin-top: 15px;}
| |
| − |
| |
| − | /* save button hover */
| |
| − | #team_information .save_button:hover { background-color: white; color:#177bf8; }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | textarea.styled {
| |
| − | width: 100%;
| |
| − | border: 2px solid #d3d3d3;
| |
| − | padding: 6px 5px 5px 5px;
| |
| − | height: 30px;
| |
| − | font-family: Arial;
| |
| − | font-size: 11px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | select.styled2 {
| |
| − | width: 100%;
| |
| − | border: 2px solid #d3d3d3;
| |
| − | padding: 5px;
| |
| − | height: 30px;
| |
| − | font-family: Arial;
| |
| − | font-size: 11px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | .pop_box .edit_subtitle_wrapper { border-bottom: 1px solid #d3d3d3; clear: both; float: left; height: 30px; width: 90%; margin-top: -30px}
| |
| − |
| |
| − | .input_field_wrapper { float:left; height:45px;clear:both; width:100%; }
| |
| − |
| |
| − | .input_field_name { float:left; font-weight:bold; width:10%; }
| |
| − | .track_name { width: 25%; }
| |
| − |
| |
| − | .input_field_data_container { float:left; padding-top: 1px; padding-left: 20px; width:86%; }
| |
| − | .track_data_container { width: 71%; }
| |
| − |
| |
| − |
| |
| − | </STYLE>
| |
| − | <!--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| | | | |
| | | | |
| Line 1,044: |
Line 818: |
| | | | |
| | </div> | | </div> |
| | + | </html> |
| | | | |
| − | | + | {{HQ_jquery}} |
| − | <script>
| + | |
| − | | + | |
| − | | + | |
| − | // PLACE JSON DATA
| + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | // Place team's general information
| + | |
| − | | + | |
| − | jQuery.getJSON("http://dev.igem.org/cgi/aj/team_json.cgi?team_name=ETH_Zurich&year=2015" , function( data ) {
| + | |
| − | | + | |
| − | | + | |
| − | //Places all the info in it's respective data-json-name
| + | |
| − | Object.keys(data).forEach(function(key) {
| + | |
| − | | + | |
| − | | + | |
| − | switch( data[key]) {
| + | |
| − | | + | |
| − | case 1:
| + | |
| − | case 0:
| + | |
| − | case "1":
| + | |
| − | case "0":
| + | |
| − | case "Pending":
| + | |
| − | case "Not Submitted":
| + | |
| − | case "NotSubmitted":
| + | |
| − | switch_checkmarks ($('[data-json-name="'+key+'"]'), data[key] );
| + | |
| − | break;
| + | |
| − |
| + | |
| − | default:
| + | |
| − | $('[data-json-name="'+key+'"]').removeClass('loading_info').text(data[key] );
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | | + | |
| − | // handle special cases
| + | |
| − | special_cases (data );
| + | |
| − | | + | |
| − | });
| + | |
| − |
| + | |
| − | finish_setup();
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | // in case the information needs to be treated a special way -
| + | |
| − | | + | |
| − | function special_cases (data) {
| + | |
| − | | + | |
| − | // team status
| + | |
| − | switch ( data.status) {
| + | |
| − | | + | |
| − | case "Accepted":
| + | |
| − | switch_checkmarks ( "#registration_completed > .check_list_mark" , 1 );
| + | |
| − | break;
| + | |
| − | | + | |
| − | case "Pending" :
| + | |
| − | switch_checkmarks ( "#registration_completed > .check_list_mark" , 0 );
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | // track preferences
| + | |
| − | | + | |
| − | $('[data-json-name="track_preferences_1"]').removeClass( "loading_info" ).text(data.track_preferences[0]);
| + | |
| − | $('[data-json-name="track_preferences_2"]').removeClass( "loading_info" ).text(data.track_preferences[1]);
| + | |
| − | $('[data-json-name="track_preferences_3"]').removeClass( "loading_info" ).text(data.track_preferences[2]);
| + | |
| − | | + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | // If a checkmark is used to display info, assign correct value
| + | |
| − | | + | |
| − | function switch_checkmarks (id_to_switch, value) {
| + | |
| − |
| + | |
| − | switch (value) {
| + | |
| − | case 1:
| + | |
| − | case "1":
| + | |
| − | $( id_to_switch ).html('').removeClass("mark_gray").addClass("mark_green").append(" ✔ ");
| + | |
| − | break;
| + | |
| − | | + | |
| − | case "Pending" :
| + | |
| − | $( id_to_switch ).html('').removeClass("mark_gray").addClass("mark_yellow").append(" ▲ ");
| + | |
| − | break;
| + | |
| − |
| + | |
| − | case 0:
| + | |
| − | case "0":
| + | |
| − | case "Not Submitted":
| + | |
| − | $( id_to_switch ).html('').removeClass("mark_gray").addClass("mark_red").append(" ✘ ");
| + | |
| − | break;
| + | |
| − | | + | |
| − | | + | |
| − | case "Rejected":
| + | |
| − | $( id_to_switch ).html('').removeClass("mark_gray").addClass("mark_rejected").append("ⓧ ");
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | // Clean up and make sure information that is missing is not left in loading state
| + | |
| − | | + | |
| − | function finish_setup ( ) {
| + | |
| − | | + | |
| − | //once the information is placed, create borders for the content
| + | |
| − | $('.section_collapse_wrapper').css('border', 'solid 2px #d3d3d3');
| + | |
| − | | + | |
| − | //if any items are missing, remove the "loading..." state
| + | |
| − | if ( $('.loading_info:visible').length =! 0) {
| + | |
| − | $(".loading_info").empty();
| + | |
| − | }
| + | |
| − | | + | |
| − | // any leftover checkmark boxes in gray make "x"
| + | |
| − | $( ".mark_gray" ).each(function() {
| + | |
| − | $(this).removeClass("mark_gray").addClass("mark_red").append(" ✘ ");
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | var str = $('[data-json-name="acceptance_date"]').text();
| + | |
| − | $('[data-json-name="acceptance_date"]').text( str.substring(0, 10) );
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | // Team's roster
| + | |
| − | jQuery.getJSON("http://dev.igem.org/aj/roster_json.cgi?team_name=ETH_Zurich&year=2014", function( data ) {
| + | |
| − | | + | |
| − | data.roster.forEach(function(member) {
| + | |
| − | memberRow = "<div class='roster_user_wrap'>";
| + | |
| − | memberRow += "<div class='roster_user_s_account'> <a href=''>" + member.username + "</a></div>";
| + | |
| − | memberRow += "<div class='roster_user_s_name'>" + member.full_name + "</div>";
| + | |
| − | memberRow += "<div class='roster_user_s_mail private_info'>" + member.email + "</div>";
| + | |
| − | memberRow += "<div class='roster_user_s_age private_info'>" + member.age + "</div>";
| + | |
| − | memberRow += "</div>";
| + | |
| − | | + | |
| − | | + | |
| − | switch ( member.role) {
| + | |
| − | case 'Advisor':
| + | |
| − | $('#advisors').append(memberRow);
| + | |
| − | break;
| + | |
| − | | + | |
| − | case 'Student':
| + | |
| − | $('#students').append(memberRow);
| + | |
| − | break;
| + | |
| − | | + | |
| − | case 'Primary Contact':
| + | |
| − | case 'Instructor':
| + | |
| − | $('#instructors').append(memberRow);
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | // Team's awards
| + | |
| − | | + | |
| − | jQuery.getJSON("https://igem.org/awards/json_dump.cgi", function( data ) {
| + | |
| − | | + | |
| − | //$('[data-json-name="'medal'"]').removeClass('loading_info').text(data[key] );
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | // COLLAPSE - EXPAND
| + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | | + | |
| − | | + | |
| − | //Collapse - expand individually functionality
| + | |
| − | | + | |
| − | $(".section_title").click(function() {
| + | |
| − | | + | |
| − | if ( $(this).next(' .section_collapse_wrapper:visible').length == 0 ) {
| + | |
| − | $(this).next(".section_collapse_wrapper").show();
| + | |
| − | $(this).find(".section_title_icon").html("▼  "); //▼
| + | |
| − | }
| + | |
| − | else {
| + | |
| − | $(this).next(".section_collapse_wrapper").hide();
| + | |
| − | $(this).find(".section_title_icon").html("▶  "); //▶
| + | |
| − | }
| + | |
| − | | + | |
| − | //switch the main controller to reflect current status
| + | |
| − | if ( $('.section_collapse_wrapper:visible').length == 0) {
| + | |
| − | $(".ti_banner_collapse").html("+");
| + | |
| − | }
| + | |
| − | | + | |
| − | else {
| + | |
| − | $(".ti_banner_collapse").html("-");
| + | |
| − | }
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | //Collapse all - expand all functionality
| + | |
| − | | + | |
| − | $(".ti_banner_collapse").click(function() {
| + | |
| − | | + | |
| − | if ( $('.section_collapse_wrapper:visible').length == 0) {
| + | |
| − | $(".section_collapse_wrapper").show();
| + | |
| − | $(".section_title_icon").html("▼  "); // ▼
| + | |
| − | $(".ti_banner_collapse").html("-");
| + | |
| − | }
| + | |
| − | | + | |
| − | else {
| + | |
| − | $(".section_collapse_wrapper").hide();
| + | |
| − | $(".section_title_icon").html("▶  "); // ▶
| + | |
| − | $(".ti_banner_collapse").html("+");
| + | |
| − | }
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | // EDIT AND WHY POP UPS
| + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | | + | |
| − | var which_pop_edit ; //STORES WHICH EDIT IS BEING CALLED, has a default assigned
| + | |
| − | var which_pop_why; //STORES WHICH WHY IS BEING CALLED, has a default assigned
| + | |
| − | | + | |
| − | $(document).ready(function(){
| + | |
| − | | + | |
| − | $(".edit_button").click(function() {
| + | |
| − | $(".pop_box").css("border-color", "#f17530");
| + | |
| − | pop_box_handle( "https://2016.igem.org/HQ:Team_Information_Edit" + " " + "#" + which_pop_edit , "edit" );
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | $(".why_button").click(function() {
| + | |
| − | | + | |
| − | $(".pop_box").css("border-color", "#5ba88a");
| + | |
| − | pop_box_handle( "https://2016.igem.org/HQ:Team_Information_Why" + " " + "#" + which_pop_why, "why" );
| + | |
| − | });
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | // Place content in the pop box
| + | |
| − | function pop_box_handle (div_to_load, type ) {
| + | |
| − | | + | |
| − | $( "#pop_content" ).load( div_to_load , function() {
| + | |
| − | //load the existing data into the text areas
| + | |
| − | fill_edit_input ();
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | // if it was an edit button, show the save button
| + | |
| − | if( type =="edit") {
| + | |
| − | $(".save_button").show();
| + | |
| − | $(".save_button").click( function () {
| + | |
| − | $(".save_button").html(" saved!");
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | var y = $( window ).height();
| + | |
| − | var y2 = $(".pop_box").height();
| + | |
| − | | + | |
| − | var x = y -y2;
| + | |
| − | alert( y, y2, x);
| + | |
| − | // show the pop box and the page cover
| + | |
| − | $(".pop_box").delay(100).fadeIn(400);
| + | |
| − | $(".page_cover").show();
| + | |
| − | | + | |
| − | | + | |
| − | // if the close button or the page cover are clicked, call the remove function
| + | |
| − | $(".pop_close").click(function() {
| + | |
| − | pop_box_remove();
| + | |
| − | });
| + | |
| − | | + | |
| − | $(".page_cover").click( function () {
| + | |
| − | pop_box_remove();
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | // Remove the pop box function
| + | |
| − | | + | |
| − | function pop_box_remove( ) {
| + | |
| − | $(".pop_box").hide();
| + | |
| − | $(".page_cover").hide();
| + | |
| − | $( "#pop_content" ).empty().html(" <h3> Loading... </h3> ");
| + | |
| − | $(".save_button").empty().hide().html("save");
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | // Fill the edit boxe's input fill
| + | |
| − | | + | |
| − | function fill_edit_input( ) {
| + | |
| − | | + | |
| − | jQuery.getJSON("http://dev.igem.org/cgi/aj/team_json.cgi?team_name=ETH_Zurich&year=2015" , function( data ) {
| + | |
| − | | + | |
| − | //for simple fill in text area fields
| + | |
| − | Object.keys(data).forEach(function(key) {
| + | |
| − | | + | |
| − | $('[data-json-field="'+key+'"]').text(data[key] );
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | // fill the objects with the possible drop down options
| + | |
| − | | + | |
| − | var regionOptions = { "Africa": "Africa", "Asia": "Asia", "Europe": "Europe", "Latin_America" : "Latin America", "North_America" : "North America" };
| + | |
| − | var kindOptions = { "collegiate": "Collegiate", "high_school": "High School ", "community_labs": "Community Labs" };
| + | |
| − | var sectionOptions = { "overgrad": "Overgrad", "undergrad": "Undergrad ", "community_labs": "Community Labs" };
| + | |
| − | var trackOptions = data.possible_tracks;
| + | |
| − | | + | |
| − | | + | |
| − | // fill each select with it's corresponding objects
| + | |
| − | $.each(regionOptions, function(value,key) {
| + | |
| − | $('[data-json-dropdown="region"]').append($("<option></option>").attr("value", value).text(key));
| + | |
| − | });
| + | |
| − | $.each(kindOptions, function(value,key) {
| + | |
| − | $('[data-json-dropdown="kind"]').append($("<option></option>").attr("value", value).text(key));
| + | |
| − | });
| + | |
| − | $.each(sectionOptions, function(value,key) {
| + | |
| − | $('[data-json-dropdown="section"]').append($("<option></option>").attr("value", value).text(key));
| + | |
| − | });
| + | |
| − | $.each(trackOptions, function(value, key) {
| + | |
| − | $('[data-json-dropdown="track_preferences_1"]').append($("<option></option>").attr("value", key).text(key));
| + | |
| − | $('[data-json-dropdown="track_preferences_2"]').append($("<option></option>").attr("value", key).text(key));
| + | |
| − | $('[data-json-dropdown="track_preferences_3"]').append($("<option></option>").attr("value", key).text(key));
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | //define the current selected value in each select
| + | |
| − | $('[data-json-dropdown="region"]').val( data.region);
| + | |
| − | $('[data-json-dropdown="kind"]').val( data.kind );
| + | |
| − | $('[data-json-dropdown="section"]').val( data.section );
| + | |
| − | | + | |
| − | $('[data-json-dropdown="track_preferences_1"]').val(data.track_preferences[0]);
| + | |
| − | $('[data-json-dropdown="track_preferences_2"]').val(data.track_preferences[1]);
| + | |
| − | $('[data-json-dropdown="track_preferences_3"]').val(data.track_preferences[2]);
| + | |
| − | });
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | //
| + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | // TESTING DIFFERENT STATES
| + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | var testing_if = false;
| + | |
| − | $("#super_user").click(function() {
| + | |
| − | if (testing_if == false) {
| + | |
| − | testing_if = true;
| + | |
| − | $(".private_info").show();
| + | |
| − | $("#super_user").html ("super user");
| + | |
| − | }
| + | |
| − | // to close
| + | |
| − | else if (testing_if == true) {
| + | |
| − | $(".private_info").hide();
| + | |
| − | $("#super_user").html ("no user");
| + | |
| − | testing_if = false;
| + | |
| − | }
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | //default collapse a section
| + | |
| − | // $("#Contact").next(".section_collapse_wrapper").hide( function () {
| + | |
| − | // $("#Contact > .section_title_icon").html("▶  ");
| + | |
| − | // });
| + | |
| − | | + | |
| − | // $("#General").next(".section_collapse_wrapper").hide( function () {
| + | |
| − | // $("#General > .section_title_icon").html("▶  ");
| + | |
| − | // });
| + | |
| − | | + | |
| − | | + | |
| − | // $("#Awards").next(".section_collapse_wrapper").hide( function () {
| + | |
| − | // $("#Awards > .section_title_icon").html("▶  ");
| + | |
| − | // });
| + | |
| − | | + | |
| − | // $("#Project").next(".section_collapse_wrapper").hide( function () {
| + | |
| − | // $("#Project > .section_title_icon").html("▶  ");
| + | |
| − | // });
| + | |
| − | | + | |
| − | | + | |
| − | // $("#Checklist").next(".section_collapse_wrapper").hide( function () {
| + | |
| − | // $("#Checklist > .section_title_icon").html("▶  ");
| + | |
| − | // });
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | </script>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | </html>
| + | |
