Skip to content

Commit 60c65b9

Browse files
JDMCreatorJDMCreator
committed
Version 1.0
Updated sources to version 1.0. See changelog.
1 parent 309bd95 commit 60c65b9

File tree

13 files changed

+1944
-795
lines changed

13 files changed

+1944
-795
lines changed

‎readme.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ You need Bootstrap 3 and JQuery. See the online example.
1616

1717
- LaTeX
1818
- Plain TeX
19+
- PreTeXt
1920
- Markdown
2021
- HTML
2122
- CSV

‎src/changelog.txt‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,61 @@ Legend
66
[#] Fixed
77
Dates use a YYYY/MM/DD format.
88

9+
Version 1.0
10+
===========
11+
12+
| First stable release.
13+
| Note on this release : this release introduces a color picker,
14+
| import from Markdown, export to PreTeXt, microtuning, decimal
15+
| format for 'siunitx', multiple bug fixes and more
16+
17+
CORE
18+
19+
[+] Moved Core to Table.js 0.2 STABLE
20+
[+] The toolbar now scrolls down with the user
21+
[+] ColorPicker
22+
[+] Convert the code to a MWE
23+
[/] Changed the way background cell were handled
24+
[#] Fixed an issue where cells could go over the right panel
25+
[#] Fixed an issue where the toolbar could go over modals
26+
[#] Fixed an issue where alternate row colors could go on other tables
27+
[#] Cells without background showed a black background on the info panel
28+
[#] New version of Table.js fixes issues with adding columns and rows
29+
30+
LATEX EXPORT
31+
32+
[+] Added a microtuning option which fix alignment issues with borders
33+
[+] Support for decimal format with 'siunitx' (i.e. S[table-format=3.2])
34+
[/] Multirow cells no longer use 'makecell' unless it is rotated
35+
[#] Fixed an issue where background color could leak inside double borders
36+
[#] Color of the vertical dashed/dotted left border of the first column could be ignored if it was a named color
37+
[#] Fixed an issue where the background color was not applied for multiline cells and cells with bullets points
38+
[#] Fixed useless code when vertical rules from Booktab (lol) were used
39+
[#] Caption did not work with longtable
40+
41+
IMPORT MODULE
42+
43+
[+] Import from Markdown
44+
45+
PASTE IMPORT MODULE
46+
47+
[+] Alignment of cells supported, including with legacy "align" attribute
48+
[#] The module produded alerts
49+
50+
LATEX IMPORT
51+
52+
[+] Support for \endfirsthead and \endhead from 'longtable'
53+
[+] Support for primitive \crcr
54+
[+] Minimal support for \endfoot and \endlastfoot from 'longtable'
55+
56+
HTML EXPORT
57+
58+
[#] Fixed a small issue with spaces and equations
59+
60+
PRETEXT EXPORT
61+
62+
[+] New PreTeXt export module
63+
964
Version 0.9.1 BETA
1065
===========
1166

‎src/colorPicker.js‎

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
(function(){
2+
var $ = function(id){return document.getElementById(id)};
3+
var ColorPicker = new (function(){
4+
var analyzeColor = function(e){
5+
var color = e.target.value;
6+
if(e.target.id == "colorpicker-rgb"){
7+
if(color.indexOf("rgb")<0){
8+
color = "rgb("+color+")";
9+
}
10+
}
11+
if(e.target.id == "colorpicker-hsl"){
12+
if(color.indexOf("hsl")<0){
13+
color = "hsl("+color+")";
14+
}
15+
}
16+
ColorPicker.color(color);
17+
18+
},
19+
shadeColor = function(color, percent) {
20+
var f=parseInt(color.slice(1),16),t=percent<0?0:255,p=percent<0?percent*-1:percent,R=f>>16,G=f>>8&0x00FF,B=f&0x0000FF;
21+
return "#"+Math.round(0x1000000+(Math.round((t-R)*p)+R)*0x10000+(Math.round((t-G)*p)+G)*0x100+(Math.round((t-B)*p)+B)).toString(16).slice(1);
22+
},
23+
toHex = function(color){
24+
return "#"+Math.round((1 << 24) + (color[0] << 16) + (color[1] << 8) + color[2]).toString(16).slice(1);
25+
},
26+
rangeColor = function(){
27+
var color = "rgb(";
28+
color += $("colorpicker-r").value + ",";
29+
color += $("colorpicker-g").value + ",";
30+
color += $("colorpicker-b").value + ")";
31+
ColorPicker.color(color);
32+
},
33+
rgbToHsl = function(r, g, b){
34+
r /= 255, g /= 255, b /= 255;
35+
var max = Math.max(r, g, b), min = Math.min(r, g, b);
36+
var h, s, l = (max + min) / 2;
37+
38+
if(max == min){
39+
h = s = 0; // achromatic
40+
}else{
41+
var d = (max - min);
42+
s = l >= 0.5 ? d / (2 - (max + min)) : d / (max + min);
43+
switch(max){
44+
case r: h = ((g - b) / d + 0)*60; break;
45+
case g: h = ((b - r) / d + 2)*60; break;
46+
case b: h = ((r - g) / d + 4)*60; break;
47+
}
48+
}
49+
console.log(h);
50+
return [h, s, l];
51+
}
52+
53+
this.actualSettings = null;
54+
this.color = function(color){
55+
console.log(color);
56+
color = toRGBA(color) || [0,0,0,1];
57+
console.log(color);
58+
color = color.map(function(a){return a||0})
59+
color.pop();
60+
var rgb = "rgb("+color.map(Math.round).join()+")",
61+
hex = toHex(color),
62+
hsl = rgbToHsl(color[0], color[1], color[2]);
63+
hsl = "hsl("+Math.round((hsl[0]+720)%360)+","+Math.round(hsl[1]*100)+"%,"+Math.round(hsl[2]*100)+"%)";
64+
var name = ntc.name(hex)[1];
65+
$("colorpicker-r").value = color[0];
66+
$("colorpicker-g").value = color[1];
67+
$("colorpicker-b").value = color[2];
68+
$("colorpicker-rgb").value = rgb;
69+
$("colorpicker-hex").value = hex;
70+
$("colorpicker-hsl").value = hsl;
71+
$("colorpicker-container").style.color = hex;
72+
$("colorpicker-name").innerHTML = name;
73+
$("colorpicker-name1").innerHTML = name;
74+
$("colorpicker-name2").innerHTML = name;
75+
}
76+
this.choose = function(){
77+
if(this.actualSettings){
78+
var rgba = this.actualRGBA(),
79+
hex = toHex(rgba);
80+
if(this.actualSettings[0].type){
81+
this.actualSettings[0].value = hex;
82+
}
83+
if(this.actualSettings[1]){
84+
this.actualSettings[1](hex);
85+
}
86+
}
87+
this.actualSettings = null;
88+
jQuery("#colorpicker").modal('hide');
89+
}
90+
this.cancel = function(){
91+
if(this.actualSettings && this.actualSettings[1]){
92+
this.actualSettings[1]();
93+
}
94+
this.actualSettings = null;
95+
jQuery("#colorpicker").modal('hide');
96+
}
97+
this.get = function(color, callback){
98+
color = color || "#000000";
99+
this.actualSettings = [color, callback];
100+
if(color.nodeType){
101+
color = color.value;
102+
}
103+
this.color(color);
104+
var element = $("colorpicker-table-scheme");
105+
while(element.firstChild){
106+
element.removeChild(element.firstChild);
107+
}
108+
var schemes = this.getTableColorScheme(),
109+
frag = document.createDocumentFragment();
110+
for(var i=0;i<schemes.length;i++){
111+
var div = document.createElement("div"),
112+
scheme = "rgb("+schemes[i].join(",")+")";
113+
div.setAttribute("data-color", scheme);
114+
div.title = scheme;
115+
div.style.backgroundColor = scheme;
116+
div.addEventListener("click", function(){
117+
ColorPicker.color(this.getAttribute("data-color"));
118+
}, false);
119+
frag.appendChild(div);
120+
}
121+
element.appendChild(frag);
122+
element = $("colorpicker-default-scheme"),
123+
frag = document.createDocumentFragment();
124+
if(!element.firstElementChild){
125+
schemes = ["white", "silver", "gray", "black",
126+
"orange", "red", "maroon", "yellow", "olive", "lime",
127+
"green", "aqua", "teal", "blue",
128+
"navy", "fuchsia", "purple"];
129+
for(var i=0;i<schemes.length;i++){
130+
var div = document.createElement("div"),
131+
scheme = schemes[i];
132+
div.setAttribute("data-color", scheme);
133+
div.title = scheme;
134+
div.style.backgroundColor = scheme;
135+
div.addEventListener("click", function(){
136+
ColorPicker.color(this.getAttribute("data-color"));
137+
}, false);
138+
frag.appendChild(div);
139+
}
140+
}
141+
element.appendChild(frag);
142+
jQuery("#colorpicker").modal('show');
143+
}
144+
this.actualRGBA = function(){
145+
return toRGBA($("colorpicker-container").style.color)
146+
}
147+
this.getTableColorScheme = function(){
148+
var table = $("table"),
149+
colors = ["#000000", "#ffffff"],
150+
alternate = window.table.oddEvenColors();
151+
if(alternate){
152+
colors.push(alternate[1], alternate[2])
153+
}
154+
for(var i=0;i<table.rows.length;i++){
155+
var cells = table.rows[i].cells;
156+
for(var j=0;j<cells.length;j++){
157+
var cell = cells[j], style = cell.style;
158+
if(style.backgroundColor){
159+
colors.push(style.backgroundColor);
160+
}
161+
if(style.borderLeftColor){
162+
colors.push(style.borderLeftColor);
163+
}
164+
if(style.borderTopColor){
165+
colors.push(style.borderTopColor);
166+
}
167+
if(style.borderRightColor){
168+
colors.push(style.borderRightColor);
169+
}
170+
if(style.borderBottomColor){
171+
colors.push(style.borderBottomColor);
172+
}
173+
}
174+
}
175+
var elements = table.querySelectorAll('font[color], tr > * [style*="color"]');
176+
for(var i=0;i<elements.length;i++){
177+
var element = elements[i];
178+
if(element.hasAttribute("color")){
179+
colors.push(element.getAttribute("color"));
180+
}
181+
if(element.style.color){
182+
colors.push(element.style.color);
183+
}
184+
}
185+
var col = {};
186+
for(var i=0;i<colors.length;i++){
187+
var rgba = toRGBA(colors[i]) || [0,0,0,1];
188+
if(rgba[3] === 0){continue;}
189+
rgba.pop();
190+
col[rgba.join(",")] = true;
191+
}
192+
colors = [];
193+
for(var i in col){
194+
if(col.hasOwnProperty(i)){
195+
colors.push(i.split(","));
196+
}
197+
}
198+
return colors;
199+
}
200+
this.shade = function(p){
201+
var hex = toHex(this.actualRGBA());
202+
this.color(shadeColor(hex, p));
203+
}
204+
this.init = function(){
205+
$("colorpicker-rgb").addEventListener("blur", analyzeColor, false);
206+
$("colorpicker-hex").addEventListener("blur", analyzeColor, false);
207+
$("colorpicker-hsl").addEventListener("blur", analyzeColor, false);
208+
$("colorpicker-r").addEventListener("input", rangeColor, false);
209+
$("colorpicker-g").addEventListener("input", rangeColor, false);
210+
$("colorpicker-b").addEventListener("input", rangeColor, false);
211+
}
212+
})();
213+
ColorPicker.init();
214+
window.ColorPicker = ColorPicker;
215+
})();

‎src/css.css‎

Lines changed: 62 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,10 @@
199199
}
200200

201201
td[data-diagonal], #extract-div td[style*=mso-diagonal-down] {
202-
background: linear-gradient(to right top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 49.9%, #000000 50%, #000000 51%, rgba(255, 255, 255, 0) 51.1%, rgba(255, 255, 255, 0) 100%);
202+
background-image: linear-gradient(to right top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 49.999%, #000000 50%, #000000 51%, rgba(255, 255, 255, 0) 51.0001%, rgba(255, 255, 255, 0) 100%);
203+
}
204+
td[data-diagonal][data-selected]{
205+
background-image: linear-gradient(to right top, rgba(50,151,253,0.5) 0%, rgba(50,151,253,0.5) 49.9%, #000000 50%, #000000 51%, rgba(50,151,253,0.5) 51.1%, rgba(50,151,253,0.5) 100%);
203206
}
204207
td[data-diagonal] div[contenteditable] {
205208
text-align: left;
@@ -347,37 +350,75 @@
347350
}
348351

349352
body:not([data-view-editor]) #table td[data-selected]{
350-
overflow:hidden;
353+
//overflow:hidden;
351354
}
352355
body:not([data-view-editor]) #table td[data-selected] div.outer {
353-
position:relative;
356+
//position:relative;
354357
}
355358
body:not([data-view-editor]) #table td[data-selected] div[contenteditable] {
356-
position: relative;
357-
z-index:100;
358359
color:black;
359-
color:HighlightText;
360-
}
361-
body:not([data-view-editor]) #table td[data-selected] div.outer:before {
362-
content: "";
363-
position: absolute;
364-
background:whitesmoke;
365-
background:highlight;
366-
z-index: 2;
367-
opacity:0.5;
368-
left: -9999px;
369-
bottom: -9999px;
370-
top: -9999px;
371-
right: -9999px;
372360
}
373361

374362
#table td,
375363
#table tr{
376364
margin: 0;
377365
padding: 0;
378366
}
379-
367+
.border-line{
368+
border-top:1px dashed black;
369+
transform-origin: top left;
370+
z-index:9999;
371+
display:none;
372+
position:absolute;
373+
width:100px;
374+
height:5px;
375+
}
380376
body:not([data-view-editor]) #table td[data-selected]:not([data-two-diagonals]):not([data-diagonal]) {
381-
// background: highlight;
377+
background-image:linear-gradient(rgba(50,151,253,0.5),rgba(50,151,253,0.5));
382378
height:auto !important;
383-
}
379+
}
380+
.nav-latex{
381+
background-color:white;
382+
z-index:945;
383+
position:sticky;
384+
top:0;
385+
padding-top:3px;
386+
}
387+
/* Color Picker */
388+
#colorpicker-name{
389+
background-image:linear-gradient(to right, white, white 49.99%, black 50%);
390+
text-align:center;
391+
font-weight:bold;
392+
padding:1rem 0;
393+
font-size:150%;
394+
}
395+
.color-scheme{
396+
display:flex;
397+
flex-wrap:wrap;
398+
margin:5px 0;
399+
}
400+
.color-scheme > div{
401+
margin:2px;
402+
cursor:pointer;
403+
width:30px;
404+
height:30px;
405+
border:2px solid black;
406+
}
407+
.color-scheme > div:hover{
408+
border-color:gray;
409+
}
410+
#colorpicker-container{
411+
background-color:currentColor;
412+
padding:2rem 10rem;
413+
}
414+
@keyframes highlight {
415+
0% {
416+
background: red
417+
}
418+
100% {
419+
background: none;
420+
}
421+
}
422+
#support-us.active{
423+
animation:highlight 1s;
424+
}

0 commit comments

Comments
 (0)