forked from cogdog/flickr-cc-helper
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (116 loc) · 5.26 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang='en'>
<head>
<title>flickr cc attribution bookmarklet maker</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<!--[if lt IE 9]><script type='text/javascript' src='assets/javascript/html5.js'></script><![endif]-->
<script type='text/javascript' src='assets/javascript/prettify.js'></script>
<script type='text/javascript' src='assets/javascript/jquery-1.7.1.min.js'></script>
<script type="text/javascript">
// SETUP
// default size for image used in HTML '_m'=240px, ''=500px, '_z' = 640px, '_c'=800px, '_b' = 1024px
var ps = '';
// default URL for hosted tool on github
var fu = 'http://cogdog.github.io/flickr-cc-helper/cc-attributor.html';
$(document).ready(function(){
// set default value of form fields
$('#furl').val(fu);
$('#isize').val(ps);
// call function to set value of text area and bookmarklet link
makebookmarklet();
$('#furl').change(function() {
makebookmarklet()
});
$('#isize').change(function() {
makebookmarklet()
});
$('#helperflavor').change(function() {
$('#furl').val('http://cogdog.github.io/flickr-cc-helper/' + $('#helperflavor').val() );
makebookmarklet()
});
// this function will update the bookmarklet based on the value of the image size and url field values
function makebookmarklet() {
if ( $('#isize').val() != '') {
sizestr = "+'&s=" + $('#isize').val() + "'";
} else {
sizestr = '';
}
// Here is the magic code
str = "javascript:(function(){fu=document.URL.split(\"/\")[5];helperURL='" + $('#furl').val() + "';fw=window.open(helperURL+'?flickd='+fu" + sizestr +", 'cc-helper', 'resizable=0,scrollbars=0,width=560,height=360'); setTimeout(function(){fw.focus();},1000);})()";
// insert into textarea
$('#marklet').val(str);
// make it thelink for drag action form hyperlink
$("a#mlink").attr('href', str);
}
});
</script>
<link rel='stylesheet' type='text/css' href='assets/css/style.css' />
<link rel='stylesheet' type='text/css' href='assets/css/bootstrap.css' />
<link rel='stylesheet' type='text/css' href='assets/css/prettify.css' />
<style type='text/css'>
label, input, textarea {display:block;}
label {margin:1em, 0, 0; font-weight:900; }
input, textarea {width: 500px;}
</style>
</head>
<body onload='prettyPrint()'>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">flickr cc attribution bookmark maker</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Make It</a></li>
<li><a href="http://cogdog.github.io/flickr-cc-helper/flavors.html">Flavors</a></li>
<li><a href="https://github.com/cogdog/flickr-cc-helper">Code</a></li>
<li><a href="http://cogdog.info/">by cogdog</a></li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div>
<div class='row-fluid'>
<div class='hero-unit' id="home">
<header>
<h1 class=''>flickr cc attribution helper</h1>
<p>Makes attributing flickr creative commons photos a simple cut and paste operation (<a href="https://github.com/cogdog/flickr-cc-helper">more...</a>)</li>
</header>
<h2 id="maker">Bookmarklet Generator</h2>
<p>Build your own attribution tool here; just drag blue button to your browser bar.</p>
<form>
<label for="isize"></label>
<span class="label label-important">Width of flickr image to use for HTML attribution</span><br />
<select id="isize">
<option value="_m">240px</option>
<option value="">500px</option>
<option value="_z">640px</option>
<option value="_c">800px</option>
<option value="_b">1024px</option>
</select>
<label for="helperflavor"></label>
<span class="label label-important">Variations for the kinds of attribution generated </span><br />
<a href="http://cogdog.github.io/flickr-cc-helper/flavors.html">See examples</a> for what each produces.<br />
<select id="helperflavor">
<option value="cc-attributor.html">Default Attributor (basic HTML)</option>
<option value="wp-attributor.html">Wordpress Attributor (with caption codes)</option>
<option value="stamp-attributor.html">Stamped Image Attributor</option>
</select>
<label for="furl"></label>
<span class="label label-important">location of attribution helper tool</span>
<input type="text" id="furl" />
<label for="marklet"></label>
<span class="label label-important">bookmarklet code</span>
<textarea id="marklet" rows="5"></textarea>
Drag link for <a href="#" id="mlink" class='btn btn-info'>flickr cc attribution helper</a> to your browser bar or copy code above if you like to make them by hand.
</form>
</div>
<footer class="span12">
<div class="alert">
a barking dog production •<a href="http://cogdog.info/"> cogdog.info</a> • <a href="http://cogdogblog.com">cogdogblog.com</a>
</div>
</footer>
</div>
<a href='https://github.com/cogdog/flickr-cc-helper' class='github-ribbon'><img src='assets/images/github-ribbons/white.png' /></a>
</div>
</body>
</html>