build-tool.html 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. <!-- Basic idea of such build tool is stolen from modernizr.com -->
  2. <div id="mfp-build-tool" class="mfp-hide">
  3. <h2>Magnific Popup v{{site.mfpversion}} Build Tool</h2>
  4. <form id="mfp-build-form">
  5. <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>
  6. <label class="checkbox">
  7. <input type="checkbox" name="inline" checked> Inline
  8. </label>
  9. <label class="checkbox">
  10. <input type="checkbox" name="image" checked> Image
  11. </label>
  12. <label class="checkbox">
  13. <input type="checkbox" name="ajax" checked> Ajax
  14. </label>
  15. <label class="checkbox">
  16. <input type="checkbox" name="iframe" checked> Iframe
  17. </label>
  18. <label class="checkbox">
  19. <input type="checkbox" name="gallery" checked> Gallery
  20. </label>
  21. <label class="checkbox">
  22. <input type="checkbox" name="retina" checked> High-DPI (retina) support for image type
  23. </label>
  24. <label class="checkbox">
  25. <input type="checkbox" name="imagezoom" checked> Image zoom animation
  26. </label>
  27. </form>
  28. <br/>
  29. <div>
  30. <button id="mfp-build-button">Generate build</button>
  31. <label class="checkbox">
  32. <input id="mfp-minify" type="checkbox" name="minify" checked="checked"> Minify code
  33. </label>
  34. </div>
  35. <br/>
  36. <p id="mfp-build-status" style="display:none"></p>
  37. <br/>
  38. <textarea id="mfp-build-tool-out" style="width: 100%; height: 300px; display:none;"></textarea>
  39. </div>
  40. <script type="text/javascript">
  41. $(document).ready(function($) {
  42. $('.mfp-build-tool-link').magnificPopup({closeBtnInside:true, type:'inline', midClick: true});
  43. var h = window.location.hash;
  44. if(h.indexOf('build=') > -1) {
  45. var formInputs = $('#mfp-build-form input');
  46. if(h.indexOf('&') > 0) {
  47. h = h.substr(0, h.indexOf('&'));
  48. }
  49. var items = h.substr(h.indexOf('build=') + 6, h.length).split('+');
  50. for(var i = 0; i < items.length; i++) {
  51. var name = items[i];
  52. if(name) {
  53. formInputs.filter('[name="' +name+ '"]').addClass('present');
  54. }
  55. }
  56. formInputs.not('.present').prop('checked', false);
  57. }
  58. var button = $('#mfp-build-button').click(function(e) {
  59. e.preventDefault();
  60. button.attr('disabled', 'disabled');
  61. var statusTimeout;
  62. var setStatus = function(msg, type) {
  63. clearTimeout(statusTimeout);
  64. $('#mfp-build-status').html('<span class="'+type+'">'+msg+'</span>').show();
  65. };
  66. setStatus('Wait a moment please...', 'progress');
  67. $('#mfp-build-tool-out').val( '' );
  68. var minify = $('#mfp-minify')[0].checked;
  69. var removeModule = function(source, key) {
  70. source = source.replace(new RegExp("\\/\\*>>"+key+"\\*\\/[\\s|\\S]*?\\/\\*>>"+key+"\\*\\/", "ig"), "");
  71. return source;
  72. };
  73. var onError = function() {
  74. setStatus("Error: Build tool wasn't able to GET the js file. Please try again or make file by yourself using Grunt.", 'error');
  75. };
  76. var version = '{{site.mfpversion}}';
  77. var loadedScripts = [];
  78. var onScriptsLoaded = function() {
  79. var src = loadedScripts[0];
  80. var hash = '',
  81. name;
  82. $('#mfp-build-form input').each(function() {
  83. name = $(this).attr('name');
  84. if( this.checked ) {
  85. hash += name + '+';
  86. } else {
  87. src = removeModule(src, name);
  88. }
  89. });
  90. var output = '';
  91. if(hash) {
  92. hash = hash.substr(0, hash.length-1);
  93. }
  94. if(minify) {
  95. src = uglify(src, ["--extra","--unsafe"]);
  96. output = '// Magnific Popup v'+version+' by Dmitry Semenov' + "\n";
  97. output += '// http://bit.ly/magnific-popup' + (hash ? '#build=' + hash : '') + "\n" + src;
  98. } else {
  99. output = src;
  100. }
  101. if(!hash) {
  102. hash = 'core';
  103. } else {
  104. hash = 'core+' + hash;
  105. }
  106. $('#mfp-build-tool-out').val( output ).show();
  107. button.removeAttr('disabled');
  108. 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');
  109. };
  110. $.ajax({
  111. url:"dist/jquery.magnific-popup.js?v="+version,
  112. dataType: 'text',
  113. success: function( data) {
  114. loadedScripts[0] = data;
  115. if(loadedScripts[1]) {
  116. onScriptsLoaded();
  117. }
  118. },
  119. error: onError
  120. });
  121. $.ajax({
  122. url:"third-party-libs/uglify.js",
  123. dataType: 'script',
  124. cache: true,
  125. success: function(data) {
  126. loadedScripts[1] = data;
  127. if(loadedScripts[0]) {
  128. onScriptsLoaded();
  129. }
  130. },
  131. error: onError
  132. });
  133. });
  134. /* build tool END */
  135. /**
  136. * Popup with source code for each example
  137. */
  138. var example,
  139. getCode,
  140. CSS,
  141. JS,
  142. HTML,
  143. highlighterLoaded;
  144. var formatCode = function (str) {
  145. if(str) {
  146. // replace special chars
  147. str = str.replace(/[&<>"']/g, function($0) {
  148. return "&" + {"&":"amp", "<":"lt", ">":"gt", '"':"quot", "'":"#39"}[$0] + ";";
  149. });
  150. // remove spaces from each line based on spaces on first line
  151. var firstLineLength = str.match(/^(\s*)/)[1].length;
  152. var regExp = new RegExp('^ {' + (firstLineLength-1) + '}', "gm");
  153. str = str.replace(regExp, '');
  154. // replace spaces with tabs
  155. str = str.replace(/ /g,'\t');
  156. str = $.trim(str);
  157. }
  158. return str;
  159. };
  160. var highlight = function() {
  161. hljs.highlightBlock(JS.find('code')[0]);
  162. if(CSS)
  163. hljs.highlightBlock(CSS.find('code')[0]);
  164. if(HTML)
  165. hljs.highlightBlock(HTML.find('code')[0]);
  166. };
  167. $('.example').each(function() {
  168. $(this).find('h3').click(function() {
  169. var example = $(this).parent('.example');
  170. var getCodeWindow = $('<div class="get-code-window"><h1>'+example.find('h3').text()+'</h1></div>');
  171. JS = $('<div class="highlight"><pre><code class="javascript">'+formatCode(example.find('script').eq(0).html())+'</code></pre></div>');
  172. CSS = example.find('style');
  173. if(CSS.length) {
  174. CSS = $('<div class="highlight"><pre><code class="css">'+formatCode(CSS.html())+'</code></pre></div>');
  175. } else {
  176. CSS = '';
  177. }
  178. HTML = example.find('.html-code');
  179. if(HTML.length) {
  180. HTML = $('<div class="highlight"><pre><code class="xml html">'+formatCode(HTML.html())+'</code></pre></div>');
  181. } else {
  182. HTML = '';
  183. }
  184. if(!highlighterLoaded) {
  185. highlighterLoaded = true;
  186. var script = document.createElement("script"),
  187. $script = $(script);
  188. script.src = 'http://yandex.st/highlightjs/7.3/highlight.min.js';
  189. if(window.jQuery) {
  190. $.getScript(script.src , function() {
  191. highlight();
  192. });
  193. } else {
  194. $(script).appendTo("head").on("load", function() {
  195. highlight();
  196. });
  197. }
  198. } else {
  199. highlight();
  200. }
  201. getCodeWindow.append(JS);
  202. getCodeWindow.append(HTML);
  203. getCodeWindow.append(CSS);
  204. 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>');
  205. $.magnificPopup.open({
  206. items: {
  207. src: getCodeWindow,
  208. type: 'inline'
  209. }
  210. });
  211. });
  212. });
  213. });
  214. </script>