{"id":20303902,"url":"https://github.com/billstclair/elm-custom-element","last_synced_at":"2025-04-11T13:53:59.992Z","repository":{"id":52693433,"uuid":"152322305","full_name":"billstclair/elm-custom-element","owner":"billstclair","description":"An Elm custom-element library","archived":false,"fork":false,"pushed_at":"2021-04-20T20:43:28.000Z","size":150,"stargazers_count":10,"open_issues_count":3,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-06T23:48:27.067Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://billstclair.github.io/elm-custom-element","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/billstclair.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-09T21:14:06.000Z","updated_at":"2021-10-20T08:13:30.000Z","dependencies_parsed_at":"2022-08-22T06:40:11.738Z","dependency_job_id":null,"html_url":"https://github.com/billstclair/elm-custom-element","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/billstclair%2Felm-custom-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/billstclair%2Felm-custom-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/billstclair%2Felm-custom-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/billstclair%2Felm-custom-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/billstclair","download_url":"https://codeload.github.com/billstclair/elm-custom-element/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248412091,"owners_count":21099048,"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":[],"created_at":"2024-11-14T16:41:37.394Z","updated_at":"2025-04-11T13:53:59.967Z","avatar_url":"https://github.com/billstclair.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Custom Elements\n\n[billstclair/elm-custom-element](http://package.elm-lang.org/packages/billstclair/elm-custom-element/latest) is a package to collect Html custom element implementations. \n\nNote that when you use the included modules in your project, they won't actually DO anything unless you follow the instructions below to load their JavaScript files.\n\nHere are the custom element modules:\n\n* `CustomElement.TextAreaTracker`\n\n  Attach a `\u003ctext-area-tracker\u003e` to a `\u003ctextarea\u003e` or \n  `\u003cinput type='text'\u003e` element. When triggered, it sends events from\n  which you may extract the current selection start and end and the\n  screen coordinates of the insertion cursor. This enables popping up\n  a completion dialog for, e.g., completing `@foo` nicknames.\n\n* `CustomElement.FileListener`\n\n  Attach a `\u003cfile-listener\u003e` to a `\u003cfile\u003e` element, and when the user\n  chooses a file, you'll get an event containing the file's content as\n  both a string and a Data URL.\n  \n  JavaScript file: `site/js/file-listener.js`\n  \n  This was a kludge to enable uploading binary files before `elm/http`\n  v2.x, `elm/file`, and `elm/bytes`. If you still need to use\n  `elm/http` 1.x, then using this makes sense. For new code, use\n  `elm/file` with `elm/http` v2.x.\n  \n* `CustomElement.CodeEditor`\n\n  A simple wrapper around the [CodeMirror](https://codemirror.net) code editor.\n  Inspired by [Luke Westby](https://github.com/lukewestby)'s\n  [Elm Europe talk](https://youtu.be/tyFe9Pw6TVE).\n  \n  JavaScript file: `site/js/code-editor.js`\n  Support files: `site/lib/ codemirror.css, codemirror.js`\n\n## Adding Custom Elements to Your Project\n\nIn order to use custom elements, you must start your project from a `.html` that includes your compiled Elm file and the custom element JavaScript files, and any port code you need. You can start this by copying the `site` directory from here to your project, then edit `site/index.html`. Remove the custom elements you don't need from its `\u003chead\u003e` section, and customize anything else that needs it. Only include in your application the files in the `site/js` directory for custom elements you use.\n\n    $ git clone git@github.com:billstclair/elm-custom-element.git\n    $ cd elm-custom-element\n    $ cp -R site .../\u003cyour project directory\u003e/\n    $ cd .../\u003cyour project directory\u003e\n    $ \u003ceditor\u003e index.html\n\nThe included `index.html` assumes your Elm code is in `elm.js`. You can make this so with something like the following:\n\n    elm make src/Main.elm --output site/elm.js\n    \nI usually run my Elm projects during development using `elm reactor`, if only beacause some browsers aren't happy with `file:` URLs:\n\n    $ cd .../\u003cproject-dir\u003e\n    $ elm reactor\n\nThen aim your browser at http://localhost:8000/site/index.html\n\n## Building and Running the Example\n\nThe file `src/Main.elm` is an example of using the included custom elements.\n\nTo build and run it:\n\n    $ git clone git@github.com:billstclair/elm-custom-element.git\n    $ cd elm-custom-element\n    $ elm make src/Main.elm --output site/elm.js\n    $ elm reactor\n    \nThen aim your web browser at http://localhost:8000/site/index.html\n\nThe example is live at [billstclair.github.io/elm-custom-element](https://billstclair.github.io/elm-custom-element/)\n\n## Help to Expand the Library\n\nI encourage pull requests, for custom elements that you think will be useful to the community. To add a custom element, do the following:\n\n0. Fork [billstclair/elm-custom-element](https://github.com/billstclair/elm-custom-element) on GitHub.\n\n1. Add your JavaScript file to the `site/js` directory.\n   The file should be patterned after `file-listener.js`, defining NO\n   top-level variables or functions. Add a `\u003cscript\u003e` element to\n   `site/index.html` to load your JavaScript file.\n   \n2. If your custom element requires JavaScript written by somebody else,\n   put those files in the `site/lib` directory, and edit `site/lib/README.md`\n   to include a description of those files and their license(s). Add `\u003cscript\u003e`\n   elements to `site/index.html` for those files, too.\n\n3. Add your Elm interface file to the `src/CustomElement` directory.\n   The file should be patterned after `FileListener.elm`, exposing a\n   function to create your custom element(s), one of more functions\n   returning an `Html.Attribute` to set properties of the element, one\n   or more functions returning an `Html.Attribute` to handle an event\n   from the element, and any convenience functions that make sense.\n\n4. Add your new module to the `exposed-modules` in `elm.json`.\n\n5. Add an example of using your element to `example/Main.elm`, expanding\n   its `Model` and `Msg` as necessary, and adding display code to `view`\n   and event handling code to `update`.\n   \n6. Test your example, using the instructions above.\n\n7. Add your element to the list above in this `README.md` file.\n\n8. Ensure your exposed interface is all documented with:\n\n       elm make --docs docs.json\n   \n9. Review `README.md` and `docs.json` with https://elm-doc-preview.netlify.com\n\n10. Submit a pull request. Don't worry about bumping the version number.\n    I'll do that.\n\n# Compatibility\n\nThe [Custom Elements Registry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry) is still a fairly new part of the web browser DOM. It isn't supported by all browsers, as outlined in the compatibility table on that page.\n\nIn particular, Microsoft Internet Explorer and Edge do not support custom elements. There's a polyfill, and I included that in `site/lib/custom-elements.min.js`, but it didn't make the example work in IE on my Windows machine, though it DID make it work in Firefox on my Mac desktop, without setting `dom.webcomponents.customelements.enabled` true in `about:config` (the polyfill isn't necessary, if you do that). I commented out the inclusion of the polyfill in `site/index.html`. Use it if you wish.\n\nIf you're motivated to make the code work for IE and/or Edge, or for other browsers that don't currently work, I'll gladly accept a pull request that does that.\n\nBill St. Clair, 9 October 2018\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbillstclair%2Felm-custom-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbillstclair%2Felm-custom-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbillstclair%2Felm-custom-element/lists"}