Skip to content

Commit

Permalink
Don't render ghostly checkboxes in the Table
Browse files Browse the repository at this point in the history
  • Loading branch information
wiredearp committed Apr 26, 2018
1 parent 9f77bb6 commit 6e243f8
Show file tree
Hide file tree
Showing 13 changed files with 224 additions and 67 deletions.
4 changes: 2 additions & 2 deletions docs/dist/sri.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"@js": {
"hashes": {
"sha384": "L4X+4/5HGlLrMbKJqTM06rFY1taYxR8dFczwdPJD2mSBYcIqC9ZGlj1xf3e4D+uB"
"sha384": "PoG8Ac13kZvHgPLWk2gYvkEWrQbDu8vCSuVGIy8fx3qNSLoQ7kjDEPzDyEKBSjea"
},
"integrity": "sha384-L4X+4/5HGlLrMbKJqTM06rFY1taYxR8dFczwdPJD2mSBYcIqC9ZGlj1xf3e4D+uB",
"integrity": "sha384-PoG8Ac13kZvHgPLWk2gYvkEWrQbDu8vCSuVGIy8fx3qNSLoQ7kjDEPzDyEKBSjea",
"path": "public/ts-10.0.21.min.js"
},
"@css": {
Expand Down
4 changes: 2 additions & 2 deletions spec/runtime/edbml/functions/ts.ui.tablecheck.edbml.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ describe('ts.ui.tablecheck.edbml', function likethis() {
row = {},
fixed = true;
expect(gethtml(table, row, fixed)).toContain('ts-table-checkbox');
expect(gethtml(table, row, fixed)).toContain('<div class="ts-table-cell">');
expect(gethtml(table, row, fixed)).toContain('<button class="ts-table-checkbox-button"');
expect(gethtml(table, row, fixed)).toContain('ts-table-cell');
expect(gethtml(table, row, fixed)).toContain('ts-table-checkbox-button');
});

it('should contain ts-icon-checkboxon', function() {
Expand Down
2 changes: 1 addition & 1 deletion spec/runtime/edbml/functions/ts.ui.tablerows.edbml.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ describe('ts.ui.tablerows.edbml.js', function likethis() {
rows = [{ cells: [{}] }],
cols = [new ts.ui.TableColModel()];
expect(gethtml(table, rows, cols)).toContain('<tr data-index=');
expect(gethtml(table, rows, cols)).toContain('<div class="ts-table-cell">');
expect(gethtml(table, rows, cols)).toContain('ts-table-cell');
});

it('should contain ts-table-checkbox', function() {
Expand Down
10 changes: 0 additions & 10 deletions spec/runtime/edbml/scripts/ts.ui.TableSpirit.edbml.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 +27,6 @@ describe('ts.ui.TableSpirit.edbml', function likethis() {
});
});

it('should contain gutter', function(done) {
getspirit().then(function(spirit) {
spirit.selectable().rows([{ cells: ['A', 'D', 'G'], selected: true }]);
sometime(function later() {
expect(spirit.element.innerHTML).toContain('ts-table-gutter');
done();
});
});
});

it('should contain a footer', function(done) {
getspirit().then(function(spirit) {
spirit.configbutton();
Expand Down
12 changes: 8 additions & 4 deletions src/runtime/edbml/functions/ts.ui.tablecheck.edbml
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,21 @@
<?param name="table" type="ts.ui.TableModel"?>
<?param name="row" type="ts.ui.TableRowModel"?>
<?param name="fixed" type="boolean"?>
<?param name="shown" type="boolean"?>

@class = 'ts-table-addition ts-table-checkbox ';
@class += row.selected ? 'ts-checked' : '';

<td @class>
@id = table.$instanceid + (fixed ? '-fixed-' : '-floating-') + row.$index;
@class = row.selected ? 'ts-icon-checkboxon' : 'ts-icon-checkbox';
@class = 'ts-table-checkbox-button ' + (fixed ? 'ts-fixed' : 'ts-floating');
<div class="ts-table-cell">
<button class="ts-table-checkbox-button" @id data-index="${row.$index}" tabindex="-1">
<i @class></i>
</button>
if(shown !== false) {
<button @class @id data-index="${row.$index}" tabindex="-1">
@class = row.selected ? 'ts-icon-checkboxon' : 'ts-icon-checkbox';
<i @class></i>
</button>
}
</div>
</td>

Expand Down
13 changes: 8 additions & 5 deletions src/runtime/edbml/functions/ts.ui.tablehilt.edbml
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,19 @@
<?param name="table" type="ts.ui.TableModel"?>
<?param name="row" type="ts.ui.TableRowModel"?>
<?param name="icon" type="String"?> //todo(leo) we will support icon later
<?param name="shown" type="boolean"?>

<td class="ts-table-addition ts-table-hilt">
@id = table.$instanceid + icon + row.$index;
@class = icon ? 'icon' : '';
<div class="ts-table-cell">
<button @id data-index="${row.$index}" tabindex="-1">
if(icon) {
<i @class></i>
}
</button>
if(shown) {
<button @id data-index="${row.$index}" tabindex="-1">
if(icon) {
<i @class></i>
}
</button>
}
</div>
</td>

Expand Down
5 changes: 3 additions & 2 deletions src/runtime/edbml/functions/ts.ui.tablerows.edbml
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,10 @@
if(table.selectable) {
if(selectable) {
var simulated = true;
renderCheck(table, row, simulated);
var show4real = !table.floatinggutter;
renderCheck(table, row, simulated, show4real);
} else {
renderHilt(table, row);
renderHilt(table, row, null, show4real);
}
}
row.cells.forEach(function(cell, i) {
Expand Down
2 changes: 1 addition & 1 deletion src/runtime/edbml/scripts/ts.ui.TableSpirit.edbml
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
</tbody>
</table>
</main>
if(table.selectable) {
if(table.floatinggutter) {
<aside data-ts="Spirit" id="${guid}-gutter" class="ts-table-gutter">
<table>
<tbody>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
/**
* REVISION OF THE SWITCH FOR ANGULAR 1.5, SEEMS IT BREAKS IN ANGULAR 1.3 THOUGH
* TODO (jmo@): Support swipe gestures on that switch!!!!!!!!!!!!!!!!!!!!!!!!!!!
* @extends {ts.ui.FieldSpirit}
* @using {string} tick
* @using {string} time
*/
ts.ui.SwitchSpirit = (function using(tick, time) {
return ts.ui.FieldSpirit.extend({
/**
* Setup the stuff.
*/
onenter: function() {
this.super.onenter();
this._confirmbasic(this.element.localName, this.element.type);
},

/**
* Attaching to the DOM.
*/
onattach: function() {
this.super.onattach();
this.event.add('change');
this._createswitch();
this._synchronize(true);
this.tick.add(tick).start(tick, time);
this.css.add([ts.ui.CLASS_SWITCHBOX, ts.ui.CLASS_ENGINE]);
},

/**
* Detaching from the DOM.
*/
ondetach: function() {
this.super.ondetach();
this.tick.remove(tick);
},

/**
* Handle event.
* @param {Event} e
*/
onevent: function(e) {
this.super.onevent(e);
switch (e.type) {
case 'change':
this._synchronize();
break;
}
},

/**
* Handle tick.
* @param {gui.Tick} t
*/
ontick: function(t) {
this.super.ontick(t);
if (t.type === tick) {
this._synchronize();
}
},

// Privileged ..............................................................

/**
* Style the containing form elements.
*/
$updatestyling: function() {
this.super.$updatestyling();
this._label(function(label) {
label.$switch();
});
this._fieldset(function(fieldset) {
fieldset.$options();
});
},

// Private .................................................................

/**
* Snapshot checked status so that we know when it changes.
* @type {boolean|null}
*/
_snapshot: null,

/**
* Fetch the switch element (and potentially create it).
* @param {boolean} [create] - Create switch if it doesn't exist?
* @returns {HTMLDivElement}
*/
_switch: function(create) {
if (create && !this._switch()) {
return this._createswitch();
} else {
var elm = this.dom.following(ts.ui.Spirit)[0];
return elm && elm.css.contains('ts-switcher') ? elm : null;
}
},

/**
* Inject the switch. Let's remove any potential existing
* switch, accounting for strange Angular quantum effects.
* @returns {ts.ui.Spirit}
*/
_createswitch: function() {
var html = ts.ui.switchonly.edbml();
this._switch() ? this._switch().dom.remove() : void 0;
return ts.ui.get(this.dom.after(this.dom.parseToNode(html)));
},

/**
* Match switch to checkbox. Note that we do
* this on an interval just to make sure...
* @param @optional {boolean} init Don't dispatch action on init
*/
_synchronize: function(init) {
var checked = this.element.checked;
if (init || checked !== this._snapshot) {
this._switch(true).css.shift(checked, ts.ui.CLASS_CHECKED);
this._snapshot = checked;
if (!init) {
this.action.dispatch(ts.ui.ACTION_SWITCH, checked);
}
}
},

/**
* Confirm that you're not doing it wrong.
* TODO: handle this via some advanced superclass boilerplate.
*/
_confirmbasic: function(name, type) {
var elm = this.element;
if (gui.debug) {
if (name !== 'input') {
throw new Error(this + ' must attach to an input field', elm);
} else if (type !== 'checkbox' && type !== 'radio') {
throw new Error(this + ' must attach to a checkbox or radio', elm);
}
}
}
});
})(ts.ui.FieldSpirit.TICK_SYNC, ts.ui.FieldSpirit.TICK_TIME);
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,27 @@ ts.ui.SwitchSpirit = (function using(tick, time) {
},

/**
* Attaching to the DOM.
* Attach to the DOM.
*/
onattach: function() {
this.super.onattach();
this.event.add('change');
this._createswitch();
this.css.add([
// TODO: update these classnames what with the new stylee!
ts.ui.CLASS_SWITCHBOX,
ts.ui.CLASS_ENGINE
]);
this._switch = this._createswitch();
this._synchronize(true);
this.tick.add(tick).start(tick, time);
this.css.add([ts.ui.CLASS_SWITCHBOX, ts.ui.CLASS_ENGINE]);
},

/**
* Detaching from the DOM.
* Syncrhonize on an interval so that we don't have to anticipate
* all the strange stuff that Angular might do with our elements.
*/
ondetach: function() {
this.super.ondetach();
this.tick.remove(tick);
onready: function() {
this.super.onready();
this.tick.add(tick).start(tick, time);
},

/**
Expand Down Expand Up @@ -77,34 +81,27 @@ ts.ui.SwitchSpirit = (function using(tick, time) {
// Private .................................................................

/**
* Snapshot checked status so that we know when it changes.
* @type {boolean|null}
* The switch DHTML thing.
* @type {HTMLDivElement}
*/
_snapshot: null,
_switch: null,

/**
* Fetch the switch element (and potentially create it).
* @param {boolean} [create] - Create switch if it doesn't exist?
* @returns {HTMLDivElement}
* Snapshot checked status so that we know when it changes.
* @type {boolean|null}
*/
_switch: function(create) {
if (create && !this._switch()) {
return this._createswitch();
} else {
var elm = this.dom.following(ts.ui.Spirit)[0];
return elm && elm.css.contains('ts-switcher') ? elm : null;
}
},
_snapshot: null,

/**
* Inject the switch. Let's remove any potential existing
* switch, accounting for strange Angular quantum effects.
* Inject the switch while accounting for strange Angular quantum effects.
* @returns {ts.ui.Spirit}
*/
_createswitch: function() {
var html = ts.ui.switchonly.edbml();
this._switch() ? this._switch().dom.remove() : void 0;
return ts.ui.get(this.dom.after(this.dom.parseToNode(html)));
var oldswitch = this.dom.following(ts.ui.Spirit)[0];
if (oldswitch && oldswitch.css.contains('ts-switcher')) {
oldswitch.dom.remove();
}
return ts.ui.get(this.dom.after(this.dom.parseToNode(ts.ui.switchonly.edbml())));
},

/**
Expand All @@ -115,7 +112,7 @@ ts.ui.SwitchSpirit = (function using(tick, time) {
_synchronize: function(init) {
var checked = this.element.checked;
if (init || checked !== this._snapshot) {
this._switch(true).css.shift(checked, ts.ui.CLASS_CHECKED);
this._switch.css.shift(checked, ts.ui.CLASS_CHECKED);
this._snapshot = checked;
if (!init) {
this.action.dispatch(ts.ui.ACTION_SWITCH, checked);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -266,6 +266,11 @@ ts.ui.TableModel = (function using(RowCollection, Type, Model) {
*/
tempdirtyflag: -1,

/**
* @type {boolean}
*/
floatinggutter: false,

/**
* Render toolbar as a statusbar (multiline in mobile view).
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,7 @@ ts.ui.TableLayoutPlugin = (function using(Client, Tick) {
* @param {ts.ui.TableModel} model
*/
_vfix: function(spirit, model) {
var floats = spirit._floatgutter();
var floats = spirit.$floatgutter();
var edits = model.editable;
var plug = spirit.queryplugin;
if (floats || edits) {
Expand Down Expand Up @@ -320,7 +320,7 @@ ts.ui.TableLayoutPlugin = (function using(Client, Tick) {
})
.forEach(function writeheight(height, index) {
var row = rows[index];
if (floats) {
if (floats && guts) {
setheight(guts[index], height);
}
if (edits) {
Expand Down
Loading

0 comments on commit 6e243f8

Please sign in to comment.