From 8c796cb3b1fe67c2567dba5e56b2b4ebecfb3f44 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maxime=20Fran=C3=A7ois?= Date: Mon, 23 Dec 2013 11:22:53 +0100 Subject: [PATCH 1/2] Add bower, Add reademe in markdown Add gitignore For init bower, after merge with master, go into your repo and past this command : bower register Collapsible https://github.com/juven14/Collapsible When the bower repository is init the readme badge work with version and you apear in http://sindresorhus.com/bower-components/ Have a nice day. --- .gitignore | 41 ++++++++++++ README | 180 ------------------------------------------------- README.md | 193 +++++++++++++++++++++++++++++++++++++++++++++++++++++ bower.json | 23 +++++++ 4 files changed, 257 insertions(+), 180 deletions(-) create mode 100644 .gitignore delete mode 100644 README create mode 100644 README.md create mode 100644 bower.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..bc1ccd2 --- /dev/null +++ b/.gitignore @@ -0,0 +1,41 @@ +# Ignore compiled docs +_gh_pages +_site + +# Numerous always-ignore extensions +*.diff +*.err +*.orig +*.log +*.rej +*.swo +*.swp +*.zip +*.vi +*~ + +# OS or Editor folders +.DS_Store +._* +Thumbs.db +.cache +.project +.settings +.tmproj +*.esproj +nbproject +*.sublime-project +*.sublime-workspace +.idea + +# Komodo +*.komodoproject +.komodotools + +# grunt-html-validation +validation-status.json +validation-report.json + +# Folders to ignore +node_modules +components \ No newline at end of file diff --git a/README b/README deleted file mode 100644 index 84c3356..0000000 --- a/README +++ /dev/null @@ -1,180 +0,0 @@ -Collapsible, jQuery Plugin - -Overview: -================================================================================ -This plugin enables site owners to control multiple collapsible panels by auto -opening any defaults specified, and keeping those opened/closed by users as they -left them while browsing your site. - -If you find any errors or have suggested changes, please post a comment on the -github project: http://github.com/juven14/Collapsible - -Very Basic demos can be found here: -http://www.snyderplace.com/demos/collapsible.html - -To enable cookie support you'll need the Cookie plugin here: -https://github.com/carhartl/jquery-cookie -________________________________________________________________________________ -================================================================================ - - -Adding a collapsible panel to your html: -================================================================================ - -You have to create your own html for the collapsible. You need a header element -(div or etc) that gets the "collapsible" class assigned and a -body element. However, the slide effect will be choppy if you have margins and -padding for the container, so here we just use a div. Here I've used -"collapsible" but you can choose any other selector. Here is an example: - ----HTML code-------------------------------------------------------------------- - -
- -
- -
- -
- -
- -
----end HTML code---------------------------------------------------------------- -________________________________________________________________________________ -================================================================================ - - -Adding the Javascript to your file: -================================================================================ - -JavaScript which belongs in the head of the html document, using the -cookie plugin is optional. Please note that our default open / config is only -an example as related to the above HTML. - ----JavaScript code-------------------------------------------------------------- - - - ----end JavaScript code---------------------------------------------------------- - -The plugin default options are as follows: ----JavaScript code-------------------------------------------------------------- -{ - cssClose: 'collapse-close', - cssOpen: 'collapse-open', - cookieName: 'collapsible', - cookieOptions: { - path: '/', - expires: 7, - domain: '', - secure: '' - }, - defaultOpen: '', - speed: 300, - bind: 'click', - animateOpen: function (elem, opts) { - elem.next().slideUp(opts.speed); - }, - animateClose: function (elem, opts) { - elem.next().slideDown(opts.speed); - }, - loadOpen: function (elem, opts) { - elem.next().show(); - }, - loadClose: function (elem, opts) { - elem.next().hide(); - } -} ----end JavaScript code---------------------------------------------------------- - -Option details: - - * cssClose - This is the class you want assigned when it is closed. - * cssOpen - This is the class you want assigned when it is opened. - * cookieName - This is the name of the cookie that will store which - collapsibles should be open. - * cookieOptions - See the jquery.cookie plugin for more information. - * defaultOpen - This is comma separated list of collapsible header ids. - * speed - This is the animation speed for the slide up/down. - * bind - This is the event that you want the collapsibles to function on. only - 4 are supported: click, dblclick, mouseenter, and mouseover. - * animateOpen - This is a custom callback to alter the way that an element - is opened. - * animateClose - This is a custom callback to alter the way that an element - is closed. - * loadOpen = This is a custom callback to override the default open state - * loadClose = This is a custom callback to override the default close state - -Methods: - -You can call following methods on collapsible elements: - - * collapsed - returns 'true' if element is collapsed - * toggle - toggle collapsible state - * open - open a collapsible - * close - close a collapsible - * openAll - open all closed collapsibles - * closeAll - close all open collapsibles - -Call them using jquery-ui style: - $(selector).collapsible('method', [arg]); - -Examples: - if ( $('#nav-block').collapsible('collapsed') ) { ... } -or - appendToLog('Error: service is down!'); - $('#nav-logs').collapsible('open'); - -________________________________________________________________________________ -================================================================================ - - -Styling -================================================================================ - -In the above example HTML you will see a span, this is useful if you wish to -assign an open/close image. - -This plugin will append a user defined (or default, see options above) class to -header of the collapsible. You can use this to swap out the images or style -the different states of your collapsible. - ----CSS code--------------------------------------------------------------------- -.collapsible div.collapse-open {} -.collapsible div.collapse-close {} - -.collapsible div.collapse-open span {} -.collapsible div.collapse-close span {} ----end CSS code----------------------------------------------------------------- - -________________________________________________________________________________ -================================================================================ \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..1cece7a --- /dev/null +++ b/README.md @@ -0,0 +1,193 @@ +# Collapsible, jQuery Plugin [![BOWER version](https://badge-me.herokuapp.com/api/bower/juven14/Collapsible.png)](http://badges.enytc.com/for/bower/juven14/Collapsible) [![GH version](https://badge-me.herokuapp.com/api/gh/juven14/Collapsible.png)](http://badges.enytc.com/for/gh/juven14/Collapsible + +## Overview: + +This plugin enables site owners to control multiple collapsible panels by auto +opening any defaults specified, and keeping those opened/closed by users as they +left them while browsing your site. + +If you find any errors or have suggested changes, please post a comment on the +github project: http://github.com/juven14/Collapsible + +Very Basic demos can be found here: +[http://www.snyderplace.com/demos/collapsible.html](http://www.snyderplace.com/demos/collapsible.html) + +To enable cookie support you'll need the Cookie plugin here: +[https://github.com/carhartl/jquery-cookie](https://github.com/carhartl/jquery-cookie) + + + +## Adding a collapsible panel to your html: + + +You have to create your own html for the collapsible. You need a header element +(div or etc) that gets the "collapsible" class assigned and a +body element. However, the slide effect will be choppy if you have margins and +padding for the container, so here we just use a div. Here I've used +"collapsible" but you can choose any other selector. Here is an example: + +### Html code +```html + + +
+ +
+ +
+ +
+ +
+ +
+``` + + + + +## Adding the Javascript to your file: + + +JavaScript which belongs in the head of the html document, using the +cookie plugin is optional. Please note that our default open / config is only +an example as related to the above HTML. + +### JavaScript code + +```js + + + +``` + + +### The plugin default options are as follows: + +```js + { + cssClose: 'collapse-close', + cssOpen: 'collapse-open', + cookieName: 'collapsible', + cookieOptions: { + path: '/', + expires: 7, + domain: '', + secure: '' + }, + defaultOpen: '', + speed: 300, + bind: 'click', + animateOpen: function (elem, opts) { + elem.next().slideUp(opts.speed); + }, + animateClose: function (elem, opts) { + elem.next().slideDown(opts.speed); + }, + loadOpen: function (elem, opts) { + elem.next().show(); + }, + loadClose: function (elem, opts) { + elem.next().hide(); + } + } +``` + + +### Option details: + +* cssClose - This is the class you want assigned when it is closed. +* cssOpen - This is the class you want assigned when it is opened. +* cookieName - This is the name of the cookie that will store which + collapsibles should be open. +* cookieOptions - See the jquery.cookie plugin for more information. +* defaultOpen - This is comma separated list of collapsible header ids. +* speed - This is the animation speed for the slide up/down. +* bind - This is the event that you want the collapsibles to function on. only + 4 are supported: click, dblclick, mouseenter, and mouseover. +* animateOpen - This is a custom callback to alter the way that an element + is opened. +* animateClose - This is a custom callback to alter the way that an element + is closed. +* loadOpen = This is a custom callback to override the default open state +* loadClose = This is a custom callback to override the default close state + +### Methods: + +You can call following methods on collapsible elements: + +* collapsed - returns 'true' if element is collapsed +* toggle - toggle collapsible state +* open - open a collapsible +* close - close a collapsible +* openAll - open all closed collapsibles +* closeAll - close all open collapsibles + +Call them using jquery-ui style: + +```js + $(selector).collapsible('method', [arg]); +``` + + +Examples: + +```js + if ( $('#nav-block').collapsible('collapsed') ) { ... } +``` +or + +```js + appendToLog('Error: service is down!'); + $('#nav-logs').collapsible('open'); +``` + + +## Styling + + +In the above example HTML you will see a span, this is useful if you wish to +assign an open/close image. + +This plugin will append a user defined (or default, see options above) class to +header of the collapsible. You can use this to swap out the images or style +the different states of your collapsible. + + +```css + + .collapsible div.collapse-open {} + .collapsible div.collapse-close {} + + .collapsible div.collapse-open span {} + .collapsible div.collapse-close span {} + +``` diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..895fdf3 --- /dev/null +++ b/bower.json @@ -0,0 +1,23 @@ +{ + "name": "Collapsible", + "version": "1.2.1", + "main": "./js/jquery.collapsible.js", + "homepage": "https://github.com/juven14/Collapsible", + "description": "This plugin enables site owners to control multiple collapsible panels by auto opening any defaults specified, and keeping those opened/closed by users as they left them while browsing your site.", + "keywords": [ + "collapse", + "panel", + "collapsible" + ], + "authors": [ + "John Snyder " + ], + "ignore": [ + "**/.*" + ], + "dependencies": { + "jquery.cookie": "~1.4.0", + "jquery": "~1.10.2" + }, + "license": "BSD" +} From 05e9b38232933910469da80f92a7cfa56619585c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maxime=20Fran=C3=A7ois?= Date: Mon, 23 Dec 2013 11:25:03 +0100 Subject: [PATCH 2/2] Fix bower main path --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 895fdf3..ad9c26d 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "Collapsible", "version": "1.2.1", - "main": "./js/jquery.collapsible.js", + "main": "./jquery.collapsible.js", "homepage": "https://github.com/juven14/Collapsible", "description": "This plugin enables site owners to control multiple collapsible panels by auto opening any defaults specified, and keeping those opened/closed by users as they left them while browsing your site.", "keywords": [