274 lines
7.7 KiB
HTML
274 lines
7.7 KiB
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>
|
||
|
|
</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>
|