diff --git a/README.md b/README.md index 0f4ff5e..87e743d 100644 --- a/README.md +++ b/README.md @@ -160,8 +160,8 @@ Examples of output in both formats can be found in the `output` directory. ## To do * Options: - * Character font-size slider - * Base text character spacing + * [x] Character font-size slider + * [x] Base text character spacing * Interface localization * Live update as you type? * Logo & favicon @@ -172,6 +172,7 @@ Examples of output in both formats can be found in the `output` directory. * Save as image: [dom-to-image](https://github.com/tsayen/dom-to-image) by @tsayen ([MIT](https://github.com/tsayen/dom-to-image/blob/master/LICENSE)) * Color picker: [jscolor](https://jscolor.com/) ([GPLv3](http://www.gnu.org/licenses/gpl-3.0.txt)) * Modal windows: [CSS Modal](https://github.com/drublic/css-modal) by @drublic ([MIT](https://github.com/drublic/css-modal/blob/master/LICENSE)) +* Api (modularized) by [jomin398](https://github.com/jomin398) ## License diff --git a/index.html b/index.html index d548e1c..7d5b5b5 100644 --- a/index.html +++ b/index.html @@ -1,210 +1,225 @@ - - - Rubify - Ruby text annotation generator - - - - - - - - - - - -
-
- - - - -
- -
- - -
+ + + Rubify - Ruby text annotation generator + + + + + + + + + + + + + +
+
+ + + +
- -
-
 
-
- -
-
+ +
+ +
+
+ +
+
 
+
+ +
+
+
+ + + + + + + - + - - + \ No newline at end of file diff --git a/js/rubify.js b/js/_rubify.js similarity index 100% rename from js/rubify.js rename to js/_rubify.js diff --git a/js/dom-to-image.min.js b/js/dom-to-image.min.js deleted file mode 100644 index bc73227..0000000 --- a/js/dom-to-image.min.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! dom-to-image 10-06-2017 */ -!function(a){"use strict";function b(a,b){function c(a){return b.bgcolor&&(a.style.backgroundColor=b.bgcolor),b.width&&(a.style.width=b.width+"px"),b.height&&(a.style.height=b.height+"px"),b.style&&Object.keys(b.style).forEach(function(c){a.style[c]=b.style[c]}),a}return b=b||{},g(b),Promise.resolve(a).then(function(a){return i(a,b.filter,!0)}).then(j).then(k).then(c).then(function(c){return l(c,b.width||q.width(a),b.height||q.height(a))})}function c(a,b){return h(a,b||{}).then(function(b){return b.getContext("2d").getImageData(0,0,q.width(a),q.height(a)).data})}function d(a,b){return h(a,b||{}).then(function(a){return a.toDataURL()})}function e(a,b){return b=b||{},h(a,b).then(function(a){return a.toDataURL("image/jpeg",b.quality||1)})}function f(a,b){return h(a,b||{}).then(q.canvasToBlob)}function g(a){"undefined"==typeof a.imagePlaceholder?v.impl.options.imagePlaceholder=u.imagePlaceholder:v.impl.options.imagePlaceholder=a.imagePlaceholder,"undefined"==typeof a.cacheBust?v.impl.options.cacheBust=u.cacheBust:v.impl.options.cacheBust=a.cacheBust}function h(a,c){function d(a){var b=document.createElement("canvas");if(b.width=c.width||q.width(a),b.height=c.height||q.height(a),c.bgcolor){var d=b.getContext("2d");d.fillStyle=c.bgcolor,d.fillRect(0,0,b.width,b.height)}return b}return b(a,c).then(q.makeImage).then(q.delay(100)).then(function(b){var c=d(a);return c.getContext("2d").drawImage(b,0,0),c})}function i(a,b,c){function d(a){return a instanceof HTMLCanvasElement?q.makeImage(a.toDataURL()):a.cloneNode(!1)}function e(a,b,c){function d(a,b,c){var d=Promise.resolve();return b.forEach(function(b){d=d.then(function(){return i(b,c)}).then(function(b){b&&a.appendChild(b)})}),d}var e=a.childNodes;return 0===e.length?Promise.resolve(b):d(b,q.asArray(e),c).then(function(){return b})}function f(a,b){function c(){function c(a,b){function c(a,b){q.asArray(a).forEach(function(c){b.setProperty(c,a.getPropertyValue(c),a.getPropertyPriority(c))})}a.cssText?b.cssText=a.cssText:c(a,b)}c(window.getComputedStyle(a),b.style)}function d(){function c(c){function d(a,b,c){function d(a){var b=a.getPropertyValue("content");return a.cssText+" content: "+b+";"}function e(a){function b(b){return b+": "+a.getPropertyValue(b)+(a.getPropertyPriority(b)?" !important":"")}return q.asArray(a).map(b).join("; ")+";"}var f="."+a+":"+b,g=c.cssText?d(c):e(c);return document.createTextNode(f+"{"+g+"}")}var e=window.getComputedStyle(a,c),f=e.getPropertyValue("content");if(""!==f&&"none"!==f){var g=q.uid();b.className=b.className+" "+g;var h=document.createElement("style");h.appendChild(d(g,c,e)),b.appendChild(h)}}[":before",":after"].forEach(function(a){c(a)})}function e(){a instanceof HTMLTextAreaElement&&(b.innerHTML=a.value),a instanceof HTMLInputElement&&b.setAttribute("value",a.value)}function f(){b instanceof SVGElement&&(b.setAttribute("xmlns","http://www.w3.org/2000/svg"),b instanceof SVGRectElement&&["width","height"].forEach(function(a){var c=b.getAttribute(a);c&&b.style.setProperty(a,c)}))}return b instanceof Element?Promise.resolve().then(c).then(d).then(e).then(f).then(function(){return b}):b}return c||!b||b(a)?Promise.resolve(a).then(d).then(function(c){return e(a,c,b)}).then(function(b){return f(a,b)}):Promise.resolve()}function j(a){return s.resolveAll().then(function(b){var c=document.createElement("style");return a.appendChild(c),c.appendChild(document.createTextNode(b)),a})}function k(a){return t.inlineAll(a).then(function(){return a})}function l(a,b,c){return Promise.resolve(a).then(function(a){return a.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),(new XMLSerializer).serializeToString(a)}).then(q.escapeXhtml).then(function(a){return''+a+""}).then(function(a){return''+a+""}).then(function(a){return"data:image/svg+xml;charset=utf-8,"+a})}function m(){function a(){var a="application/font-woff",b="image/jpeg";return{woff:a,woff2:a,ttf:"application/font-truetype",eot:"application/vnd.ms-fontobject",png:"image/png",jpg:b,jpeg:b,gif:"image/gif",tiff:"image/tiff",svg:"image/svg+xml"}}function b(a){var b=/\.([^\.\/]*?)$/g.exec(a);return b?b[1]:""}function c(c){var d=b(c).toLowerCase();return a()[d]||""}function d(a){return a.search(/^(data:)/)!==-1}function e(a){return new Promise(function(b){for(var c=window.atob(a.toDataURL().split(",")[1]),d=c.length,e=new Uint8Array(d),f=0;f(" + tr + ")"; + } + } + return simpleout; + } + /** + * @param {String} value ruby fomated string + * @returns {HTMLElement} html ruby tag + * @example + * complexConv("日(に)本(ほん)語(ご)") + */ + complexConv(value) { + let groups = value.replace(/\)$/, "").split(")"); + let complexout = ""; + if (!value) throw this.EmptyError(); + for (var i = 0; i < groups.length; i++) { + let phr = groups[i].split("("); + let char = phr[0]; + let tr = phr[1]; + complexout += "" + char + "(" + tr + ")"; + } + return complexout; + } +}; \ No newline at end of file diff --git a/js/jscolor.min.js b/js/jscolor.min.js deleted file mode 100644 index 3bd1f50..0000000 --- a/js/jscolor.min.js +++ /dev/null @@ -1,12 +0,0 @@ -/** - * jscolor - JavaScript Color Picker - * - * @link http://jscolor.com - * @license For open source use: GPLv3 - * For commercial use: JSColor Commercial License - * @author Jan Odvarko - East Desire - * @version 2.4.0 - * - * See usage examples at http://jscolor.com/examples/ - */ -!function(e,t){"use strict";"object"!=typeof module||"object"!=typeof module.exports?t(e):module.exports=e.document?t(e):function(e){if(!e.document)throw new Error("jscolor needs a window with document");return t(e)}}("undefined"!=typeof window?window:this,function(e){"use strict";var t,r,n,i=((n={initialized:!1,instances:[],triggerQueue:[],register:function(){void 0!==e&&e.document&&e.document.addEventListener("DOMContentLoaded",n.pub.init,!1)},installBySelector:function(t,r){if(!(r=r?n.node(r):e.document))throw new Error("Missing root node");for(var i=r.querySelectorAll(t),o=new RegExp("(^|\\s)("+n.pub.lookupClass+")(\\s*(\\{[^}]*\\})|\\s|$)","i"),a=0;a-1},isButtonEmpty:function(e){switch(n.nodeName(e)){case"input":return!e.value||""===e.value.trim();case"button":return""===e.textContent.trim()}return null},isPassiveEventSupported:function(){var t=!1;try{var r=Object.defineProperty({},"passive",{get:function(){t=!0}});e.addEventListener("testPassive",null,r),e.removeEventListener("testPassive",null,r)}catch(e){}return t}(),isColorAttrSupported:(r=e.document.createElement("input"),!(!r.setAttribute||(r.setAttribute("type","color"),"color"!=r.type.toLowerCase()))),dataProp:"_data_jscolor",setData:function(){var e=arguments[0];if(3===arguments.length){var t=e.hasOwnProperty(n.dataProp)?e[n.dataProp]:e[n.dataProp]={},r=arguments[1],i=arguments[2];return t[r]=i,!0}if(2===arguments.length&&"object"==typeof arguments[1]){t=e.hasOwnProperty(n.dataProp)?e[n.dataProp]:e[n.dataProp]={};var o=arguments[1];for(var r in o)o.hasOwnProperty(r)&&(t[r]=o[r]);return!0}throw new Error("Invalid arguments")},removeData:function(){var e=arguments[0];if(!e.hasOwnProperty(n.dataProp))return!0;for(var t=1;t=3&&(n=s[0].match(l))&&(i=s[1].match(l))&&(o=s[2].match(l)))return r.format="rgb",r.rgba=[parseFloat(n[1])||0,parseFloat(i[1])||0,parseFloat(o[1])||0,null],s.length>=4&&(a=s[3].match(l))&&(r.format="rgba",r.rgba[3]=parseFloat(a[1])||0),r}return!1},scaleCanvasForHighDPR:function(t){var r=e.devicePixelRatio||1;t.width*=r,t.height*=r,t.getContext("2d").scale(r,r)},genColorPreviewCanvas:function(e,t,r,i){var o=Math.round(n.pub.previewSeparator.length),a=n.pub.chessboardSize,s=n.pub.chessboardColor1,l=n.pub.chessboardColor2,h=r||2*a,d=2*a,c=n.createEl("canvas"),p=c.getContext("2d");c.width=h,c.height=d,i&&n.scaleCanvasForHighDPR(c),p.fillStyle=s,p.fillRect(0,0,h,d),p.fillStyle=l;for(var u=0;ul[i]&&-t[i]+e[i]+s[i]/2>l[i]/2&&e[i]+s[i]-h[i]>=0?e[i]+s[i]-h[i]:e[i],-t[o]+e[o]+s[o]+h[o]-d+d*a>l[o]?-t[o]+e[o]+s[o]/2>l[o]/2&&e[o]+s[o]-d-d*a>=0?e[o]+s[o]-d-d*a:e[o]+s[o]-d+d*a:e[o]+s[o]-d+d*a>=0?e[o]+s[o]-d+d*a:e[o]+s[o]-d-d*a];else var c=[e[i],e[o]+s[o]-d+d*a];var p=c[i],u=c[o],g=r.fixed?"fixed":"absolute",f=(c[0]+h[0]>e[0]||c[0]2)switch(e.mode.charAt(2).toLowerCase()){case"s":return"s";case"v":return"v"}return null},onDocumentMouseDown:function(e){var t=e.target||e.srcElement;if(t.jscolor&&t.jscolor instanceof n.pub)t.jscolor.showOnClick&&!t.disabled&&t.jscolor.show();else if(n.getData(t,"gui")){n.getData(t,"control")&&n.onControlPointerStart(e,t,n.getData(t,"control"),"mouse")}else n.picker&&n.picker.owner&&n.picker.owner.tryHide()},onDocumentKeyUp:function(e){-1!==["Tab","Escape"].indexOf(n.eventKey(e))&&n.picker&&n.picker.owner&&n.picker.owner.tryHide()},onWindowResize:function(e){n.redrawPosition()},onParentScroll:function(e){n.picker&&n.picker.owner&&n.picker.owner.tryHide()},onPickerTouchStart:function(e){var t=e.target||e.srcElement;n.getData(t,"control")&&n.onControlPointerStart(e,t,n.getData(t,"control"),"touch")},triggerCallback:function(e,t){if(e[t]){var r=null;if("string"==typeof e[t])try{r=new Function(e[t])}catch(e){console.error(e)}else r=e[t];r&&r.call(e)}},triggerGlobal:function(e){for(var t=n.getInstances(),r=0;r=0;s-=1){var l=a[s];if(l)if(n.pub.presets.hasOwnProperty(l)){for(var o in n.pub.presets[l])if(n.pub.presets[l].hasOwnProperty(o))try{d(o,n.pub.presets[l][o])}catch(e){console.warn(e)}}else console.warn("Unknown preset: %s",l)}var h=["preset"];for(var o in r)if(r.hasOwnProperty(o)&&-1===h.indexOf(o))try{d(o,r[o])}catch(e){console.warn(e)}function d(e,t){if("string"!=typeof e)throw new Error("Invalid value for option name: "+e);if(n.enumOpts.hasOwnProperty(e)&&("string"==typeof t&&(t=t.toLowerCase()),-1===n.enumOpts[e].indexOf(t)))throw new Error("Option '"+e+"' has invalid value: "+t);if(n.deprecatedOpts.hasOwnProperty(e)){var r=e,o=n.deprecatedOpts[e];if(!o)throw new Error("Option '"+e+"' is DEPRECATED");console.warn("Option '%s' is DEPRECATED, using '%s' instead."+n.docsRef,r,o),e=o}if(!(e in i))throw new Error("Unrecognized configuration option: "+e);return i[e]=t,!0}function c(){i._processParentElementsInDOM(),n.picker||(n.picker={owner:null,wrap:n.createEl("div"),box:n.createEl("div"),boxS:n.createEl("div"),boxB:n.createEl("div"),pad:n.createEl("div"),padB:n.createEl("div"),padM:n.createEl("div"),padPal:n.createPalette(),cross:n.createEl("div"),crossBY:n.createEl("div"),crossBX:n.createEl("div"),crossLY:n.createEl("div"),crossLX:n.createEl("div"),sld:n.createEl("div"),sldB:n.createEl("div"),sldM:n.createEl("div"),sldGrad:n.createSliderGradient(),sldPtrS:n.createEl("div"),sldPtrIB:n.createEl("div"),sldPtrMB:n.createEl("div"),sldPtrOB:n.createEl("div"),asld:n.createEl("div"),asldB:n.createEl("div"),asldM:n.createEl("div"),asldGrad:n.createASliderGradient(),asldPtrS:n.createEl("div"),asldPtrIB:n.createEl("div"),asldPtrMB:n.createEl("div"),asldPtrOB:n.createEl("div"),btn:n.createEl("div"),btnT:n.createEl("span")},n.picker.pad.appendChild(n.picker.padPal.elm),n.picker.padB.appendChild(n.picker.pad),n.picker.cross.appendChild(n.picker.crossBY),n.picker.cross.appendChild(n.picker.crossBX),n.picker.cross.appendChild(n.picker.crossLY),n.picker.cross.appendChild(n.picker.crossLX),n.picker.padB.appendChild(n.picker.cross),n.picker.box.appendChild(n.picker.padB),n.picker.box.appendChild(n.picker.padM),n.picker.sld.appendChild(n.picker.sldGrad.elm),n.picker.sldB.appendChild(n.picker.sld),n.picker.sldB.appendChild(n.picker.sldPtrOB),n.picker.sldPtrOB.appendChild(n.picker.sldPtrMB),n.picker.sldPtrMB.appendChild(n.picker.sldPtrIB),n.picker.sldPtrIB.appendChild(n.picker.sldPtrS),n.picker.box.appendChild(n.picker.sldB),n.picker.box.appendChild(n.picker.sldM),n.picker.asld.appendChild(n.picker.asldGrad.elm),n.picker.asldB.appendChild(n.picker.asld),n.picker.asldB.appendChild(n.picker.asldPtrOB),n.picker.asldPtrOB.appendChild(n.picker.asldPtrMB),n.picker.asldPtrMB.appendChild(n.picker.asldPtrIB),n.picker.asldPtrIB.appendChild(n.picker.asldPtrS),n.picker.box.appendChild(n.picker.asldB),n.picker.box.appendChild(n.picker.asldM),n.picker.btn.appendChild(n.picker.btnT),n.picker.box.appendChild(n.picker.btn),n.picker.boxB.appendChild(n.picker.box),n.picker.wrap.appendChild(n.picker.boxS),n.picker.wrap.appendChild(n.picker.boxB),n.picker.wrap.addEventListener("touchstart",n.onPickerTouchStart,!!n.isPassiveEventSupported&&{passive:!1}));var t=n.picker,r=!!n.getSliderChannel(i),o=i.hasAlphaChannel(),a=n.getPickerDims(i),s=2*i.pointerBorderWidth+i.pointerThickness+2*i.crossSize,l=n.getControlPadding(i),h=Math.min(i.borderRadius,Math.round(i.padding*Math.PI));t.wrap.className="jscolor-picker-wrap",t.wrap.style.clear="both",t.wrap.style.width=a[0]+2*i.borderWidth+"px",t.wrap.style.height=a[1]+2*i.borderWidth+"px",t.wrap.style.zIndex=i.zIndex,t.box.className="jscolor-picker",t.box.style.width=a[0]+"px",t.box.style.height=a[1]+"px",t.box.style.position="relative",t.boxS.className="jscolor-picker-shadow",t.boxS.style.position="absolute",t.boxS.style.left="0",t.boxS.style.top="0",t.boxS.style.width="100%",t.boxS.style.height="100%",n.setBorderRadius(t.boxS,h+"px"),t.boxB.className="jscolor-picker-border",t.boxB.style.position="relative",t.boxB.style.border=i.borderWidth+"px solid",t.boxB.style.borderColor=i.borderColor,t.boxB.style.background=i.backgroundColor,n.setBorderRadius(t.boxB,h+"px"),t.padM.style.background="rgba(255,0,0,.2)",t.sldM.style.background="rgba(0,255,0,.2)",t.asldM.style.background="rgba(0,0,255,.2)",t.padM.style.opacity=t.sldM.style.opacity=t.asldM.style.opacity="0",t.pad.style.position="relative",t.pad.style.width=i.width+"px",t.pad.style.height=i.height+"px",t.padPal.draw(i.width,i.height,n.getPadYChannel(i)),t.padB.style.position="absolute",t.padB.style.left=i.padding+"px",t.padB.style.top=i.padding+"px",t.padB.style.border=i.controlBorderWidth+"px solid",t.padB.style.borderColor=i.controlBorderColor,t.padM.style.position="absolute",t.padM.style.left="0px",t.padM.style.top="0px",t.padM.style.width=i.padding+2*i.controlBorderWidth+i.width+l+"px",t.padM.style.height=2*i.controlBorderWidth+2*i.padding+i.height+"px",t.padM.style.cursor="crosshair",n.setData(t.padM,{instance:i,control:"pad"}),t.cross.style.position="absolute",t.cross.style.left=t.cross.style.top="0",t.cross.style.width=t.cross.style.height=s+"px",t.crossBY.style.position=t.crossBX.style.position="absolute",t.crossBY.style.background=t.crossBX.style.background=i.pointerBorderColor,t.crossBY.style.width=t.crossBX.style.height=2*i.pointerBorderWidth+i.pointerThickness+"px",t.crossBY.style.height=t.crossBX.style.width=s+"px",t.crossBY.style.left=t.crossBX.style.top=Math.floor(s/2)-Math.floor(i.pointerThickness/2)-i.pointerBorderWidth+"px",t.crossBY.style.top=t.crossBX.style.left="0",t.crossLY.style.position=t.crossLX.style.position="absolute",t.crossLY.style.background=t.crossLX.style.background=i.pointerColor,t.crossLY.style.height=t.crossLX.style.width=s-2*i.pointerBorderWidth+"px",t.crossLY.style.width=t.crossLX.style.height=i.pointerThickness+"px",t.crossLY.style.left=t.crossLX.style.top=Math.floor(s/2)-Math.floor(i.pointerThickness/2)+"px",t.crossLY.style.top=t.crossLX.style.left=i.pointerBorderWidth+"px",t.sld.style.overflow="hidden",t.sld.style.width=i.sliderSize+"px",t.sld.style.height=i.height+"px",t.sldGrad.draw(i.sliderSize,i.height,"#000","#000"),t.sldB.style.display=r?"block":"none",t.sldB.style.position="absolute",t.sldB.style.left=i.padding+i.width+2*i.controlBorderWidth+2*l+"px",t.sldB.style.top=i.padding+"px",t.sldB.style.border=i.controlBorderWidth+"px solid",t.sldB.style.borderColor=i.controlBorderColor,t.sldM.style.display=r?"block":"none",t.sldM.style.position="absolute",t.sldM.style.left=i.padding+i.width+2*i.controlBorderWidth+l+"px",t.sldM.style.top="0px",t.sldM.style.width=i.sliderSize+2*l+2*i.controlBorderWidth+(o?0:Math.max(0,i.padding-l))+"px",t.sldM.style.height=2*i.controlBorderWidth+2*i.padding+i.height+"px",t.sldM.style.cursor="default",n.setData(t.sldM,{instance:i,control:"sld"}),t.sldPtrIB.style.border=t.sldPtrOB.style.border=i.pointerBorderWidth+"px solid "+i.pointerBorderColor,t.sldPtrOB.style.position="absolute",t.sldPtrOB.style.left=-(2*i.pointerBorderWidth+i.pointerThickness)+"px",t.sldPtrOB.style.top="0",t.sldPtrMB.style.border=i.pointerThickness+"px solid "+i.pointerColor,t.sldPtrS.style.width=i.sliderSize+"px",t.sldPtrS.style.height=n.pub.sliderInnerSpace+"px",t.asld.style.overflow="hidden",t.asld.style.width=i.sliderSize+"px",t.asld.style.height=i.height+"px",t.asldGrad.draw(i.sliderSize,i.height,"#000"),t.asldB.style.display=o?"block":"none",t.asldB.style.position="absolute",t.asldB.style.left=i.padding+i.width+2*i.controlBorderWidth+l+(r?i.sliderSize+3*l+2*i.controlBorderWidth:0)+"px",t.asldB.style.top=i.padding+"px",t.asldB.style.border=i.controlBorderWidth+"px solid",t.asldB.style.borderColor=i.controlBorderColor,t.asldM.style.display=o?"block":"none",t.asldM.style.position="absolute",t.asldM.style.left=i.padding+i.width+2*i.controlBorderWidth+l+(r?i.sliderSize+2*l+2*i.controlBorderWidth:0)+"px",t.asldM.style.top="0px",t.asldM.style.width=i.sliderSize+2*l+2*i.controlBorderWidth+Math.max(0,i.padding-l)+"px",t.asldM.style.height=2*i.controlBorderWidth+2*i.padding+i.height+"px",t.asldM.style.cursor="default",n.setData(t.asldM,{instance:i,control:"asld"}),t.asldPtrIB.style.border=t.asldPtrOB.style.border=i.pointerBorderWidth+"px solid "+i.pointerBorderColor,t.asldPtrOB.style.position="absolute",t.asldPtrOB.style.left=-(2*i.pointerBorderWidth+i.pointerThickness)+"px",t.asldPtrOB.style.top="0",t.asldPtrMB.style.border=i.pointerThickness+"px solid "+i.pointerColor,t.asldPtrS.style.width=i.sliderSize+"px",t.asldPtrS.style.height=n.pub.sliderInnerSpace+"px";var d,c;t.btn.className="jscolor-btn-close",t.btn.style.display=i.closeButton?"block":"none",t.btn.style.position="absolute",t.btn.style.left=i.padding+"px",t.btn.style.bottom=i.padding+"px",t.btn.style.padding="0 15px",t.btn.style.maxWidth=a[0]-2*i.padding-2*i.controlBorderWidth-30+"px",t.btn.style.overflow="hidden",t.btn.style.height=i.buttonHeight+"px",t.btn.style.whiteSpace="nowrap",t.btn.style.border=i.controlBorderWidth+"px solid",d=i.controlBorderColor.split(/\s+/),c=d.length<2?d[0]:d[1]+" "+d[0]+" "+d[0]+" "+d[1],t.btn.style.borderColor=c,t.btn.style.color=i.buttonColor,t.btn.style.font="12px sans-serif",t.btn.style.textAlign="center",t.btn.style.cursor="pointer",t.btn.onmousedown=function(){i.hide()},t.btnT.style.lineHeight=i.buttonHeight+"px",t.btnT.innerHTML="",t.btnT.appendChild(e.document.createTextNode(i.closeText)),p(),u(),g(),n.picker.owner&&n.picker.owner!==i&&n.removeClass(n.picker.owner.targetElement,n.pub.activeClassName),n.picker.owner=i,i.container===e.document.body?n.redrawPosition():n._drawPosition(i,0,0,"relative",!1),t.wrap.parentNode!==i.container&&i.container.appendChild(t.wrap),n.addClass(i.targetElement,n.pub.activeClassName)}function p(){var e=n.getPadYChannel(i),t=Math.round(i.channels.h/360*(i.width-1)),r=Math.round((1-i.channels[e]/100)*(i.height-1)),o=2*i.pointerBorderWidth+i.pointerThickness+2*i.crossSize,a=-Math.floor(o/2);switch(n.picker.cross.style.left=t+a+"px",n.picker.cross.style.top=r+a+"px",n.getSliderChannel(i)){case"s":var s=n.HSV_RGB(i.channels.h,100,i.channels.v),l=n.HSV_RGB(i.channels.h,0,i.channels.v),h="rgb("+Math.round(s[0])+","+Math.round(s[1])+","+Math.round(s[2])+")",d="rgb("+Math.round(l[0])+","+Math.round(l[1])+","+Math.round(l[2])+")";n.picker.sldGrad.draw(i.sliderSize,i.height,h,d);break;case"v":var c=n.HSV_RGB(i.channels.h,i.channels.s,100);h="rgb("+Math.round(c[0])+","+Math.round(c[1])+","+Math.round(c[2])+")",d="#000";n.picker.sldGrad.draw(i.sliderSize,i.height,h,d)}n.picker.asldGrad.draw(i.sliderSize,i.height,i.toHEXString())}function u(){var e=n.getSliderChannel(i);if(e){var t=Math.round((1-i.channels[e]/100)*(i.height-1));n.picker.sldPtrOB.style.top=t-(2*i.pointerBorderWidth+i.pointerThickness)-Math.floor(n.pub.sliderInnerSpace/2)+"px"}n.picker.asldGrad.draw(i.sliderSize,i.height,i.toHEXString())}function g(){var e=Math.round((1-i.channels.a)*(i.height-1));n.picker.asldPtrOB.style.top=e-(2*i.pointerBorderWidth+i.pointerThickness)-Math.floor(n.pub.sliderInnerSpace/2)+"px"}function f(){return n.picker&&n.picker.owner===i}if(this.option=function(){if(!arguments.length)throw new Error("No option specified");if(1===arguments.length&&"string"==typeof arguments[0]){try{return function(e){if(n.deprecatedOpts.hasOwnProperty(e)){var t=e,r=n.deprecatedOpts[e];if(!r)throw new Error("Option '"+e+"' is DEPRECATED");console.warn("Option '%s' is DEPRECATED, using '%s' instead."+n.docsRef,t,r),e=r}if(!(e in i))throw new Error("Unrecognized configuration option: "+e);return i[e]}(arguments[0])}catch(e){console.warn(e)}return!1}if(arguments.length>=2&&"string"==typeof arguments[0]){try{if(!d(arguments[0],arguments[1]))return!1}catch(e){return console.warn(e),!1}return this.redraw(),this.exposeColor(),!0}if(1===arguments.length&&"object"==typeof arguments[0]){var e=arguments[0],t=!0;for(var r in e)if(e.hasOwnProperty(r))try{d(r,e[r])||(t=!1)}catch(e){console.warn(e),t=!1}return this.redraw(),this.exposeColor(),t}throw new Error("Invalid arguments")},this.channel=function(e,t){if("string"!=typeof e)throw new Error("Invalid value for channel name: "+e);if(void 0===t)return this.channels.hasOwnProperty(e.toLowerCase())?this.channels[e.toLowerCase()]:(console.warn("Getting unknown channel: "+e),!1);var r=!1;switch(e.toLowerCase()){case"r":r=this.fromRGBA(t,null,null,null);break;case"g":r=this.fromRGBA(null,t,null,null);break;case"b":r=this.fromRGBA(null,null,t,null);break;case"h":r=this.fromHSVA(t,null,null,null);break;case"s":r=this.fromHSVA(null,t,null,null);break;case"v":r=this.fromHSVA(null,null,t,null);break;case"a":r=this.fromHSVA(null,null,null,t);break;default:return console.warn("Setting unknown channel: "+e),!1}return!!r&&(this.redraw(),!0)},this.trigger=function(e){for(var t=n.strList(e),r=0;r127.5},this.hide=function(){f()&&(n.removeClass(i.targetElement,n.pub.activeClassName),n.picker.wrap.parentNode.removeChild(n.picker.wrap),delete n.picker.owner)},this.show=function(){c()},this.redraw=function(){f()&&c()},this.getFormat=function(){return this._currentFormat},this.hasAlphaChannel=function(){return"auto"===this.alphaChannel?"any"===this.format.toLowerCase()||"rgba"===this.getFormat()||void 0!==this.alpha||void 0!==this.alphaElement:this.alphaChannel},this.processValueInput=function(e){this.fromString(e)||this.exposeColor()},this.processAlphaInput=function(e){this.fromHSVA(null,null,null,parseFloat(e))||this.exposeColor()},this.exposeColor=function(e){if(!(e&n.flags.leaveValue)&&this.valueElement){var t=this.toString();"hex"===this.getFormat()&&(this.uppercase||(t=t.toLowerCase()),this.hash||(t=t.replace(/^#/,""))),this.setValueElementValue(t)}if(!(e&n.flags.leaveAlpha)&&this.alphaElement){t=Math.round(100*this.channels.a)/100;this.setAlphaElementValue(t)}if(!(e&n.flags.leavePreview)&&this.previewElement){(n.isTextInput(this.previewElement)||n.isButton(this.previewElement)&&!n.isButtonEmpty(this.previewElement))&&this.previewPosition,this.setPreviewElementBg(this.toRGBAString())}f()&&(p(),u(),g())},this.setPreviewElementBg=function(e){if(this.previewElement){var t=null,r=null;(n.isTextInput(this.previewElement)||n.isButton(this.previewElement)&&!n.isButtonEmpty(this.previewElement))&&(t=this.previewPosition,r=this.previewSize);var i=[];if(e){i.push({image:n.genColorPreviewGradient(e,t,r?r-n.pub.previewSeparator.length:null),position:"left top",size:"auto",repeat:t?"repeat-y":"repeat",origin:"padding-box"});var o=n.genColorPreviewCanvas("rgba(0,0,0,0)",t?{left:"right",right:"left"}[t]:null,r,!0);i.push({image:"url('"+o.canvas.toDataURL()+"')",position:(t||"left")+" top",size:o.width+"px "+o.height+"px",repeat:t?"repeat-y":"repeat",origin:"padding-box"})}else i.push({image:"none",position:"left top",size:"auto",repeat:"no-repeat",origin:"padding-box"});for(var a={image:[],position:[],size:[],repeat:[],origin:[]},s=0;s-1){var y=n.parseColorString(b);this._currentFormat=y?y.format:"hex"}else this._currentFormat=this.format.toLowerCase();this.processValueInput(b),void 0!==w&&this.processAlphaInput(w)}}).pub.className="jscolor",n.pub.activeClassName="jscolor-active",n.pub.looseJSON=!0,n.pub.presets={},n.pub.presets.default={},n.pub.presets.light={backgroundColor:"rgba(255,255,255,1)",controlBorderColor:"rgba(187,187,187,1)",buttonColor:"rgba(0,0,0,1)"},n.pub.presets.dark={backgroundColor:"rgba(51,51,51,1)",controlBorderColor:"rgba(153,153,153,1)",buttonColor:"rgba(240,240,240,1)"},n.pub.presets.small={width:101,height:101,padding:10,sliderSize:14},n.pub.presets.medium={width:181,height:101,padding:12,sliderSize:16},n.pub.presets.large={width:271,height:151,padding:12,sliderSize:24},n.pub.presets.thin={borderWidth:1,controlBorderWidth:1,pointerBorderWidth:1},n.pub.presets.thick={borderWidth:2,controlBorderWidth:2,pointerBorderWidth:2},n.pub.sliderInnerSpace=3,n.pub.chessboardSize=8,n.pub.chessboardColor1="#666666",n.pub.chessboardColor2="#999999",n.pub.previewSeparator=["rgba(255,255,255,.65)","rgba(128,128,128,.65)"],n.pub.init=function(){if(!n.initialized)for(e.document.addEventListener("mousedown",n.onDocumentMouseDown,!1),e.document.addEventListener("keyup",n.onDocumentKeyUp,!1),e.addEventListener("resize",n.onWindowResize,!1),n.pub.install(),n.initialized=!0;n.triggerQueue.length;){var t=n.triggerQueue.shift();n.triggerGlobal(t)}},n.pub.install=function(e){var t=!0;try{n.installBySelector("[data-jscolor]",e)}catch(e){t=!1,console.warn(e)}if(n.pub.lookupClass)try{n.installBySelector("input."+n.pub.lookupClass+", button."+n.pub.lookupClass,e)}catch(e){}return t},n.pub.trigger=function(e){n.initialized?n.triggerGlobal(e):n.triggerQueue.push(e)},n.pub.hide=function(){n.picker&&n.picker.owner&&n.picker.owner.hide()},n.pub.chessboard=function(e){return e||(e="rgba(0,0,0,0)"),n.genColorPreviewCanvas(e).canvas.toDataURL()},n.pub.background=function(e){var t=[];t.push(n.genColorPreviewGradient(e));var r=n.genColorPreviewCanvas();return t.push(["url('"+r.canvas.toDataURL()+"')","left top","repeat"].join(" ")),t.join(", ")},n.pub.options={},n.pub.lookupClass="jscolor",n.pub.installByClassName=function(){return console.error('jscolor.installByClassName() is DEPRECATED. Use data-jscolor="" attribute instead of a class name.'+n.docsRef),!1},n.register(),n.pub);return void 0===e.jscolor&&(e.jscolor=e.JSColor=i),i}); diff --git a/js/rubifyGUI.js b/js/rubifyGUI.js new file mode 100644 index 0000000..7ad8a8a --- /dev/null +++ b/js/rubifyGUI.js @@ -0,0 +1,145 @@ +import Rubify from "./index.js"; +/** + * @author jomin398 + * @see {@link Rubify} + * @desc GUI Api for Rubify homepage + */ +export default class RubifyGUI extends Rubify { + constructor() { + super(); + } + init() { + document.getElementById("revealhtml").onclick = () => this.#toggleHtml(); + document.getElementById("savesvg").onclick = () => this.#saveSvg(); + document.getElementById("savepng").onclick = () => this.#savePng(); + document.querySelector("#convert_buttons :nth-child(1)").onclick = () => this.#venify(); + document.querySelector("#convert_buttons :nth-child(2)").onclick = () => this.#demo(); + document.querySelector('form#inmode').onchange = m => this.#changeMode(m.target.value); + document.querySelector('form#rtPos').onchange = v => this.#rtPos(v.target.value); + document.querySelector('form#rtSize').onchange = v => this.#rtSize(v.target.value); + + document.querySelector('form#rbText').onchange = v => this.#rbSize(v.target.value); + document.querySelector('form#rbText').oninput = v => this.#rbSize(v.target.value); + + document.querySelector('input#ptCol').onchange = v => this.#textCol(v.target.value); + document.querySelector('input#ptCol').oninput = v => this.#textCol(v.target.value); + + document.querySelector('input#pbkCol').onchange = v => this.#bgCol(v.target.value); + document.querySelector('input#pbkCol').oninput = v => this.#bgCol(v.target.value); + + document.querySelector('input#prtCol').onchange = v => this.#rtCol(v.target.value); + document.querySelector('input#prtCol').oninput = v => this.#rtCol(v.target.value); + + document.querySelector('#demolang').onchange = () => this.#demo(); + } + #toggleHtml() { + let code = document.getElementById("htmlcode"); + let btn = document.getElementById("revealhtml"); + let style = code.style; + if (style.display == "none") { + style.display = ""; + btn.textContent = "Hide HTML"; + } else { + style.display = "none"; + btn.textContent = "Show HTML"; + } + } + + #changeMode(mode) { + let div = document.getElementById(mode); + div.style.display = ""; + let off = "simple"; + if (mode == "simple") { + off = "complex"; + } + document.getElementById(off).style.display = "none"; + } + + #rtPos(pos) { + let div = document.getElementById("textout"); + div.style.rubyPosition = pos; + } + + #rtSize(size) { + let rtsize = document.getElementById("style_rt_size"); + rtsize.textContent = "rt {font-size: " + size + "}"; + } + + #rbSize(size) { + let textout = document.getElementById("textout"); + let rbsval = document.getElementById("rbsval"); + textout.style.fontSize = size + "em"; + } + + #rtCol(col) { + let rtcol = document.getElementById("style_rt_col"); + rtcol.textContent = "rt {color: " + col + "}"; + } + + #bgCol(picker) { + document.getElementById('textout').style.backgroundColor = picker; + } + + #textCol(picker) { + document.getElementById('textout').style.color = picker; + } + + #saveSvg() { + domtoimage.toSvg(document.querySelector("#textout")) + .then(dataUrl => { + var link = document.createElement('a'); + link.download = 'rubify.svg'; + link.href = dataUrl; + link.click(); + }); + } + + #savePng() { + domtoimage.toPng(document.querySelector("#textout")) + .then(dataUrl => { + var link = document.createElement('a'); + link.download = 'rubify.png'; + link.href = dataUrl; + link.click(); + }); + } + + #demo() { + let lang = parseInt(document.getElementById("demolang").value); + + let rbinput = document.getElementById("rbinput"); + let rtinput = document.getElementById("rtinput"); + let complexin = document.getElementById("complexin"); + + let rbiArr = ["漢語拼音", "注音符號", "粵語拼音", "日本語の振り仮名", "韓國語"]; + let rtiArr = ["Hàn yǔ pīn yīn", "ㄓㄨˋ ㄧㄣ ㄈㄨˊ ㄏㄠˋ", "Jyut⁶ jyu⁵ ping¹ yam¹", "に ほん ご の ふ り が な", "한 국 어"]; + let prcArr = ["漢(Hàn)語(yǔ)拼(pīn)音(yīn)", "注(ㄓㄨˋ)音(ㄧㄣ)符(ㄈㄨˊ)號(ㄏㄠˋ)", "粵(Jyut⁶)語(jyu⁵)拼(ping¹)音(yam¹)", "日(に)本(ほん)語(ご)の()振(ふ)り()仮(が)名(な)", "韓(한)國(국)語(어)"]; + + rbinput.value = rbiArr[lang]; + rtinput.value = rtiArr[lang]; + complexin.value = prcArr[lang]; + } + #venify() { + let textout = document.getElementById("textout"); + let htmlcode = document.getElementById("htmlcode"); + let revealbtn = document.getElementById("revealhtml"); + let savepng = document.getElementById("savepng"); + let savesvg = document.getElementById("savesvg"); + let mode = document.forms[0].inputmode.value; + let result = ""; + if (mode == "simple") { + let rb = document.getElementById("rbinput").value; + let rt = document.getElementById("rtinput").value; + result += this.simpleConv(rb, rt); + } else { + let comp = document.getElementById("complexin").value; + result += this.complexConv(comp); + } + result += ""; + textout.innerHTML = result; + htmlcode.value = result; + revealbtn.style.display = ""; + savepng.style.display = ""; + savesvg.style.display = ""; + } +} \ No newline at end of file