梁美英 / programming · Commits

Commit f853514ae3a13b4d67152258e21142831699cabe

Authored by ykxie
1 parent 1d6ba9da

add ladda

Inline Side-by-side
Showing 9 changed files with 418 additions and 13 deletions
src/gxb-ide/CodingEditer.js
  View file @f853514
@@ -193,6 +193,9 @@ @@ -193,6 +193,9 @@
193 } 193 }
194 } 194 }
195 Dir.showEdite({'treeNode': {'name': treeLinkEditor[0].file}}); 195 Dir.showEdite({'treeNode': {'name': treeLinkEditor[0].file}});
  196 + },
  197 + playEnd: function(){
  198 + Hourglass.stopTimer()
196 } 199 }
197 200
198 } 201 }
@@ -321,7 +324,7 @@ @@ -321,7 +324,7 @@
321 CodingEditer.records[i].trigger = 0; 324 CodingEditer.records[i].trigger = 0;
322 } 325 }
323 // $('.play-code').attr('disabled', false); 326 // $('.play-code').attr('disabled', false);
324 - 327 + Hourglass.stopTimer();
325 // if(document.URL.indexOf('index.htm') >= 0) { 328 // if(document.URL.indexOf('index.htm') >= 0) {
326 // Hourglass.stopTimer(); 329 // Hourglass.stopTimer();
327 // } 330 // }
src/gxb-ide/Iterm.js
  View file @f853514
1 ;(function(window){ 1 ;(function(window){
  2 + var template = '<div class="upload-tip" style="display: none;"><img src="../img/upload_tip.png" alt=""></div>'
2 3
3 function Iterm(){ 4 function Iterm(){
4 this.initIterm.apply(this, arguments); 5 this.initIterm.apply(this, arguments);
@@ -23,7 +24,9 @@ @@ -23,7 +24,9 @@
23 }, 24 },
24 compileMode: function(){ 25 compileMode: function(){
25 console.log('========================'); 26 console.log('========================');
26 - 27 + var l = Ladda.create(document.querySelector( '#compileBtn' ));
  28 + l.start();
  29 +
27 var _this = this; 30 var _this = this;
28 console.log(_this.options) 31 console.log(_this.options)
29 // 获取标准输入值 32 // 获取标准输入值
@@ -52,11 +55,11 @@ @@ -52,11 +55,11 @@
52 success: function(data) { 55 success: function(data) {
53 console.log(data); 56 console.log(data);
54 compileResult(data) 57 compileResult(data)
55 - // ladda.remove(); 58 + l.remove();
56 CodingEditer.compileResultData = data; 59 CodingEditer.compileResultData = data;
57 }, 60 },
58 error: function(XMLHttpRequest, textStatus, errorThrown) { 61 error: function(XMLHttpRequest, textStatus, errorThrown) {
59 - // ladda.remove(); 62 + l.remove();
60 alert('错误'); 63 alert('错误');
61 console.log(XMLHttpRequest); 64 console.log(XMLHttpRequest);
62 }, 65 },
src/gxb-ide/ToolBox.js
  View file @f853514
@@ -50,6 +50,8 @@ @@ -50,6 +50,8 @@
50 $('#re-recoding img').attr('src', '../img/ideicon/re-record.svg'); 50 $('#re-recoding img').attr('src', '../img/ideicon/re-record.svg');
51 $('#audio-play img').attr('src', '../img/ideicon/play.svg'); 51 $('#audio-play img').attr('src', '../img/ideicon/play.svg');
52 52
  53 + $('#start-recording').show()
  54 +
53 _this.events(); 55 _this.events();
54 56
55 }, 57 },
@@ -65,23 +67,23 @@ @@ -65,23 +67,23 @@
65 }, 67 },
66 startRecording: function(callback){ 68 startRecording: function(callback){
67 console.log('startRecord'); 69 console.log('startRecord');
  70 + $('#start-recording').hide()
  71 + $('#stop-recording').show()
  72 + Hourglass.init()
68 var _this = this; 73 var _this = this;
69 if (typeof _this.options.startRecordingCallback == 'function') { 74 if (typeof _this.options.startRecordingCallback == 'function') {
70 console.log('startRecordingCallback'); 75 console.log('startRecordingCallback');
71 _this.options.startRecordingCallback(); 76 _this.options.startRecordingCallback();
72 } 77 }
73 recordAudio() 78 recordAudio()
74 - // HZRecorder.get(function(rec) {  
75 - // console.log(rec);  
76 - // recorder = rec;  
77 - // recorder.start();  
78 - // CodingEditer.initRecodesValue();  
79 -  
80 - // });  
81 79
82 }, 80 },
83 stopRecording: function(){ 81 stopRecording: function(){
84 console.log('停止录制'); 82 console.log('停止录制');
  83 + $('#stop-recording').hide()
  84 + $('#re-recoding').show()
  85 + $('#audio-play').show()
  86 + Hourglass.stopTimer()
85 var _this = this; 87 var _this = this;
86 _this.readOnly(1) 88 _this.readOnly(1)
87 89
@@ -95,6 +97,9 @@ @@ -95,6 +97,9 @@
95 97
96 }, 98 },
97 restartRecord: function(){ 99 restartRecord: function(){
  100 + $('#re-recoding').hide()
  101 + $('#stop-recording').show()
  102 + $('#audio-play').hide()
98 console.log('重新录制代码'); 103 console.log('重新录制代码');
99 var _this = this; 104 var _this = this;
100 $('#recordertab a:first').tab('show'); 105 $('#recordertab a:first').tab('show');
@@ -105,6 +110,7 @@ @@ -105,6 +110,7 @@
105 playCode: function(){ 110 playCode: function(){
106 console.log('播放代码'); 111 console.log('播放代码');
107 $('#audio')[0].play(); 112 $('#audio')[0].play();
  113 + Hourglass.init()
108 CodingEditer.playCoding() 114 CodingEditer.playCoding()
109 }, 115 },
110 uploadAudio: function(){ 116 uploadAudio: function(){
src/gxb-ide/toolBox.css
  View file @f853514
@@ -18,6 +18,7 @@ @@ -18,6 +18,7 @@
18 padding-top: 6px; 18 padding-top: 6px;
19 cursor: pointer; 19 cursor: pointer;
20 float: left; 20 float: left;
  21 + display: none;
21 } 22 }
22 .tool-item img{ 23 .tool-item img{
23 width: 48px; 24 width: 48px;
src/js/ladda/ladda-themeless.min.css 0 → 100644
  View file @f853514
  1 +/*!
  2 + * Ladda
  3 + * http://lab.hakim.se/ladda
  4 + * MIT licensed
  5 + *
  6 + * Copyright (C) 2016 Hakim El Hattab, http://hakim.se
  7 + */.ladda-button{position:relative}.ladda-button .ladda-spinner{position:absolute;z-index:2;display:inline-block;width:32px;height:32px;top:50%;margin-top:0;opacity:0;pointer-events:none}.ladda-button .ladda-label{position:relative;z-index:3}.ladda-button .ladda-progress{position:absolute;width:0;height:100%;left:0;top:0;background:rgba(0,0,0,0.2);visibility:hidden;opacity:0;-webkit-transition:0.1s linear all !important;-moz-transition:0.1s linear all !important;-ms-transition:0.1s linear all !important;-o-transition:0.1s linear all !important;transition:0.1s linear all !important}.ladda-button[data-loading] .ladda-progress{opacity:1;visibility:visible}.ladda-button,.ladda-button .ladda-spinner,.ladda-button .ladda-label{-webkit-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;-moz-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;-ms-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;-o-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important}.ladda-button[data-style=zoom-in],.ladda-button[data-style=zoom-in] .ladda-spinner,.ladda-button[data-style=zoom-in] .ladda-label,.ladda-button[data-style=zoom-out],.ladda-button[data-style=zoom-out] .ladda-spinner,.ladda-button[data-style=zoom-out] .ladda-label{-webkit-transition:0.3s ease all !important;-moz-transition:0.3s ease all !important;-ms-transition:0.3s ease all !important;-o-transition:0.3s ease all !important;transition:0.3s ease all !important}.ladda-button[data-style=expand-right] .ladda-spinner{right:-6px}.ladda-button[data-style=expand-right][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-right][data-size="xs"] .ladda-spinner{right:-12px}.ladda-button[data-style=expand-right][data-loading]{padding-right:56px}.ladda-button[data-style=expand-right][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=expand-right][data-loading][data-size="s"],.ladda-button[data-style=expand-right][data-loading][data-size="xs"]{padding-right:40px}.ladda-button[data-style=expand-left] .ladda-spinner{left:26px}.ladda-button[data-style=expand-left][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-left][data-size="xs"] .ladda-spinner{left:4px}.ladda-button[data-style=expand-left][data-loading]{padding-left:56px}.ladda-button[data-style=expand-left][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=expand-left][data-loading][data-size="s"],.ladda-button[data-style=expand-left][data-loading][data-size="xs"]{padding-left:40px}.ladda-button[data-style=expand-up]{overflow:hidden}.ladda-button[data-style=expand-up] .ladda-spinner{top:-32px;left:50%;margin-left:0}.ladda-button[data-style=expand-up][data-loading]{padding-top:54px}.ladda-button[data-style=expand-up][data-loading] .ladda-spinner{opacity:1;top:26px;margin-top:0}.ladda-button[data-style=expand-up][data-loading][data-size="s"],.ladda-button[data-style=expand-up][data-loading][data-size="xs"]{padding-top:32px}.ladda-button[data-style=expand-up][data-loading][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-up][data-loading][data-size="xs"] .ladda-spinner{top:4px}.ladda-button[data-style=expand-down]{overflow:hidden}.ladda-button[data-style=expand-down] .ladda-spinner{top:62px;left:50%;margin-left:0}.ladda-button[data-style=expand-down][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-down][data-size="xs"] .ladda-spinner{top:40px}.ladda-button[data-style=expand-down][data-loading]{padding-bottom:54px}.ladda-button[data-style=expand-down][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=expand-down][data-loading][data-size="s"],.ladda-button[data-style=expand-down][data-loading][data-size="xs"]{padding-bottom:32px}.ladda-button[data-style=slide-left]{overflow:hidden}.ladda-button[data-style=slide-left] .ladda-label{position:relative}.ladda-button[data-style=slide-left] .ladda-spinner{left:100%;margin-left:0}.ladda-button[data-style=slide-left][data-loading] .ladda-label{opacity:0;left:-100%}.ladda-button[data-style=slide-left][data-loading] .ladda-spinner{opacity:1;left:50%}.ladda-button[data-style=slide-right]{overflow:hidden}.ladda-button[data-style=slide-right] .ladda-label{position:relative}.ladda-button[data-style=slide-right] .ladda-spinner{right:100%;margin-left:0;left:16px}.ladda-button[data-style=slide-right][data-loading] .ladda-label{opacity:0;left:100%}.ladda-button[data-style=slide-right][data-loading] .ladda-spinner{opacity:1;left:50%}.ladda-button[data-style=slide-up]{overflow:hidden}.ladda-button[data-style=slide-up] .ladda-label{position:relative}.ladda-button[data-style=slide-up] .ladda-spinner{left:50%;margin-left:0;margin-top:1em}.ladda-button[data-style=slide-up][data-loading] .ladda-label{opacity:0;top:-1em}.ladda-button[data-style=slide-up][data-loading] .ladda-spinner{opacity:1;margin-top:0}.ladda-button[data-style=slide-down]{overflow:hidden}.ladda-button[data-style=slide-down] .ladda-label{position:relative}.ladda-button[data-style=slide-down] .ladda-spinner{left:50%;margin-left:0;margin-top:-2em}.ladda-button[data-style=slide-down][data-loading] .ladda-label{opacity:0;top:1em}.ladda-button[data-style=slide-down][data-loading] .ladda-spinner{opacity:1;margin-top:0}.ladda-button[data-style=zoom-out]{overflow:hidden}.ladda-button[data-style=zoom-out] .ladda-spinner{left:50%;margin-left:32px;-webkit-transform:scale(2.5);-moz-transform:scale(2.5);-ms-transform:scale(2.5);-o-transform:scale(2.5);transform:scale(2.5)}.ladda-button[data-style=zoom-out] .ladda-label{position:relative;display:inline-block}.ladda-button[data-style=zoom-out][data-loading] .ladda-label{opacity:0;-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5)}.ladda-button[data-style=zoom-out][data-loading] .ladda-spinner{opacity:1;margin-left:0;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.ladda-button[data-style=zoom-in]{overflow:hidden}.ladda-button[data-style=zoom-in] .ladda-spinner{left:50%;margin-left:-16px;-webkit-transform:scale(0.2);-moz-transform:scale(0.2);-ms-transform:scale(0.2);-o-transform:scale(0.2);transform:scale(0.2)}.ladda-button[data-style=zoom-in] .ladda-label{position:relative;display:inline-block}.ladda-button[data-style=zoom-in][data-loading] .ladda-label{opacity:0;-webkit-transform:scale(2.2);-moz-transform:scale(2.2);-ms-transform:scale(2.2);-o-transform:scale(2.2);transform:scale(2.2)}.ladda-button[data-style=zoom-in][data-loading] .ladda-spinner{opacity:1;margin-left:0;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.ladda-button[data-style=contract]{overflow:hidden;width:100px}.ladda-button[data-style=contract] .ladda-spinner{left:50%;margin-left:0}.ladda-button[data-style=contract][data-loading]{border-radius:50%;width:52px}.ladda-button[data-style=contract][data-loading] .ladda-label{opacity:0}.ladda-button[data-style=contract][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=contract-overlay]{overflow:hidden;width:100px;box-shadow:0px 0px 0px 2000px transparent}.ladda-button[data-style=contract-overlay] .ladda-spinner{left:50%;margin-left:0}.ladda-button[data-style=contract-overlay][data-loading]{border-radius:50%;width:52px;box-shadow:0px 0px 0px 2000px rgba(0,0,0,0.8)}.ladda-button[data-style=contract-overlay][data-loading] .ladda-label{opacity:0}.ladda-button[data-style=contract-overlay][data-loading] .ladda-spinner{opacity:1}
src/js/ladda/ladda.js 0 → 100644
  View file @f853514
  1 +/*!
  2 + * Ladda 1.0.0 (2016-03-08, 09:31)
  3 + * http://lab.hakim.se/ladda
  4 + * MIT licensed
  5 + *
  6 + * Copyright (C) 2016 Hakim El Hattab, http://hakim.se
  7 + */
  8 +!function(a,b){"object"==typeof exports?module.exports=b(require("spin.js")):"function"==typeof define&&define.amd?define(["spin"],b):a.Ladda=b(a.Spinner)}(this,function(a){"use strict";function b(a){if("undefined"==typeof a)return void console.warn("Ladda button target must be defined.");if(/ladda-button/i.test(a.className)||(a.className+=" ladda-button"),a.hasAttribute("data-style")||a.setAttribute("data-style","expand-right"),!a.querySelector(".ladda-label")){var b=document.createElement("span");b.className="ladda-label",i(a,b)}var c,d=a.querySelector(".ladda-spinner");d||(d=document.createElement("span"),d.className="ladda-spinner"),a.appendChild(d);var e,f={start:function(){return c||(c=g(a)),a.setAttribute("disabled",""),a.setAttribute("data-loading",""),clearTimeout(e),c.spin(d),this.setProgress(0),this},startAfter:function(a){return clearTimeout(e),e=setTimeout(function(){f.start()},a),this},stop:function(){return a.removeAttribute("disabled"),a.removeAttribute("data-loading"),clearTimeout(e),c&&(e=setTimeout(function(){c.stop()},1e3)),this},toggle:function(){return this.isLoading()?this.stop():this.start(),this},setProgress:function(b){b=Math.max(Math.min(b,1),0);var c=a.querySelector(".ladda-progress");0===b&&c&&c.parentNode?c.parentNode.removeChild(c):(c||(c=document.createElement("div"),c.className="ladda-progress",a.appendChild(c)),c.style.width=(b||0)*a.offsetWidth+"px")},enable:function(){return this.stop(),this},disable:function(){return this.stop(),a.setAttribute("disabled",""),this},isLoading:function(){return a.hasAttribute("data-loading")},remove:function(){clearTimeout(e),a.removeAttribute("disabled",""),a.removeAttribute("data-loading",""),c&&(c.stop(),c=null);for(var b=0,d=j.length;d>b;b++)if(f===j[b]){j.splice(b,1);break}}};return j.push(f),f}function c(a,b){for(;a.parentNode&&a.tagName!==b;)a=a.parentNode;return b===a.tagName?a:void 0}function d(a){for(var b=["input","textarea","select"],c=[],d=0;d<b.length;d++)for(var e=a.getElementsByTagName(b[d]),f=0;f<e.length;f++)e[f].hasAttribute("required")&&c.push(e[f]);return c}function e(a,e){e=e||{};var f=[];"string"==typeof a?f=h(document.querySelectorAll(a)):"object"==typeof a&&"string"==typeof a.nodeName&&(f=[a]);for(var g=0,i=f.length;i>g;g++)!function(){var a=f[g];if("function"==typeof a.addEventListener){var h=b(a),i=-1;a.addEventListener("click",function(b){var f=!0,g=c(a,"FORM");if("undefined"!=typeof g)if("function"==typeof g.checkValidity)f=g.checkValidity();else for(var j=d(g),k=0;k<j.length;k++)""===j[k].value.replace(/^\s+|\s+$/g,"")&&(f=!1),"checkbox"!==j[k].type&&"radio"!==j[k].type||j[k].checked||(f=!1),"email"===j[k].type&&(f=/^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(j[k].value));f&&(h.startAfter(1),"number"==typeof e.timeout&&(clearTimeout(i),i=setTimeout(h.stop,e.timeout)),"function"==typeof e.callback&&e.callback.apply(null,[h]))},!1)}}()}function f(){for(var a=0,b=j.length;b>a;a++)j[a].stop()}function g(b){var c,d,e=b.offsetHeight;0===e&&(e=parseFloat(window.getComputedStyle(b).height)),e>32&&(e*=.8),b.hasAttribute("data-spinner-size")&&(e=parseInt(b.getAttribute("data-spinner-size"),10)),b.hasAttribute("data-spinner-color")&&(c=b.getAttribute("data-spinner-color")),b.hasAttribute("data-spinner-lines")&&(d=parseInt(b.getAttribute("data-spinner-lines"),10));var f=.2*e,g=.6*f,h=7>f?2:3;return new a({color:c||"#fff",lines:d||12,radius:f,length:g,width:h,zIndex:"auto",top:"auto",left:"auto",className:""})}function h(a){for(var b=[],c=0;c<a.length;c++)b.push(a[c]);return b}function i(a,b){var c=document.createRange();c.selectNodeContents(a),c.surroundContents(b),a.appendChild(b)}var j=[];return{bind:e,create:b,stopAll:f}});
0 \ No newline at end of file 9 \ No newline at end of file
src/js/ladda/spin.js 0 → 100644
  View file @f853514
  1 +//fgnass.github.com/spin.js#v1.3
  2 +
  3 +/*
  4 + * Copyright (c) 2011-2013 Felix Gnass
  5 + * Licensed under the MIT license
  6 + */
  7 +(function(root, factory) {
  8 +
  9 + /* CommonJS */
  10 + if (typeof exports == 'object') module.exports = factory()
  11 +
  12 + /* AMD module */
  13 + else if (typeof define == 'function' && define.amd) define(factory)
  14 +
  15 + /* Browser global */
  16 + else root.Spinner = factory()
  17 +}
  18 +(this, function() {
  19 + "use strict";
  20 +
  21 + var prefixes = ['webkit', 'Moz', 'ms', 'O'] /* Vendor prefixes */
  22 + , animations = {} /* Animation rules keyed by their name */
  23 + , useCssAnimations /* Whether to use CSS animations or setTimeout */
  24 +
  25 + /**
  26 + * Utility function to create elements. If no tag name is given,
  27 + * a DIV is created. Optionally properties can be passed.
  28 + */
  29 + function createEl(tag, prop) {
  30 + var el = document.createElement(tag || 'div')
  31 + , n
  32 +
  33 + for(n in prop) el[n] = prop[n]
  34 + return el
  35 + }
  36 +
  37 + /**
  38 + * Appends children and returns the parent.
  39 + */
  40 + function ins(parent /* child1, child2, ...*/) {
  41 + for (var i=1, n=arguments.length; i<n; i++)
  42 + parent.appendChild(arguments[i])
  43 +
  44 + return parent
  45 + }
  46 +
  47 + /**
  48 + * Insert a new stylesheet to hold the @keyframe or VML rules.
  49 + */
  50 + var sheet = (function() {
  51 + var el = createEl('style', {type : 'text/css'})
  52 + ins(document.getElementsByTagName('head')[0], el)
  53 + return el.sheet || el.styleSheet
  54 + }())
  55 +
  56 + /**
  57 + * Creates an opacity keyframe animation rule and returns its name.
  58 + * Since most mobile Webkits have timing issues with animation-delay,
  59 + * we create separate rules for each line/segment.
  60 + */
  61 + function addAnimation(alpha, trail, i, lines) {
  62 + var name = ['opacity', trail, ~~(alpha*100), i, lines].join('-')
  63 + , start = 0.01 + i/lines * 100
  64 + , z = Math.max(1 - (1-alpha) / trail * (100-start), alpha)
  65 + , prefix = useCssAnimations.substring(0, useCssAnimations.indexOf('Animation')).toLowerCase()
  66 + , pre = prefix && '-' + prefix + '-' || ''
  67 +
  68 + if (!animations[name]) {
  69 + sheet.insertRule(
  70 + '@' + pre + 'keyframes ' + name + '{' +
  71 + '0%{opacity:' + z + '}' +
  72 + start + '%{opacity:' + alpha + '}' +
  73 + (start+0.01) + '%{opacity:1}' +
  74 + (start+trail) % 100 + '%{opacity:' + alpha + '}' +
  75 + '100%{opacity:' + z + '}' +
  76 + '}', sheet.cssRules.length)
  77 +
  78 + animations[name] = 1
  79 + }
  80 +
  81 + return name
  82 + }
  83 +
  84 + /**
  85 + * Tries various vendor prefixes and returns the first supported property.
  86 + */
  87 + function vendor(el, prop) {
  88 + var s = el.style
  89 + , pp
  90 + , i
  91 +
  92 + if(s[prop] !== undefined) return prop
  93 + prop = prop.charAt(0).toUpperCase() + prop.slice(1)
  94 + for(i=0; i<prefixes.length; i++) {
  95 + pp = prefixes[i]+prop
  96 + if(s[pp] !== undefined) return pp
  97 + }
  98 + }
  99 +
  100 + /**
  101 + * Sets multiple style properties at once.
  102 + */
  103 + function css(el, prop) {
  104 + for (var n in prop)
  105 + el.style[vendor(el, n)||n] = prop[n]
  106 +
  107 + return el
  108 + }
  109 +
  110 + /**
  111 + * Fills in default values.
  112 + */
  113 + function merge(obj) {
  114 + for (var i=1; i < arguments.length; i++) {
  115 + var def = arguments[i]
  116 + for (var n in def)
  117 + if (obj[n] === undefined) obj[n] = def[n]
  118 + }
  119 + return obj
  120 + }
  121 +
  122 + /**
  123 + * Returns the absolute page-offset of the given element.
  124 + */
  125 + function pos(el) {
  126 + var o = { x:el.offsetLeft, y:el.offsetTop }
  127 + while((el = el.offsetParent))
  128 + o.x+=el.offsetLeft, o.y+=el.offsetTop
  129 +
  130 + return o
  131 + }
  132 +
  133 + // Built-in defaults
  134 +
  135 + var defaults = {
  136 + lines: 12, // The number of lines to draw
  137 + length: 7, // The length of each line
  138 + width: 5, // The line thickness
  139 + radius: 10, // The radius of the inner circle
  140 + rotate: 0, // Rotation offset
  141 + corners: 1, // Roundness (0..1)
  142 + color: '#000', // #rgb or #rrggbb
  143 + direction: 1, // 1: clockwise, -1: counterclockwise
  144 + speed: 1, // Rounds per second
  145 + trail: 100, // Afterglow percentage
  146 + opacity: 1/4, // Opacity of the lines
  147 + fps: 20, // Frames per second when using setTimeout()
  148 + zIndex: 2e9, // Use a high z-index by default
  149 + className: 'spinner', // CSS class to assign to the element
  150 + top: 'auto', // center vertically
  151 + left: 'auto', // center horizontally
  152 + position: 'relative' // element position
  153 + }
  154 +
  155 + /** The constructor */
  156 + function Spinner(o) {
  157 + if (typeof this == 'undefined') return new Spinner(o)
  158 + this.opts = merge(o || {}, Spinner.defaults, defaults)
  159 + }
  160 +
  161 + // Global defaults that override the built-ins:
  162 + Spinner.defaults = {}
  163 +
  164 + merge(Spinner.prototype, {
  165 +
  166 + /**
  167 + * Adds the spinner to the given target element. If this instance is already
  168 + * spinning, it is automatically removed from its previous target b calling
  169 + * stop() internally.
  170 + */
  171 + spin: function(target) {
  172 + this.stop()
  173 +
  174 + var self = this
  175 + , o = self.opts
  176 + , el = self.el = css(createEl(0, {className: o.className}), {position: o.position, width: 0, zIndex: o.zIndex})
  177 + , mid = o.radius+o.length+o.width
  178 + , ep // element position
  179 + , tp // target position
  180 +
  181 + if (target) {
  182 + target.insertBefore(el, target.firstChild||null)
  183 + tp = pos(target)
  184 + ep = pos(el)
  185 + css(el, {
  186 + left: (o.left == 'auto' ? tp.x-ep.x + (target.offsetWidth >> 1) : parseInt(o.left, 10) + mid) + 'px',
  187 + top: (o.top == 'auto' ? tp.y-ep.y + (target.offsetHeight >> 1) : parseInt(o.top, 10) + mid) + 'px'
  188 + })
  189 + }
  190 +
  191 + el.setAttribute('role', 'progressbar')
  192 + self.lines(el, self.opts)
  193 +
  194 + if (!useCssAnimations) {
  195 + // No CSS animation support, use setTimeout() instead
  196 + var i = 0
  197 + , start = (o.lines - 1) * (1 - o.direction) / 2
  198 + , alpha
  199 + , fps = o.fps
  200 + , f = fps/o.speed
  201 + , ostep = (1-o.opacity) / (f*o.trail / 100)
  202 + , astep = f/o.lines
  203 +
  204 + ;(function anim() {
  205 + i++;
  206 + for (var j = 0; j < o.lines; j++) {
  207 + alpha = Math.max(1 - (i + (o.lines - j) * astep) % f * ostep, o.opacity)
  208 +
  209 + self.opacity(el, j * o.direction + start, alpha, o)
  210 + }
  211 + self.timeout = self.el && setTimeout(anim, ~~(1000/fps))
  212 + })()
  213 + }
  214 + return self
  215 + },
  216 +
  217 + /**
  218 + * Stops and removes the Spinner.
  219 + */
  220 + stop: function() {
  221 + var el = this.el
  222 + if (el) {
  223 + clearTimeout(this.timeout)
  224 + if (el.parentNode) el.parentNode.removeChild(el)
  225 + this.el = undefined
  226 + }
  227 + return this
  228 + },
  229 +
  230 + /**
  231 + * Internal method that draws the individual lines. Will be overwritten
  232 + * in VML fallback mode below.
  233 + */
  234 + lines: function(el, o) {
  235 + var i = 0
  236 + , start = (o.lines - 1) * (1 - o.direction) / 2
  237 + , seg
  238 +
  239 + function fill(color, shadow) {
  240 + return css(createEl(), {
  241 + position: 'absolute',
  242 + width: (o.length+o.width) + 'px',
  243 + height: o.width + 'px',
  244 + background: color,
  245 + boxShadow: shadow,
  246 + transformOrigin: 'left',
  247 + transform: 'rotate(' + ~~(360/o.lines*i+o.rotate) + 'deg) translate(' + o.radius+'px' +',0)',
  248 + borderRadius: (o.corners * o.width>>1) + 'px'
  249 + })
  250 + }
  251 +
  252 + for (; i < o.lines; i++) {
  253 + seg = css(createEl(), {
  254 + position: 'absolute',
  255 + top: 1+~(o.width/2) + 'px',
  256 + transform: o.hwaccel ? 'translate3d(0,0,0)' : '',
  257 + opacity: o.opacity,
  258 + animation: useCssAnimations && addAnimation(o.opacity, o.trail, start + i * o.direction, o.lines) + ' ' + 1/o.speed + 's linear infinite'
  259 + })
  260 +
  261 + if (o.shadow) ins(seg, css(fill('#000', '0 0 4px ' + '#000'), {top: 2+'px'}))
  262 +
  263 + ins(el, ins(seg, fill(o.color, '0 0 1px rgba(0,0,0,.1)')))
  264 + }
  265 + return el
  266 + },
  267 +
  268 + /**
  269 + * Internal method that adjusts the opacity of a single line.
  270 + * Will be overwritten in VML fallback mode below.
  271 + */
  272 + opacity: function(el, i, val) {
  273 + if (i < el.childNodes.length) el.childNodes[i].style.opacity = val
  274 + }
  275 +
  276 + })
  277 +
  278 +
  279 + function initVML() {
  280 +
  281 + /* Utility function to create a VML tag */
  282 + function vml(tag, attr) {
  283 + return createEl('<' + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">', attr)
  284 + }
  285 +
  286 + // No CSS transforms but VML support, add a CSS rule for VML elements:
  287 + sheet.addRule('.spin-vml', 'behavior:url(#default#VML)')
  288 +
  289 + Spinner.prototype.lines = function(el, o) {
  290 + var r = o.length+o.width
  291 + , s = 2*r
  292 +
  293 + function grp() {
  294 + return css(
  295 + vml('group', {
  296 + coordsize: s + ' ' + s,
  297 + coordorigin: -r + ' ' + -r
  298 + }),
  299 + { width: s, height: s }
  300 + )
  301 + }
  302 +
  303 + var margin = -(o.width+o.length)*2 + 'px'
  304 + , g = css(grp(), {position: 'absolute', top: margin, left: margin})
  305 + , i
  306 +
  307 + function seg(i, dx, filter) {
  308 + ins(g,
  309 + ins(css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx}),
  310 + ins(css(vml('roundrect', {arcsize: o.corners}), {
  311 + width: r,
  312 + height: o.width,
  313 + left: o.radius,
  314 + top: -o.width>>1,
  315 + filter: filter
  316 + }),
  317 + vml('fill', {color: o.color, opacity: o.opacity}),
  318 + vml('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change
  319 + )
  320 + )
  321 + )
  322 + }
  323 +
  324 + if (o.shadow)
  325 + for (i = 1; i <= o.lines; i++)
  326 + seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)')
  327 +
  328 + for (i = 1; i <= o.lines; i++) seg(i)
  329 + return ins(el, g)
  330 + }
  331 +
  332 + Spinner.prototype.opacity = function(el, i, val, o) {
  333 + var c = el.firstChild
  334 + o = o.shadow && o.lines || 0
  335 + if (c && i+o < c.childNodes.length) {
  336 + c = c.childNodes[i+o]; c = c && c.firstChild; c = c && c.firstChild
  337 + if (c) c.opacity = val
  338 + }
  339 + }
  340 + }
  341 +
  342 + var probe = css(createEl('group'), {behavior: 'url(#default#VML)'})
  343 +
  344 + if (!vendor(probe, 'transform') && probe.adj) initVML()
  345 + else useCssAnimations = vendor(probe, 'animation')
  346 +
  347 + return Spinner
  348 +
  349 +}));
0 \ No newline at end of file 350 \ No newline at end of file
src/js/util/Hourglass.js
  View file @f853514
@@ -36,7 +36,7 @@ @@ -36,7 +36,7 @@
36 seconds = seconds < 10 ? ('0' + seconds) : seconds; 36 seconds = seconds < 10 ? ('0' + seconds) : seconds;
37 37
38 time = hour + ':'+ min + ':' + seconds; 38 time = hour + ':'+ min + ':' + seconds;
39 - 39 + console.log(_dom);
40 _dom.innerHTML = time; 40 _dom.innerHTML = time;
41 _dom.value = Timer.options.seconds; 41 _dom.value = Timer.options.seconds;
42 42
src/v1.1/c.html
  View file @f853514
@@ -23,6 +23,12 @@ @@ -23,6 +23,12 @@
23 <script type="text/javascript" src="../js/zTree_v3-3.5.27/js/jquery.ztree.core.js"></script> 23 <script type="text/javascript" src="../js/zTree_v3-3.5.27/js/jquery.ztree.core.js"></script>
24 <script type="text/javascript" src="../js/zTree_v3-3.5.27/js/jquery.ztree.exedit.js"></script> 24 <script type="text/javascript" src="../js/zTree_v3-3.5.27/js/jquery.ztree.exedit.js"></script>
25 <script src="../js/emmet.js"></script> 25 <script src="../js/emmet.js"></script>
  26 +
  27 + <link rel="stylesheet" href="../js/ladda/ladda-themeless.min.css">
  28 + <script src="../js/ladda/spin.js"></script>
  29 + <script src="../js/ladda/ladda.js"></script>
  30 +
  31 + <script src="../js/util/Hourglass.js"></script>
26 <script src="../js/util/util.js"></script> 32 <script src="../js/util/util.js"></script>
27 33
28 <script src="../js/recorder/Myna.js"></script> 34 <script src="../js/recorder/Myna.js"></script>
@@ -43,8 +49,28 @@ @@ -43,8 +49,28 @@
43 <script> 49 <script>
44 var gxb_api = "https://restful1.gaoxiaobang.com"; 50 var gxb_api = "https://restful1.gaoxiaobang.com";
45 // var gxb_api = "http://192.168.80.223:8080" 51 // var gxb_api = "http://192.168.80.223:8080"
  52 + $(function(){
  53 + $('.my-button').click(function(){
  54 + var l = Ladda.create(this);
  55 + l.start();
  56 +
  57 + })
  58 +
  59 + })
46 </script> 60 </script>
47 61
  62 + <style>
  63 + .ladda-button[data-style=expand-right] .ladda-spinner{
  64 + right: 0;
  65 + }
  66 + .ladda-button[data-style=expand-right][data-loading]{
  67 + padding-right: 32px;
  68 + }
  69 + .ladda-button .ladda-spinner{
  70 + top: 0;
  71 + }
  72 + </style>
  73 +
48 74
49 </head> 75 </head>
50 <body> 76 <body>
@@ -102,7 +128,9 @@ @@ -102,7 +128,9 @@
102 <li><a href="#output" role="tab" data-toggle="tab" class="text">结果</a></li> 128 <li><a href="#output" role="tab" data-toggle="tab" class="text">结果</a></li>
103 </ul> 129 </ul>
104 <div class="pull-right func"> 130 <div class="pull-right func">
105 - <a class="btn btn-success" id="compileBtn">编译运行</a> 131 + <a class="btn btn-success" id="compileBtn">
  132 + <span class="ladda-label">编译运行</span>
  133 + </a>
106 <a id="full-screen" class=""><i class="icon iconfont icon-quanping1"></i></a> 134 <a id="full-screen" class=""><i class="icon iconfont icon-quanping1"></i></a>
107 <!-- <a id="back-screen" class=""><i class="icon iconfont icon-quanping1"></i></a> --> 135 <!-- <a id="back-screen" class=""><i class="icon iconfont icon-quanping1"></i></a> -->
108 </div> 136 </div>