HW3-Checkpoint

Class Presentation

by David Gonzalez

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<div style="padding-left: 70px;">
<div style="border: 1px solid blue;">
    <gcse:searchbox></gcse:searchbox>
</div>

<div style="border: 1px solid blue;">
    <gcse:searchresults></gcse:searchresults>
</div>
</div>
<div class="metag metagComment">
  <div class="pins">
  <span class= "ui-icon blog"></span>
  <span class= "ui-icon trusted"></span>
  <span class= "tag"> <i>#JQuery</i></span>
  </div>
  <div class="post">
    <span>

    </span> 
    <span> 
      <input type="text" placeholder="What do you think?"></input> 
      </span>
  </div>
  <div>
  <div class="reply">
  </div>
</div>

<div class="metag metagRank">
        <span class="input-group">
        <div class="input-increase">
          <button id="inc" class="vote-button btn btn-info fa fa-chevron-up faup">
          </button>
        </div>
        <div>
        <label class="voteCount"> </label>
        </div>
        <div class="input-decrease">
          <button id="dec" class="vote-button btn btn-info fa fa-chevron-down">
          </button>
        </div>
      </span>
      <span>
        <div>
          <i class="fa fa-thumb-tack toggableIcon" data-permisssion="file" data-permission-value="false" > 
          </i>
        </div>
        <div>
          <i class="fa fa-star-o favorite" ></i>
        </div>

      </span>
</div>

CSS

.metagRank{
  position: absolute;
  left:0px;
}
.tag{
  background-color:grey;
  color: white;
  padding-left: 2px;
  padding-right: 2px;
}
.star {
	text-align: center;
	margin: 0 auto;
	padding: 2rem;
  cursor: pointer;
}
.text {
float:left;
	margin: 0 auto;
 padding-left: -1px;
  width:120px;
}
.input-decrease {
float:left;
	margin: 0 auto;
 padding-left: -1px;
  width:230px;
}


.grayIcon{
    color: gray;
    
}
.blueIcon{
    color: DodgerBlue ;
    
}
    
		.ui-icon.wiki {
			background: url("http://www.valuechecker.co.uk/images/front/wiki/wiki_link_icon.png") 0 0 no-repeat;
		}
    .ui-icon.blog {
			background: url("https://computerplumber.com/wp-content/themes/computerplumber/images/ico/rss.gif") 0 0 no-repeat;
		}
     .ui-icon.apidoc {
			background: url("http://www.stein-dinse.biz/templates/sd/img/icon_pdf.gif") 0 0 no-repeat;
		}
      .ui-icon.tutorialstrusted {
			background: url("http://www.airtest.nl/airtemp/upload/33socialYoutubeIcon.png") 0 0 no-repeat;
		}
    

    .ui-icon.QA {
			background: url("https://www.playerauctions.com/images/icon_ask_v4.gif") 0 0 no-repeat;
		}
  
  .ui-icon.trusted{
			background: url("https://cng.i.lithium.com/html/rank_icons/ace_rank_influencer_13x13.png") 0 0 no-repeat;
		}
        
  .ui-icon.untrusted{
			background: url("http://www.kashmirvilla.com/images/close_icon.gif") 0 0 no-repeat;
		}
      .ui-icon.official{
			background: url("http://hg02.demo.agile55.com/templates/default/images/icon-tick-blue.png") 0 0 no-repeat;
		}
        .ui-icon.alternative{
			background: url("http://www.teamliquid.net/images/layout/refresh.png") 0 0 no-repeat;
		} . 
   

    .ui-icon.source-type-blog {
			background: url("images/24-rss-square.png") 0 0 no-repeat;
		}
    .ui-icon.source-type-ok {
			background: url("http://fakirdebrid.net/images/smilies/ok.png") 0 0 no-repeat;
		}

	

.demo table {
	  font-size: 1em;
    float:left;
    max-width:17px;
    height: 17px;
    border: 1px solid gray;
    padding: 2px;
   ...

JavaScript

var timeOut= null;
$(function() {
loadMetagRank();
});

function loadMetagRank(){
  $(".faup").click(function() {
    $(this).find('i').toggleClass('fa fa-chevron-up fa-chevron-up ');
  });
  var voteCount = 776;
  $(".metagRank .voteCount").html(voteCount);
  $("#inc").click(function(){
    voteCount++;
    $(".metagRank .voteCount").html(voteCount);
    $(".vote-button").prop( "disabled", true );
  });
  $("#dec").click(function(){
    voteCount--;
    $(".metagRank .voteCount").html(voteCount);
    $(".vote-button").prop( "disabled", true );
  });
  
  $('.favorite').click(function() {
    $(this).toggleClass('fa fa-star-o fa fa-star');
  });
  
  $(".toggableIcon").each(function(){
   if($(this).attr("data-permission-value")=="true")
   {
        $(this).addClass("blueIcon"); 
   }else{
       $(this).addClass("grayIcon"); 
   }
  });

  $(".toggableIcon").click(function(){
      if($(this).attr("data-permission-value")=="true")
      {
          $(this)
              .attr("data-permission-value", "false")
              .removeClass("blueIcon")
              .addClass("grayIcon"); 
      }else{
          $(this)
              .attr("data-permission-value", "true")
              .removeClass("grayIcon")
              .addClass("blueIcon"); 
      }

  }); 

}
      
function addMetagListener(){
  $("input.gsc-search-button.gsc-search-button-v2").click( function click(){
   setTimeout(appendMetag, 1500);
   console.log("search clicked");
   });
   $("input.gsc-input").keypress(function(e) {
      if(e.which == 13) {
         appendMetag();
         console.log("search enter");
     }
   });
}

function appendMetag(){	
  $("a.gs-title").hover( function hoverIn(){
		//$(this).css({"background-color": "#F3FFFF"});
    clearTimeout(timeOut);
    var metagPosition =  $(this).position();
    var elementWidth = $(this).width();    
    var metagRankPositionTop= metagPosition.top- 215;
    var metagRankPositionLeft= 0;
    metagPosition.left = metagPosition.left +...