nbubna / html Goto Github PK
View Code? Open in Web Editor NEWThis project forked from adriancooney/voyeur.js
A simple, extensible way to work directly with the DOM.
Home Page: http://nbubna.github.io/HTML
License: MIT License
This project forked from adriancooney/voyeur.js
A simple, extensible way to work directly with the DOM.
Home Page: http://nbubna.github.io/HTML
License: MIT License
Hi.
I will try explain my problem, but please, forgive my terrible english.
I put some console.log/debug
in my code and I notice when I get the tablet
element, I get undefined instead of HTML object
lib.
<!-- LINK TO ADD NEW ITEMS FROM FORM -->
<div class="field">
<a href="#" class="ui green button add-dynamic-table" data-table="#customer-team-table" data-field-form="customer_team" data-field-name="customerteam" data-message="#team-message">{!! trans('messages.btn.add') !!}</a>
</div>
<!-- THE TABLE -->
<table class='ui table' id="customer-team-table">
<thead>
<tr>
<th>{!! trans('messages.field.id') !!}</th>
<th>{!! trans('messages.field.position_id') !!}</th>
<th>{!! trans('messages.field.name') !!}</th>
<th>{!! trans('messages.field.work_phone') !!}</th>
<th>{!! trans('messages.field.mobile_phone') !!}</th>
<th>{!! trans('messages.field.email') !!}</th>
<th class='actions'>{!! trans('messages.field.actions') !!}</th>
</tr>
</thead>
<tbody>
@if (!empty($customer) and ($customer->customerTeam->count() > 0))
@foreach ($customer->customerTeam as $team)
<tr>
<td>{!! $team->id !!}</td>
<td>{!! $team->position->name !!}</td>
<td>{!! $team->name !!}</td>
<td>{!! $team->work_phone !!}</td>
<td>{!! $team->mobile_phone !!}</td>
<td>{!! $team->email !!}</td>
<td class='actions'>
<a class="ui icon mini button red destroy-modal" data-destroy-route='{!! URL::route("customerteams.destroy", $team->id) !!}'>
<i class="trash icon"></i>
</a>
</td>
</tr>
@endforeach
@else
<tr>
<td colspan="7">{!! trans('messages.text.empty_table') !!}</td>
</tr>
@endif
</tbody>
</table>
$('.add-dynamic-table').click(function(event) {
event.preventDefault();
var name = undefined;
var input_form = $(this).data('field-form');
var input_name = $(this).data('field-name');
var fields = HTML.query('.fields [name^="' + input_form + '"]');
var table = HTML.query($(this).data('table'));
// remove the example line when table is empty
if ($($(this).data('table') + ' tbody tr td[colspan="7"]').length == 1) {
$($(this).data('table') + ' tbody tr').remove();
}
// create a new TR
var tr = table.query('tbody').add('tr');
// create a new TD inside this TR with just a "-" (not work)
tr.add('td').textContent = '-';
var id = $($(this).data('table')).find('tbody tr').length + 1;
fields.each(function(field) {
var $name = field.each('name').toString();
$name = $name.match(/\[(.*?)\]/)[1];
// create a new TD inside this TR
var td = tr.add('td');
// set the textContent based on tagName (not work)
if ($(field).prop('tagName') == 'SELECT') {
td.textContent = $(field).find('option:selected').text();
} else if ($(field).prop('tagName') == 'INPUT') {
td.textContent = field.each('value');
}
// add an input hidden inside this TD (works)
var input = td.add('input[type="hidden"]');
input.each('name', input_name + '[' + id + ']' + '[' + $name + ']');
input.each('value', field.each('value'));
});
// add TD in this TR with a trash link button
var td = tr.add('td.actions');
var a = td.add('a.ui.icon.mini.button.red.destroy-modal');
a.add('i.icon.trash');
});
If you need more informations, tell me please.
Hi, it would be very nice to see any good update of this awesome work :D . Will this has any update? Or will this project dead :( ?
I'm trying to add a select with some options inside a td
but I get the follow error:
Uncaught TypeError: Failed to execute 'add' on 'HTMLSelectElement': The provided value is not of type '(HTMLOptionElement or HTMLOptGroupElement)'
This is a piece of my code:
extraTd = tr.add('td');
var element = extraTd.add('select.ui.selection.dropdown.');
element.each('name', input_name + '[' + id + '][reference]');
element.add('option[value=0]').textContent = 'Não';
element.add('option[value=1]').textContent = 'Sim';
If you need more information tell me.
Is it possible to add text node using HTML.js?
HTML.body.add(document.createTextNode('foo'))
HTML.js:207 Uncaught TypeError: Cannot use 'in' operator to search for 'length' in undefined
Im learning DOM from the code, I dont understand why you offer the first element instead of traverse it.
eg: I have two ul elements.
<ul><li>1</li><li>2</li></ul>
<ul><li>3</li><li>4</li></ul>
now HTML.body.ul.li only get the first ul's li, its very odd. and the second ul dont inherit any methods, i must use HTML.ify to initial it by manully.
How about write like this:
if (force || !list.each) {
if (!list.slice){ list = _.slice.call(list); }
_.methods(list);
for (var i = 0, len = list.length; i < len; i++) {
_.node(list[i], force);
}
}
Was wondering if this was easy to implement?
Adding html.js to package dependencies and inside of the Node-webkit browser calling HTML = require('html.js').HTML
or something along those lines.
Can't seem to get it to work.
Thanks for your help! This library really kicks butt.
P.S. I never thought I would have a use for HTML.js server side or in a node environment.
After npm install html.js
I just tried to var HTML = require('html.js')
but I got the following error:
/Users/diniscruz/GitHub_REPOS/TM_4_0_QA/node_modules/html.js/dist/HTML.min.js:4
=e,b.addEventListener("DOMContentLoaded",function(){d.node(e,!0)})}(window,doc
^
ReferenceError: window is not defined
at Object.<anonymous> (/Users/diniscruz/GitHub_REPOS/TM_4_0_QA/node_modules/html.js/dist/HTML.min.js:4:3194)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (/Users/diniscruz/GitHub_REPOS/TM_4_0_QA/TM_4_0_Design/node_modules/teammentor/node_modules/coffee-script/lib/coffee-script/register.js:45:36)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
I saw another issue with this error, but that was related to NW (node-webkit).
It seems that the problem is that the window (and document) objects are not available.
Does this mean that this api cannot be used directly on node?
See: http://people.mozilla.org/~jorendorff/es6-draft.html#sec-15.4.3.23
This means before we go 1.0, we'll have to s/find/query, unless someone has a better name idea. HTML.query() is a wee bit less readable and terse, but it is a much more specific/accurate term, which should prevent further conflicts.
It also means a deprecation round, so there will definitely be a 0.10.x branch.
I'd like this library to be submitted to http://cdnjs.com/
Awesome project.
I've been struggling to get this to work with component though. I thought I'd fixed it when I edited src/component.js to from require('../dist/HTML.all.js')
to require('../dist/HTML.js')
. But then I started getting errors about HTML not being defined when the second IIFE tries to execute with HTML as an arg.
I'd like to use this with browserify, but there isn't currently a way to require('html.js')
in node for browser packaging purposes
By default node looks for index.js
, otherwise you can specify a main
field that points to the commonjs requireable file
hi, we want to add your lib on https://cdnjs.com, but i noticed some file in dist
didn't have min file, like
HTML.alter.js
HTML.emmet.js
HTML.stringify.js
is that means they don't be needed for browser?
thank you very much!
cdnjs/cdnjs#6587
I would like to use the HTML(.js) library to edit an XML string. Is this possible? Is there something analogous to http://api.jquery.com/jQuery.parseXML/ (see also http://stackoverflow.com/questions/11258415/how-to-modify-xml-with-jquery )?
I can not know, how to do like this
$("<div><p>Hello</p></div>")
or like simple html dom
str_get_html
And remove voyeur.js tags.
The demos here are really helpful, but I noticed a few issues:
//...
comment line would be fine), or 2) a button to force evaluation should be added.These definitely aren't show-stoppers -- the app still worked great!
why we should HTML.js instead of voyeur.js?
(and... why it's not simply 'html' instead of 'HTML'? i guess 'HTML' is worse to type than 'html'.)
So, those reading the code will see that event() has landed but is not yet exposed in the main documentation on the gh-pages branch nor in a published/tagged release.
I'm hesitating on this, because i'm concerned it might be "bloat". addEventListener and friends are obviously part of the DOM interface HTML exposes, but not all of the DOM is about HTML. (notice i called the library HTML.js, not DOM.js)
After finishing the event.js code, i started to feel that it was suffering under the constraint of being in HTML.js and expanding the scope and weight of HTML.js in the process. It might be better suited for a separate library, where it can be free of HTML's constraints and grow a bit larger (there are other features i envision for it).
Obviously, if i pull it out to a separate library, it can still integrate smoothly with HTML.js, via HTML._.fn.
Any one out there have thoughts on this?
@nbubna Thanks for forking voyeur.js. I'm curious to know whether you have done anything about the Voyeur performance issue.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.