1 files changed, 82 insertions, 0 deletions
diff --git a/frontend/imgradient/colors_iframe.js b/frontend/imgradient/colors_iframe.js
new file mode 100644
index 0000000..0a1e728
--- /dev/null
+++ b/frontend/imgradient/colors_iframe.js
@@ -0,0 +1,82 @@
+//but I tool a procedural approach, and I wanted to make something more like OOP. just didn't know
+//how do deal with the fact that $.fancybox is a class...a singleton class is totally fine. 
+//like colorpicker_iframe. just need to know what it would look like 
+//well in this case you might not need oop approach, as it doesn't solve any issues here. its fine to use procedural code then you
+//don't need oop. also js is sort of using procedural way then asking to provide onclick code and other methods like .click() in jquery, 
+//so it's kind of callback\procedural oriented, and oop doesn't fit in very well. you can wrap it in oop if really want, it will look like:
+//
+//function ColorPicker(){
+//  this.element = $(".something");
+//  this.init = function(){ 
+//     this.options = options
+//     this.element.click(this.onclick);
+//     this.myfancybox = $.fancybox; 
+//     this.myfancybox_iframe = ".fancybox-iframe";
+//   }
+//  this.onclick = function(){
+//    this.myfancybox.open(
+//     do I do something like this
+//     _.extend({ autoDimensions: false,
+//       autoDimensions: false,
+//       beforeShow: this.fancybox_cb_1, //something like this? yes ok I think that it's the right thing for methods
+//       to reach for these classes for trivial things for a while, so that I can used to thinking this way.
+//       I understand that there are no real benefits performance/readability-wise here, but it's a different paradigm, 
+//       right? yes ok cool. Well 
+//        }, options) //? yep
+//
+//    this.options
+//    ...
+//    callback: funciton(){ this.color_picked = ...from fancybox .. }
+//    callback: this.callback,
+//    );
+//  }
+//  this.color_picked = function()
+//  this.color_picked_as_hex = function()
+//  this.color_picked_as_rgb = function()
+//  this.callback = function(){
+//   $(this.myfancybox_iframe). ....
+//  }
+//}
+//and so on yeah good
+//
+function launch_iframe(input_target){
+  $.fancybox.open({
+    href : '/im/colors/index.html',
+    width  : 1100,           // set the width
+    height : 710,
+    fitToView : true,
+    autoDimensions:false,
+    autoSize:false,
+    type : 'iframe',
+    closeBtn  : false,
+    padding : 5,
+    beforeShow : function(){					
+      $('.fancybox-iframe').contents().find('#submitvalue').click(function(){
+        $('.fancybox-iframe').contents().find('form').submit();						
+        $.fancybox.close();
+      });					
+    },				
+    beforeClose : function(){
+      x = $('.fancybox-iframe').contents().find('#namespace').val();
+    },
+    afterClose: function(){
+      $(input_target).val(x);
+    }
+  });
+}
+$(document).ready(function(){
+ if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
+   return;
+ }
+ var element_list = [".color1", ".color2"]
+ element_list.forEach(
+   function(l){
+     console.log("a"+l)
+     $("a"+l).click(function(event){ 
+       event.preventDefault();
+       launch_iframe("input"+l) 
+     });
+   }
+ )
+	
+})