{"id":27498323,"url":"https://github.com/ydxia/domview","last_synced_at":"2025-04-17T08:31:42.284Z","repository":{"id":57215087,"uuid":"81390935","full_name":"ydxia/DOMView","owner":"ydxia","description":"Lightweight DOM wrappers for making object-oriented view classes","archived":false,"fork":false,"pushed_at":"2017-12-29T06:16:36.000Z","size":15,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-15T15:16:33.797Z","etag":null,"topics":["frontend","frontend-framework","frontend-web","frontend-webdevelopment","javascript","javascript-framework"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ydxia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-09T00:28:43.000Z","updated_at":"2024-12-12T06:31:18.000Z","dependencies_parsed_at":"2022-08-26T13:41:31.864Z","dependency_job_id":null,"html_url":"https://github.com/ydxia/DOMView","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ydxia%2FDOMView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ydxia%2FDOMView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ydxia%2FDOMView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ydxia%2FDOMView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ydxia","download_url":"https://codeload.github.com/ydxia/DOMView/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249326183,"owners_count":21251735,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frontend","frontend-framework","frontend-web","frontend-webdevelopment","javascript","javascript-framework"],"created_at":"2025-04-17T08:31:41.517Z","updated_at":"2025-04-17T08:31:42.252Z","avatar_url":"https://github.com/ydxia.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DOMView\n\nA lightweight DOM wrapper for creating object-oriented view classes!\n\nAn example for the implementation of a view class can be found in `example/Slider.js`. You can see a [live demo here](http://htmlpreview.github.io/?https://github.com/ydxia/domview/blob/master/example/static/index.html).\n\n## Usage\n\nCreating new view objects is quite simple using `DOMView(elementType, attributes, children)`:\n\n```javascript\nclass MyView extends DOMView {\n  constructor() {\n    super('div', { className: 'my-view' }, [new MyHeaderView(), 'Check out my view!']);\n  }\n}\n```\n\nBut we probably want something more than just a plain ol' div. So let's add some child elements with `DOMView.prototype.appendChildren(children)`. This method is also used by the constructor:\n\n```javascript\nclass MyView extends DOMView {\n  constructor() {\n    super('div', { className: 'my-view' }, [new MyHeaderView(), 'Check out my view!']);\n    \n    this._body = new MyBodyView();\n    this._footer = new MyFooterView();\n    \n    this.appendChildren([this._body, this._footer]);\n  }\n}\n```\n\nSometimes we don't need to construct new views when just a simple wrapper `HTMLElement` will do the trick. This is where `DOMView.DOMUtil` comes into action:\n\n```javascript\nlet {DOMUtil} = DOMView;\n\nclass MyView extends DOMView {\n  constructor() {\n    super('div', { className: 'my-view' }, [new MyHeaderView(), 'Check out my view!']);\n    \n    // Note that these are HTMLElements, not DOMViews!\n    this._body = DOMUtil.create('div', { className: 'my-view-body' });\n    this._footer = DOMUtil.create('div', { className: 'my-view-footer' });\n    \n    this.appendChildren([this._body, this._footer]);\n  }\n}\n```\n\nNearly all of the regular convenience methods you can use a `DOMView` object can be applied to an `HTMLElement` simply by using `DOMUtil` instead. If you ever need to get the root `HTMLElement` of a `DOMView`, simply use `DOMView.prototype.getRoot()`.\n\nAnd that's all there is, folks!\n\nHere is a list of other handy convenience methods:\n\n* `DOMView.prototype.appendChild(child)`/`DOMUtil.appendChild(element, child)`: Appends a `DOMView`, `HTMLElement`, string or number (as text) to the view or element\n* `DOMView.prototype.appendChildren(children)`/`DOMUtil.appendChildren(element, children)`: Same as `appendChild()` but for an array of objects\n* `DOMView.prototype.removeChild(child)`/`DOMUtil.removeChild(element, child)`: Removes a `DOMView` or `HTMLElement` from the containing view or element\n* `DOMView.prototype.removeChildren(children)`/`DOMUtil.removeChild(element, children)`: Same as `removeChild()` but for an array of objects\n* `DOMView.prototype.setAttr(attr, value)`/`DOMUtil.setAttr(element, attr, value)`: Sets an attribute (e.g. className, id, etc.) on a view or element\n* `DOMView.prototype.setAttrs(attrs)`/`DOMUtil.setAttrs(element, attrs)`: Same as `setAttr()` but for a dict of attributes to values\n* `DOMView.prototype.setStyle(style, value)`/`DOMUtil.setStyle(element, style, value)`: Sets a CSS style on a view or element\n* `DOMView.prototype.setStyles(styles)`/`DOMUtil.setStyles(element, styles)`: Same as `setStyle()` but for a dict of styles to values\n* `DOMView.prototype.addClass(className)`/`DOMUtil.addClass(element, className)`\n* `DOMView.prototype.removeClass(className)`/`DOMUtil.removeClass(element, className)`\n* `DOMView.prototype.hasClass(className)`/`DOMUtil.hasClass(element, className)`\n* `DOMView.prototype.toggleClass(className)`/`DOMUtil.toggleClass(element, className)`\n\n\n## Example\n\n```javascript\nimport DOMView from 'domview';\n\n// Utilites for modifying and creating new HTMLElements\nlet DOMUtil = {DOMView}\n\nclass Slider extends DOMView {\n\n  constructor(min, max, step, value) {\n    \n    // Create some HTMLElements\n    let cursor =\n        DOMUtil.create('div', { className: 'slider-cursor' } /* properties */);\n    let leftBackground =\n        DOMUtil.create('div', { className: 'left-background' } /* properties */);\n    \n    super(\n        'div', /* element type */ \n        { className: 'ui-slider' }, /* properties */ \n        [leftBackground, cursor] /* children */);\n \n    /**\n     * Or alternatively,\n     *\n     * super('div');\n     * this.addAttrs({ className: 'ui-slider' });\n     * this.addChildren([leftBackground, cursor]);\n     */\n \n    this._min = min;\n    this._max = max;\n    this._step = step;\n    this._value = value;\n    \n    ...\n \n    this._cursor = cursor;\n    this._leftBackground = leftBackground;\n    ...\n  }\n  \n  // Add more methods as you please\n  \n  setValue(value) {\n    // Round the value to the nearest step interval\n    let stepNo = Math.round((value - this._min) / this._step);\n    stepNo = clamp(0, stepNo, this._totalSteps);\n    this._value = this._min + stepNo * this._step;\n    let pct = stepNo * 100 / this._totalSteps;\n\n    DOMUtil.setStyle(this._cursor, 'left', pct + '%');\n    DOMUtil.setStyle(this._leftBackground, 'width', pct + '%');\n    return this;\n  }\n}       \n\n```\n\n## Making changes\nMake sure you have [node.js](https://nodejs.org/en/download/) (currently using v4.4.4) and [npm](https://www.npmjs.com/) installed\n\nOnce you have that set up, all you need to do is run\n\n```\nnpm install\n```\n\nRebuilding DOMView changes into an ES5-friendly format can be done with\n\n```\nnpm run transpile\n```\n\nThe sample app is built with webpack. Rebuilding the sample app can be done by running\n```\nnpm run build-example\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fydxia%2Fdomview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fydxia%2Fdomview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fydxia%2Fdomview/lists"}