Commit 18838710 authored by Luc Didry's avatar Luc Didry
Browse files

Add print button and CSS

parent 9c6f279b
......@@ -8,3 +8,12 @@ canvas, #svg {
margin-left: auto;
margin-right: auto;
}
@media print {
nav.navbar, nav.sidebar, #settings, .controls {
display: none !important;
}
#canvas {
display: block !important;
}
}
.row,.buttons a{margin-top:1rem}.row.buttons{margin-top:0}canvas,#svg{margin-left:auto;margin-right:auto}
\ No newline at end of file
.row,.buttons a{margin-top:1rem}.row.buttons{margin-top:0}canvas,#svg{margin-left:auto;margin-right:auto}@media print{nav.navbar,nav.sidebar,#settings,.controls{display:none!important}#canvas{display:block!important}}
\ No newline at end of file
......@@ -89,7 +89,7 @@
</div>
<main class="col ml-sm-auto col-md-10 pt-3">
<noscript>You need Javascript to use this tool!</noscript>
<div class="row text-center">
<div class="row text-center controls">
<div class="col-md-4 col-sm-12 form-group">
<label for="wemake">First line</label>
<input id="wemake" placeholder="WE MAKE" type="text" value="WE MAKE" class="form-control text-md-right text-center">
......@@ -103,16 +103,19 @@
<input id="filename" placeholder="WE_MAKE_PORN.png" type="text" value="WE_MAKE_PORN.png" class="form-control text-center">
</div>
</div>
<div class="row text-center buttons">
<div class="col-md-4 col-sm-12">
<div class="row text-center buttons controls">
<div class="col-md-3 col-sm-12">
<a class="btn btn-info btn-block" href="#" id="toggle-svg">Work with SVG</a>
</div>
<div class="col-md-4 col-sm-12">
<div class="col-md-3 col-sm-12">
<a class="btn btn-info btn-block" href="#" id="download">Download</a>
</div>
<div class="col-md-4 col-sm-12">
<div class="col-md-3 col-sm-12">
<a class="btn btn-info btn-block" href="#" id="reset">Reset to default</a>
</div>
<div class="col-md-3 col-sm-12">
<a class="btn btn-info btn-block" href="#" id="print">Print</a>
</div>
</div>
<div class="row text-center">
<div class="col-md-12 col-lg-6 d-none text-left" id="settings">
......
......@@ -122,7 +122,7 @@ function translate(userLang, languages) {
}
});
['donate-dpdn', 'i18n-dpdn', 'settings-dpdn', 'toggle-svg', 'download', 'reset', 'switch-colors',
'make-text-center'
'make-text-center', 'print'
].forEach(function(e) {
if (locale[e] !== undefined) {
$('#'+e).text(locale[e]);
......@@ -351,6 +351,12 @@ function bindEvents() {
createCookie('lang', $(this).data('i18n'), 30);
translate($(this).data('i18n'));
});
// Print
$('#print').click(function(e) {
e.preventDefault();
window.print();
});
}
function toggleBgSettings() {
......
......@@ -5,11 +5,11 @@ void 0!==a&&null!==a&&e.push(a)
for(var t=navigator.languages,s=0;s<t.length;s++)e.push(t[s])
if(0!==e.length)translate(e.shift(),e)
else{console.log("Using old style language detection.")
translate(navigator.language||navigator.userLanguage)}}function translate(e,a){$.get({url:"locales/"+e+".json",dataType:"json",error:function(){void 0!==a&&null!==a&&0!==a.length&&translate(a.shift(),a)},success:function(a){toggleI18n(e),["get-source","donate-dpdn","license","author","wemake","porn","border-txt","color","transparency","x-position","y-position","font","style","text-size"].forEach(function(e){void 0!==a[e]&&$("."+e).text(a[e])}),["hide-settings","set-corner-shape","set-colors","set-fonts","set-bg","set-positions","set-img-size"].forEach(function(e){void 0!==a[e]&&$('[data-setting="'+e+'"]').text(a[e])}),["wemake","porn","filename","corners","bg-type","bgu-color","bgr-color","egr-color","gr-orientation","bg-img","custom-img","custom-x","custom-y","custom-size","border-thickness","img-width","img-height"].forEach(function(e){void 0!==a[e]&&$('label[for="'+e+'"]').text(a[e])}),void 0!==a["corners-rounded"]&&$('#corners option[value="20"]').text(a["corners-rounded"]),void 0!==a["corners-square"]&&$('#corners option[value="0"]').text(a["corners-square"]),void 0!==a["add-glitter"]&&$(".form-check-label span").text(a["add-glitter"]),["plain","gradient","rainbow","img","lr","rl","tb","bt","r","beer","glitter","rainbow-flag","sky","field","bridge","regular","bold","italic","italic bold"].forEach(function(e){void 0!==a[e]&&$('option[value="'+e+'"]').text(a[e])}),["donate-dpdn","i18n-dpdn","settings-dpdn","toggle-svg","download","reset","switch-colors","make-text-center"].forEach(function(e){void 0!==a[e]&&$("#"+e).text(a[e])}),void 0!==a["toggle-canvas"]&&(workCanvas=a["toggle-canvas"]),void 0!==a["toggle-svg"]&&(workSvg=a["toggle-svg"])}})}function getParameters(){window.location.hash&&$("#porn").val(decodeURIComponent(window.location.hash.substr(1)))
translate(navigator.language||navigator.userLanguage)}}function translate(e,a){$.get({url:"locales/"+e+".json",dataType:"json",error:function(){void 0!==a&&null!==a&&0!==a.length&&translate(a.shift(),a)},success:function(a){toggleI18n(e),["get-source","donate-dpdn","license","author","wemake","porn","border-txt","color","transparency","x-position","y-position","font","style","text-size"].forEach(function(e){void 0!==a[e]&&$("."+e).text(a[e])}),["hide-settings","set-corner-shape","set-colors","set-fonts","set-bg","set-positions","set-img-size"].forEach(function(e){void 0!==a[e]&&$('[data-setting="'+e+'"]').text(a[e])}),["wemake","porn","filename","corners","bg-type","bgu-color","bgr-color","egr-color","gr-orientation","bg-img","custom-img","custom-x","custom-y","custom-size","border-thickness","img-width","img-height"].forEach(function(e){void 0!==a[e]&&$('label[for="'+e+'"]').text(a[e])}),void 0!==a["corners-rounded"]&&$('#corners option[value="20"]').text(a["corners-rounded"]),void 0!==a["corners-square"]&&$('#corners option[value="0"]').text(a["corners-square"]),void 0!==a["add-glitter"]&&$(".form-check-label span").text(a["add-glitter"]),["plain","gradient","rainbow","img","lr","rl","tb","bt","r","beer","glitter","rainbow-flag","sky","field","bridge","regular","bold","italic","italic bold"].forEach(function(e){void 0!==a[e]&&$('option[value="'+e+'"]').text(a[e])}),["donate-dpdn","i18n-dpdn","settings-dpdn","toggle-svg","download","reset","switch-colors","make-text-center","print"].forEach(function(e){void 0!==a[e]&&$("#"+e).text(a[e])}),void 0!==a["toggle-canvas"]&&(workCanvas=a["toggle-canvas"]),void 0!==a["toggle-svg"]&&(workSvg=a["toggle-svg"])}})}function getParameters(){window.location.hash&&$("#porn").val(decodeURIComponent(window.location.hash.substr(1)))
var e=new URL(window.location)
null!==e.searchParams.get("w")&&$("#wemake").val(e.searchParams.get("w")),null!==e.searchParams.get("wx")&&$("#wemake-x").val(e.searchParams.get("wx")),null!==e.searchParams.get("wy")&&$("#wemake-y").val(e.searchParams.get("wy")),null!==e.searchParams.get("ws")&&$("#wemake-size").val(e.searchParams.get("ws")),null!==e.searchParams.get("wc")&&$("#wemake-color").val(e.searchParams.get("wc")),null!==e.searchParams.get("wa")&&$("#wemake-alpha").val(e.searchParams.get("wa")),null!==e.searchParams.get("wf")&&$("#wemake-font").val(e.searchParams.get("wf")),null!==e.searchParams.get("wfs")&&$("#wemake-font-style").val(e.searchParams.get("wfs")),null!==e.searchParams.get("p")&&$("#porn").val(e.searchParams.get("p")),null!==e.searchParams.get("px")&&$("#porn-x").val(e.searchParams.get("px")),null!==e.searchParams.get("py")&&$("#porn-y").val(e.searchParams.get("py")),null!==e.searchParams.get("ps")&&$("#porn-size").val(e.searchParams.get("ps")),null!==e.searchParams.get("pc")&&$("#porn-color").val(e.searchParams.get("pc")),null!==e.searchParams.get("pa")&&$("#porn-alpha").val(e.searchParams.get("pa")),null!==e.searchParams.get("pf")&&$("#porn-font").val(e.searchParams.get("pf")),null!==e.searchParams.get("pfs")&&$("#porn-font-style").val(e.searchParams.get("pfs")),null!==e.searchParams.get("co")&&$("#bgu-color").val(e.searchParams.get("co")),null!==e.searchParams.get("gli")&&$("#add-glitter").prop("checked","true"===e.searchParams.get("gli")),null!==e.searchParams.get("bgt")&&$("#bg-type").val(e.searchParams.get("bgt")),null!==e.searchParams.get("rc")&&$("#rect-color").val(e.searchParams.get("rc")),null!==e.searchParams.get("ra")&&$("#rect-alpha").val(e.searchParams.get("ra")),null!==e.searchParams.get("bgr")&&$("#bgr-color").val(e.searchParams.get("bgr")),null!==e.searchParams.get("egr")&&$("#egr-color").val(e.searchParams.get("egr")),null!==e.searchParams.get("or")&&$("#gr-orientation").val(e.searchParams.get("or")),null!==e.searchParams.get("bgi")&&"custom"!==e.searchParams.get("bgi")?$("#bg-img").val(e.searchParams.get("bgi")):$("#bg-img").val("beer"),null!==e.searchParams.get("cor")&&$("#corners").val(e.searchParams.get("cor")),null!==e.searchParams.get("f")&&$("#filename").val(e.searchParams.get("f")),null!==e.searchParams.get("width")&&$("#img-width").val(e.searchParams.get("width")),null!==e.searchParams.get("height")&&$("#img-height").val(e.searchParams.get("height")),null!==e.searchParams.get("bth")&&$("#border-thickness").val(e.searchParams.get("bth"))}function bindEvents(){$('input[type="text"]').each(function(e){$(this).keyup(function(){refreshText(),refreshFilename()}),$(this).on("paste",function(){refreshText(),refreshFilename()})}),$('select,input[type="number"],input[type="color"],input[type="checkbox"]').each(function(e){"wemake-font"!==this.id&&"wemake-font-style"!==this.id&&"porn-font"!==this.id&&"porn-font-style"!==this.id?$(this).change(refreshText):$(this).change(function(){waitForfont(this.id)})}),$("#bg-type").change(toggleBgSettings),$("#toggle-svg").click(function(e){e.preventDefault(),$("#svg").hasClass("d-none")?($(this).removeClass("btn-info"),$(this).addClass("btn-primary"),hide("canvas"),show("svg"),this.text=workCanvas):($(this).removeClass("btn-primary"),$(this).addClass("btn-info"),hide("svg"),show("canvas"),this.text=workSvg),refreshText(),refreshFilename()}),$("#download").click(function(e){this.download=$("#filename").val(),$("#svg").hasClass("d-none")?this.href=document.getElementById("canvas").toDataURL().replace("image/png","image/octet-stream"):this.href="data:image/octet-stream;base64,"+btoa(svg.getSerializedSvg(!0))}),$("[data-setting]").click(function(e){e.preventDefault()
var a=$(this)
$("[data-setting]").removeClass("active"),a.addClass("active"),"hide-settings"===a.data("setting")?["settings","set-corner-shape","set-colors","set-fonts","set-bg","set-positions","set-img-size"].forEach(function(e){hide(e)}):["set-corner-shape","set-colors","set-fonts","set-bg","set-positions","set-img-size"].forEach(function(e){e!==a.data("setting")?hide(e):show(e),show("settings")})}),$("#reset").click(function(e){e.preventDefault(),reset()}),$("#switch-colors").click(function(e){e.preventDefault(),switchTextColors(),refreshText()}),$("#make-text-center").click(centerText),$("#custom-img").change(handleImage),void 0!==customImg&&null!==customImg||$("#custom-img").val(null),$("[data-i18n]").click(function(e){e.preventDefault(),createCookie("lang",$(this).data("i18n"),30),translate($(this).data("i18n"))})}function toggleBgSettings(){switch($("#bg-type").val()){case"plain":show("bg-color"),hide("gradient-settings"),hide("bg-img-settings"),hide("bg-custom-img-settings")
$("[data-setting]").removeClass("active"),a.addClass("active"),"hide-settings"===a.data("setting")?["settings","set-corner-shape","set-colors","set-fonts","set-bg","set-positions","set-img-size"].forEach(function(e){hide(e)}):["set-corner-shape","set-colors","set-fonts","set-bg","set-positions","set-img-size"].forEach(function(e){e!==a.data("setting")?hide(e):show(e),show("settings")})}),$("#reset").click(function(e){e.preventDefault(),reset()}),$("#switch-colors").click(function(e){e.preventDefault(),switchTextColors(),refreshText()}),$("#make-text-center").click(centerText),$("#custom-img").change(handleImage),void 0!==customImg&&null!==customImg||$("#custom-img").val(null),$("[data-i18n]").click(function(e){e.preventDefault(),createCookie("lang",$(this).data("i18n"),30),translate($(this).data("i18n"))}),$("#print").click(function(e){e.preventDefault(),window.print()})}function toggleBgSettings(){switch($("#bg-type").val()){case"plain":show("bg-color"),hide("gradient-settings"),hide("bg-img-settings"),hide("bg-custom-img-settings")
break
case"gradient":hide("bg-color"),show("gradient-settings"),hide("bg-img-settings"),hide("bg-custom-img-settings")
break
......
......@@ -63,5 +63,6 @@
"img-height": "Image height",
"border-txt": "Border",
"border-thickness": "Thickness",
"make-text-center": "Center text"
"make-text-center": "Center text",
"print": "Print"
}
......@@ -63,5 +63,6 @@
"img-height": "Hauteur de l’image",
"border-txt": "Bordure",
"border-thickness": "Épaisseur",
"make-text-center": "Centrer le texte"
"make-text-center": "Centrer le texte",
"print": "Imprimer"
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment