angular-mini-preview
Version:
Simple Image Preview on hover for Angular.js directive.
1 lines • 1.96 kB
JavaScript
var app=angular.module("angular-mini-preview",[]);app.directive("miniPreview",function(){return{restrict:"A",link:function(a,b,c){var d="ng-mini-preview",e={width:300,height:200,scale:.25};b.addClass(d+"-anchor");var f=angular.element("<div>").addClass(d+"-wrapper");if("auto"==c.miniDirection){var g,h,i=b[0].getBoundingClientRect(),j=i.top;window.innerWidth?g=window.innerWidth:document.body&&document.body.clientWidth&&(g=document.body.clientWidth),window.innerHeight?h=window.innerHeight:document.body&&document.body.clientHeight&&(h=document.body.clientHeight);var k=h-i.bottom,l=i.left,m=g-i.right;c.miniDirection=j>k?l>m?"tl":"tr":l>m?"bl":"br"}f.css("tr"==c.miniDirection?{width:c.miniWidth||e.width+"px",height:c.miniHeight||e.height+"px",bottom:(b[0].height||b[0].offsetHeight)/2+"px",left:(b[0].width||b[0].offsetWidth)/2+"px"}:"tl"==c.miniDirection?{width:c.miniWidth||e.width+"px",height:c.miniHeight||e.height+"px",bottom:(b[0].height||b[0].offsetHeight)/2+"px",right:(b[0].width||b[0].offsetWidth)/2+"px"}:"bl"==c.miniDirection?{width:c.miniWidth||e.width+"px",height:c.miniHeight||e.height+"px",top:(b[0].height||b[0].offsetHeight)/2+"px",right:(b[0].width||b[0].offsetWidth)/2+"px"}:{width:c.miniWidth||e.width+"px",height:c.miniHeight||e.height+"px",top:(b[0].height||b[0].offsetHeight)/2+"px",left:(b[0].width||b[0].offsetWidth)/2+"px"});var n=angular.element("<div>").addClass(d+"-loading"),o=angular.element("<iframe>").addClass(d+"-frame").css({width:"400%",height:"400%",transform:"scale(0.25)","-ms-transform":"scale(0.25)","-moz-transform":"scale(0.25)","-webkit-transform":"scale(0.25)","-o-transform":"scale(0.25)"});if(f.append(n),f.append(o),b.append(f),c.lazyLoad)b.bind("mouseover",function(){var a=b.find("iframe");b.bind("mouseout",function(){a.attr("src","")}),a&&a.attr("src",c.miniPreview||c.href)});else{var o=b.find("iframe");b.bind("mouseout",function(){o.attr("src","")}),o&&o.attr("src",c.miniPreview||c.href)}}}});