[PLUGIN] HTML | iFrame

Post your completed addons to share with the community

Post » Wed Aug 31, 2016 1:27 am

New Version v1.13
Bitcoin Wallet: 1GCRqZExcP6svMdKGpCaRH4A8QAZtSjXxu
B
46
S
18
Posts: 196
Reputation: 3,652

Post » Wed Aug 31, 2016 1:31 am

@newt The functions "On load" and "On error" does not work?
*_iFrame only works with "iframe".
*_insertHTML only works with "div" (insertHTML).
*_HTML work with both.

@xanxion The error only appears when you reload? Do you have an simple capx?
Bitcoin Wallet: 1GCRqZExcP6svMdKGpCaRH4A8QAZtSjXxu
B
46
S
18
Posts: 196
Reputation: 3,652

Post » Wed Aug 31, 2016 12:47 pm

Nandynho wrote:@newt The functions "On load" and "On error" does not work?
*_iFrame only works with "iframe".
*_insertHTML only works with "div" (insertHTML).
*_HTML work with both.



Its as you said the "iframe" only works with iframe.
On load, and on error only work with insertHtml.
I need iframe.
I've found a work around with the ajax plug.
Image ImageImage
B
171
S
50
G
179
Posts: 8,382
Reputation: 113,458

Post » Wed Aug 31, 2016 3:09 pm

'On load' and 'On error' it should work with iframe and insertHTML.
Try downloading of the capx.
Bitcoin Wallet: 1GCRqZExcP6svMdKGpCaRH4A8QAZtSjXxu
B
46
S
18
Posts: 196
Reputation: 3,652

Post » Sun Sep 11, 2016 10:35 am

Message: Alpha Wolf can only post plain text URLS until they have 500 rep. 1 URLS modified. Why?
Nandynho wrote:@nikosurfing thank you man! *new version
@AlphaWolf sorry about that, I made a mistake when I updated the plugin. Should now work normally.

New Version v1.12
  • Scrollbar update
    https://dl.dropbox.com/s/ek8g98uxb63cfs ... rtHTML.zip Download


Thank you sir!
i solved my problem by css style
set css style "overflow" to "auto"

but i have another problem:
if we use touch plugin in a layout; we can't scroll _insertHTML on that layout
using touchwrap plugin and disable touchwrap option, can be usefull. but it didn't work well
in other word; i need to use touch & _insertHTML at a same time in my project.
give me a way or hint please
my project depend on it
B
3
Posts: 5
Reputation: 181

Post » Mon Sep 12, 2016 3:47 am

Sorry @AlphaWolf
I can not test on my phone. You could check if it will work?

runtime.js
Code: Select all
// ECMAScript 5 strict mode
"use strict";

assert2(cr, "cr namespace not created");
assert2(cr.plugins_, "cr.plugins_ not created");

/////////////////////////////////////
// Plugin class
cr.plugins_.htmlCODE = function(runtime)
{
   this.runtime = runtime;
};

var onreturn = false;
var jsreturn = "";

function JSreturn(text)
{
   onreturn = true;
   jsreturn = text;
};

/////////////////////////////////////
// Plugin
(function ()
{
   /////////////////////////////////////
   var pluginProto = cr.plugins_.htmlCODE.prototype;

   /////////////////////////////////////
   // Object type class
   pluginProto.Type = function(plugin)
   {
      this.plugin = plugin;
      this.runtime = plugin.runtime;
   };

   var typeProto = pluginProto.Type.prototype;

   // called on startup for each object type
   typeProto.onCreate = function()
   {
   };

   /////////////////////////////////////
   // Instance class
   pluginProto.Instance = function(type)
   {
      this.type = type;
      this.runtime = type.runtime;
   };

   var instanceProto = pluginProto.Instance.prototype;

   // called whenever an instance is created
   instanceProto.onCreate = function()
   {
      if (this.properties[6])
      {
         this.elem = document.createElement("div");
         this.elem.innerHTML = this.properties[8];
      } else
      {
         this.elem = document.createElement("iframe");
         if (this.properties[7])
            GoToURL(this, this.properties[7]);
      }

      /////////////////////////////////////
      var widthfactor = this.width > 0 ? 1 : -1;
      var heightfactor = this.height > 0 ? 1 : -1;

      this.elem.oWidth = this.width;
      this.elem.oHeight = this.height;

      this.x = parseInt(this.x);
      this.y = parseInt(this.y);
      
      this.elem.style.cssText = "-webkit-transform:rotate("+ this.angle * widthfactor * heightfactor*180/3.1416 + "deg);" +
                         "-moz-transform:rotate("+ this.angle * widthfactor * heightfactor*180/3.1416 + "deg);" +
                        "-o-transform:rotate("+ this.angle * widthfactor * heightfactor*180/3.1416 + "deg);" +
                        "-ms-transform:rotate("+ this.angle * widthfactor * heightfactor*180/3.1416 + "deg);";

      this.elem.width = Math.round(this.elem.width);
      this.elem.height = Math.round(this.elem.height);
      this.elem.x = Math.round(this.elem.x);
      this.elem.y = Math.round(this.elem.y);

      //--- style start
      this.elem.id = (this.properties[0]);
      this.elem.setAttribute("id", this.elem.id);

      /////////////////////////////////////
      // Allow Fullscreen
      this.elem.setAttribute("frameborder", 0);
      this.elem.setAttribute("allowFullScreen", "");

      /////////////////////////////////////
      // Allow Touch *scroll
      this.elem.setAttribute("style", "-webkit-overflow-scrolling: touch");

      if (this.properties[2])
         this.elem.setAttribute("title", this.properties[2]);

      this.elem.style.background = (this.properties[3]);
      this.elem.style.border = this.properties[4] ? this.properties[4] : "none";

      switch (this.properties[5]) {
         case 0:
            this.elem.setAttribute("scrolling", "no");
            this.elem.style.overflow = "hidden";
            break;
         case 1:
            this.elem.style.overflow = "auto";
            break;
         case 2:
            this.elem.style.overflowX = "auto";
            this.elem.style.overflowY = "hidden";
            break;
         case 3:
            this.elem.style.overflowX = "hidden";
            this.elem.style.overflowY = "auto";
            break;
      };

      this.elem.style.color = (this.properties[9]);

      if (this.properties[11])
      {
         this.CSSref = document.createElement("link");
         this.CSSref.setAttribute("name", this.properties[11]);
         this.CSSref.setAttribute("rel", "stylesheet");
         this.CSSref.setAttribute("type", "text/css");
         this.CSSref.setAttribute("href", this.properties[11]);

         if (typeof this.CSSref != "undefined")
            document.getElementsByTagName("head")[0].appendChild(this.CSSref);

         this.cssFile = this.properties[11];
      }
      //--- style end

      //--- script start
      if (this.properties[12])
      {
         this.JSscript = this.properties[12];
         this.JSref = document.createElement('script');
         this.JSref.setAttribute("type", "text/javascript");
         this.JSref.setAttribute("async", "async");
         this.JSref.setAttribute("src", this.JSscript);

         if (typeof this.JSref != "undefined")
            document.getElementsByTagName("head")[0].appendChild(this.JSref);
      }
      //--- script end

      /////////////////////////////////////
      // Change "body" to "c2canvasdiv" *(to work with request full screen in browser plugin)
      //jQuery(this.elem).appendTo("body");
      jQuery(this.elem).appendTo("#c2canvasdiv");

      if (!this.properties[1])
      {
         jQuery(this.elem).hide();
         this.visible = false;
      }

      this.scale = 1.0;
      this.updatePosition();
      this.runtime.tickMe(this);
   };

   instanceProto.onDestroy = function ()
   {
      jQuery(this.elem).remove();
      this.elem = null;
   };

   instanceProto.tick = function ()
   {
      this.updatePosition();
   };

   instanceProto.updatePosition = function (first)
   {
      if (this.runtime.isDomFree)
         return;

      if (onreturn)
      {
         this.runtime.trigger(Cnds.prototype.OnReturn, this);
         this.runtime.trigger(Cnds.prototype.JSreturn, this);
      }

      var left = this.layer.layerToCanvas(this.x, this.y, true);
      var top = this.layer.layerToCanvas(this.x, this.y, false);
      var right = this.layer.layerToCanvas(this.x + this.width, this.y + this.height, true);
      var bottom = this.layer.layerToCanvas(this.x + this.width, this.y + this.height, false);

      // Is entirely offscreen or invisible: hide
      if (!this.visible || !this.layer.visible || right <= 0 || bottom <= 0 || left >= this.runtime.width || top >= this.runtime.height)
      {
         jQuery(this.elem).hide();
         return;
      }

      // Truncate to canvas size
      if (left < 1)
         left = 1;
      if (top < 1)
         top = 1;
      if (right >= this.runtime.width)
         right = this.runtime.width - 1;
      if (bottom >= this.runtime.height)
         bottom = this.runtime.height - 1;

      jQuery(this.elem).show();
      
      var offx = left + jQuery(this.runtime.canvas).offset().left;
      var offy = top + jQuery(this.runtime.canvas).offset().top;
      jQuery(this.elem).offset({left: offx, top: offy});
      jQuery(this.elem).width(right - left);
      jQuery(this.elem).height(bottom - top);
      //rounding position & width to avoid jitter
      this.elem.width = Math.round(this.elem.width);
      this.elem.height = Math.round(this.elem.height);
      this.elem.x = Math.round(this.elem.x);
      this.elem.y = Math.round(this.elem.y);

      if (this.properties[10] == 1)
         jQuery(this.elem).css("font-size", ((this.layer.getScale(true) / this.runtime.devicePixelRatio) - 0.2) + "em");
      if (this.properties[10] == 2)
         jQuery(this.elem).css("font-size", ((this.layer.getScale(true) / this.runtime.devicePixelRatio) - 0.3) + "em");
      if (this.properties[10] == 3)
         jQuery(this.elem).css("font-size", ((this.layer.getScale(true) / this.runtime.devicePixelRatio) - 0.1) + "em");
      if (this.properties[10] == 4)
         jQuery(this.elem).css("font-size", ((this.layer.getScale(true) / this.runtime.devicePixelRatio) - 0.05) + "em");
   };

   // only called if a layout object
   instanceProto.draw = function(ctx)
   {
   };

   instanceProto.drawGL = function(glw)
   {
   };

   //////////////////////////////////////
   // Functions
   function GoToURL(this_, url_) {
      this_.load = 1;
      this_.elem.src = url_;
      this_.currentURL = url_;

      jQuery.ajax({
         context: this_,
         dataType: "text",
         type: "GET",
         url: url_,
         success: function() {
            this_.elem.onload = (function (self) {
               return function() {
                  self.runtime.trigger(Cnds.prototype.OnLoad, self);
               };
            })(this_);
            this_.load = 0;
         },
         error: function() {
            this_.elem.onload = (function (self) {
               return function() {
                  self.runtime.trigger(Cnds.prototype.OnError, self);
               };
            })(this_);
            this_.load = 0;
         }
      });
   };

   //////////////////////////////////////
   // Conditions
   function Cnds() {};

   Cnds.prototype.CompareCSSFilename = function (text)
   {
      if (this.runtime.isDomFree)
         return false;

      return cr.equals_nocase(this.cssFile, text);
   };

   Cnds.prototype.CompareCSSStyle = function (text)
   {
      if (this.runtime.isDomFree)
         return false;

      return this.elem.style.cssText === text;
   };

   Cnds.prototype.CompareHTML = function (text, case_)
   {
      if (this.runtime.isDomFree)
         return false;

      if (case_ === 0)   // insensitive
         return cr.equals_nocase(this.elem.innerHTML, text);
      else
         return this.elem.innerHTML === text;
   };

   Cnds.prototype.OnError = function ()
   {
      return true;
   };

   Cnds.prototype.OnLoad = function ()
   {
      return true;
   };

   Cnds.prototype.OnReturn = function (text)
   {
      onreturn = false;
      return true;
   };

   Cnds.prototype.JSreturn = function (text, case_)
   {
      if (this.runtime.isDomFree)
         return false;

      if (case_ === 0)   // insensitive
         return cr.equals_nocase(jsreturn, text);
      else
         return jsreturn === text;
   };

   //--- iFrame
   Cnds.prototype.IsFocused = function ()
   {
      return this.elem === document.activeElement;
   };

   Cnds.prototype.IsLoading = function ()
   {
      return this.load;
   };

   Cnds.prototype.URL = function (text)
   {
      if (!this.properties[6])
         return text == this.elem.contentWindow.location.href;
   };

   pluginProto.cnds = new Cnds();

   //////////////////////////////////////
   // Actions
   function Acts() {};

   Acts.prototype.SetVisible = function (vis)
   {
      if (this.runtime.isDomFree)
         return;
      
      this.visible = (vis !== 0);
   };

   Acts.prototype.SetTooltip = function (text)
   {
      if (this.runtime.isDomFree)
         return;
      
      this.elem.title = text;
   };

   Acts.prototype.ImpCSSFile = function (filename)
   {
      if (this.runtime.isDomFree)
         return;

      this.CSSref = document.createElement("link");
      this.CSSref.setAttribute("name", filename);
      this.CSSref.setAttribute("rel", "stylesheet");
      this.CSSref.setAttribute("type", "text/css");
      this.CSSref.setAttribute("href", filename);

      if (typeof this.CSSref != "undefined")
         document.getElementsByTagName("head")[0].appendChild(this.CSSref);

      this.cssFile = filename;
   };

   Acts.prototype.RemCSSFile = function ()
   {
      if (this.runtime.isDomFree)
         return;

      this.elem.remove = document.getElementsByTagName("link");

      for (var i = this.elem.remove.length; i >= 0; i--) {
         if (this.elem.remove[i] && this.elem.remove[i].getAttribute("name") === this.cssFile) {
            this.elem.remove[i].parentNode.removeChild(this.elem.remove[i]);
            break;
         }
      }

      this.cssFile = "";
   };

   Acts.prototype.SetCSS = function (p, v)
   {
      if (this.runtime.isDomFree)
         return;

      jQuery(this.elem).css(p,v);
   };

   Acts.prototype.SetScale = function (scale, r)
   {
      if (this.runtime.isDomFree)
         return;

      this.elem.style.transform = "scale("+scale+")";

      if (r)
      {
         this.width = (this.width * this.scale) / scale;
         this.height = (this.height * this.scale) / scale;

         this.scale = scale;
      }
   };
   
   //--- insertHTML
   Acts.prototype.SetHTML = function (text)
   {
      if (this.runtime.isDomFree)
         return;

      this.elem.innerHTML = text;
   };

   Acts.prototype.AppendHTML = function(param)
   {
      if (this.runtime.isDomFree)
         return;

      if (cr.is_number(param))
         param = Math.round(param * 1e10) / 1e10;   // round to nearest ten billionth - hides floating point errors
         
      var inner_to_append = param.toString();
      
      if (inner_to_append)   // not empty
         this.elem.innerHTML += inner_to_append;
   };

   Acts.prototype.LoadHTML = function (url_, postdata_)
   {
      if (this.runtime.isDomFree)
         return;

      this.load = 1;

      if(postdata_.length) {
         jQuery.ajax({
            context: this,
            dataType: "text",
            type: "POST",
            url: url_,
            data: postdata_,
            success: function(data) {
               this.load = 0;
               this.elem.innerHTML = data;
               this.runtime.trigger(Cnds.prototype.OnLoad, this);
            },
            error: function() {
               this.load = 0;
               this.runtime.trigger(Cnds.prototype.OnError, this);
            }
         });
      } else {
         jQuery.ajax({
            context: this,
            dataType: "text",
            type: "GET",
            url: url_,
            success: function(data) {
               this.load = 0;
               this.elem.innerHTML = data;
               this.runtime.trigger(Cnds.prototype.OnLoad, this);
            },
            error: function() {
               this.load = 0;
               this.runtime.trigger(Cnds.prototype.OnError, this);
            }
         });
      };
   };

   Acts.prototype.ScrollTop = function ()
   {
      if (this.runtime.isDomFree)
         return;

        this.elem.scrollTop = 0;
   };

   Acts.prototype.ScrollBottom = function ()
   {
      if (this.runtime.isDomFree)
         return;
      
      this.elem.scrollTop = this.elem.scrollHeight;
   };

   Acts.prototype.ScrollTo = function (to_)
   {
      if (this.runtime.isDomFree)
         return;
      
      to_ /= 100;
      this.elem.scrollTop = this.elem.scrollHeight;
      this.elem.scrollTop *= to_;
   };

   //--- iFrame
   Acts.prototype.Blur = function ()
   {
      if (this.runtime.isDomFree)
         return;

      this.elem.blur();
   };

   Acts.prototype.Focus = function ()
   {
      if (this.runtime.isDomFree)
         return;

      this.elem.focus();
   };

   Acts.prototype.SetURL = function (url_)
   {
      if (this.runtime.isDomFree)
         return;

      GoToURL(this, url_);
   };

   Acts.prototype.Backward = function ()
   {
      if (this.runtime.isDomFree)
         return;

      this.elem.src = this.elem.contentWindow.history.back();
   };

   Acts.prototype.Forward = function ()
   {
      if (this.runtime.isDomFree)
         return;

      this.elem.src = this.elem.contentWindow.history.forward();
   };

   Acts.prototype.Reload = function ()
   {
      if (this.runtime.isDomFree)
         return;

      this.elem.contentWindow.location.reload();
   };

   pluginProto.acts = new Acts();

   //////////////////////////////////////
   // Expressions
   function Exps() {};

   Exps.prototype.CSSFilename = function (ret)
   {
      ret.set_string(this.cssFile);
   };

   Exps.prototype.CSS = function (ret)
   {
      ret.set_string(this.elem.style.cssText);
   };

   //--- HTML
   Exps.prototype.HTML = function (ret)
   {
      if (this.properties[6])
         ret.set_string(this.elem.innerHTML);
      else
         ret.set_string("<html>" + jQuery(this.elem).contents().find("*").html() + "</html>");
   };

   Exps.prototype.JSreturn = function (ret)
   {
      ret.set_string(jsreturn);
   };

   //--- iFrame
   Exps.prototype.URL = function (ret)
   {
      if (this.properties[6])
         this.currentURL = "";
      else
         this.currentURL = this.elem.contentWindow.location.href;

      ret.set_string(this.currentURL);
   };

   pluginProto.exps = new Exps();

}());
Last edited by Nandynho on Wed Sep 14, 2016 3:42 am, edited 1 time in total.
Bitcoin Wallet: 1GCRqZExcP6svMdKGpCaRH4A8QAZtSjXxu
B
46
S
18
Posts: 196
Reputation: 3,652

Post » Tue Sep 13, 2016 6:45 pm

[quote="Nandynho"]Sorry @AlphaWolf
I can not test on my phone. You could check if it will work?

Hi nice man! Dear Nandynho

i found scroll to (x%) in your plugin update and that was my need. i made an internal c2 function for calculate proper "x", and then >> scroll to x%
now my problem is solved.
B
3
Posts: 5
Reputation: 181

Post » Wed Sep 14, 2016 3:30 am

I really did not expect ScrollTo could be useful for something.
I'm glad you helped, good luck on your project!

New Version v1.141
  • [+] Get object ID.
  • [-] Removed some lines.
Plugin - Capx
Bitcoin Wallet: 1GCRqZExcP6svMdKGpCaRH4A8QAZtSjXxu
B
46
S
18
Posts: 196
Reputation: 3,652

Post » Thu Sep 15, 2016 1:17 pm

[quote="Nandynho"]I really did not expect ScrollTo could be useful for something.
I'm glad you helped, good luck on your project!

Thank You Nandynho

Now i need to run external js in _insertHTML.
Please make an example for us

at now when i using external js, screen goes to completely black

another question:

could _inserthtml.html runs script that placed inside it?
for example:
there are some texts in body
then:
<script>something for detect urls</script>

i can't run my script in this way.
do you have any help for me please?
B
3
Posts: 5
Reputation: 181

Post » Fri Sep 16, 2016 2:20 am

Of course!
@AlphaWolf Simple External JS.

*I think that scripts placed inside the body are read only in the creation of the body.
Only once...
Bitcoin Wallet: 1GCRqZExcP6svMdKGpCaRH4A8QAZtSjXxu
B
46
S
18
Posts: 196
Reputation: 3,652

PreviousNext

Return to Completed Addons

Who is online

Users browsing this forum: No registered users and 2 guests