added destroy method to api

Timo-Breumelhof · Sep 15, 2015 · 3ade849 · 3ade849
1 parent e80f39c
commit 3ade849
Show file tree

Hide file tree

Showing 6 changed files with 258 additions and 171 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -22,6 +22,9 @@
                 color: #2645FF;
                 text-decoration: none;
             }
+            .demo {
+
+            }
         </style>
         <title>Chocolat — demo</title>
         <script>
@@ -51,11 +54,11 @@
     </head>
     <body>
         <div style="text-align: center;background: #E8E8E8; padding: 10px;margin-bottom: 10px;">
-            <a href="https://github.com/nicolas-t/Chocolat"> on github</a>
+            <a href="https://github.com/nicolas-t/Chocolat"> Chocolat on github</a>
         </div>
 
         <h2>
-           Full window, contain: 
+           Full window, contain, click the numbers to open:
         </h2>
         <div id="example0">
             <a class="chocolat-image" href="demo-images/5.jpg" title="HO">
@@ -70,7 +73,7 @@ <h2>
         </div>
 
         <h2>
-            Full window, cover, looping : 
+            Full window, cover, looping :
         </h2>
         <div id="example1">
             <a class="chocolat-image" href="demo-images/1.jpg" title="foo">
@@ -82,7 +85,7 @@ <h2>
         </div>
 
         <h2>
-            Display in a container, cover, with thumbnails :  
+            Display in a container, cover, with thumbnails :
         </h2>
 
         <div id="example3" data-chocolat-title="set title">
@@ -97,10 +100,10 @@ <h2>
             </a>
         </div>
         <!-- Container (notice the relative width) :  -->
-        <div id="container2" style="width: 80%; max-width:1000px; height: 600px;background: #E0E0E0;margin:auto;"></div>
+        <div id="container2" style="width: 80%; max-width:1000px; height: 600px; background: #E0E0E0; margin:auto;"></div>
 
         <h2>
-            Display in a container, looping :  
+            Display in a container, looping :
         </h2>
 
         <div id="example2" data-chocolat-title="set title">
@@ -115,7 +118,7 @@ <h2>
             </a>
         </div>
         <!-- Container (notice the relative width) :  -->
-        <div id="container1" style="width: 80%; max-width:1000px; height: 600px;background: #E0E0E0;margin:auto;"></div>
+        <div id="container1" style="width: 80%; max-width:1000px; height: 600px; background: #E0E0E0; margin:auto;"></div>
 
 
         <h2>
@@ -127,14 +130,14 @@ <h2>
         <a class="api-next" href="#">Next</a>
         <a class="api-prev" href="#">Prev</a>
         <br>
-        <a class="api-cover" href="#">Enter cover mode</a> / 
+        <a class="api-cover" href="#">Enter cover mode</a> /
         <a class="api-contain" href="#">Enter contain mode</a>
 
         <br>
         <br>
         <a class="api-close" href="#">Close</a>
         <!-- Container (notice the relative width) :  -->
-        <div id="container3" style="width: 80%; max-width:1000px; height: 600px;background: #E0E0E0;margin:auto;"></div>
+        <div id="container3" style="width: 80%; max-width:1000px; height: 600px; background: #E0E0E0; margin:auto;"></div>
 
         <script>
             $(function(){
@@ -143,7 +146,7 @@ <h2>
                     loop: true,
                     images : [
                         {src : 'demo-images/1.jpg', title : 'caption 1'},
-                        {src : 'demo-images/6.jpg', title : 'caption 2'}, 
+                        {src : 'demo-images/6.jpg', title : 'caption 2'},
                         {src : 'demo-images/8.jpg', title : 'caption 3'},
                     ],
                     imageSize : 'contain',

diff --git a/dist/js/jquery.chocolat.js b/dist/js/jquery.chocolat.js
@@ -19,7 +19,7 @@
         initialized       : false,
         timer             : false,
         timerDebounce     : false,
-        images            : []
+        images            : [],
     };
 
     function Chocolat(element, settings) {
@@ -28,12 +28,23 @@
         this.settings  = settings;
         this._defaults = defaults;
         this.elems     = {};
+        this.element   = element;
+
+        this._cssClasses = [
+            'chocolat-open',
+            'chocolat-mobile',
+            'chocolat-in-container',
+            'chocolat-cover',
+            'chocolat-zoomable',
+            'chocolat-zoomed'
+        ];
 
         if (!this.settings.setTitle && element.data('chocolat-title')) {
             this.settings.setTitle = element.data('chocolat-title');
         }
 
-        element.find(this.settings.imageSelector).each(function () {
+
+        this.element.find(this.settings.imageSelector).each(function () {
             that.settings.images.push({
                 title  : $(this).attr('title'),
                 src    : $(this).attr('href'),
@@ -42,10 +53,10 @@
             });
         });
 
-        element.find(this.settings.imageSelector).each(function (i) {
-            $(this).off('click').on('click', function(event){
+        this.element.find(this.settings.imageSelector).each(function (i) {
+            $(this).off('click.chocolat').on('click.chocolat', function(e){
                 that.init(i);
-                event.preventDefault();
+                e.preventDefault();
             });
         });
 
@@ -299,14 +310,30 @@
             ];
             var that = this;
             var def = $.when($(els).fadeOut(200)).done(function () {
-                that.elems.domContainer.removeClass('chocolat-open chocolat-mobile chocolat-in-container chocolat-cover');
+                that.elems.domContainer.removeClass(this._cssClasses.join(' '));
             });
             this.settings.currentImage = false;
             this.settings.initialized = false;
 
             return def;
         },
 
+        destroy : function() {
+            this.element.removeData();
+            this.element.find(this.settings.imageSelector).off('click.chocolat');
+
+            if (!this.settings.initialized) {
+                return;
+            }
+            if (this.settings.fullscreenOpen) {
+                this.exitFullScreen();
+            }
+            this.settings.currentImage = false;
+            this.settings.initialized = false;
+            this.elems.domContainer.removeClass(this._cssClasses.join(' '));
+            this.elems.wrapper.remove();
+        },
+
         getOutMarginW : function() {
             var left  = this.elems.left.outerWidth(true);
             var right = this.elems.right.outerWidth(true);
@@ -651,6 +678,10 @@
                     return that.place(that.settings.currentImage, that.settings.duration);
                 },
 
+                destroy : function(){
+                    return that.destroy();
+                },
+
                 set : function(property, value){
                     that.settings[property] = value;
                     return value;

diff --git a/dist/js/jquery.chocolat.min.js b/dist/js/jquery.chocolat.min.js