magnific-popup
Version:
Lightbox and modal dialog plugin. Can display inline HTML, iframes (YouTube video, Vimeo, Google Maps), or an image gallery. Animation effects are added with CSS3 transitions. For jQuery or Zepto.
277 lines (217 loc) • 8.01 kB
HTML
<!-- Basic idea of such build tool is stolen from modernizr.com -->
<div id="mfp-build-tool" class="mfp-hide">
<h2>Magnific Popup v{{site.mfpversion}} Build Tool</h2>
<form id="mfp-build-form">
<p class="help-block">Here you can generate optimized version of main JS file. Please note that CSS you should download directly: <a target="_blank" href="https://raw.github.com/dimsemenov/Magnific-Popup/master/src/css/main.scss">Sass version</a> or <a target="_blank" href="https://raw.github.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">CSS version</a>.</p>
<label class="checkbox">
<input type="checkbox" name="inline" checked> Inline
</label>
<label class="checkbox">
<input type="checkbox" name="image" checked> Image
</label>
<label class="checkbox">
<input type="checkbox" name="ajax" checked> Ajax
</label>
<label class="checkbox">
<input type="checkbox" name="iframe" checked> Iframe
</label>
<label class="checkbox">
<input type="checkbox" name="gallery" checked> Gallery
</label>
<label class="checkbox">
<input type="checkbox" name="retina" checked> High-DPI (retina) support for image type
</label>
<label class="checkbox">
<input type="checkbox" name="imagezoom" checked> Image zoom animation
</label>
<label class="checkbox">
<input type="checkbox" name="fastclick" checked> Fast tap for gallery arrows
</label>
</form>
<br/>
<div>
<button id="mfp-build-button">Generate build</button>
<label class="checkbox">
<input id="mfp-minify" type="checkbox" name="minify" checked="checked"> Minify code
</label>
</div>
<br/>
<p id="mfp-build-status" style="display:none"></p>
<br/>
<textarea id="mfp-build-tool-out" style="width: 100%; height: 300px; display:none;"></textarea>
</div>
<script type="text/javascript">
$(document).ready(function($) {
$('.mfp-build-tool-link').magnificPopup({closeBtnInside:true, type:'inline', midClick: true});
var h = window.location.hash;
if(h.indexOf('build=') > -1) {
var formInputs = $('#mfp-build-form input');
if(h.indexOf('&') > 0) {
h = h.substr(0, h.indexOf('&'));
}
var items = h.substr(h.indexOf('build=') + 6, h.length).split('+');
for(var i = 0; i < items.length; i++) {
var name = items[i];
if(name) {
formInputs.filter('[name="' +name+ '"]').addClass('present');
}
}
formInputs.not('.present').prop('checked', false);
}
var button = $('#mfp-build-button').click(function(e) {
e.preventDefault();
button.attr('disabled', 'disabled');
var statusTimeout;
var setStatus = function(msg, type) {
clearTimeout(statusTimeout);
$('#mfp-build-status').html('<span class="'+type+'">'+msg+'</span>').show();
};
setStatus('Wait a moment please...', 'progress');
$('#mfp-build-tool-out').val( '' );
var minify = $('#mfp-minify')[0].checked;
var removeModule = function(source, key) {
source = source.replace(new RegExp("\\/\\*>>"+key+"\\*\\/[\\s|\\S]*?\\/\\*>>"+key+"\\*\\/", "ig"), "");
return source;
};
var onError = function() {
setStatus("Error: Build tool wasn't able to GET the js file. Please try again or make file by yourself using Grunt.", 'error');
};
var version = '{{site.mfpversion}}';
var loadedScripts = [];
var onScriptsLoaded = function() {
var src = loadedScripts[0];
var hash = '',
name;
$('#mfp-build-form input').each(function() {
name = $(this).attr('name');
if( this.checked ) {
hash += name + '+';
} else {
src = removeModule(src, name);
}
});
var output = '';
if(hash) {
hash = hash.substr(0, hash.length-1);
}
if(minify) {
src = uglify(src, ["--extra","--unsafe"]);
output = '// Magnific Popup v'+version+' by Dmitry Semenov' + "\n";
output += '// http://bit.ly/magnific-popup' + (hash ? '#build=' + hash : '') + "\n" + src;
} else {
output = src;
}
if(!hash) {
hash = 'core';
} else {
hash = 'core+' + hash;
}
$('#mfp-build-tool-out').val( output ).show();
button.removeAttr('disabled');
setStatus('Magnific Popup main js file successfully generated! You can copy generated code from textarea below.' + (hash ? (' Your build includes: <strong>' + hash.split('+').join(', ')) + '</strong>. ' : ''), 'success');
};
$.ajax({
url:"dist/jquery.magnific-popup.js?v="+version,
dataType: 'text',
success: function( data) {
loadedScripts[0] = data;
if(loadedScripts[1]) {
onScriptsLoaded();
}
},
error: onError
});
$.ajax({
url:"third-party-libs/uglify.js",
dataType: 'script',
cache: true,
success: function(data) {
loadedScripts[1] = data;
if(loadedScripts[0]) {
onScriptsLoaded();
}
},
error: onError
});
});
/* build tool END */
/**
* Popup with source code for each example
*/
var example,
getCode,
CSS,
JS,
HTML,
highlighterLoaded;
var formatCode = function (str) {
if(str) {
// replace special chars
str = str.replace(/[&<>"']/g, function($0) {
return "&" + {"&":"amp", "<":"lt", ">":"gt", '"':"quot", "'":"#39"}[$0] + ";";
});
// remove spaces from each line based on spaces on first line
var firstLineLength = str.match(/^(\s*)/)[1].length;
var regExp = new RegExp('^ {' + (firstLineLength-1) + '}', "gm");
str = str.replace(regExp, '');
// replace spaces with tabs
str = str.replace(/ /g,'\t');
str = $.trim(str);
}
return str;
};
var highlight = function() {
hljs.highlightBlock(JS.find('code')[0]);
if(CSS)
hljs.highlightBlock(CSS.find('code')[0]);
if(HTML)
hljs.highlightBlock(HTML.find('code')[0]);
};
$('.example').each(function() {
$(this).find('h3').click(function() {
var example = $(this).parent('.example');
var getCodeWindow = $('<div class="get-code-window"><h1>'+example.find('h3').text()+'</h1></div>');
JS = $('<div class="highlight"><pre><code class="javascript">'+formatCode(example.find('script').eq(0).html())+'</code></pre></div>');
CSS = example.find('style');
if(CSS.length) {
CSS = $('<div class="highlight"><pre><code class="css">'+formatCode(CSS.html())+'</code></pre></div>');
} else {
CSS = '';
}
HTML = example.find('.html-code');
if(HTML.length) {
HTML = $('<div class="highlight"><pre><code class="xml html">'+formatCode(HTML.html())+'</code></pre></div>');
} else {
HTML = '';
}
if(!highlighterLoaded) {
highlighterLoaded = true;
var script = document.createElement("script"),
$script = $(script);
script.src = 'http://yandex.st/highlightjs/7.3/highlight.min.js';
if(window.jQuery) {
$.getScript(script.src , function() {
highlight();
});
} else {
$(script).appendTo("head").on("load", function() {
highlight();
});
}
} else {
highlight();
}
getCodeWindow.append(JS);
getCodeWindow.append(HTML);
getCodeWindow.append(CSS);
getCodeWindow.append('<p>Code above is dynamically generated directly from the source of this example.<br/>Please read <a href="documentation.html">the documentation</a> before using it.</p>');
$.magnificPopup.open({
items: {
src: getCodeWindow,
type: 'inline'
}
});
});
});
});
</script>