chris
/
jpc-like-websites
1
0
Fork 0
Code Issues Pull Requests Projects Releases 6 Wiki Activity
Browse Source

FEAT: Extended functionallity

master 1.1.0
chris 7 months ago
parent
0262bfb94b
commit
03eb5fbc24
7 changed files with 807 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      join_js_files.sh
  2. 51
      src/js/baseComponents.js
  3. 22
      src/js/builder.js
  4. 585
      src/js/color.js
  5. 47
      src/js/component.js
  6. 92
      src/js/componentAttribute.js
  7. 61
      src/js/modifier.js

4
join_js_files.sh
View File

@ -1,9 +1,9 @@
TARGET="jpc-like-websites.js"
SRC="src/js"
ORDERED_LIST="context.js componentAttribute.js modifier.js component.js baseComponents.js builder.js"
ORDERED_LIST="context.js componentAttribute.js color.js modifier.js component.js baseComponents.js builder.js"
echo "" > $TARGET
for i in $ORDERED_LIST; do
cat $SRC/$i >> $TARGET
done
done

51
src/js/baseComponents.js
View File

@ -13,21 +13,24 @@ class FlexContainerComponent extends Component {
* @param {Component|Array<Component>} innerComponent
* @returns this component object
*/
childContext(innerComponent) {
childComponents(innerComponent) {
if (innerComponent instanceof Array) {
innerComponent.forEach(icomp => {
icomp.modifier(
new Modifier()
.setStyleRule("flex", "none")
(icomp instanceof Component
? icomp
: icomp.backToComponent()
)
})
} else {
innerComponent.modifier(
new Modifier()
.chainModifier()
.setStyleRule("flex", "none")
)
})
} else if (!innerComponent instanceof Component) {
innerComponent
.backToComponent()
.chainModifier()
.setStyleRule("flex", "none")
}
return super.childContext(innerComponent);
return super.childComponents(innerComponent);
}
}
@ -40,6 +43,7 @@ class Column extends FlexContainerComponent {
.addStyleClass("column-component")
.modifier(
new Modifier()
.fillMaxHeight()
.setStyleRule("flex-direction", "column")
);
}
@ -47,14 +51,39 @@ class Column extends FlexContainerComponent {
/**
* A FlexContainerComponent, which organizes the children in a row like manner.
*/
*/
class Row extends FlexContainerComponent {
constructor(attr = {}) {
super(attr)
.addStyleClass("row-component")
.modifier(
new Modifier()
.fillMaxWidth()
.setStyleRule("flex-direction", "row")
)
}
childComponents(innerComponent) {
if (innerComponent instanceof Array) {
innerComponent.forEach((icomp, i) => {
(icomp instanceof Component
? icomp
: icomp.backToComponent()
).modifier(
/* sets the width for all elements,
to avoid overlapping or line break because of lacking width,
a percent is subtracted for every child element */
new Modifier()
.setStyleRule("float", (i === 0 ? "left" : "right"))
.fillMaxWidth((Math.floor((10000 - 100 * innerComponent.length) / innerComponent.length) / 10000))
)
})
} else {
innerComponent.modifier(
new Modifier()
.setStyleRule("flex", "none")
)
}
return super.childComponents(innerComponent)
}
}

22
src/js/builder.js
View File

@ -1,4 +1,12 @@
const builder = {
components: {
parent: {},
current: {},
previous: {},
next: {},
openedChain: {}
},
genTag: function (tag, attr = {}) { return new Component(document.createElement(tag), attr); },
anchor: function (attr = {}) { return builder.genTag("a", attr); },
@ -17,10 +25,20 @@ const builder = {
img: function (attr = {}) { return builder.genTag("img", attr); },
textarea: function (attr = {}) { return builder.genTag("textarea", attr); },
table: function (attr = {}) { return builder.genTag("table", attr) },
tableRow: function (attr = {}) { return builder.genTag("tr", attr) },
tableCell: function (attr = {}) { return builder.genTag("td", attr) },
tableCaption: function (attr = {}) { return builder.genTag("caption", attr) },
tableHeadCell: function (attr = {}) { return builder.genTag("th", attr) },
tableBody: function (attr = {}) { return builder.genTag("tbody", attr) },
tableHead: function (attr = {}) { return builder.genTag("thead", attr) },
tableFooter: function (attr = {}) { return builder.genTag("tfoot", attr) },
row: function (attr = {}) { return new Row(attr) },
column: function (attr = {}) { return new Column(attr) },
page: function(innerComponents){
page: function (innerComponents) {
Page.generate();
document.querySelector('#root').appendChild(innerComponents.generate())
document.querySelector('main').appendChild(innerComponents.generate())
}
}

585
src/js/color.js
View File

@ -0,0 +1,585 @@
/**
* A simple Color class for rgb set color values.
*/
class Color {
#red;
#green;
#blue;
#hex;
constructor(red, green, blue) {
this.#red = red;
this.#green = green;
this.#blue = blue;
}
/**
*
* @returns {string} an rgb object string
*/
cssRGBString() {
return `rgb(${this.#red}, ${this.#green}, ${this.#blue})`;
}
hex(hexcode) {
this.#hex = hexcode;
return this;
}
}
const Colors = Object.freeze({
indian_red: new Color(176, 23, 31).hex('#B0171F'),
crimson: new Color(220, 20, 60).hex('#DC143C'),
lightpink: new Color(255, 182, 193).hex('#FFB6C1'),
lightpink_1: new Color(255, 174, 185).hex('#FFAEB9'),
lightpink_2: new Color(238, 162, 173).hex('#EEA2AD'),
lightpink_3: new Color(205, 140, 149).hex('#CD8C95'),
lightpink_4: new Color(139, 95, 101).hex('#8B5F65'),
pink: new Color(255, 192, 203).hex('#FFC0CB'),
pink_1: new Color(255, 181, 197).hex('#FFB5C5'),
pink_2: new Color(238, 169, 184).hex('#EEA9B8'),
pink_3: new Color(205, 145, 158).hex('#CD919E'),
pink_4: new Color(139, 99, 108).hex('#8B636C'),
palevioletred: new Color(219, 112, 147).hex('#DB7093'),
palevioletred_1: new Color(255, 130, 171).hex('#FF82AB'),
palevioletred_2: new Color(238, 121, 159).hex('#EE799F'),
palevioletred_3: new Color(205, 104, 137).hex('#CD6889'),
palevioletred_4: new Color(139, 71, 93).hex('#8B475D'),
lavenderblush_1: new Color(255, 240, 245).hex('#FFF0F5'), //(lavenderblush)
lavenderblush_2: new Color(238, 224, 229).hex('#EEE0E5'),
lavenderblush_3: new Color(205, 193, 197).hex('#CDC1C5'),
lavenderblush_4: new Color(139, 131, 134).hex('#8B8386'),
violetred_1: new Color(255, 62, 150).hex('#FF3E96'),
violetred_2: new Color(238, 58, 140).hex('#EE3A8C'),
violetred_3: new Color(205, 50, 120).hex('#CD3278'),
violetred_4: new Color(139, 34, 82).hex('#8B2252'),
hotpink: new Color(255, 105, 180).hex('#FF69B4'),
hotpink_1: new Color(255, 110, 180).hex('#FF6EB4'),
hotpink_2: new Color(238, 106, 167).hex('#EE6AA7'),
hotpink_3: new Color(205, 96, 144).hex('#CD6090'),
hotpink_4: new Color(139, 58, 98).hex('#8B3A62'),
raspberry: new Color(135, 38, 87).hex('#872657'),
deeppink_1: new Color(255, 20, 147).hex('#FF1493'), // (deeppink)
deeppink_2: new Color(238, 18, 137).hex('#EE1289'),
deeppink_3: new Color(205, 16, 118).hex('#CD1076'),
deeppink_4: new Color(139, 10, 80).hex('#8B0A50'),
maroon_1: new Color(255, 52, 179).hex('#FF34B3'),
maroon_2: new Color(238, 48, 167).hex('#EE30A7'),
maroon_3: new Color(205, 41, 144).hex('#CD2990'),
maroon_4: new Color(139, 28, 98).hex('#8B1C62'),
mediumvioletred: new Color(199, 21, 133).hex('#C71585'),
violetred: new Color(208, 32, 144).hex('#D02090'),
orchid: new Color(218, 112, 214).hex('#DA70D6'),
orchid_1: new Color(255, 131, 250).hex('#FF83FA'),
orchid_2: new Color(238, 122, 233).hex('#EE7AE9'),
orchid_3: new Color(205, 105, 201).hex('#CD69C9'),
orchid_4: new Color(139, 71, 137).hex('#8B4789'),
thistle: new Color(216, 191, 216).hex('#D8BFD8'),
thistle_1: new Color(255, 225, 255).hex('#FFE1FF'),
thistle_2: new Color(238, 210, 238).hex('#EED2EE'),
thistle_3: new Color(205, 181, 205).hex('#CDB5CD'),
thistle_4: new Color(139, 123, 139).hex('#8B7B8B'),
plum_1: new Color(255, 187, 255).hex('#FFBBFF'),
plum_2: new Color(238, 174, 238).hex('#EEAEEE'),
plum_3: new Color(205, 150, 205).hex('#CD96CD'),
plum_4: new Color(139, 102, 139).hex('#8B668B'),
plum: new Color(221, 160, 221).hex('#DDA0DD'),
violet: new Color(238, 130, 238).hex('#EE82EE'),
magenta: new Color(255, 0, 255).hex('#FF00FF'), // (fuchsia*)
magenta_2: new Color(238, 0, 238).hex('#EE00EE'),
magenta_3: new Color(205, 0, 205).hex('#CD00CD'),
magenta_4: new Color(139, 0, 139).hex('#8B008B'), //(darkmagenta)
purple: new Color(128, 0, 128).hex('#800080'),
mediumorchid: new Color(186, 85, 211).hex('#BA55D3'),
mediumorchid_1: new Color(224, 102, 255).hex('#E066FF'),
mediumorchid_2: new Color(209, 95, 238).hex('#D15FEE'),
mediumorchid_3: new Color(180, 82, 205).hex('#B452CD'),
mediumorchid_4: new Color(122, 55, 139).hex('#7A378B'),
darkviolet: new Color(148, 0, 211).hex('#9400D3'),
darkorchid: new Color(153, 50, 204).hex('#9932CC'),
darkorchid_1: new Color(191, 62, 255).hex('#BF3EFF'),
darkorchid_2: new Color(178, 58, 238).hex('#B23AEE'),
darkorchid_3: new Color(154, 50, 205).hex('#9A32CD'),
darkorchid_4: new Color(104, 34, 139).hex('#68228B'),
indigo: new Color(75, 0, 130).hex('#4B0082'),
blueviolet: new Color(138, 43, 226).hex('#8A2BE2'),
purple_1: new Color(155, 48, 255).hex('#9B30FF'),
purple_2: new Color(145, 44, 238).hex('#912CEE'),
purple_3: new Color(125, 38, 205).hex('#7D26CD'),
purple_4: new Color(85, 26, 139).hex('#551A8B'),
mediumpurple: new Color(147, 112, 219).hex('#9370DB'),
mediumpurple_1: new Color(171, 130, 255).hex('#AB82FF'),
mediumpurple_2: new Color(159, 121, 238).hex('#9F79EE'),
mediumpurple_3: new Color(137, 104, 205).hex('#8968CD'),
mediumpurple_4: new Color(93, 71, 139).hex('#5D478B'),
darkslateblue: new Color(72, 61, 139).hex('#483D8B'),
lightslateblue: new Color(132, 112, 255).hex('#8470FF'),
mediumslateblue: new Color(123, 104, 238).hex('#7B68EE'),
slateblue: new Color(106, 90, 205).hex('#6A5ACD'),
slateblue_1: new Color(131, 111, 255).hex('#836FFF'),
slateblue_2: new Color(122, 103, 238).hex('#7A67EE'),
slateblue_3: new Color(105, 89, 205).hex('#6959CD'),
slateblue_4: new Color(71, 60, 139).hex('#473C8B'),
ghostwhite: new Color(248, 248, 255).hex('#F8F8FF'),
lavender: new Color(230, 230, 250).hex('#E6E6FA'),
blue: new Color(0, 0, 255).hex('#0000FF'),
blue_2: new Color(0, 0, 238).hex('#0000EE'),
blue_3: new Color(0, 0, 205).hex('#0000CD'), //(mediumblue)
blue_4: new Color(0, 0, 139).hex('#00008B'), //(darkblue)
navy: new Color(0, 0, 128).hex('#000080'),
midnightblue: new Color(25, 25, 112).hex('#191970'),
cobalt: new Color(61, 89, 171).hex('#3D59AB'),
royalblue: new Color(65, 105, 225).hex('#4169E1'),
royalblue_1: new Color(72, 118, 255).hex('#4876FF'),
royalblue_2: new Color(67, 110, 238).hex('#436EEE'),
royalblue_3: new Color(58, 95, 205).hex('#3A5FCD'),
royalblue_4: new Color(39, 64, 139).hex('#27408B'),
cornflowerblue: new Color(100, 149, 237).hex('#6495ED'),
lightsteelblue: new Color(176, 196, 222).hex('#B0C4DE'),
lightsteelblue_1: new Color(202, 225, 255).hex('#CAE1FF'),
lightsteelblue_2: new Color(188, 210, 238).hex('#BCD2EE'),
lightsteelblue_3: new Color(162, 181, 205).hex('#A2B5CD'),
lightsteelblue_4: new Color(110, 123, 139).hex('#6E7B8B'),
lightslategray: new Color(119, 136, 153).hex('#778899'),
slategray: new Color(112, 128, 144).hex('#708090'),
slategray_1: new Color(198, 226, 255).hex('#C6E2FF'),
slategray_2: new Color(185, 211, 238).hex('#B9D3EE'),
slategray_3: new Color(159, 182, 205).hex('#9FB6CD'),
slategray_4: new Color(108, 123, 139).hex('#6C7B8B'),
dodgerblue_1: new Color(30, 144, 255).hex('#1E90FF'), //(dodgerblue)
dodgerblue_2: new Color(28, 134, 238).hex('#1C86EE'),
dodgerblue_3: new Color(24, 116, 205).hex('#1874CD'),
dodgerblue_4: new Color(16, 78, 139).hex('#104E8B'),
aliceblue: new Color(240, 248, 255).hex('#F0F8FF'),
steelblue: new Color(70, 130, 180).hex('#4682B4'),
steelblue_1: new Color(99, 184, 255).hex('#63B8FF'),
steelblue_2: new Color(92, 172, 238).hex('#5CACEE'),
steelblue_3: new Color(79, 148, 205).hex('#4F94CD'),
steelblue_4: new Color(54, 100, 139).hex('#36648B'),
lightskyblue: new Color(135, 206, 250).hex('#87CEFA'),
lightskyblue_1: new Color(176, 226, 255).hex('#B0E2FF'),
lightskyblue_2: new Color(164, 211, 238).hex('#A4D3EE'),
lightskyblue_3: new Color(141, 182, 205).hex('#8DB6CD'),
lightskyblue_4: new Color(96, 123, 139).hex('#607B8B'),
skyblue_1: new Color(135, 206, 255).hex('#87CEFF'),
skyblue_2: new Color(126, 192, 238).hex('#7EC0EE'),
skyblue_3: new Color(108, 166, 205).hex('#6CA6CD'),
skyblue_4: new Color(74, 112, 139).hex('#4A708B'),
skyblue: new Color(135, 206, 235).hex('#87CEEB'),
deepskyblue_1: new Color(0, 191, 255).hex('#00BFFF'), //(deepskyblue)
deepskyblue_2: new Color(0, 178, 238).hex('#00B2EE'),
deepskyblue_3: new Color(0, 154, 205).hex('#009ACD'),
deepskyblue_4: new Color(0, 104, 139).hex('#00688B'),
peacock: new Color(51, 161, 201).hex('#33A1C9'),
lightblue: new Color(173, 216, 230).hex('#ADD8E6'),
lightblue_1: new Color(191, 239, 255).hex('#BFEFFF'),
lightblue_2: new Color(178, 223, 238).hex('#B2DFEE'),
lightblue_3: new Color(154, 192, 205).hex('#9AC0CD'),
lightblue_4: new Color(104, 131, 139).hex('#68838B'),
powderblue: new Color(176, 224, 230).hex('#B0E0E6'),
cadetblue_1: new Color(152, 245, 255).hex('#98F5FF'),
cadetblue_2: new Color(142, 229, 238).hex('#8EE5EE'),
cadetblue_3: new Color(122, 197, 205).hex('#7AC5CD'),
cadetblue_4: new Color(83, 134, 139).hex('#53868B'),
turquoise_1: new Color(0, 245, 255).hex('#00F5FF'),
turquoise_2: new Color(0, 229, 238).hex('#00E5EE'),
turquoise_3: new Color(0, 197, 205).hex('#00C5CD'),
turquoise_4: new Color(0, 134, 139).hex('#00868B'),
cadetblue: new Color(95, 158, 160).hex('#5F9EA0'),
darkturquoise: new Color(0, 206, 209).hex('#00CED1'),
azure_1: new Color(240, 255, 255).hex('#F0FFFF'), //(azure)
azure_2: new Color(224, 238, 238).hex('#E0EEEE'),
azure_3: new Color(193, 205, 205).hex('#C1CDCD'),
azure_4: new Color(131, 139, 139).hex('#838B8B'),
lightcyan_1: new Color(224, 255, 255).hex('#E0FFFF'), //(lightcyan)
lightcyan_2: new Color(209, 238, 238).hex('#D1EEEE'),
lightcyan_3: new Color(180, 205, 205).hex('#B4CDCD'),
lightcyan_4: new Color(122, 139, 139).hex('#7A8B8B'),
paleturquoise_1: new Color(187, 255, 255).hex('#BBFFFF'),
paleturquoise_2: new Color(174, 238, 238).hex('#AEEEEE'), //(paleturquoise)
paleturquoise_3: new Color(150, 205, 205).hex('#96CDCD'),
paleturquoise_4: new Color(102, 139, 139).hex('#668B8B'),
darkslategray: new Color(47, 79, 79).hex('#2F4F4F'),
darkslategray_1: new Color(151, 255, 255).hex('#97FFFF'),
darkslategray_2: new Color(141, 238, 238).hex('#8DEEEE'),
darkslategray_3: new Color(121, 205, 205).hex('#79CDCD'),
darkslategray_4: new Color(82, 139, 139).hex('#528B8B'),
cyan: new Color(0, 255, 255).hex('#00FFFF'), // aqua
cyan_2: new Color(0, 238, 238).hex('#00EEEE'),
cyan_3: new Color(0, 205, 205).hex('#00CDCD'),
cyan_4: new Color(0, 139, 139).hex('#008B8B'), //(darkcyan)
teal: new Color(0, 128, 128).hex('#008080'),
mediumturquoise: new Color(72, 209, 204).hex('#48D1CC'),
lightseagreen: new Color(32, 178, 170).hex('#20B2AA'),
manganeseblue: new Color(3, 168, 158).hex('#03A89E'),
turquoise: new Color(64, 224, 208).hex('#40E0D0'),
coldgrey: new Color(128, 138, 135).hex('#808A87'),
turquoiseblue: new Color(0, 199, 140).hex('#00C78C'),
aquamarine_1: new Color(127, 255, 212).hex('#7FFFD4'), //(aquamarine)
aquamarine_2: new Color(118, 238, 198).hex('#76EEC6'),
aquamarine_3: new Color(102, 205, 170).hex('#66CDAA'), //(mediumaquamarine)
aquamarine_4: new Color(69, 139, 116).hex('#458B74'),
mediumspringgreen: new Color(0, 250, 154).hex('#00FA9A'),
mintcream: new Color(245, 255, 250).hex('#F5FFFA'),
springgreen: new Color(0, 255, 127).hex('#00FF7F'),
springgreen_1: new Color(0, 238, 118).hex('#00EE76'),
springgreen_2: new Color(0, 205, 102).hex('#00CD66'),
springgreen_3: new Color(0, 139, 69).hex('#008B45'),
mediumseagreen: new Color(60, 179, 113).hex('#3CB371'),
seagreen_1: new Color(84, 255, 159).hex('#54FF9F'),
seagreen_2: new Color(78, 238, 148).hex('#4EEE94'),
seagreen_3: new Color(67, 205, 128).hex('#43CD80'),
seagreen_4: new Color(46, 139, 87).hex('#2E8B57'), //(seagreen)
emeraldgreen: new Color(0, 201, 87).hex('#00C957'),
mint: new Color(189, 252, 201).hex('#BDFCC9'),
cobaltgreen: new Color(61, 145, 64).hex('#3D9140'),
honeydew_1: new Color(240, 255, 240).hex('#F0FFF0'), //(honeydew)
honeydew_2: new Color(224, 238, 224).hex('#E0EEE0'),
honeydew_3: new Color(193, 205, 193).hex('#C1CDC1'),
honeydew_4: new Color(131, 139, 131).hex('#838B83'),
darkseagreen: new Color(143, 188, 143).hex('#8FBC8F'),
darkseagreen_1: new Color(193, 255, 193).hex('#C1FFC1'),
darkseagreen_2: new Color(180, 238, 180).hex('#B4EEB4'),
darkseagreen_3: new Color(155, 205, 155).hex('#9BCD9B'),
darkseagreen_4: new Color(105, 139, 105).hex('#698B69'),
palegreen: new Color(152, 251, 152).hex('#98FB98'),
palegreen_1: new Color(154, 255, 154).hex('#9AFF9A'),
palegreen_2: new Color(144, 238, 144).hex('#90EE90'), //(lightgreen)
palegreen_3: new Color(124, 205, 124).hex('#7CCD7C'),
palegreen_4: new Color(84, 139, 84).hex('#548B54'),
limegreen: new Color(50, 205, 50).hex('#32CD32'),
forestgreen: new Color(34, 139, 34).hex('#228B22'),
green_1: new Color(0, 255, 0).hex('#00FF00'), //(lime*)
green_2: new Color(0, 238, 0).hex('#00EE00'),
green_3: new Color(0, 205, 0).hex('#00CD00'),
green_4: new Color(0, 139, 0).hex('#008B00'),
green: new Color(0, 128, 0).hex('#008000'),
darkgreen: new Color(0, 100, 0).hex('#006400'),
sapgreen: new Color(48, 128, 20).hex('#308014'),
lawngreen: new Color(124, 252, 0).hex('#7CFC00'),
chartreuse_1: new Color(127, 255, 0).hex('#7FFF00'), //(chartreuse)
chartreuse_2: new Color(118, 238, 0).hex('#76EE00'),
chartreuse_3: new Color(102, 205, 0).hex('#66CD00'),
chartreuse_4: new Color(69, 139, 0).hex('#458B00'),
greenyellow: new Color(173, 255, 47).hex('#ADFF2F'),
darkolivegreen_1: new Color(202, 255, 112).hex('#CAFF70'),
darkolivegreen_2: new Color(188, 238, 104).hex('#BCEE68'),
darkolivegreen_3: new Color(162, 205, 90).hex('#A2CD5A'),
darkolivegreen_4: new Color(110, 139, 61).hex('#6E8B3D'),
darkolivegreen: new Color(85, 107, 47).hex('#556B2F'),
olivedrab: new Color(107, 142, 35).hex('#6B8E23'),
olivedrab_1: new Color(192, 255, 62).hex('#C0FF3E'),
olivedrab_2: new Color(179, 238, 58).hex('#B3EE3A'),
olivedrab_3: new Color(154, 205, 50).hex('#9ACD32'), //(yellowgreen)
olivedrab_4: new Color(105, 139, 34).hex('#698B22'),
ivory_1: new Color(255, 255, 240).hex('#FFFFF0'), //(ivory)
ivory_2: new Color(238, 238, 224).hex('#EEEEE0'),
ivory_3: new Color(205, 205, 193).hex('#CDCDC1'),
ivory_4: new Color(139, 139, 131).hex('#8B8B83'),
beige: new Color(245, 245, 220).hex('#F5F5DC'),
lightyellow_1: new Color(255, 255, 224).hex('#FFFFE0'), //(lightyellow)
lightyellow_2: new Color(238, 238, 209).hex('#EEEED1'),
lightyellow_3: new Color(205, 205, 180).hex('#CDCDB4'),
lightyellow_4: new Color(139, 139, 122).hex('#8B8B7A'),
lightgoldenrodyellow: new Color(250, 250, 210).hex('#FAFAD2'),
yellow_1: new Color(255, 255, 0).hex('#FFFF00'), //(yellow*)
yellow_2: new Color(238, 238, 0).hex('#EEEE00'),
yellow_3: new Color(205, 205, 0).hex('#CDCD00'),
yellow_4: new Color(139, 139, 0).hex('#8B8B00'),
warmgrey: new Color(128, 128, 105).hex('#808069'),
olive: new Color(128, 128, 0).hex('#808000'),
darkkhaki: new Color(189, 183, 107).hex('#BDB76B'),
khaki_1: new Color(255, 246, 143).hex('#FFF68F'),
khaki_2: new Color(238, 230, 133).hex('#EEE685'),
khaki_3: new Color(205, 198, 115).hex('#CDC673'),
khaki_4: new Color(139, 134, 78).hex('#8B864E'),
khaki: new Color(240, 230, 140).hex('#F0E68C'),
palegoldenrod: new Color(238, 232, 170).hex('#EEE8AA'),
lemonchiffon_1: new Color(255, 250, 205).hex('#FFFACD'), //(lemonchiffon)
lemonchiffon_2: new Color(238, 233, 191).hex('#EEE9BF'),
lemonchiffon_3: new Color(205, 201, 165).hex('#CDC9A5'),
lemonchiffon_4: new Color(139, 137, 112).hex('#8B8970'),
lightgoldenrod_1: new Color(255, 236, 139).hex('#FFEC8B'),
lightgoldenrod_2: new Color(238, 220, 130).hex('#EEDC82'),
lightgoldenrod_3: new Color(205, 190, 112).hex('#CDBE70'),
lightgoldenrod_4: new Color(139, 129, 76).hex('#8B814C'),
banana: new Color(227, 207, 87).hex('#E3CF57'),
gold_1: new Color(255, 215, 0).hex('#FFD700'), //(gold)
gold_2: new Color(238, 201, 0).hex('#EEC900'),
gold_3: new Color(205, 173, 0).hex('#CDAD00'),
gold_4: new Color(139, 117, 0).hex('#8B7500'),
cornsilk_1: new Color(255, 248, 220).hex('#FFF8DC'), //(cornsilk)
cornsilk_2: new Color(238, 232, 205).hex('#EEE8CD'),
cornsilk_3: new Color(205, 200, 177).hex('#CDC8B1'),
cornsilk_4: new Color(139, 136, 120).hex('#8B8878'),
goldenrod: new Color(218, 165, 32).hex('#DAA520'),
goldenrod_1: new Color(255, 193, 37).hex('#FFC125'),
goldenrod_2: new Color(238, 180, 34).hex('#EEB422'),
goldenrod_3: new Color(205, 155, 29).hex('#CD9B1D'),
goldenrod_4: new Color(139, 105, 20).hex('#8B6914'),
darkgoldenrod: new Color(184, 134, 11).hex('#B8860B'),
darkgoldenrod_1: new Color(255, 185, 15).hex('#FFB90F'),
darkgoldenrod_2: new Color(238, 173, 14).hex('#EEAD0E'),
darkgoldenrod_3: new Color(205, 149, 12).hex('#CD950C'),
darkgoldenrod_4: new Color(139, 101, 8).hex('#8B6508'),
orange_1: new Color(255, 165, 0).hex('#FFA500'), //(orange)
orange_2: new Color(238, 154, 0).hex('#EE9A00'),
orange_3: new Color(205, 133, 0).hex('#CD8500'),
orange_4: new Color(139, 90, 0).hex('#8B5A00'),
floralwhite: new Color(255, 250, 240).hex('#FFFAF0'),
oldlace: new Color(253, 245, 230).hex('#FDF5E6'),
wheat: new Color(245, 222, 179).hex('#F5DEB3'),
wheat_1: new Color(255, 231, 186).hex('#FFE7BA'),
wheat_2: new Color(238, 216, 174).hex('#EED8AE'),
wheat_3: new Color(205, 186, 150).hex('#CDBA96'),
wheat_4: new Color(139, 126, 102).hex('#8B7E66'),
moccasin: new Color(255, 228, 181).hex('#FFE4B5'),
papayawhip: new Color(255, 239, 213).hex('#FFEFD5'),
blanchedalmond: new Color(255, 235, 205).hex('#FFEBCD'),
navajowhite_1: new Color(255, 222, 173).hex('#FFDEAD'), //(navajowhite)
navajowhite_2: new Color(238, 207, 161).hex('#EECFA1'),
navajowhite_3: new Color(205, 179, 139).hex('#CDB38B'),
navajowhite_4: new Color(139, 121, 94).hex('#8B795E'),
eggshell: new Color(252, 230, 201).hex('#FCE6C9'),
tan: new Color(210, 180, 140).hex('#D2B48C'),
brick: new Color(156, 102, 31).hex('#9C661F'),
cadmiumyellow: new Color(255, 153, 18).hex('#FF9912'),
antiquewhite: new Color(250, 235, 215).hex('#FAEBD7'),
antiquewhite_1: new Color(255, 239, 219).hex('#FFEFDB'),
antiquewhite_2: new Color(238, 223, 204).hex('#EEDFCC'),
antiquewhite_3: new Color(205, 192, 176).hex('#CDC0B0'),
antiquewhite_4: new Color(139, 131, 120).hex('#8B8378'),
burlywood: new Color(222, 184, 135).hex('#DEB887'),
burlywood_1: new Color(255, 211, 155).hex('#FFD39B'),
burlywood_2: new Color(238, 197, 145).hex('#EEC591'),
burlywood_3: new Color(205, 170, 125).hex('#CDAA7D'),
burlywood_4: new Color(139, 115, 85).hex('#8B7355'),
bisque_1: new Color(255, 228, 196).hex('#FFE4C4'), //(bisque)
bisque_2: new Color(238, 213, 183).hex('#EED5B7'),
bisque_3: new Color(205, 183, 158).hex('#CDB79E'),
bisque_4: new Color(139, 125, 107).hex('#8B7D6B'),
melon: new Color(227, 168, 105).hex('#E3A869'),
carrot: new Color(237, 145, 33).hex('#ED9121'),
darkorange: new Color(255, 140, 0).hex('#FF8C00'),
darkorange_1: new Color(255, 127, 0).hex('#FF7F00'),
darkorange_2: new Color(238, 118, 0).hex('#EE7600'),
darkorange_3: new Color(205, 102, 0).hex('#CD6600'),
darkorange_4: new Color(139, 69, 0).hex('#8B4500'),
orange: new Color(255, 128, 0).hex('#FF8000'),
tan_1: new Color(255, 165, 79).hex('#FFA54F'),
tan_2: new Color(238, 154, 73).hex('#EE9A49'),
tan_3: new Color(205, 133, 63).hex('#CD853F'), //(peru)
tan_4: new Color(139, 90, 43).hex('#8B5A2B'),
linen: new Color(250, 240, 230).hex('#FAF0E6'),
peachpuff_1: new Color(255, 218, 185).hex('#FFDAB9'), //(peachpuff)
peachpuff_2: new Color(238, 203, 173).hex('#EECBAD'),
peachpuff_3: new Color(205, 175, 149).hex('#CDAF95'),
peachpuff_4: new Color(139, 119, 101).hex('#8B7765'),
seashell_1: new Color(255, 245, 238).hex('#FFF5EE'), //(seashell)
seashell_2: new Color(238, 229, 222).hex('#EEE5DE'),
seashell_3: new Color(205, 197, 191).hex('#CDC5BF'),
seashell_4: new Color(139, 134, 130).hex('#8B8682'),
sandybrown: new Color(244, 164, 96).hex('#F4A460'),
rawsienna: new Color(199, 97, 20).hex('#C76114'),
chocolate: new Color(210, 105, 30).hex('#D2691E'),
chocolate_1: new Color(255, 127, 36).hex('#FF7F24'),
chocolate_2: new Color(238, 118, 33).hex('#EE7621'),
chocolate_3: new Color(205, 102, 29).hex('#CD661D'),
chocolate_4: new Color(139, 69, 19).hex('#8B4513'), //(saddlebrown)
ivoryblack: new Color(41, 36, 33).hex('#292421'),
flesh: new Color(255, 125, 64).hex('#FF7D40'),
cadmiumorange: new Color(255, 97, 3).hex('#FF6103'),
burntsienna: new Color(138, 54, 15).hex('#8A360F'),
sienna: new Color(160, 82, 45).hex('#A0522D'),
sienna_1: new Color(255, 130, 71).hex('#FF8247'),
sienna_2: new Color(238, 121, 66).hex('#EE7942'),
sienna_3: new Color(205, 104, 57).hex('#CD6839'),
sienna_4: new Color(139, 71, 38).hex('#8B4726'),
lightsalmon_1: new Color(255, 160, 122).hex('#FFA07A'), //(lightsalmon)
lightsalmon_2: new Color(238, 149, 114).hex('#EE9572'),
lightsalmon_3: new Color(205, 129, 98).hex('#CD8162'),
lightsalmon_4: new Color(139, 87, 66).hex('#8B5742'),
coral: new Color(255, 127, 80).hex('#FF7F50'),
orangered_1: new Color(255, 69, 0).hex('#FF4500'), //(orangered)
orangered_2: new Color(238, 64, 0).hex('#EE4000'),
orangered_3: new Color(205, 55, 0).hex('#CD3700'),
orangered_4: new Color(139, 37, 0).hex('#8B2500'),
sepia: new Color(94, 38, 18).hex('#5E2612'),
darksalmon: new Color(233, 150, 122).hex('#E9967A'),
salmon_1: new Color(255, 140, 105).hex('#FF8C69'),
salmon_2: new Color(238, 130, 98).hex('#EE8262'),
salmon_3: new Color(205, 112, 84).hex('#CD7054'),
salmon_4: new Color(139, 76, 57).hex('#8B4C39'),
coral_1: new Color(255, 114, 86).hex('#FF7256'),
coral_2: new Color(238, 106, 80).hex('#EE6A50'),
coral_3: new Color(205, 91, 69).hex('#CD5B45'),
coral_4: new Color(139, 62, 47).hex('#8B3E2F'),
burntumber: new Color(138, 51, 36).hex('#8A3324'),
tomato_1: new Color(255, 99, 71).hex('#FF6347'), //(tomato)
tomato_2: new Color(238, 92, 66).hex('#EE5C42'),
tomato_3: new Color(205, 79, 57).hex('#CD4F39'),
tomato_4: new Color(139, 54, 38).hex('#8B3626'),
salmon: new Color(250, 128, 114).hex('#FA8072'),
mistyrose_1: new Color(255, 228, 225).hex('#FFE4E1'), //(mistyrose)
mistyrose_2: new Color(238, 213, 210).hex('#EED5D2'),
mistyrose_3: new Color(205, 183, 181).hex('#CDB7B5'),
mistyrose_4: new Color(139, 125, 123).hex('#8B7D7B'),
snow_1: new Color(255, 250, 250).hex('#FFFAFA'), //(snow)
snow_2: new Color(238, 233, 233).hex('#EEE9E9'),
snow_3: new Color(205, 201, 201).hex('#CDC9C9'),
snow_4: new Color(139, 137, 137).hex('#8B8989'),
rosybrown: new Color(188, 143, 143).hex('#BC8F8F'),
rosybrown_1: new Color(255, 193, 193).hex('#FFC1C1'),
rosybrown_2: new Color(238, 180, 180).hex('#EEB4B4'),
rosybrown_3: new Color(205, 155, 155).hex('#CD9B9B'),
rosybrown_4: new Color(139, 105, 105).hex('#8B6969'),
lightcoral: new Color(240, 128, 128).hex('#F08080'),
indianred: new Color(205, 92, 92).hex('#CD5C5C'),
indianred_1: new Color(255, 106, 106).hex('#FF6A6A'),
indianred_2: new Color(238, 99, 99).hex('#EE6363'),
indianred_4: new Color(139, 58, 58).hex('#8B3A3A'),
indianred_3: new Color(205, 85, 85).hex('#CD5555'),
brown: new Color(165, 42, 42).hex('#A52A2A'),
brown_1: new Color(255, 64, 64).hex('#FF4040'),
brown_2: new Color(238, 59, 59).hex('#EE3B3B'),
brown_3: new Color(205, 51, 51).hex('#CD3333'),
brown_4: new Color(139, 35, 35).hex('#8B2323'),
firebrick: new Color(178, 34, 34).hex('#B22222'),
firebrick_1: new Color(255, 48, 48).hex('#FF3030'),
firebrick_2: new Color(238, 44, 44).hex('#EE2C2C'),
firebrick_3: new Color(205, 38, 38).hex('#CD2626'),
firebrick_4: new Color(139, 26, 26).hex('#8B1A1A'),
red_1: new Color(255, 0, 0).hex('#FF0000'), //(red*)
red_2: new Color(238, 0, 0).hex('#EE0000'),
red_3: new Color(205, 0, 0).hex('#CD0000'),
red_4: new Color(139, 0, 0).hex('#8B0000'), //(darkred)
maroon: new Color(128, 0, 0).hex('#800000'),
sgi_beet: new Color(142, 56, 142).hex('#8E388E'),
sgi_slateblue: new Color(113, 113, 198).hex('#7171C6'),
sgi_lightblue: new Color(125, 158, 192).hex('#7D9EC0'),
sgi_teal: new Color(56, 142, 142).hex('#388E8E'),
sgi_chartreuse: new Color(113, 198, 113).hex('#71C671'),
sgi_olivedrab: new Color(142, 142, 56).hex('#8E8E38'),
sgi_brightgray: new Color(197, 193, 170).hex('#C5C1AA'),
sgi_salmon: new Color(198, 113, 113).hex('#C67171'),
sgi_darkgray: new Color(85, 85, 85).hex('#555555'),
sgi_gray_12: new Color(30, 30, 30).hex('#1E1E1E'),
sgi_gray_16: new Color(40, 40, 40).hex('#282828'),
sgi_gray_32: new Color(81, 81, 81).hex('#515151'),
sgi_gray_36: new Color(91, 91, 91).hex('#5B5B5B'),
sgi_gray_52: new Color(132, 132, 132).hex('#848484'),
sgi_gray_56: new Color(142, 142, 142).hex('#8E8E8E'),
sgi_lightgray: new Color(170, 170, 170).hex('#AAAAAA'),
sgi_gray_72: new Color(183, 183, 183).hex('#B7B7B7'),
sgi_gray_76: new Color(193, 193, 193).hex('#C1C1C1'),
sgi_gray_92: new Color(234, 234, 234).hex('#EAEAEA'),
sgi_gray_96: new Color(244, 244, 244).hex('#F4F4F4'),
white: new Color(255, 255, 255).hex('#FFFFFF'),
white_smoke: new Color(245, 245, 245).hex('#F5F5F5'), // (gray 96)
gainsboro: new Color(220, 220, 220).hex('#DCDCDC'),
lightgrey: new Color(211, 211, 211).hex('#D3D3D3'),
silver: new Color(192, 192, 192).hex('#C0C0C0'),
darkgray: new Color(169, 169, 169).hex('#A9A9A9'),
gray: new Color(128, 128, 128).hex('#808080'),
dimgray: new Color(105, 105, 105).hex('#696969'), // (gray 42)
black: new Color(0, 0, 0).hex('#000000'),
gray_99: new Color(252, 252, 252).hex('#FCFCFC'),
gray_98: new Color(250, 250, 250).hex('#FAFAFA'),
gray_97: new Color(247, 247, 247).hex('#F7F7F7'),
white_smoke: new Color(245, 245, 245).hex('#F5F5F5'), // (gray 96)
gray_95: new Color(242, 242, 242).hex('#F2F2F2'),
gray_94: new Color(240, 240, 240).hex('#F0F0F0'),
gray_93: new Color(237, 237, 237).hex('#EDEDED'),
gray_92: new Color(235, 235, 235).hex('#EBEBEB'),
gray_91: new Color(232, 232, 232).hex('#E8E8E8'),
gray_90: new Color(229, 229, 229).hex('#E5E5E5'),
gray_89: new Color(227, 227, 227).hex('#E3E3E3'),
gray_88: new Color(224, 224, 224).hex('#E0E0E0'),
gray_87: new Color(222, 222, 222).hex('#DEDEDE'),
gray_86: new Color(219, 219, 219).hex('#DBDBDB'),
gray_85: new Color(217, 217, 217).hex('#D9D9D9'),
gray_84: new Color(214, 214, 214).hex('#D6D6D6'),
gray_83: new Color(212, 212, 212).hex('#D4D4D4'),
gray_82: new Color(209, 209, 209).hex('#D1D1D1'),
gray_81: new Color(207, 207, 207).hex('#CFCFCF'),
gray_80: new Color(204, 204, 204).hex('#CCCCCC'),
gray_79: new Color(201, 201, 201).hex('#C9C9C9'),
gray_78: new Color(199, 199, 199).hex('#C7C7C7'),
gray_77: new Color(196, 196, 196).hex('#C4C4C4'),
gray_76: new Color(194, 194, 194).hex('#C2C2C2'),
gray_75: new Color(191, 191, 191).hex('#BFBFBF'),
gray_74: new Color(189, 189, 189).hex('#BDBDBD'),
gray_73: new Color(186, 186, 186).hex('#BABABA'),
gray_72: new Color(184, 184, 184).hex('#B8B8B8'),
gray_71: new Color(181, 181, 181).hex('#B5B5B5'),
gray_70: new Color(179, 179, 179).hex('#B3B3B3'),
gray_69: new Color(176, 176, 176).hex('#B0B0B0'),
gray_68: new Color(173, 173, 173).hex('#ADADAD'),
gray_67: new Color(171, 171, 171).hex('#ABABAB'),
gray_66: new Color(168, 168, 168).hex('#A8A8A8'),
gray_65: new Color(166, 166, 166).hex('#A6A6A6'),
gray_64: new Color(163, 163, 163).hex('#A3A3A3'),
gray_63: new Color(161, 161, 161).hex('#A1A1A1'),
gray_62: new Color(158, 158, 158).hex('#9E9E9E'),
gray_61: new Color(156, 156, 156).hex('#9C9C9C'),
gray_60: new Color(153, 153, 153).hex('#999999'),
gray_59: new Color(150, 150, 150).hex('#969696'),
gray_58: new Color(148, 148, 148).hex('#949494'),
gray_57: new Color(145, 145, 145).hex('#919191'),
gray_56: new Color(143, 143, 143).hex('#8F8F8F'),
gray_55: new Color(140, 140, 140).hex('#8C8C8C'),
gray_54: new Color(138, 138, 138).hex('#8A8A8A'),
gray_53: new Color(135, 135, 135).hex('#878787'),
gray_52: new Color(133, 133, 133).hex('#858585'),
gray_51: new Color(130, 130, 130).hex('#828282'),
gray_50: new Color(127, 127, 127).hex('#7F7F7F'),
gray_49: new Color(125, 125, 125).hex('#7D7D7D'),
gray_48: new Color(122, 122, 122).hex('#7A7A7A'),
gray_47: new Color(120, 120, 120).hex('#787878'),
gray_46: new Color(117, 117, 117).hex('#757575'),
gray_45: new Color(115, 115, 115).hex('#737373'),
gray_44: new Color(112, 112, 112).hex('#707070'),
gray_43: new Color(110, 110, 110).hex('#6E6E6E'),
gray_42: new Color(107, 107, 107).hex('#6B6B6B'),
dimgray: new Color(105, 105, 105).hex('#696969'), // (gray 42)
gray_40: new Color(102, 102, 102).hex('#666666'),
gray_39: new Color(99, 99, 99).hex('#636363'),
gray_38: new Color(97, 97, 97).hex('#616161'),
gray_37: new Color(94, 94, 94).hex('#5E5E5E'),
gray_36: new Color(92, 92, 92).hex('#5C5C5C'),
gray_35: new Color(89, 89, 89).hex('#595959'),
gray_34: new Color(87, 87, 87).hex('#575757'),
gray_33: new Color(84, 84, 84).hex('#545454'),
gray_32: new Color(82, 82, 82).hex('#525252'),
gray_31: new Color(79, 79, 79).hex('#4F4F4F'),
gray_30: new Color(77, 77, 77).hex('#4D4D4D'),
gray_29: new Color(74, 74, 74).hex('#4A4A4A'),
gray_28: new Color(71, 71, 71).hex('#474747'),
gray_27: new Color(69, 69, 69).hex('#454545'),
gray_26: new Color(66, 66, 66).hex('#424242'),
gray_25: new Color(64, 64, 64).hex('#404040'),
gray_24: new Color(61, 61, 61).hex('#3D3D3D'),
gray_23: new Color(59, 59, 59).hex('#3B3B3B'),
gray_22: new Color(56, 56, 56).hex('#383838'),
gray_21: new Color(54, 54, 54).hex('#363636'),
gray_20: new Color(51, 51, 51).hex('#333333'),
gray_19: new Color(48, 48, 48).hex('#303030'),
gray_18: new Color(46, 46, 46).hex('#2E2E2E'),
gray_17: new Color(43, 43, 43).hex('#2B2B2B'),
gray_16: new Color(41, 41, 41).hex('#292929'),
gray_15: new Color(38, 38, 38).hex('#262626'),
gray_14: new Color(36, 36, 36).hex('#242424'),
gray_13: new Color(33, 33, 33).hex('#212121'),
gray_12: new Color(31, 31, 31).hex('#1F1F1F'),
gray_11: new Color(28, 28, 28).hex('#1C1C1C'),
gray_10: new Color(26, 26, 26).hex('#1A1A1A'),
gray_9: new Color(23, 23, 23).hex('#171717'),
gray_8: new Color(20, 20, 20).hex('#141414'),
gray_7: new Color(18, 18, 18).hex('#121212'),
gray_6: new Color(15, 15, 15).hex('#0F0F0F'),
gray_5: new Color(13, 13, 13).hex('#0D0D0D'),
gray_4: new Color(10, 10, 10).hex('#0A0A0A'),
gray_3: new Color(8, 8, 8).hex('#080808'),
gray_2: new Color(5, 5, 5).hex('#050505'),
gray_1: new Color(3, 3, 3).hex('#030303')
});

47
src/js/component.js
View File

@ -9,11 +9,11 @@ class Component {
constructor(element, attr = {}) {
this._modifier = new Modifier().margin(new Siding().all(0));
var akeys = Object.keys(attr);
for (let i = 0; i < akeys.length; i++) {
element.setAttribute(akeys[i], attr[akeys[i]]);
}
this._element = element;
Object.keys(attr)
.forEach(key => {
this._element.setAttribute(key, attr[key]);
})
}
/**
@ -111,18 +111,31 @@ class Component {
return this._element;
}
/**
*
* @param {Component} component
* @returns this component object
*/
child(component) {
this._element.append(
(component instanceof Component
?component
:component.backToComponent()
)
.generate()
);
return this;
}
/**
*
* @param {Component|Array<Component>} innerComponent
* @param {Array<Component>} innerComponent
* @returns this component object
*/
childContext(innerComponent) {
if (innerComponent instanceof Array) {
for (let i = 0; i < innerComponent.length; i++) {
this._element.append(innerComponent[i].generate());
}
} else {
this._element.append(innerComponent.generate());
childComponents(innerComponent) {
for (let i = 0; i < innerComponent.length; i++) {
this.child(innerComponent[i]);
}
return this;
}
@ -134,7 +147,15 @@ class Component {
* @returns this component object
*/
setEvent(commonEvent, functionName) {
return this.setAttribute(commonEvent, `${functionName}(this)`)
return this.setAttribute(commonEvent, `${functionName}(this)`);
}
/**
*
* @returns {ChainableModifier}
*/
chainModifier() {
return new ChainableModifier(this);
}
}

92
src/js/componentAttribute.js
View File

@ -5,28 +5,6 @@ const CommonEvents = Object.freeze({
ONCLICK: "onClick",
})
/**
* A simple Color class for rgb set color values.
*/
class Color {
#red;
#green;
#blue;
constructor(red, green, blue) {
this.#red = red
this.#green = green
this.#blue = blue
}
/**
*
* @returns {string} an rgb object string
*/
cssRGBString() {
return `rgb(${this.#red}, ${this.#green}, ${this.#blue})`;
}
}
/**
* Simple Dimensions container for the height and width in pixels.
@ -162,3 +140,73 @@ const Arrangement = Object.freeze({
SPACE_EVENLY: 4,
SPACE_AROUND: 5,
})
class ChainableDimensions extends Dimensions {
#modifier;
constructor(modifier) {
super();
this.#modifier = modifier;
}
backToModifier() {
return this.#modifier;
}
backToComponent() {
return this.#modifier.backToComponent();
}
componentChild(innerComponent) {
return this.#modifier.backToComponent()
.child(innerComponent);
}
componentChildComponents(innerComponent) {
return this.#modifier.backToComponent()
.childComponents(innerComponent);
}
}
class ChainableSiding extends Siding {
#modifier;
constructor(modifier) {
super();
this.#modifier = modifier;
}
backToModifier() {
return this.#modifier;
}
backToComponent() {
return this.#modifier.backToComponent();
}
componentChild(innerComponent) {
return this.#modifier
.backToComponent()
.child(innerComponent);
}
componentChildComponents(innerComponent) {
return this.#modifier
.backToComponent()
.childComponents(innerComponent);
}
}
const LineStyles = Object.freeze({
dotted: 0,
dashed: 1,
solid: 2,
double: 3,
groove: 4,
ridge: 5,
inset: 6,
outset: 7,
none: 8,
hidden: 9
})

61
src/js/modifier.js
View File

@ -7,6 +7,7 @@ class Modifier {
constructor() {
this.modifications = new Object();
}
/**
* Sets the modifications for widht and height to 100%.
* @returns this modifier object
@ -19,19 +20,21 @@ class Modifier {
/**
* Sets the modification for width to 100%.
* @param {number} fraction
* @returns this modifier object
*/
fillMaxWidth() {
this.modifications["width"] = "100%";
*/
fillMaxWidth(fraction) {
this.modifications["width"] = (100 * fraction) + "%";
return this;
}
/**
* Sets the modification for height to 100%.
* @param {number} fraction
* @returns this modifier object
*/
fillMaxHeight() {
this.modifications["height"] = "100%";
fillMaxHeight(fraction) {
this.modifications["height"] = (100 * fraction) + "%";
return this;
}
@ -125,4 +128,52 @@ class Modifier {
return this;
}
/**
* Sets a border line (with given linestyle) to all sides.
* If lineStyle is an array, the containing LineStyles,
* are applied in the order: [top, right, bottom, left].
* @param {LineStyles|Array<LineStyles>} lineStyle the style of the border line
* @returns this modifier object
*/
border(lineStyle, width = 1, color = Colors.black) {
var lstyle = (lineStyle instanceof Array
? lineStyle.join(" ")
: lineStyle);
this.modifications["border"] = `${width}px ${lstyle} ${color.cssRGBString}`;
return this;
}
}
class ChainableModifier extends Modifier {
_component;
constructor(component) {
super();
this._component = component;
}
backToComponent() {
return this._component.modifier(this);
}
chainSize() {
return new ChainableDimensions(this);
}
chainPaddingSiding() {
return new ChainableSiding(this);
}
componentChild(innerComponent) {
return this._component
.modifier(this)
.child(innerComponent);
}
componentChildComponents(innerComponent) {
return this._component
.modifier(this)
.childComponents(innerComponent);
}
}
Write Preview
Loading…
Cancel
Save