rails31-markdown-editor 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/lib/rails31-markdown-editor/version.rb +1 -1
- data/vendor/assets/editor.html +29 -0
- data/vendor/assets/images/closelabel.png +0 -0
- data/vendor/assets/images/icon-sprite.png +0 -0
- data/vendor/assets/images/loading.gif +0 -0
- data/vendor/assets/index.html +29 -0
- data/vendor/assets/javascripts/application.js +3 -0
- data/vendor/assets/javascripts/editor.js +281 -0
- data/vendor/assets/javascripts/facebox.js +309 -0
- data/vendor/assets/javascripts/showdown.js +1361 -0
- data/vendor/assets/stylesheets/editor.css +306 -0
- data/vendor/assets/stylesheets/facebox.css +80 -0
- metadata +14 -3
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta http-equiv="Content-type" content="text/html;charset=utf-8">
|
|
5
|
+
<link rel="stylesheet" type="text/css" href="css/editor.css" media="all">
|
|
6
|
+
<link rel="stylesheet" type="text/css" href="css/facebox.css" media="all">
|
|
7
|
+
<script type="text/javascript" src="javascript/jquery.js"></script>
|
|
8
|
+
<script type="text/javascript" src="javascript/showdown.js"></script>
|
|
9
|
+
<script type="text/javascript" src="javascript/facebox.js"></script>
|
|
10
|
+
<script type="text/javascript" src="javascript/editor.js"></script>
|
|
11
|
+
<script type="text/javascript" src="javascript/application.js"></script>
|
|
12
|
+
<title>Editor</title>
|
|
13
|
+
</head>
|
|
14
|
+
<body>
|
|
15
|
+
<form>
|
|
16
|
+
<fieldset>
|
|
17
|
+
<textarea></textarea>
|
|
18
|
+
<div class="live-preview"></div>
|
|
19
|
+
<a href="javascript:void(0)" class="preview minibutton" title="Preview this Page">Preview</a>
|
|
20
|
+
</fieldset>
|
|
21
|
+
<fieldset>
|
|
22
|
+
<textarea></textarea>
|
|
23
|
+
<div class="live-preview"></div>
|
|
24
|
+
<a href="javascript:void(0)" class="preview minibutton" title="Preview this Page">Preview</a>
|
|
25
|
+
</fieldset>
|
|
26
|
+
<input type="submit" class="submit" value="Save" title="Save current changes">
|
|
27
|
+
</form>
|
|
28
|
+
</body>
|
|
29
|
+
</html>
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta http-equiv="Content-type" content="text/html;charset=utf-8">
|
|
5
|
+
<link rel="stylesheet" type="text/css" href="css/editor.css" media="all">
|
|
6
|
+
<link rel="stylesheet" type="text/css" href="css/facebox.css" media="all">
|
|
7
|
+
<script type="text/javascript" src="javascript/jquery.js"></script>
|
|
8
|
+
<script type="text/javascript" src="javascript/showdown.js"></script>
|
|
9
|
+
<script type="text/javascript" src="javascript/facebox.js"></script>
|
|
10
|
+
<script type="text/javascript" src="javascript/editor.js"></script>
|
|
11
|
+
<script type="text/javascript" src="javascript/application.js"></script>
|
|
12
|
+
<title>Editor</title>
|
|
13
|
+
</head>
|
|
14
|
+
<body>
|
|
15
|
+
<form>
|
|
16
|
+
<fieldset>
|
|
17
|
+
<textarea></textarea>
|
|
18
|
+
<div class="live-preview"></div>
|
|
19
|
+
<a href="javascript:void(0)" class="preview minibutton" title="Preview this Page">Preview</a>
|
|
20
|
+
</fieldset>
|
|
21
|
+
<fieldset>
|
|
22
|
+
<textarea></textarea>
|
|
23
|
+
<div class="live-preview"></div>
|
|
24
|
+
<a href="javascript:void(0)" class="preview minibutton" title="Preview this Page">Preview</a>
|
|
25
|
+
</fieldset>
|
|
26
|
+
<input type="submit" class="submit" value="Save" title="Save current changes">
|
|
27
|
+
</form>
|
|
28
|
+
</body>
|
|
29
|
+
</html>
|
|
@@ -0,0 +1,281 @@
|
|
|
1
|
+
(function($) {
|
|
2
|
+
|
|
3
|
+
// Private functions
|
|
4
|
+
getSelectionPosition = function($field ) {
|
|
5
|
+
if ($field.length) {
|
|
6
|
+
var start = 0, end = 0
|
|
7
|
+
var el = $field.get(0)
|
|
8
|
+
|
|
9
|
+
if (typeof el.selectionStart == "number" &&
|
|
10
|
+
typeof el.selectionEnd == "number") {
|
|
11
|
+
start = el.selectionStart
|
|
12
|
+
end = el.selectionEnd
|
|
13
|
+
}
|
|
14
|
+
else {
|
|
15
|
+
var range = document.selection.createRange()
|
|
16
|
+
var stored_range = range.duplicate()
|
|
17
|
+
stored_range.moveToElementText( el )
|
|
18
|
+
stored_range.setEndPoint( 'EndToEnd', range )
|
|
19
|
+
start = stored_range.text.length - range.text.length
|
|
20
|
+
end = start + range.text.length
|
|
21
|
+
|
|
22
|
+
// so, uh, we're close, but we need to search for line breaks and
|
|
23
|
+
// adjust the start/end points accordingly since IE counts them as
|
|
24
|
+
// 2 characters in TextRange.
|
|
25
|
+
var s = start
|
|
26
|
+
var lb = 0
|
|
27
|
+
var i
|
|
28
|
+
|
|
29
|
+
for ( i=0; i < s; i++ )
|
|
30
|
+
if (el.value.charAt(i).match(/\r/)) ++lb
|
|
31
|
+
|
|
32
|
+
if (lb) {
|
|
33
|
+
start = start - lb
|
|
34
|
+
lb = 0
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
var e = end
|
|
38
|
+
for (i=0; i < e; i++)
|
|
39
|
+
if (el.value.charAt(i).match(/\r/) ) ++lb
|
|
40
|
+
if (lb) end = end - lb
|
|
41
|
+
}
|
|
42
|
+
return {
|
|
43
|
+
start: start,
|
|
44
|
+
end: end
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
getSelection = function( $field ) {
|
|
50
|
+
var selStr = ''
|
|
51
|
+
var selPos
|
|
52
|
+
|
|
53
|
+
if ($field.length) {
|
|
54
|
+
selPos = getSelectionPosition($field)
|
|
55
|
+
selStr = $field.val().substring(selPos.start, selPos.end)
|
|
56
|
+
return selStr
|
|
57
|
+
}
|
|
58
|
+
return false
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
replaceSelection = function($field, replaceText, reselect, cursorOffset) {
|
|
62
|
+
var selPos = getSelectionPosition($field)
|
|
63
|
+
var fullStr = $field.val()
|
|
64
|
+
var selectNew = true
|
|
65
|
+
if (reselect === false) selectNew = false
|
|
66
|
+
|
|
67
|
+
var scrollTop = null
|
|
68
|
+
if ($field[0].scrollTop) scrollTop = $field[0].scrollTop
|
|
69
|
+
|
|
70
|
+
$field.val(fullStr.substring(0, selPos.start) + replaceText + fullStr.substring(selPos.end))
|
|
71
|
+
$field[0].focus()
|
|
72
|
+
|
|
73
|
+
if (selectNew) {
|
|
74
|
+
if ($field[0].setSelectionRange) {
|
|
75
|
+
if (cursorOffset) {
|
|
76
|
+
$field[0].setSelectionRange(selPos.start + cursorOffset, selPos.start + cursorOffset)
|
|
77
|
+
} else {
|
|
78
|
+
$field[0].setSelectionRange(selPos.start, selPos.start + replaceText.length)
|
|
79
|
+
}
|
|
80
|
+
} else if ($field[0].createTextRange) {
|
|
81
|
+
var range = $field[0].createTextRange()
|
|
82
|
+
range.collapse( true )
|
|
83
|
+
if (cursorOffset) {
|
|
84
|
+
range.moveEnd(selPos.start + cursorOffset)
|
|
85
|
+
range.moveStart(selPos.start + cursorOffset)
|
|
86
|
+
} else {
|
|
87
|
+
range.moveEnd('character', selPos.start + replaceText.length)
|
|
88
|
+
range.moveStart('character', selPos.start)
|
|
89
|
+
}
|
|
90
|
+
range.select()
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
if (scrollTop) {
|
|
95
|
+
// this jumps sometimes in FF
|
|
96
|
+
$field[0].scrollTop = scrollTop
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
selectWholeLine = function($field) {
|
|
101
|
+
var selPos = getSelectionPosition( $field )
|
|
102
|
+
var el = $field.get(0)
|
|
103
|
+
var i
|
|
104
|
+
for ( i=selPos.start-1; i >= 0; i-- )
|
|
105
|
+
if ( el.value.charAt(i).match(/\n/) ) break
|
|
106
|
+
i++
|
|
107
|
+
$field[0].setSelectionRange(i, selPos.end)
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
// Public function
|
|
111
|
+
$.markdownEditor = {}
|
|
112
|
+
$.markdownEditor.executeAction = function($editor, search, replace, whole_line, append) {
|
|
113
|
+
var textElement = $editor.find('textarea')
|
|
114
|
+
if (whole_line) selectWholeLine(textElement)
|
|
115
|
+
var txt = textElement.val()
|
|
116
|
+
var selPos = getSelectionPosition(textElement)
|
|
117
|
+
var selText = getSelection(textElement)
|
|
118
|
+
var repText = selText
|
|
119
|
+
var reselect = true
|
|
120
|
+
var cursor = null
|
|
121
|
+
|
|
122
|
+
if (search && replace) {
|
|
123
|
+
repText = repText.replace(search, replace)
|
|
124
|
+
// remove backreferences
|
|
125
|
+
repText = repText.replace(/\$[\d]/g, '')
|
|
126
|
+
if ( repText === '' ) {
|
|
127
|
+
cursor = replace.indexOf('$1')
|
|
128
|
+
|
|
129
|
+
repText = replace.replace( /\$[\d]/g, '' )
|
|
130
|
+
if ( cursor == -1 ) cursor = Math.floor( replace.length / 2 )
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
if (append) {
|
|
135
|
+
if ( repText == selText ) reselect = false
|
|
136
|
+
repText += append
|
|
137
|
+
}
|
|
138
|
+
if (repText) replaceSelection( textElement, repText, reselect, cursor)
|
|
139
|
+
$editor.find(".editor-body").keyup()
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
addFunctionBar = function($field) {
|
|
143
|
+
$field.before('\
|
|
144
|
+
<div class="function-bar">\
|
|
145
|
+
<div class="function-buttons">\
|
|
146
|
+
<a href="#" class="function-bold function-button">\
|
|
147
|
+
<span>Bold</span></a>\
|
|
148
|
+
<a href="#" class="function-italic function-button">\
|
|
149
|
+
<span>Italic</span></a>\
|
|
150
|
+
<a href="#" class="function-code function-button">\
|
|
151
|
+
<span>Code</span></a>\
|
|
152
|
+
<span class="function-divider"> </span>\
|
|
153
|
+
<a href="#" class="function-ul function-button">\
|
|
154
|
+
<span>Unordered List</span></a>\
|
|
155
|
+
<a href="#" class="function-ol function-button">\
|
|
156
|
+
<span>Ordered List</span></a>\
|
|
157
|
+
<a href="#" class="function-blockquote function-button">\
|
|
158
|
+
<span>Blockquote</span></a>\
|
|
159
|
+
<a href="#" class="function-hr function-button">\
|
|
160
|
+
<span>Horizontal Rule</span></a>\
|
|
161
|
+
<span class="function-divider"> </span>\
|
|
162
|
+
<a href="#" class="function-h1 function-button">\
|
|
163
|
+
<span>h1</span></a>\
|
|
164
|
+
<a href="#" class="function-h2 function-button">\
|
|
165
|
+
<span>h2</span></a>\
|
|
166
|
+
<a href="#" class="function-h3 function-button">\
|
|
167
|
+
<span>h3</span></a>\
|
|
168
|
+
<span class="function-divider"> </span>\
|
|
169
|
+
<a href="#" class="function-link function-button">\
|
|
170
|
+
<span>Link</span></a>\
|
|
171
|
+
<a href="#" class="function-image function-button">\
|
|
172
|
+
<span>Image</span></a>\
|
|
173
|
+
<span class="function-divider"> </span>\
|
|
174
|
+
<a href="#" class="function-help function-button">\
|
|
175
|
+
<span>Help</span></a>\
|
|
176
|
+
</div>\
|
|
177
|
+
</div>')
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
makeBindings = function($editor) {
|
|
181
|
+
var converter = new Showdown.converter;
|
|
182
|
+
$editor
|
|
183
|
+
.delegate(".function-button", "click", function(e){
|
|
184
|
+
e.preventDefault
|
|
185
|
+
})
|
|
186
|
+
.delegate(".function-bold","click", function() {
|
|
187
|
+
$.markdownEditor.executeAction($editor, /([^\n]+)([\n\s]*)/g, "**$1**$2")
|
|
188
|
+
})
|
|
189
|
+
.delegate(".function-italic","click", function() {
|
|
190
|
+
$.markdownEditor.executeAction($editor, /([^\n]+)([\n\s]*)/g, "_$1_$2")
|
|
191
|
+
})
|
|
192
|
+
.delegate(".function-code","click", function() {
|
|
193
|
+
$.markdownEditor.executeAction($editor, /([\s\S]*)/, "`$1`")
|
|
194
|
+
})
|
|
195
|
+
.delegate(".function-hr","click", function() {
|
|
196
|
+
$.markdownEditor.executeAction($editor, false,false, false,"\n***\n")
|
|
197
|
+
})
|
|
198
|
+
.delegate(".function-ul","click", function() {
|
|
199
|
+
$.markdownEditor.executeAction($editor, /(.+)([\n]?)/g, "* $1$2", true)
|
|
200
|
+
})
|
|
201
|
+
.delegate(".function-ol","click", function() {
|
|
202
|
+
var n = 0
|
|
203
|
+
$.markdownEditor.executeAction($editor, /(.+)([\n]?)/g, function(str, p1, p2, offset, s) { return ++n + ". " + p1 + p2}, true)
|
|
204
|
+
})
|
|
205
|
+
.delegate(".function-blockquote","click", function() {
|
|
206
|
+
$.markdownEditor.executeAction($editor, /(.+)([\n]?)/g, "> $1$2")
|
|
207
|
+
})
|
|
208
|
+
.delegate(".function-h1","click", function() {
|
|
209
|
+
$.markdownEditor.executeAction($editor, /(.+)([\n]?)/g, "# $1$2", true)
|
|
210
|
+
})
|
|
211
|
+
.delegate(".function-h2","click", function() {
|
|
212
|
+
$.markdownEditor.executeAction($editor, /(.+)([\n]?)/g, "## $1$2", true)
|
|
213
|
+
})
|
|
214
|
+
.delegate(".function-h3","click", function() {
|
|
215
|
+
$.markdownEditor.executeAction($editor, /(.+)([\n]?)/g, "### $1$2", true)
|
|
216
|
+
})
|
|
217
|
+
.delegate(".function-link", "click", function() {
|
|
218
|
+
console.log($editor)
|
|
219
|
+
$.facebox('<div id="markdown-editor-dialog"><h4>Insert Link</h4><fieldset><div class="field"><label for="Link Text">Link Text</label><input type="text" class="text" value="' + getSelection($editor.find(".editor-body")) + '"></div><div class="field"><label for="URL">URL</label><input type="text" class="href"></div></fieldset><div class="buttons"><a href="#" title="Cancel" class="cancel minibutton">Cancel</a><a href="#" title="OK" class="ok minibutton">OK</a></div></div>')
|
|
220
|
+
$("#markdown-editor-dialog").data("editor", $editor)
|
|
221
|
+
})
|
|
222
|
+
|
|
223
|
+
$("body").delegate(".ok", "click", function() {
|
|
224
|
+
dialog = $(this).closest("#markdown-editor-dialog")
|
|
225
|
+
href = dialog.find(".href").val()
|
|
226
|
+
text = dialog.find(".text").val()
|
|
227
|
+
if (href && text)
|
|
228
|
+
$.markdownEditor.executeAction(dialog.data("editor"), /([\s\S]*)/, '[' + text + '](' + href + ')')
|
|
229
|
+
$.facebox.close()
|
|
230
|
+
})
|
|
231
|
+
|
|
232
|
+
$("body").delegate(".cancel", "click", function() {
|
|
233
|
+
$.facebox.close()
|
|
234
|
+
})
|
|
235
|
+
|
|
236
|
+
$editor.find('.preview').bind("click", function() {
|
|
237
|
+
$.facebox('<div class="preview">' + converter.makeHtml($editor.find('.editor-body').val()) + '</div>')
|
|
238
|
+
})
|
|
239
|
+
$editor.find('.editor-body').keyup(function() {
|
|
240
|
+
var txt = $editor.find('.editor-body').val()
|
|
241
|
+
var html = converter.makeHtml(txt)
|
|
242
|
+
$editor.find(".live-preview").html(html)
|
|
243
|
+
})
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
// Jquery plugin
|
|
247
|
+
var methods = {
|
|
248
|
+
init: function(options) {
|
|
249
|
+
result = this.each(function() {
|
|
250
|
+
if ( options ) {
|
|
251
|
+
$.extend( settings, options )
|
|
252
|
+
}
|
|
253
|
+
$(this).addClass('editor-body')
|
|
254
|
+
if ($(this).closest('fieldset').length) $(this).closest('fieldset').addClass('editor')
|
|
255
|
+
else $(this).closest('form').addClass('editor')
|
|
256
|
+
addFunctionBar($(this))
|
|
257
|
+
makeBindings($(this).closest(".editor"))
|
|
258
|
+
})
|
|
259
|
+
return result
|
|
260
|
+
},
|
|
261
|
+
addFunctionBar: function() {
|
|
262
|
+
this.each(function() {
|
|
263
|
+
addFunctionBar($(this))
|
|
264
|
+
})
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
|
|
269
|
+
$.fn.markdownEditor = function(method) {
|
|
270
|
+
var settings = {
|
|
271
|
+
'function-bar' : 'basic'
|
|
272
|
+
}
|
|
273
|
+
if (methods[method]) return methods[method].apply(this, Array.prototype.slice.call(arguments, 1))
|
|
274
|
+
|
|
275
|
+
else if (typeof method === 'object' || ! method)
|
|
276
|
+
return methods.init.apply( this, arguments )
|
|
277
|
+
else
|
|
278
|
+
$.error('Method ' + method + ' does not exist on jQuery.markdownEditor' )
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
})(jQuery)
|
|
@@ -0,0 +1,309 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Facebox (for jQuery)
|
|
3
|
+
* version: 1.3
|
|
4
|
+
* @requires jQuery v1.2 or later
|
|
5
|
+
* @homepage https://github.com/defunkt/facebox
|
|
6
|
+
*
|
|
7
|
+
* Licensed under the MIT:
|
|
8
|
+
* http://www.opensource.org/licenses/mit-license.php
|
|
9
|
+
*
|
|
10
|
+
* Copyright Forever Chris Wanstrath, Kyle Neath
|
|
11
|
+
*
|
|
12
|
+
* Usage:
|
|
13
|
+
*
|
|
14
|
+
* jQuery(document).ready(function() {
|
|
15
|
+
* jQuery('a[rel*=facebox]').facebox()
|
|
16
|
+
* })
|
|
17
|
+
*
|
|
18
|
+
* <a href="#terms" rel="facebox">Terms</a>
|
|
19
|
+
* Loads the #terms div in the box
|
|
20
|
+
*
|
|
21
|
+
* <a href="terms.html" rel="facebox">Terms</a>
|
|
22
|
+
* Loads the terms.html page in the box
|
|
23
|
+
*
|
|
24
|
+
* <a href="terms.png" rel="facebox">Terms</a>
|
|
25
|
+
* Loads the terms.png image in the box
|
|
26
|
+
*
|
|
27
|
+
*
|
|
28
|
+
* You can also use it programmatically:
|
|
29
|
+
*
|
|
30
|
+
* jQuery.facebox('some html')
|
|
31
|
+
* jQuery.facebox('some html', 'my-groovy-style')
|
|
32
|
+
*
|
|
33
|
+
* The above will open a facebox with "some html" as the content.
|
|
34
|
+
*
|
|
35
|
+
* jQuery.facebox(function($) {
|
|
36
|
+
* $.get('blah.html', function(data) { $.facebox(data) })
|
|
37
|
+
* })
|
|
38
|
+
*
|
|
39
|
+
* The above will show a loading screen before the passed function is called,
|
|
40
|
+
* allowing for a better ajaxy experience.
|
|
41
|
+
*
|
|
42
|
+
* The facebox function can also display an ajax page, an image, or the contents of a div:
|
|
43
|
+
*
|
|
44
|
+
* jQuery.facebox({ ajax: 'remote.html' })
|
|
45
|
+
* jQuery.facebox({ ajax: 'remote.html' }, 'my-groovy-style')
|
|
46
|
+
* jQuery.facebox({ image: 'stairs.jpg' })
|
|
47
|
+
* jQuery.facebox({ image: 'stairs.jpg' }, 'my-groovy-style')
|
|
48
|
+
* jQuery.facebox({ div: '#box' })
|
|
49
|
+
* jQuery.facebox({ div: '#box' }, 'my-groovy-style')
|
|
50
|
+
*
|
|
51
|
+
* Want to close the facebox? Trigger the 'close.facebox' document event:
|
|
52
|
+
*
|
|
53
|
+
* jQuery(document).trigger('close.facebox')
|
|
54
|
+
*
|
|
55
|
+
* Facebox also has a bunch of other hooks:
|
|
56
|
+
*
|
|
57
|
+
* loading.facebox
|
|
58
|
+
* beforeReveal.facebox
|
|
59
|
+
* reveal.facebox (aliased as 'afterReveal.facebox')
|
|
60
|
+
* init.facebox
|
|
61
|
+
* afterClose.facebox
|
|
62
|
+
*
|
|
63
|
+
* Simply bind a function to any of these hooks:
|
|
64
|
+
*
|
|
65
|
+
* $(document).bind('reveal.facebox', function() { ...stuff to do after the facebox and contents are revealed... })
|
|
66
|
+
*
|
|
67
|
+
*/
|
|
68
|
+
(function($) {
|
|
69
|
+
$.facebox = function(data, klass) {
|
|
70
|
+
$.facebox.loading()
|
|
71
|
+
|
|
72
|
+
if (data.ajax) fillFaceboxFromAjax(data.ajax, klass)
|
|
73
|
+
else if (data.image) fillFaceboxFromImage(data.image, klass)
|
|
74
|
+
else if (data.div) fillFaceboxFromHref(data.div, klass)
|
|
75
|
+
else if ($.isFunction(data)) data.call($)
|
|
76
|
+
else $.facebox.reveal(data, klass)
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/*
|
|
80
|
+
* Public, $.facebox methods
|
|
81
|
+
*/
|
|
82
|
+
|
|
83
|
+
$.extend($.facebox, {
|
|
84
|
+
settings: {
|
|
85
|
+
opacity : 0.2,
|
|
86
|
+
overlay : true,
|
|
87
|
+
loadingImage : 'images/loading.gif',
|
|
88
|
+
closeImage : 'images/closelabel.png',
|
|
89
|
+
imageTypes : [ 'png', 'jpg', 'jpeg', 'gif' ],
|
|
90
|
+
faceboxHtml : '\
|
|
91
|
+
<div id="facebox" style="display:none;"> \
|
|
92
|
+
<div class="popup"> \
|
|
93
|
+
<div class="content"> \
|
|
94
|
+
</div> \
|
|
95
|
+
<a href="#" class="close"></a> \
|
|
96
|
+
</div> \
|
|
97
|
+
</div>'
|
|
98
|
+
},
|
|
99
|
+
|
|
100
|
+
loading: function() {
|
|
101
|
+
init()
|
|
102
|
+
if ($('#facebox .loading').length == 1) return true
|
|
103
|
+
showOverlay()
|
|
104
|
+
|
|
105
|
+
$('#facebox .content').empty().
|
|
106
|
+
append('<div class="loading"><img src="'+$.facebox.settings.loadingImage+'"/></div>')
|
|
107
|
+
|
|
108
|
+
$('#facebox').show().css({
|
|
109
|
+
top: getPageScroll()[1] + (getPageHeight() / 10),
|
|
110
|
+
left: $(window).width() / 2 - ($('#facebox .popup').outerWidth() / 2)
|
|
111
|
+
})
|
|
112
|
+
|
|
113
|
+
$(document).bind('keydown.facebox', function(e) {
|
|
114
|
+
if (e.keyCode == 27) $.facebox.close()
|
|
115
|
+
return true
|
|
116
|
+
})
|
|
117
|
+
$(document).trigger('loading.facebox')
|
|
118
|
+
},
|
|
119
|
+
|
|
120
|
+
reveal: function(data, klass) {
|
|
121
|
+
$(document).trigger('beforeReveal.facebox')
|
|
122
|
+
if (klass) $('#facebox .content').addClass(klass)
|
|
123
|
+
$('#facebox .content').empty().append(data)
|
|
124
|
+
$('#facebox .popup').children().fadeIn('normal')
|
|
125
|
+
$('#facebox').css('left', $(window).width() / 2 - ($('#facebox .popup').outerWidth() / 2))
|
|
126
|
+
$(document).trigger('reveal.facebox').trigger('afterReveal.facebox')
|
|
127
|
+
},
|
|
128
|
+
|
|
129
|
+
close: function() {
|
|
130
|
+
$(document).trigger('close.facebox')
|
|
131
|
+
return false
|
|
132
|
+
}
|
|
133
|
+
})
|
|
134
|
+
|
|
135
|
+
/*
|
|
136
|
+
* Public, $.fn methods
|
|
137
|
+
*/
|
|
138
|
+
|
|
139
|
+
$.fn.facebox = function(settings) {
|
|
140
|
+
if ($(this).length == 0) return
|
|
141
|
+
|
|
142
|
+
init(settings)
|
|
143
|
+
|
|
144
|
+
function clickHandler() {
|
|
145
|
+
$.facebox.loading(true)
|
|
146
|
+
|
|
147
|
+
// support for rel="facebox.inline_popup" syntax, to add a class
|
|
148
|
+
// also supports deprecated "facebox[.inline_popup]" syntax
|
|
149
|
+
var klass = this.rel.match(/facebox\[?\.(\w+)\]?/)
|
|
150
|
+
if (klass) klass = klass[1]
|
|
151
|
+
|
|
152
|
+
fillFaceboxFromHref(this.href, klass)
|
|
153
|
+
return false
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
return this.bind('click.facebox', clickHandler)
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/*
|
|
160
|
+
* Private methods
|
|
161
|
+
*/
|
|
162
|
+
|
|
163
|
+
// called one time to setup facebox on this page
|
|
164
|
+
function init(settings) {
|
|
165
|
+
if ($.facebox.settings.inited) return true
|
|
166
|
+
else $.facebox.settings.inited = true
|
|
167
|
+
|
|
168
|
+
$(document).trigger('init.facebox')
|
|
169
|
+
makeCompatible()
|
|
170
|
+
|
|
171
|
+
var imageTypes = $.facebox.settings.imageTypes.join('|')
|
|
172
|
+
$.facebox.settings.imageTypesRegexp = new RegExp('\\.(' + imageTypes + ')(\\?.*)?$', 'i')
|
|
173
|
+
|
|
174
|
+
if (settings) $.extend($.facebox.settings, settings)
|
|
175
|
+
$('body').append($.facebox.settings.faceboxHtml)
|
|
176
|
+
|
|
177
|
+
var preload = [ new Image(), new Image() ]
|
|
178
|
+
preload[0].src = $.facebox.settings.closeImage
|
|
179
|
+
preload[1].src = $.facebox.settings.loadingImage
|
|
180
|
+
|
|
181
|
+
$('#facebox').find('.b:first, .bl').each(function() {
|
|
182
|
+
preload.push(new Image())
|
|
183
|
+
preload.slice(-1).src = $(this).css('background-image').replace(/url\((.+)\)/, '$1')
|
|
184
|
+
})
|
|
185
|
+
|
|
186
|
+
$('#facebox .close')
|
|
187
|
+
.click($.facebox.close)
|
|
188
|
+
.append('<img src="'
|
|
189
|
+
+ $.facebox.settings.closeImage
|
|
190
|
+
+ '" class="close_image" title="close">')
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
// getPageScroll() by quirksmode.com
|
|
194
|
+
function getPageScroll() {
|
|
195
|
+
var xScroll, yScroll;
|
|
196
|
+
if (self.pageYOffset) {
|
|
197
|
+
yScroll = self.pageYOffset;
|
|
198
|
+
xScroll = self.pageXOffset;
|
|
199
|
+
} else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
|
|
200
|
+
yScroll = document.documentElement.scrollTop;
|
|
201
|
+
xScroll = document.documentElement.scrollLeft;
|
|
202
|
+
} else if (document.body) {// all other Explorers
|
|
203
|
+
yScroll = document.body.scrollTop;
|
|
204
|
+
xScroll = document.body.scrollLeft;
|
|
205
|
+
}
|
|
206
|
+
return new Array(xScroll,yScroll)
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
// Adapted from getPageSize() by quirksmode.com
|
|
210
|
+
function getPageHeight() {
|
|
211
|
+
var windowHeight
|
|
212
|
+
if (self.innerHeight) { // all except Explorer
|
|
213
|
+
windowHeight = self.innerHeight;
|
|
214
|
+
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
|
|
215
|
+
windowHeight = document.documentElement.clientHeight;
|
|
216
|
+
} else if (document.body) { // other Explorers
|
|
217
|
+
windowHeight = document.body.clientHeight;
|
|
218
|
+
}
|
|
219
|
+
return windowHeight
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
// Backwards compatibility
|
|
223
|
+
function makeCompatible() {
|
|
224
|
+
var $s = $.facebox.settings
|
|
225
|
+
|
|
226
|
+
$s.loadingImage = $s.loading_image || $s.loadingImage
|
|
227
|
+
$s.closeImage = $s.close_image || $s.closeImage
|
|
228
|
+
$s.imageTypes = $s.image_types || $s.imageTypes
|
|
229
|
+
$s.faceboxHtml = $s.facebox_html || $s.faceboxHtml
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
// Figures out what you want to display and displays it
|
|
233
|
+
// formats are:
|
|
234
|
+
// div: #id
|
|
235
|
+
// image: blah.extension
|
|
236
|
+
// ajax: anything else
|
|
237
|
+
function fillFaceboxFromHref(href, klass) {
|
|
238
|
+
// div
|
|
239
|
+
if (href.match(/#/)) {
|
|
240
|
+
var url = window.location.href.split('#')[0]
|
|
241
|
+
var target = href.replace(url,'')
|
|
242
|
+
if (target == '#') return
|
|
243
|
+
$.facebox.reveal($(target).html(), klass)
|
|
244
|
+
|
|
245
|
+
// image
|
|
246
|
+
} else if (href.match($.facebox.settings.imageTypesRegexp)) {
|
|
247
|
+
fillFaceboxFromImage(href, klass)
|
|
248
|
+
// ajax
|
|
249
|
+
} else {
|
|
250
|
+
fillFaceboxFromAjax(href, klass)
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
function fillFaceboxFromImage(href, klass) {
|
|
255
|
+
var image = new Image()
|
|
256
|
+
image.onload = function() {
|
|
257
|
+
$.facebox.reveal('<div class="image"><img src="' + image.src + '" /></div>', klass)
|
|
258
|
+
}
|
|
259
|
+
image.src = href
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
function fillFaceboxFromAjax(href, klass) {
|
|
263
|
+
$.get(href, function(data) { $.facebox.reveal(data, klass) })
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
function skipOverlay() {
|
|
267
|
+
return $.facebox.settings.overlay == false || $.facebox.settings.opacity === null
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
function showOverlay() {
|
|
271
|
+
if (skipOverlay()) return
|
|
272
|
+
|
|
273
|
+
if ($('#facebox_overlay').length == 0)
|
|
274
|
+
$("body").append('<div id="facebox_overlay" class="facebox_hide"></div>')
|
|
275
|
+
|
|
276
|
+
$('#facebox_overlay').hide().addClass("facebox_overlayBG")
|
|
277
|
+
.css('opacity', $.facebox.settings.opacity)
|
|
278
|
+
.click(function() { $(document).trigger('close.facebox') })
|
|
279
|
+
.fadeIn(200)
|
|
280
|
+
return false
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
function hideOverlay() {
|
|
284
|
+
if (skipOverlay()) return
|
|
285
|
+
|
|
286
|
+
$('#facebox_overlay').fadeOut(200, function(){
|
|
287
|
+
$("#facebox_overlay").removeClass("facebox_overlayBG")
|
|
288
|
+
$("#facebox_overlay").addClass("facebox_hide")
|
|
289
|
+
$("#facebox_overlay").remove()
|
|
290
|
+
})
|
|
291
|
+
|
|
292
|
+
return false
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
/*
|
|
296
|
+
* Bindings
|
|
297
|
+
*/
|
|
298
|
+
|
|
299
|
+
$(document).bind('close.facebox', function() {
|
|
300
|
+
$(document).unbind('keydown.facebox')
|
|
301
|
+
$('#facebox').fadeOut(function() {
|
|
302
|
+
$('#facebox .content').removeClass().addClass('content')
|
|
303
|
+
$('#facebox .loading').remove()
|
|
304
|
+
$(document).trigger('afterClose.facebox')
|
|
305
|
+
})
|
|
306
|
+
hideOverlay()
|
|
307
|
+
})
|
|
308
|
+
|
|
309
|
+
})(jQuery);
|