Archive for the 'MooTools' Category

MooTools 1.2 Image Protector: dwProtector

Igor Escobar on Ago 5th 2008

Hoje venho apresentar para vocês uma biblioteca que achei bastante interessante, escrita para o Framework javascript MooTools, chamada Image Protector, é uma grande novidade e talvez um grande marco para os designers que se descabelam para poder proteger suas imagens.

Esta biblioteca foi criada justamente para os designers ou artistas, que odeiam ver seus trabalhos copiados e ripados em segundos após dias, semanas, anos de trabalho dedicado, e o pior, as vezes até roubo de autoria.

O MooTools 1.2 Image Protector previne:

  • right-click "Save Image As".
  • Arrastar qualquer imagem para o desktop.
  • right-click "Save Background As".
  • right-click "View Background Image"

Segue abaixo tudo o que você precisa:

MooTools 1.2 Image Protector JavaScript Class

PLAIN TEXT
  1. //protector class
  2. var dwProtector = new Class({
  3.  
  4.     //implements
  5.     Implements: [Options],
  6.  
  7.     //options
  8.     options: {
  9.         image: 'blank.gif',
  10.         elements: $$('img'),
  11.         zIndex: 10
  12.     },
  13.    
  14.     //initialization
  15.     initialize: function(options) {
  16.         //set options
  17.         this.setOptions(options);
  18.        
  19.         //make it happen
  20.         this.protect();
  21.     },
  22.    
  23.     //a method that does whatever you want
  24.     protect: function() {
  25.         //for each image that needs be protected...
  26.         this.options.elements.each(function(el) {
  27.             //get the element's position, width, and height
  28.             var size = el.getCoordinates();
  29.             //create the protector
  30.             var p = new Element('img', {
  31.                 src: this.options.image,
  32.                 width: size.width,
  33.                 height: size.height,
  34.                 styles: {
  35.                     'z-index': this.options.zIndex,
  36.                     'left': size.left + 'px',
  37.                     'top': size.top + 'px',
  38.                     'position': 'absolute'
  39.                 }
  40.             }).inject($(document.body),'top');
  41.         },this);
  42.        
  43.     }
  44. });

Exemplo de uso

PLAIN TEXT
  1. window.addEvent('domready', function() {
  2.     var protector = new dwProtector({
  3.         image: '/blank.gif',
  4.         elements: $$('.protect')
  5.     });
  6. });

Caso você queira testar o MooTools 1.2 Image Protector, basta acessar.

[]'s
Igor.

Filed in Design, Java Script, MooTools, Utilidades | 8 responses so far