350dotorg · chinaowl · Jul 6, 2016 · Jul 6, 2016 · Jul 13, 2016 · Jul 14, 2016
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+.idea
+.DS_Store
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+# code-collective
+
+This is a place to put our code for [these mini projects](https://docs.google.com/document/d/1Ji79aFOFlTIwRfLfFwrwSYtRX-0_VrY1m16ZwSWDTv4/edit?usp=sharing) for 350.org.
diff --git a/action-kit-popup-form/README.md b/action-kit-popup-form/README.md
@@ -0,0 +1,31 @@
+# ActionKit Popup Form
+
+Background: 350.org staffers want to be able to take the form on an ActionKit page such as [this one](http://act.350.org/signup/sweden-kiitg-pledge/) and embed it in a popup on an external site.
+
+Goal: use the JSONP endpoints below to get the necessary data to recreate the form in a popup.
+
+- http://act.350.org/act/sweden-kiitg-pledge/?template_set=json_form_data&jsonp=foo
+- http://act.350.org/context/sweden-kiitg-pledge/?callback=myCallback
+
+Open `index.html` in a browser to see a demo of this feature.
+
+About the directory structure:
+
+- `src` contains our code
+- `lib` contains code provided by 350.org
+- `vendor` contains third-party code
+
+## How to use this code
+
+In the markup below, the 'Click to Sign Up' link is where every happens. Specify a place to store the modal content using `data-modal-source`. In the example, this points to the div below with the id `modal-content`. Then, specify an ActionKit form to copy using `data-actionkit-page`. `data-actionkit-behavior` is an optional parameter where you can specify `redirect` if you want the page to redirect to the original form's thank you page after the user clicks submit. Otherwise, by default, the page will not refresh and the modal content will be replaced by a thank you message instead.
+
+```
+<div class="demo-content">
+  <div class="demo-button">
+    <a href="#" class="js-actionkit-popup-form button" data-modal-source="#modal-content" data-actionkit-page="sweden-kiitg-pledge" data-actionkit-behavior="redirect">
+      Click to Sign Up
+    </a>
+  </div>
+  <div id="modal-content" style="display: none"></div>
+</div>
+```
diff --git a/action-kit-popup-form/index.html b/action-kit-popup-form/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
+
+  <title>ActionKit Popup Form Demo</title>
+
+  <link rel="stylesheet" href="lib/style.css"/>
+  <link rel="stylesheet" href="src/demo.css"/>
+</head>
+<body>
+  <div class="demo-content">
+    <div class="demo-button">
+      <a href="#" class="js-actionkit-popup-form button" data-modal-source="#modal-content" data-actionkit-page="sweden-kiitg-pledge">
+        Click to Sign Up
+      </a>
+    </div>
+    <div id="modal-content" style="display: none"></div>
+  </div>
+
+
+  <script src="vendor/jquery-3.0.0.min.js"></script>
+  <script src="lib/modal.js"></script>
+  <script src="src/demo.js"></script>
+</body>
+</html>
diff --git a/action-kit-popup-form/lib/modal.js b/action-kit-popup-form/lib/modal.js
@@ -0,0 +1,71 @@
+// Modal function - integrates with 350s "Baseline" theme
+(function($) {
+  $.fn.modal = function() {
+    return this.each(function() {
+      // get the ID of the element that contains the content for the modal from the "data-modal-source" attribute in the HTML tag
+      var modalSourceID = $(this).attr('data-modal-source');
+      // get the optional list of classes to add to the inner content area from the "data-modal-classes-inner" attribute in the HTML tag
+      var modalInnerClassesAttr = $(this).attr('data-modal-classes-inner');
+      // use the default classes to set the inner modal to be a white box with lots of padding
+      var modalInnerClasses = 'box box-huge bg-white';
+      if (modalInnerClassesAttr) {
+        modalInnerClasses = modalInnerClassesAttr;
+      }
+      // get the optional list of classes to add to the inner content area from the "data-modal-classes-outer" attribute in the HTML tag
+      var modalOuterClassesAttr = $(this).attr('data-modal-classes-outer');
+      // use the default classes to set the modal container to have a transparent dark gray background and lots of horizontal padding
+      var modalOuterClasses = 'bg-dkgray-trans width-narrow';
+      if (modalOuterClassesAttr) {
+        modalOuterClasses = modalOuterClassesAttr;
+      }
+      // get the modal content, wrap it in a div, and copy the HTML to a variable
+      var modalContent = $(modalSourceID).clone(true);
+      // assemble the outer and inner modal wrappers around the content
+      var modal = '<div class="modal-wrapper section ' + modalOuterClasses + '"><div class="modal-content section-inner ' + modalInnerClasses + '"><a class="modal-close">X</a></div></div>';
+
+      // set up the click event
+      $(this).on('click', function(e) {
+        e.preventDefault();
+
+        // append the modal before the closing </body> tag and add the class "open" (which hooks into CSS3 animations)
+        // NOTE: animate() is used just to provide a slight delay before adding the 'open' class, which is necessary to trigger CSS3 animation (for some reason)
+        $modal = $(modal);
+        $modal.appendTo('body');
+        modalContent.insertAfter('.modal-close');
+
+        $modal.animate({borderRightWidth: 0}, 10, function() {
+          $(this).addClass('open').children('.section-inner').children().show();
+        });
+
+        // set up the "close modal" function
+        function modalClose() {
+          $('body').removeClass('no-scroll');
+          $('.modal-wrapper').removeClass('open').animate({borderRightWidth: 0}, 400, function() {
+            $(this).remove();
+          });
+          $(document).unbind("keyup", modalClose);
+        }
+
+        // call modalClose() when the "close" button is clicked
+        $('.modal-close').on('click', function(event) {
+          modalClose();
+          event.stopPropagation();
+        });
+        // call modalClose() when the modal background is clicked
+        $('.modal-wrapper').on('click', function() {
+          modalClose();
+        });
+        // stop clicks in the modal content from propagating up and triggering a "close" event
+        $('.modal-content').on('click', function(event) {
+          event.stopPropagation();
+        });
+        // call modalClose() when the Esc key is pressed
+        $(document).keyup(function(e) {
+          if (e.keyCode == 27) {
+            modalClose();
+          }
+        });
+      });
+    });
+  }
+}(jQuery));
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# code-collective

		This is a place to put our code for [these mini projects](https://docs.google.com/document/d/1Ji79aFOFlTIwRfLfFwrwSYtRX-0_VrY1m16ZwSWDTv4/edit?usp=sharing) for 350.org.