123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273 |
- <!-- 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>
|