{"id":22147226,"url":"https://github.com/centerforopenscience/osf-panel","last_synced_at":"2026-03-10T07:01:36.318Z","repository":{"id":25911067,"uuid":"29351892","full_name":"CenterForOpenScience/osf-panel","owner":"CenterForOpenScience","description":"Smart panels that show and hide bootstrap columns","archived":false,"fork":false,"pushed_at":"2015-02-25T19:45:27.000Z","size":1224,"stargazers_count":0,"open_issues_count":0,"forks_count":6,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2026-01-13T17:07:55.232Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://caneruguz.github.io/osf-panel/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CenterForOpenScience.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":"2015-01-16T14:31:17.000Z","updated_at":"2016-07-26T13:50:00.000Z","dependencies_parsed_at":"2022-08-24T07:10:58.077Z","dependency_job_id":null,"html_url":"https://github.com/CenterForOpenScience/osf-panel","commit_stats":null,"previous_names":["caneruguz/osf-panel"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/CenterForOpenScience/osf-panel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CenterForOpenScience%2Fosf-panel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CenterForOpenScience%2Fosf-panel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CenterForOpenScience%2Fosf-panel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CenterForOpenScience%2Fosf-panel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CenterForOpenScience","download_url":"https://codeload.github.com/CenterForOpenScience/osf-panel/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CenterForOpenScience%2Fosf-panel/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30326893,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T05:25:20.737Z","status":"ssl_error","status_checked_at":"2026-03-10T05:25:17.430Z","response_time":106,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":"2024-12-01T23:15:04.311Z","updated_at":"2026-03-10T07:01:36.284Z","avatar_url":"https://github.com/CenterForOpenScience.png","language":"JavaScript","readme":"# osf-panel\nSmart panels that show and hide bootstrap columns\n\n### How to Install\n\nIf you are using Bower, add osf-panel to your bower.json file and install by running\n\n```bower install osf-panel```\n\nIf you just want to use the distribution file, copy paste dist/jquery-osfPanel.js or the minified version to your project.\n\n\n### How to use it\n\nStep 1: You need to create a div tag that will include the buttons. Add a class to this div that you can pass to the plugin.\n\n```html\n\u003cdiv class=\"switch pull-right\"\u003e\u003c/div\u003e\n```\n\nStep 2: Then for each of the columns you want to use add the title you would like to appear on the button. This will also initialize the plugin for these columns. If you don't add this to a column it will not be included in the toggle.\n\n```html\n    \u003cdiv class=\"col-md-5\" data-osf-panel=\"Second\"\u003e\n    ...\n    \u003c/div\u003e\n```\n\nStep 3: Initialize the plugin with javascript. Here you can add options. The most important one is the selector that identifies where the button div is.\n\n```html\n\u003cscript type=\"text/javascript\"\u003e\n    $(document).ready(function(){\n        $('*[data-osf-panel]').osfPanel({ buttonElement : '.switch', onSize : 'md' });\n    });\n\u003c/script\u003e\n```\n\nAfter the plugin initializes your column will have some data attributes added (You should not add them yourself, this is for reference): \n```html\n\u003cdiv data-osf-panel=\"View\" class=\"col-md-6 col-sm-6 col-xs-12\" data-osf-toggle=\"on\" data-initial-state=\"on\" data-css-cache=\"col-sm-6\"\u003e\n…\n\u003c/div\u003e\n```\n- **data-osf-toggle=\"on\"** : Shows the current state, it will be 'on' or off\n- **data-initial-state=\"on\"** : A cache for what the initial state was in case of adjusting visibility when reset. \n- **data-css-cache=\"\"** : A cache for other sizing classes so that when reset they go back to original classes.\n\n\n### Options\n\nHere's a description of options:\n\n```javascript\n    var settings = {                                       // Default options\n        complete : null,                                            // Function to run at the end.\n        sizes : { \"xs\" : 0, \"sm\" : 768, \"md\" : 992, \"lg\" : 1200 },  // Default Bootstrap sizes. If you edited your default sizes change them here as well\n        buttonElement : \".switch\",                                  // Where to place the buttons\n        onClass : 'btn-primary',                                    // The class to add to buttons for ON\n        offClass : 'btn-default',                                   // The class to add to buttons for OFF\n        onSize : 'sm'                                               // Which size onwards to apply, it's best to start at sm.\n        onclick : null                                              // Functio to run when a toggle button is clicked\n    };\n```\n\n### onclick()\n\nThe onclick hook adds the ability to run your own functions when a user clicks on one of the toggle buttons. \nOnclick hs the following arguments\n```javascript\n    onclick(event, label, buttonState, item, column);\n```\n\n| Variable | Value |\n| ------------- | ------------- |\n| this  | is set to the jquery list of columns that are affected by the plugin. | \n| event  | Browser click event | \n| label  | The text of the button as passed in by the data-osf-panel  | \n| item  | the single $(element) jquery item for the button | \n| column  | the single $(element) jquery item for the column | \n\n\n### How to add fixed width columns\n\nThere are potential scenarios where you need to keep a column a certain size despite the toggle state. For instance you might have a sidebar that needs to be 2 columns wide when visible regardless of what other columns are visible in the grid. For these cases you can hard code the column sizes. osf-panel will stick to these sizes when resizing and expand others to fill the blanks. The demo uses two of these. As with all grids you need to make sure that your numbers make sense and add up to 12. \n\n```html\n    \u003cdiv class=\"col-md-5\" data-osf-panel=\"Second\" data-osf-panel-col=\"3\"\u003e\n    ...\n    \u003c/div\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcenterforopenscience%2Fosf-panel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcenterforopenscience%2Fosf-panel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcenterforopenscience%2Fosf-panel/lists"}