Mild Fuzz JS Helpers

helperjs.scss

//Requires Compass

.cover_slide{
  	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
}

.popup_box{
  background: white;
  border-radius: 8px;
  border: 3px solid #999;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
  position: relative;
  margin: 30px auto;
  background: white;
  
  padding: 10px;
  @include min-height(60px);
  max-height: 85%;
  .blackButton{
    border-radius: 4px;
    display: block;
    text-align: center;
    margin-bottom: 12px;
  }
  .container{
      width: 100%;
      padding-bottom: 16px;
      
    }
  #message_form{
    width: 280px;
  }
  .close{
    
bottom: 0px;

background: white;
width: 96%;
height: 24px;
padding: 0;

    color: #850D0A;
    font-weight: bold;
    font-size: 13px;
    opacity: 1;
    position: absolute;
    left: 10px;
    
    display: block;
    
    &:hover{
      color: lighten(#850D0A, 10%);
      text-decoration: underline;
    }
    
  }
  p {
    margin-bottom: 10px;
  }
  .alerts{
    color: red;
  }
  span.alerts{
      
      &.inline{
        position: absolute;
        top: 130px;
        left: 100px;
      }
    }
  &.flash .container{
    text-align: center;
  }
}

helpers.js

//==-----
//Helpers
//==-----

var helper = {
	activeCover: false,
	
	closeButton: $("<a href=# class='close'>Close</a>")
};



helper.cover = function(blockClose){
  //requires helper.css.scss
  var cover = $("<div class='cover_slide'></div>").css({opacity: 0}).appendTo('body').animate({opacity: 1},200);
  if(blockClose){return;}
  $(document).on('keyup',function(e){
        if(e.keyCode == 27){
          $('.closeButton').off('click');
          $(document).off('keyup');
          helper.cover.close();
        }
  });

  $('body').on('click', '.cover_slide > *',function(e){
    e.stopPropagation();
  });
  $('body').on('click', '.cover_slide',function(){
    helper.cover.close();
    $('body').off('click', '.cover_slide');
  });
  helper.activeCover = cover;
  return cover;
};
helper.cover.close = function(){
	if(helper.activeCover){
		$(helper.activeCover).animate({opacity: 0},200, function(){$(this).remove();});
		helper.activeCover = false;
	}
	
};
helper.infoBoxAppended = function(contents, append, appendCallBack, custom_css, callback){
  helper.infoBox(contents, custom_css, callback);
  helper.activeCover.popup.container.append = append; //Store for global access
  $(append).appendTo(helper.activeCover.popup.container);
  if(typeof appendCallBack === "function") {appendCallBack(arguments);}
};

helper.infoBox = function(contents, custom_css, callback){
  helper.cover.close();
  var css_defaults = {
	width: "300px"
  };
  var css = $.extend({},css_defaults, custom_css);
  var cover = helper.cover();

  //Create popup
  helper.activeCover.popup =  $("<div class='popup_box'></div>").css({opacity: 0}).appendTo(cover);
  helper.activeCover.popup.css(css);
  helper.activeCover.popup.container =  $("<div class='container'></div>").appendTo(helper.activeCover.popup);
  helper.closeButton.appendTo(helper.activeCover.popup);
  helper.activeCover.popup.animate({opacity: 1},200);

  var methods = {
    resize: function(){
      if(helper.activeCover.popup.container.height() > (helper.activeCover.popup.height())){
        helper.activeCover.popup.container.css({
          height: helper.activeCover.popup.height()*0.9,
          overflow: 'scroll',
          'overflow-x': 'hidden',
          'overflow-y': 'scroll'
        });
      }
      while(($(contents).width() > helper.activeCover.popup.width()*0.95) && (helper.activeCover.popup.width() <= $(window).width()*0.85) && $(window).width() > 350){
        helper.activeCover.popup.css('width', helper.activeCover.popup.width()+10);
      }
    }
  };

  
  helper.closeButton.on('click',function(e){
    e.preventDefault();
    helper.closeButton.off('click');
    helper.cover.close();
  });
  $(contents).appendTo(helper.activeCover.popup.container);
  methods.resize();

  if(typeof callback ==="function"){callback();}
};

helper.loadTweets = function(user) {
    
    
    // set your twitter id
    
  
   
    // using jquery built in get json method with twitter api, return only one result
    $.getJSON('http://api.twitter.com/1/statuses/user_timeline.json?screen_name=' + user + '&count=5&callback=?', function(data)      {
       

        window.tweets = data;
        var tweets = "";
        // result returned
        for(var i=0;i<data.length; i++){
          
          
          var tweet = data[i].text;
          tweet = tweet.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig,function(x){
            
            
            return "<a href='"+x+"'>"+x+"</a>";
          });
          tweet = tweet.replace(/@([A-Za-z0-9_]+)/ig,function(x){
            no_at = x.replace("@","");
            
            
            return "<a href='http://twitter.com/"+no_at+"'>"+x+"</a>";
          });

          var in_reply = "", reply_to = data[i].in_reply_to_screen_name, reply_id = data[i].in_reply_to_status_id_str;

          
          if(typeof reply_to === "string"){
            in_reply = "<br><span class='in_reply' data-inreply='"+reply_to+"'><span>";
          }

          if(typeof reply_to === "string"){

            $.getJSON('http://twitter.com/users/show.json?screen_name=' + reply_to+'&count=1&callback=?', function(name){

              
              $("span.in_reply[data-inreply="+reply_to+"]").html("<a href='http://twitter.com/"+name.screen_name+"/status/"+reply_id+"'><span class='entypo'>(</span>In reply to "+name.name+"</a>");
            });
          }
          
          tweets += "<div class='tweet'><a href='http://twitter.com/"+data[i].screen_name+"/status/"+data[i].id_str+"'><img src='"+data[i].user.profile_image_url+"'/></a><p>"+tweet+in_reply+"</p></div>";
          
        }
        
        
        // output the result
        $("#tweets_holder").html(tweets);

        
        
    });
      
}