-
Notifications
You must be signed in to change notification settings - Fork 38
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
508 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,290 @@ | ||
// Simple Set Clipboard System | ||
// Author: Joseph Huckaby | ||
|
||
var ZeroClipboard = { | ||
|
||
version: "1.0.4", | ||
clients: {}, // registered upload clients on page, indexed by id | ||
moviePath: 'ZeroClipboard.swf', // URL to movie | ||
nextId: 1, // ID of next movie | ||
|
||
$: function(thingy) { | ||
// simple DOM lookup utility function | ||
if (typeof(thingy) == 'string') thingy = document.getElementById(thingy); | ||
if (!thingy.addClass) { | ||
// extend element with a few useful methods | ||
thingy.hide = function() { this.style.display = 'none'; }; | ||
thingy.show = function() { this.style.display = ''; }; | ||
thingy.addClass = function(name) { this.removeClass(name); this.className += ' ' + name; }; | ||
thingy.removeClass = function(name) { | ||
this.className = this.className.replace( new RegExp("\\s*" + name + "\\s*"), " ").replace(/^\s+/, '').replace(/\s+$/, ''); | ||
}; | ||
thingy.hasClass = function(name) { | ||
return !!this.className.match( new RegExp("\\s*" + name + "\\s*") ); | ||
} | ||
} | ||
return thingy; | ||
}, | ||
|
||
setMoviePath: function(path) { | ||
// set path to ZeroClipboard.swf | ||
this.moviePath = path; | ||
}, | ||
|
||
dispatch: function(id, eventName, args) { | ||
// receive event from flash movie, send to client | ||
var client = this.clients[id]; | ||
if (client) { | ||
client.receiveEvent(eventName, args); | ||
} | ||
}, | ||
|
||
register: function(id, client) { | ||
// register new client to receive events | ||
this.clients[id] = client; | ||
}, | ||
|
||
getDOMObjectPosition: function(obj) { | ||
// get absolute coordinates for dom element | ||
var info = { | ||
left: 0, | ||
top: 0, | ||
width: obj.width ? obj.width : obj.offsetWidth, | ||
height: obj.height ? obj.height : obj.offsetHeight | ||
}; | ||
|
||
while (obj) { | ||
info.left += obj.offsetLeft; | ||
info.top += obj.offsetTop; | ||
obj = obj.offsetParent; | ||
} | ||
|
||
return info; | ||
}, | ||
|
||
Client: function(elem) { | ||
// constructor for new simple upload client | ||
this.handlers = {}; | ||
|
||
// unique ID | ||
this.id = ZeroClipboard.nextId++; | ||
this.movieId = 'ZeroClipboardMovie_' + this.id; | ||
|
||
// register client with singleton to receive flash events | ||
ZeroClipboard.register(this.id, this); | ||
|
||
// create movie | ||
if (elem) this.glue(elem); | ||
} | ||
}; | ||
|
||
ZeroClipboard.Client.prototype = { | ||
|
||
id: 0, // unique ID for us | ||
ready: false, // whether movie is ready to receive events or not | ||
movie: null, // reference to movie object | ||
clipText: '', // text to copy to clipboard | ||
handCursorEnabled: true, // whether to show hand cursor, or default pointer cursor | ||
cssEffects: true, // enable CSS mouse effects on dom container | ||
handlers: null, // user event handlers | ||
|
||
glue: function(elem) { | ||
// glue to DOM element | ||
// elem can be ID or actual DOM element object | ||
this.domElement = ZeroClipboard.$(elem); | ||
|
||
// float just above object, or zIndex 99 if dom element isn't set | ||
var zIndex = 99; | ||
if (this.domElement.style.zIndex) { | ||
zIndex = parseInt(this.domElement.style.zIndex) + 1; | ||
} | ||
|
||
// find X/Y position of domElement | ||
var box = ZeroClipboard.getDOMObjectPosition(this.domElement); | ||
|
||
// create floating DIV above element | ||
this.div = document.createElement('div'); | ||
var style = this.div.style; | ||
style.position = 'absolute'; | ||
style.left = '' + box.left + 'px'; | ||
style.top = '' + box.top + 'px'; | ||
style.width = '' + box.width + 'px'; | ||
style.height = '' + box.height + 'px'; | ||
style.zIndex = zIndex; | ||
|
||
// style.backgroundColor = '#f00'; // debug | ||
|
||
var body = document.getElementsByTagName('body')[0]; | ||
body.appendChild(this.div); | ||
|
||
this.div.innerHTML = this.getHTML( box.width, box.height ); | ||
}, | ||
|
||
getHTML: function(width, height) { | ||
// return HTML for movie | ||
var html = ''; | ||
var flashvars = 'id=' + this.id + | ||
'&width=' + width + | ||
'&height=' + height; | ||
|
||
if (navigator.userAgent.match(/MSIE/)) { | ||
// IE gets an OBJECT tag | ||
var protocol = location.href.match(/^https/i) ? 'https://' : 'http://'; | ||
html += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+protocol+'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+width+'" height="'+height+'" id="'+this.movieId+'" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+ZeroClipboard.moviePath+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+flashvars+'"/><param name="wmode" value="transparent"/></object>'; | ||
} | ||
else { | ||
// all other browsers get an EMBED tag | ||
html += '<embed id="'+this.movieId+'" src="'+ZeroClipboard.moviePath+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+width+'" height="'+height+'" name="'+this.movieId+'" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+flashvars+'" wmode="transparent" />'; | ||
} | ||
return html; | ||
}, | ||
|
||
hide: function() { | ||
// temporarily hide floater offscreen | ||
if (this.div) { | ||
this.div.style.left = '-2000px'; | ||
} | ||
}, | ||
|
||
show: function() { | ||
// show ourselves after a call to hide() | ||
this.reposition(); | ||
}, | ||
|
||
destroy: function() { | ||
// destroy control and floater | ||
if (this.domElement && this.div) { | ||
this.hide(); | ||
this.div.innerHTML = ''; | ||
|
||
var body = document.getElementsByTagName('body')[0]; | ||
try { body.removeChild( this.div ); } catch(e) {;} | ||
|
||
this.domElement = null; | ||
this.div = null; | ||
} | ||
}, | ||
|
||
reposition: function(elem) { | ||
// reposition our floating div, optionally to new container | ||
// warning: container CANNOT change size, only position | ||
if (elem) { | ||
this.domElement = ZeroClipboard.$(elem); | ||
if (!this.domElement) this.hide(); | ||
} | ||
|
||
if (this.domElement && this.div) { | ||
var box = ZeroClipboard.getDOMObjectPosition(this.domElement); | ||
var style = this.div.style; | ||
style.left = '' + box.left + 'px'; | ||
style.top = '' + box.top + 'px'; | ||
} | ||
}, | ||
|
||
setText: function(newText) { | ||
// set text to be copied to clipboard | ||
this.clipText = newText; | ||
if (this.ready) this.movie.setText(newText); | ||
}, | ||
|
||
addEventListener: function(eventName, func) { | ||
// add user event listener for event | ||
// event types: load, queueStart, fileStart, fileComplete, queueComplete, progress, error, cancel | ||
eventName = eventName.toString().toLowerCase().replace(/^on/, ''); | ||
if (!this.handlers[eventName]) this.handlers[eventName] = []; | ||
this.handlers[eventName].push(func); | ||
}, | ||
|
||
setHandCursor: function(enabled) { | ||
// enable hand cursor (true), or default arrow cursor (false) | ||
this.handCursorEnabled = enabled; | ||
if (this.ready) this.movie.setHandCursor(enabled); | ||
}, | ||
|
||
setCSSEffects: function(enabled) { | ||
// enable or disable CSS effects on DOM container | ||
this.cssEffects = !!enabled; | ||
}, | ||
|
||
receiveEvent: function(eventName, args) { | ||
// receive event from flash | ||
eventName = eventName.toString().toLowerCase().replace(/^on/, ''); | ||
|
||
// special behavior for certain events | ||
switch (eventName) { | ||
case 'load': | ||
// movie claims it is ready, but in IE this isn't always the case... | ||
// bug fix: Cannot extend EMBED DOM elements in Firefox, must use traditional function | ||
this.movie = document.getElementById(this.movieId); | ||
if (!this.movie) { | ||
var self = this; | ||
setTimeout( function() { self.receiveEvent('load', null); }, 1 ); | ||
return; | ||
} | ||
|
||
// firefox on pc needs a "kick" in order to set these in certain cases | ||
if (!this.ready && navigator.userAgent.match(/Firefox/) && navigator.userAgent.match(/Windows/)) { | ||
var self = this; | ||
setTimeout( function() { self.receiveEvent('load', null); }, 100 ); | ||
this.ready = true; | ||
return; | ||
} | ||
|
||
this.ready = true; | ||
this.movie.setText( this.clipText ); | ||
this.movie.setHandCursor( this.handCursorEnabled ); | ||
break; | ||
|
||
case 'mouseover': | ||
if (this.domElement && this.cssEffects) { | ||
this.domElement.addClass('hover'); | ||
if (this.recoverActive) this.domElement.addClass('active'); | ||
} | ||
break; | ||
|
||
case 'mouseout': | ||
if (this.domElement && this.cssEffects) { | ||
this.recoverActive = false; | ||
if (this.domElement.hasClass('active')) { | ||
this.domElement.removeClass('active'); | ||
this.recoverActive = true; | ||
} | ||
this.domElement.removeClass('hover'); | ||
} | ||
break; | ||
|
||
case 'mousedown': | ||
if (this.domElement && this.cssEffects) { | ||
this.domElement.addClass('active'); | ||
} | ||
break; | ||
|
||
case 'mouseup': | ||
if (this.domElement && this.cssEffects) { | ||
this.domElement.removeClass('active'); | ||
this.recoverActive = false; | ||
} | ||
break; | ||
} // switch eventName | ||
|
||
if (this.handlers[eventName]) { | ||
for (var idx = 0, len = this.handlers[eventName].length; idx < len; idx++) { | ||
var func = this.handlers[eventName][idx]; | ||
|
||
if (typeof(func) == 'function') { | ||
// actual function reference | ||
func(this, args); | ||
} | ||
else if ((typeof(func) == 'object') && (func.length == 2)) { | ||
// PHP style object + method, i.e. [myObject, 'myMethod'] | ||
func[0][ func[1] ](this, args); | ||
} | ||
else if (typeof(func) == 'string') { | ||
// name of function | ||
window[func](this, args); | ||
} | ||
} // foreach event handler defined | ||
} // user defined handler for event | ||
} | ||
|
||
}; |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
|
||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="keywords" content="piknik, color, colour, color picker, colour picker"> | ||
<meta name="description" content="Piknik is a simple yet gorgeous color picker tool, brilliant when you need to see your color in full screen."> | ||
<title>Piknik Color Picker</title> | ||
<style type="text/css" media="screen"> | ||
@import url(picker.css); | ||
</style> | ||
<script src="ZeroClipboard.js" type="text/javascript"></script> | ||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> | ||
<script src="jquery.mousewheel.min.js" type="text/javascript"></script> | ||
<script src="picker.js" type="text/javascript"></script> | ||
</head> | ||
<body> | ||
|
||
<div id="color"> | ||
<!--[if IE]><p>Oh, you're using Internet Explorer? My condolences. This won't work at all, I'm afraid.</p><![endif]--> | ||
<p>Click anywhere to lock color — Scroll to change luminosity — Click values to copy</p> | ||
<ul> | ||
<li id="rgb">rgb(<span id="r"></span>,<span id="g"></span>,<span id="b"></span>)</li> | ||
<li id="hex">hex(<span id="hexval"></span>)</li> | ||
<li id="hsl">hsl(<span id="h"></span>,<span id="s"></span>,<span id="l"></span>)</li> | ||
</ul> | ||
</div> | ||
|
||
</body> | ||
</html> |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Oops, something went wrong.