{"id":21928861,"url":"https://github.com/alex-developer/agprop","last_synced_at":"2025-06-16T20:38:44.605Z","repository":{"id":150931164,"uuid":"65088263","full_name":"Alex-developer/agProp","owner":"Alex-developer","description":"Javascript property page","archived":false,"fork":false,"pushed_at":"2016-08-07T20:00:12.000Z","size":48,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-22T12:28:39.900Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Alex-developer.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-08-06T15:12:53.000Z","updated_at":"2016-08-07T20:00:13.000Z","dependencies_parsed_at":"2023-04-12T19:04:48.047Z","dependency_job_id":null,"html_url":"https://github.com/Alex-developer/agProp","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Alex-developer/agProp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alex-developer%2FagProp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alex-developer%2FagProp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alex-developer%2FagProp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alex-developer%2FagProp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Alex-developer","download_url":"https://codeload.github.com/Alex-developer/agProp/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alex-developer%2FagProp/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260234279,"owners_count":22978969,"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-28T22:28:21.851Z","updated_at":"2025-06-16T20:38:44.584Z","avatar_url":"https://github.com/Alex-developer.png","language":"JavaScript","readme":"# agProp\nA small and simple property grid in JS to view/edit POJOs, excellent if you have a \"settings\" object you want to give the user to edit (that's why I have created it).\n\nNOTE: This is based upon jqPropertyGrid\n\n\n### Dependencies\n* jQuery - This is mandatory\n* jQueryUI - If jQueryUI is loaded so properties that are defined as `number` would be displayed using the jQueryUI spinner widget\n* spectrum - A very cool Color Picker that will be used (if loaded) on properties that are defined as `color` [see spectrum on GitHub](https://github.com/bgrins/spectrum) \n\n### Usage\nThe property grid needs a `div` to live in, then just initialize it by calling to the `jqPropertyGrid` method on it:\n\nThe html part:\n```html\n\u003cscript src='agProp.js'\u003e\u003c/script\u003e\n\u003clink rel='stylesheet' href='agProp.css' /\u003e\n\n\u003cdiv id='propGrid'\u003e\u003c/div\u003e\n```\n\nThe Javascript part:\n``` javascript\n// This is our target object\nvar theObj = {\n  font: 'Consolas',\n  fontSize: 14,\n  fontColor: '#a3ac03',\n  jQuery: true,\n  modernizr: false,\n  framework: 'angular',\n  iHaveNoMeta: 'Never mind...',\n  iAmReadOnly: 'I am a label which is not editable'\n};\n\n// This is the metadata object that describes the target object properties (optional)\nvar theMeta = {\n    // Since string is the default no nees to specify type\n    font: { group: 'Editor', name: 'Font', description: 'The font editor to use'},\n    // The \"options\" would be passed to jQueryUI as its options\n    fontSize: { group: 'Editor', name: 'Font size', type: 'number', options: { min: 0, max: 20, step: 2 }},\n    // The \"options\" would be passed to Spectrum as its options\n    fontColor: { group: 'Editor', name: 'Font color', type: 'color', options: { preferredFormat: 'hex' }},\n    // since typeof jQuery is boolean no need to specify type, also since \"jQuery\" is also the display text no need to specify name\n    jQuery: { group: 'Plugins', description: 'Whether or not to include jQuery on the page' },\n    // We can specify type boolean if we want...\n    modernizr: {group: 'Plugins', type: 'boolean', description: 'Whether or not to include modernizr on the page'},\n    framework: {name: 'Framework', group: 'Plugins', type: 'options', options: ['None', {text:'AngularJS', value: 'angular'}, {text:'Backbone.js', value: 'backbone'}], description: 'Whether to include any additional framework'},\n    iAmReadOnly: { name: 'I am read only', type: 'label', description: 'Label types use a label tag for read-only properties', showHelp: false }\n    \n};\n\n// Callback function. Called when any entry in the grid is changedCallback\n        function propertyChangedCallback(grid, name, value) {\n            // handle callback\n            console.log(name + ' ' + value);\n        }\n\n// Create the grid\n$('#propGrid').agProp(theObj, theMeta, propertyChangedCallback);\n\n// In order to get back the modified values:\nvar theNewObj = $('#propGrid').jqPropertyGrid('get');\n```\nThe result would be:\n\n![jqPropertyGrid](https://github.com/ValYouW/jqPropertyGrid/raw/master/example/example.png)\n\n### The metadata object\nAs seen from the example above the metadata object **can** be used (it's optional) in order to describe the object properties.\n\nEach property in the metadata object could have the following:\n* browsable - Whether this property should be included in the grid, default is true (can be omitted).\n* group - The group this property belongs to\n* name - The display name of the property in the grid\n* type - The type of the property, supported are:\n    * boolean - A checkbox would be used\n    * number - If the jQueryUI Spinner is loaded then it would be used, otherwise textbox\n    * color - If the Spectrum Color Picker is loaded then it would be used, otherwise textbox\n    * options - A dropdown list would be used in case the metadata contains the `options` array property\n    * label - A label will be used, useful for uneditable / read-only properties\n* options - An extra options object per type:\n    * If the type is `number` then the options would be passed as the jQueryUI Spinner options\n    * If the type is `color` then the options would be passed as the Spectrum options\n    * If the type is `options` then options should be an array with the drop-down values, if an element in the array is  `string` it will be used both as the value and text of the `option` element. If an element in the array is `object` then it should contains a `text` and `value` properties which would be used on the `option` element\n* description - A description of the property, will be used as tooltip on an hint element (a span with text \"[?]\")\n* showHelp - If set to false, will disable showing description's span with text \"[?]\" on property name. Will instead show tooltip on hover of property value (adds title attribute to property value). Can be omitted if default description effect is desired\n### Live example\nSee this CodePen page: http://codepen.io/ValYouW/pen/zInBg\n\n## Contributing\nYou are welcome to send pull requests that will make this module better. Before you send your PR please make sure that:\n\n1. There are no `jshint` nor `jscs` errors (you can use the `grunt jshint` and `grunt jscs` for that)\n2. If you are adding a new feature make sure to update the `README` accordingly\n3. Thx !\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falex-developer%2Fagprop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falex-developer%2Fagprop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falex-developer%2Fagprop/lists"}