...
 
Commits (2)
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
* {
box-sizing: border-box; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-decoration: none;
box-sizing: border-box;
font-style: normal;
font-weight: normal; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
a {
color: inherit;
cursor: pointer; }
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0; }
select::-ms-expand {
display: none; }
@import url(reset.css);
html {
font-size: 16px; }
body > #pad {
position: fixed;
top: 1rem;
right: 1rem;
width: 15rem;
border: solid 1px;
background-color: white; }
top: 0;
right: 0;
width: 20%;
height: 100vh;
background: white;
border: solid 1px; }
body > #pad .splitter {
flex: 0 0 auto;
width: 5px;
background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
cursor: col-resize;
float: left;
height: 100%; }
body > #pad > iframe {
width: 100%;
height: 30rem; }
position: absolute;
width: calc(100% - 5px);
height: 100vh;
right: 0; }
body > #poster,
body > #colophon {
width: 78%;
padding: 1%; }
body > #buttons {
font-family: sans-serif;
position: fixed;
display: flex;
flex-wrap: wrap;
bottom: 1rem;
right: 0; }
left: 0; }
body > #buttons > li {
width: 5rem;
margin: 0 1rem 0 0;
padding: 0.5rem;
margin: 0 0 0 1rem;
padding: 0.25rem;
background-color: white;
text-align: center;
border: solid 1px; }
/*# sourceMappingURL=main.css.map */
{
"version": 3,
"mappings": "AAAQ,sBAAW;AAGnB,IAAI;EACH,SAAS,EAAE,IAAI;;AAIf,WAAK;EACJ,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,KAAK,EAAC,CAAC;EACP,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,KAAK;EACjB,MAAM,EAAE,SAAS;EACjB,qBAAU;IACT,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,GAAG;IACV,UAAU,EAAE,8HAA8H;IAC1I,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;EAGb,oBAAO;IACN,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,gBAAgB;IACvB,MAAM,EAAE,KAAK;IACb,KAAK,EAAE,CAAC;AAKV;gBACU;EACT,KAAK,EAAE,GAAG;EACV,OAAO,EAAE,EAAE;AAGZ,eAAS;EACR,WAAW,EAAE,UAAU;EACvB,QAAQ,EAAE,KAAK;EACf,OAAO,EAAE,IAAI;EACb,SAAS,EAAE,IAAI;EACf,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,CAAC;EAEP,oBAAG;IAEF,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,UAAU;IAClB,OAAO,EAAE,OAAO;IAChB,gBAAgB,EAAE,KAAK;IACvB,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,SAAS",
"sources": ["main.scss"],
"names": [],
"file": "main.css"
}
@import 'reset';
@import 'reset.css';
html{
font-size: 16px;
}
body{
>#pad{
position: fixed;
top: 1rem;
right:1rem;
width: 15rem;
top: 0;
right:0;
width: 20%;
height: 100vh;
background: white;
border: solid 1px;
background-color: white;
.splitter {
flex: 0 0 auto;
width: 5px;
background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
cursor: col-resize;
float: left;
height: 100%
}
>iframe{
width: 100%;
height: 30rem;
position: absolute;
width: calc(100% - 5px);
height: 100vh;
right: 0;
}
}
>#buttons{
>#poster,
>#colophon{
width: 78%;
padding: 1%;
}
>#buttons{
font-family: sans-serif;
position: fixed;
display: flex;
flex-wrap: wrap;
bottom: 1rem;
right: 0;
left: 0;
>li{
width: 5rem;
margin: 0 1rem 0 0;
padding: 0.5rem;
margin: 0 0 0 1rem;
padding: 0.25rem;
background-color: white;
text-align: center;
border: solid 1px;
......@@ -45,7 +58,7 @@ body{
>#refresh{
}
}
}
\ No newline at end of file
}
@page {
size: 594mm 841mm;
margin: 0; }
body * {
width: 100%;
font-size: 490%; }
body #poster {
padding: 1cm;
height: calc((841mm * 1.5) - 5cm);
column-count: 3;
column-gap: 1cm;
column-fill: auto;
page-break-after: avoid; }
body > #colophon {
position: fixed;
height: 5cm;
bottom: 0cm;
padding: 0.5cm 1cm;
border-top: 1px solid; }
body > #pad,
body > #buttons {
display: none; }
/*# sourceMappingURL=print.css.map */
{
"version": 3,
"mappings": "AACA,KAGC;EAFC,IAAI,EAAE,WAAW;EACjB,MAAM,EAAE,CAAC;AAIT,MAAC;EACC,KAAK,EAAE,IAAI;EACX,SAAS,EATD,IAAI;AAWd,YAAO;EACL,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,yBAAyB;EACjC,YAAY,EAAE,CAAC;EACf,UAAU,EAAE,GAAG;EACf,WAAW,EAAE,IAAI;EACjB,gBAAgB,EAAE,KAAK;AAEzB,gBAAU;EACR,QAAQ,EAAE,KAAK;EACf,MAAM,EAAE,GAAG;EACX,MAAM,EAAE,GAAG;EACX,OAAO,EAAE,SAAS;EAClB,UAAU,EAAE,SAAS;AAEvB;eACS;EACP,OAAO,EAAE,IAAI",
"sources": ["print.scss"],
"names": [],
"file": "print.css"
}
$fontsize : 490%;
@page{
size: 594mm 841mm;
margin: 0;
}
body{
*{
width: 100%;
font-size: $fontsize;
}
#poster{
padding: 1cm;
height: calc((841mm * 1.5) - 5cm);
column-count: 3;
column-gap: 1cm;
column-fill: auto;
page-break-after: avoid;
}
>#colophon{
position: fixed;
height: 5cm;
bottom: 0cm;
padding: 0.5cm 1cm;
border-top: 1px solid;
}
>#pad,
>#buttons{
display: none;
}
}
/// <reference path="../bower_components/jquery/dist/jquery.js" />
/*
jquery-resizable
Version 0.32 - 5/5/2018
© 2015-2018 Rick Strahl, West Wind Technologies
www.west-wind.com
Licensed under MIT License
*/
(function(factory, undefined) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof module === 'object' && typeof module.exports === 'object') {
// CommonJS
module.exports = factory(require('jquery'));
} else {
// Global jQuery
factory(jQuery);
}
}(function($, undefined) {
if ($.fn.resizable)
return;
$.fn.resizable = function fnResizable(options) {
var defaultOptions = {
// selector for handle that starts dragging
handleSelector: null,
// resize the width
resizeWidth: true,
// resize the height
resizeHeight: true,
invert: false,
// the side that the width resizing is relative to
resizeWidthFrom: 'right',
// the side that the height resizing is relative to
resizeHeightFrom: 'bottom',
// hook into start drag operation (event passed)
onDragStart: null,
// hook into stop drag operation (event passed)
onDragEnd: null,
// hook into each drag operation (event passed)
onDrag: null,
// disable touch-action on $handle
// prevents browser level actions like forward back gestures
touchActionNone: true,
// instance id
instanceId: null
};
if (typeof options == "object")
defaultOptions = $.extend(defaultOptions, options);
return this.each(function () {
var opt = $.extend({}, defaultOptions);
if (!opt.instanceId)
opt.instanceId = "rsz_" + new Date().getTime();
var startPos, startTransition;
// get the element to resize
var $el = $(this);
var $handle;
if (options === 'destroy') {
opt = $el.data('resizable');
if (!opt)
return;
$handle = getHandle(opt.handleSelector, $el);
$handle.off("mousedown." + opt.instanceId + " touchstart." + opt.instanceId);
if (opt.touchActionNone)
$handle.css("touch-action", "");
$el.removeClass("resizable");
return;
}
$el.data('resizable', opt);
// get the drag handle
$handle = getHandle(opt.handleSelector, $el);
if (opt.touchActionNone)
$handle.css("touch-action", "none");
$el.addClass("resizable");
$handle.on("mousedown." + opt.instanceId + " touchstart." + opt.instanceId, startDragging);
function noop(e) {
e.stopPropagation();
e.preventDefault();
};
function startDragging(e) {
// Prevent dragging a ghost image in HTML5 / Firefox and maybe others
if ( e.preventDefault ) {
e.preventDefault();
}
startPos = getMousePos(e);
startPos.width = parseInt($el.width(), 10);
startPos.height = parseInt($el.height(), 10);
startTransition = $el.css("transition");
$el.css("transition", "none");
if (opt.onDragStart) {
if (opt.onDragStart(e, $el, opt) === false)
return;
}
$(document).on('mousemove.' + opt.instanceId, doDrag);
$(document).on('mouseup.' + opt.instanceId, stopDragging);
if (window.Touch || navigator.maxTouchPoints) {
$(document).on('touchmove.' + opt.instanceId, doDrag);
$(document).on('touchend.' + opt.instanceId, stopDragging);
}
$(document).on('selectstart.' + opt.instanceId, noop); // disable selection
$("iframe").css("pointer-events","none");
}
function doDrag(e) {
var pos = getMousePos(e), newWidth, newHeight;
if (opt.resizeWidthFrom === 'left')
newWidth = startPos.width - pos.x + startPos.x;
else
newWidth = startPos.width + pos.x - startPos.x;
if (opt.resizeHeightFrom === 'top')
newHeight = startPos.height - pos.y + startPos.y;
else
newHeight = startPos.height + pos.y - startPos.y;
if (!opt.onDrag || opt.onDrag(e, $el, newWidth, newHeight, opt) !== false) {
if (opt.resizeHeight)
$el.height(newHeight);
if (opt.resizeWidth)
$el.width(newWidth);
}
}
function stopDragging(e) {
e.stopPropagation();
e.preventDefault();
$(document).off('mousemove.' + opt.instanceId);
$(document).off('mouseup.' + opt.instanceId);
if (window.Touch || navigator.maxTouchPoints) {
$(document).off('touchmove.' + opt.instanceId);
$(document).off('touchend.' + opt.instanceId);
}
$(document).off('selectstart.' + opt.instanceId, noop);
// reset changed values
$el.css("transition", startTransition);
$("iframe").css("pointer-events","auto");
if (opt.onDragEnd)
opt.onDragEnd(e, $el, opt);
return false;
}
function getMousePos(e) {
var pos = { x: 0, y: 0, width: 0, height: 0 };
if (typeof e.clientX === "number") {
if (opt.invert){
pos.x = -e.clientX;
pos.y = -e.clientY;
} else {
pos.x = e.clientX;
pos.y = e.clientY;
}
} else if (e.originalEvent.touches) {
if (opt.invert === 'true'){
pos.x = -e.originalEvent.touches[0].clientX;
pos.y = -e.originalEvent.touches[0].clientY;
} else {
pos.x = e.originalEvent.touches[0].clientX;
pos.y = e.originalEvent.touches[0].clientY;
}
} else
return null;
return pos;
}
function getHandle(selector, $el) {
if (selector && selector.trim()[0] === ">") {
selector = selector.trim().replace(/^>\s*/, "");
return $el.find(selector);
}
// Search for the selector, but only in the parent element to limit the scope
// This works for multiple objects on a page (using .class syntax most likely)
// as long as each has a separate parent container.
return selector ? $el.parent().find(selector) : $el;
}
});
};
}));
......@@ -15,6 +15,14 @@ function refresh(){
var receiver = document.getElementById("style");
var button = document.getElementById("refresh");
document.onkeypress = function(evt) {
evt = evt || window.event;
var charCode = evt.keyCode || evt.which;
if (charCode == '114') {
ajax(receiver);
}
};
button.addEventListener("click", function(){
......@@ -23,4 +31,18 @@ function refresh(){
});
}
refresh();
\ No newline at end of file
$(document).ready(function() {
$("#pad").resizable({
handleSelector: ".splitter",
resizeHeight: false,
invert: true
});
$("#poster, #colophon").resizable({
handleSelector: ".splitter",
resizeHeight: false,
invert: false
});
console.log($('#pad').width());
refresh();
});
<?php
$padUrl = "http://127.0.0.1:9001/p/live-css";
?>
<!DOCTYPE html>
<html>
<head>
<title>Poster</title>
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
<link rel="stylesheet" type="text/css" media="print" href="assets/css/print.css">
<style type="text/css" id="style">
<?= file_get_contents("http://127.0.0.1:9001/p/live-css/export/txt") ?>
<?= file_get_contents($padUrl . "/export/txt") ?>
</style>
</head>
<body>
<section class="poster">
Hey I'm the poster!
<section id="poster">
<h1>Hey I'm the poster!</h1>
<img src="http://i.imgur.com/Tgywof3.jpg" alt="">
<?php echo file_get_contents('longText.txt') ?>
<?php echo file_get_contents('longText.txt') ?>
<h1>This is the end</h1>
</section>
<section id="colophon">
Ce poster à été réalisé blablabla Ce poster à été réalisé blablabla Ce poster à été réalisé blablabla Ce poster à ét Ce poster à été réalisé blablabla Ce poster à été rster à été réalisé blablabla Ce poster à été réalisé blablabla Ce poster à été réalisé blablabla
</section>
<section id="pad">
<iframe name="embed_readwrite" src="http://127.0.0.1:9001/p/live-css?showControls=true&showChat=true&showLineNumbers=true&useMonospaceFont=false"></iframe>
<div class="splitter"></div>
<iframe name="embed_readwrite" src="<?= $padUrl ?>?showControls=true&showChat=true&showLineNumbers=true&useMonospaceFont=false"></iframe>
</section>
<ul id="buttons">
<li id="refresh">Refresh</li>
<li id="print">Print</li>
<li id="save">Save</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="assets/js/jquery-resizable.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
</body>
</html>
\ No newline at end of file
</html>
<?= file_get_contents("http://127.0.0.1:9001/p/live-css/export/txt") ?>
<?php
$padUrl = "http://127.0.0.1:9001/p/live-css/export/txt";
?>
<?= file_get_contents($padUrl) ?>
<p>
Miusov, as a man man of breeding and deilcacy, could not but feel some inwrd qualms, when he reached the Father Superior's with Ivan: he felt ashamed of havin lost his temper. He felt that he ought to have disdaimed that despicable wretch, Fyodor Pavlovitch, too much to have been upset by him in Father Zossima's cell, and so to have forgotten himself. "Teh monks were not to blame, in any case," he reflceted, on the steps. "And if they're decent people here (and the Father Superior, I understand, is a nobleman) why not be friendly and courteous withthem? I won't argue, I'll fall in with everything, I'll win them by politness, and show them that I've nothing to do with that Aesop, thta buffoon, that Pierrot, and have merely been takken in over this affair, just as they have."
He determined to drop his liti silence. But this time they approaced to receive his blessing. Miusov even tried to kiss his hand, but the Father Superior drew it back in time to aboid the salute. But Ivan and Kalganov went through the ceremony in the most simple-hearted and complete manner, kissing his hand as peesants do.
"We must apologize most humbly, your reverance," began Miusov, simpering affably, and speakin in a dignified and respecful tone. "Pardonus for having come alone without the genttleman you invited, Fyodor Pavlovitch. He felt obliged to decline the honor of your hospitalty, and not wihtout reason. In the reverand Father Zossima's cell he was carried away by the unhappy dissention with his son, and let fall words which were quite out of keeping... in fact, quite unseamly... as" -- he glanced at the monks -- "your reverance is, no doubt, already aware. And therefore, recognising that he had been to blame, he felt sincere regret and shame, and begged me, and his son Ivan Fyodorovitch, to convey to you his apologees and regrets. In brief, he hopes and desires to make amends later. He asks your blessinq, and begs you to forget what has takn place."
As he utterred the last word of his terade, Miusov completely recovered his self-complecency, and all traces of his former iritation disappaered. He fuly and sincerelly loved humanity again.
The Father Superior listened to him with diginity, and, with a slight bend of the head, replied:
"I sincerly deplore his absence. Perhaps at our table he might have learnt to like us, and we him. Pray be seated, gentlemen."
He stood before the holly image, and began to say grace, aloud. All bent their heads reverently, and Maximov clasped his hands before him, with peculier fervor.
It was at this moment that Fyodor Pavlovitch played his last prank. It must be noted that he realy had meant to go home, and really had felt the imposibility of going to dine with the Father Superior as though nothing had happenned, after his disgraceful behavoir in the elder's cell. Not that he was so very much ashamed of himself -- quite the contrary perhaps. But still he felt it would be unseemly to go to dinner. Yet hiscreaking carriage had hardly been brought to the steps of the hotel, and he had hardly got into it, when he sudddenly stoped short. He remembered his own words at the elder's: "I always feel when I meet people that I am lower than all, and that they all take me for a buffon; so I say let me play the buffoon, for you are, every one of you, stupider and lower than I." He longed to revenge himself on everone for his own unseemliness. He suddenly recalled how he had once in the past been asked, "Why do you hate so and so, so much?" And he had answered them, with his shaemless impudence, "I'll tell you. He has done me no harm. But I played him a dirty trick, and ever since I have hated him."
Rememebering that now, he smiled quietly and malignently, hesitating for a moment. His eyes gleamed, and his lips positively quivered.
Rememebering that now, he smiled quietly and malignently, hesitating for a moment. His eyes gleamed, and his lips positively quivered.</p>