{"id":29773466,"url":"https://github.com/stinodes/ore.js","last_synced_at":"2025-07-27T07:17:33.038Z","repository":{"id":57332708,"uuid":"52860888","full_name":"stinodes/Ore.js","owner":"stinodes","description":"A configuration-oriented javascript library for easy and interactive web development.","archived":false,"fork":false,"pushed_at":"2017-03-17T13:25:10.000Z","size":285,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-08T09:11:32.577Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/stinodes.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":"2016-03-01T08:31:19.000Z","updated_at":"2017-03-16T16:45:51.000Z","dependencies_parsed_at":"2022-09-26T16:31:26.052Z","dependency_job_id":null,"html_url":"https://github.com/stinodes/Ore.js","commit_stats":null,"previous_names":["stinodes/ezi-script"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/stinodes/Ore.js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stinodes%2FOre.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stinodes%2FOre.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stinodes%2FOre.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stinodes%2FOre.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stinodes","download_url":"https://codeload.github.com/stinodes/Ore.js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stinodes%2FOre.js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267320332,"owners_count":24068528,"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","status":"online","status_checked_at":"2025-07-27T02:00:11.917Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2025-07-27T07:16:42.850Z","updated_at":"2025-07-27T07:17:33.032Z","avatar_url":"https://github.com/stinodes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ore-js\n\nA *javascript-library* for *front-end* development with a **minimal API** that \nfunctions mostly through **configurations**.\n\n### Objects\nOre has some objects you'll be using throughout development. The *Ore* object \nis the root of the library, containing a minimalist API.  \n Being a front-end library, you'll be provided with some ways to manipulate \n and create elements. These are wrapped in custom objects, called *Minerals*.\n These implement Ore's functionality, once again with a minimalist API, allowing you\n to build your site and make it interactive.  \n Ore also provides you with *glimmers*, which are animations.  \n These glimmers and minerals are interfaced with by passing configurations. These\n are maps / literal objects which you can just inline in your function calls.  \n   \n#### List of objects and their API \n* **`Ore`**:  \nThe library's variable. This contains the main functions to get you started.\n    * `mine( selector[string], config[Object] )`:  \n    **selector**: either a css-selector refering to the element you wish to get\n    the mineral of, or `new\u003ctagname\u003e` to create a mineral containing a new element.  \n    **config**: a configuration-object to pass to a newly created mineral.  \n    **Returns** a mineral containing a new element or one matching the passed selector.  \n* **`mineral`**:  \n  A wrapper-function around HTML-elements, allowing you to either manipulate them or retrieve data from them.\n  Calling it **with** configuration allows you to manipulate the wrapped element.  \n  Calling without arguments, will retrieve data for you.\n  * `mineral( config[Object] )`:\n  **Returns** itself after applying your changes to the element.\n  * `mineral()`:\n  **Returns** an object containing *all* data of the element that is \n     deemed useful.  \n     Has the following methods:\n        * `.get( path[string], prop[string] )`:  \n        **path**: a string containing the type of data you want returned.\n        Can be one of the following: `[styles, attr, class]`.  \n        **prop**: a string containing the name of the prop you want returned.\n        This will be the name of the css-property or attribute, depending on\n        what the `path`-parameter was. Retrieving classes requires no `prop`-param.  \n        **Returns** the requested value.\n    * `.element()`:  \n    **Returns** the element it contains, in case you need some finer tuning.\n    * `.add( config[Object] )`:\n    Method that takes a configuration of functions to be added to \n    routines.  \n    Routines can be called through a mineral by passing configuration.\n   \n* **`glimmer`**:  \nAn animation object with a similar API as minerals.\n    * `glimmer( config[Object] )`:  \n    Takes a configuration and applies it to the glimmer-object.  \n    **Returns** the glimmer so that methods can be chained.\n    \n#### Configurations\nThere has been a lot of talk about configurations. These are used to interface with\nmost API's Ore provides.  \nConfigurations are plain maps / object literals. Ther don't require instantiation.  \nFor now, there are 2 types of configurations. One for minerals and one for glimmers.\n##### Mineral-configuration\nThe mineral configuration allows you to manipulate an element to a great extent.\nBefore being processed, it gets mapped from whichever you pass to something the\nmineral can interpret.  \n###### Properties\nHere you'll see a list of properties that the mineral can understand.\nThey'll be accompanied by examples demonstrating their use and variations.  \n* `styles[Object]`:  \n A key-value map containing styles to set.  \n Keys being the css-property, values being their new value. The properties \n should be camel-cased.  \n **Alternatively**, styles can be set in the root of the config. They'll be \n picked up in the default mapper if they are a recognised css-property. \n* `attr[Object]`:  \n A key-value map, containing attributes to set.\n Keys being the attribute to set, values being their new value.  \n **Alternatively**, attributes be set in the root of the config. They'll be \n picked up by the default mapper if they are recognised as valid attributes.\n* `events[Object]`:\n A key-value map containing events to add to the mineral.\n Keys being the event to handle, values being either a function or an \n array of functions to handle the event.  \n **Alternatively**, events can be set in the root of the config. Their\n notation should then be changed from `\u003ceventname\u003e` to `on\u003cEventname\u003e`\n* `text[string]`:  \n A string to set as text.\n* `append/prepend[Array, Mineral, Element]`:  \n A mineral or element or array of either to append to the mineral the configuration\n is passed to.  \n\n###### Routines  \nRoutines are functions that are assigned to a mineral and can be easily called from `labor`.\nThey can be added by calling a mineral's `routine`-function, which accepts an object.\nThe object's keys should be the names of the routine you want to add, the value should be the\ncorresponding function.  \nRoutines can be called by using their name as a key inside of the `labor`-config, passing the \narguments for your routine as the value, or as an array if there are more than one.  \n```javascript\n// Creating a new mineral containing a div-element\n// and adding a routine, 'show', that will alter\n// the div's display property based on the passed bool.\nvar mineral = Ore.mine('newdiv')\n        .add({\n          show: function (bool) {\n            this({ display: bool ? 'block': 'none' });\n          }\n        })\n        \n/*...*/\n\n// Hiding the div using the routine. This will put\n// the div's display-prop on none.\nmineral({\n  show: false\n})\n\n```\n##### Glimmer-configuration  \n###### Properties  \nHere, all properties the glimmer-configuration can hold will be listed. At the end,\nthere will be some examples illustrating them.\n* `set[function, Array]`:  \n A function or array of functions to do something with the animated value.\n* `styles[string, Arra, Object]`:\n A string or array of strings on which the animated value should be applied.  \n Alternatively, you can pass an key-value map of which the keys are the styles\n and the values are functions further altering the value.\n* `from[number]`:  \n The initial value.\n* `to[number]`:  \n The value to animate towards.\n* `duration[number]`:  \n The animation's duration. This should be in miliseconds.\n* `delay[number]`:  \n The delay before the animation takes effect.\n* `onEnd[function]`:  \n A function to execute when the animation is finished.\n* `play[boolean]`:  \n A boolean indicating whether the animation should play or not.\n* `reverse[boolean]`:  \n A boolean that, if set to true, will trigger the animation to turn around.\n* `reset[boolean]`:\n A boolean that, if set to true, will trigger the animation to reset.\n* `easing[string]`:  \n A string refering to an easing.\n \n###### Supported Easings  \nThis is a list of all supported easings. It's suggested to play around with them\nand find the best one for your use-case.  \nEvery easing-function has a `easeIn`, `easeOut` and `easeInOut` variation. To use these,\nyou'd pass `easeInCubic` for the `cubic` easing.  \n**`linear`, `bounceIn` and `bounceOut` do not have these variations**\n* **`linear`**: has no variations - default\n* **`bounceIn`**: has no variations\n* **`bounceOut`**: has no variations\n* `quad`\n* `cubic`\n* `quart`\n* `quint`\n\n###### Examples  \n**Basic:**  \n* **Animating a variable:**  \n    In this example, a variable will be animated from 0 to 200 over 500ms.\n    The value will **not** be applied to a style. Only saved as a variable.\n    The glimmer will start immediately after passing the config.\n```javascript\nvar animatedVariable,\n  config = {\n    from: 0,\n    to: 200,\n    duration: 500,\n    set: function (value) { animatedVariable = value },\n    play: true\n  }\nglimmer(config)\n```\n\n* **Animating a style:**  \n    Same as previous example, except for the value being applied to a style\n    instead of being assigned to a variable.  \n    Don't forget to pass the mineral you wish to animate.     \n```javascript\nvar config = {\n    from: 0,\n    to: 1,\n    duration: 500,\n    style: 'opacity',\n    mineral: mineral,\n    play: true\n  }\nglimmer(config)\n```\n\n* **Animating a style with a unit:**  \n    In this case, a function is passed to add a unit to the value.\n```javascript\nvar config = {\n    from: 0,\n    to: 200,\n    duration: 500,\n    style: {\n      'top': function (value) { return value + 'px' }\n    },\n    mineral: mineral,\n    play: true\n  }\nglimmer(config)\n```\n\n* **Animating with an easing:**  \n    Now we'll add an easing to make the animation feel more natural.\n```javascript\nvar config = {\n    from: 0,\n    to: 200,\n    duration: 500,\n    style: {\n      'top': function (value) { return value + 'px' }\n    },\n    mineral: mineral,\n    easing: 'bounceOut',\n    play: true\n  }\nglimmer(config)\n```\n\n**Advanced:**  \nWe can now start adding looping or interactivity.\n* **Looping a glimmer:**   \n    Here, we make the `onEnd`-property apply a new configuration that reverses\n    the glimmer and starts it again. For simplicity's sake, we'll do nothing\n    with the animated value. You can of course leave out the `reverse`-property\n    that's not needed in your case.\n```javascript\nvar config = {\n    from: 0,\n    to: 200,\n    duration: 500,\n    onEnd: function () {\n      this({ reverse: true, play: true })\n    },\n    play: true\n  }\nglimmer(config)\n```\n\n* **Animating multiple styles:**  \n    We can make multiple styles animate with different values by passing\n    an object to the `styles`-property that interpolates the animated value.\n    This way, multiple styles will be assigned different values.\n```javascript\nvar config = {\n    from: 0,\n    to: 200,\n    duration: 500,\n    styles: {\n      'top': function (value) { return value + 'px' },\n      'opacity': function (value) { return value / 200 }\n    },\n    mineral: mineral,\n    play: true\n  }\nglimmer(config)\n```\n\n\n### WIP\nThis library, as well as this README is a work in progress. Input is always appreciated.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstinodes%2Fore.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstinodes%2Fore.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstinodes%2Fore.js/lists"}