Panel hide and show event in extension javascript

orz

By orz
in Extensions

 Share

Recommended Posts

orz Freshman

orz

Posted
Posted

Hi, do we have any events to be used that I can do some update on my extension's panel html via javascript? 

I have tried DOMContebtLoaded, onload, onpageshow, all of above are only called once the panel is created. Do we have other events to be triggered whenever I click the sidebar icon to display my panel?

Thanks

Link to comment
Share on other sites
7twenty Freshman

7twenty

Posted
Posted

Thought i'd post this before you find out the hard way.

Unfortunately there aren't very many users who are developers of extensions or know very well how they work. And MX dev's rarely (almost never) post in response to questions like this.

So unless you can find it out yourself or there is a user who does know and replies, i doubt you're going to get an answer any time soon.

Wish I could give you better info, but unfortunately that's the case.

Link to comment
Share on other sites
bayas Freshman

bayas

Posted
Posted (edited)

You should create a background service in your extension in order to catch properly all of panel events.

1- Define service file in your def.json
  

[
	{
		.
		.
		"service": { main: "service.htm", debug: false }
		.
		.
	}
]

2- Catch events in service.htm. 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <script>
    var rt = window.external.mxGetRuntime();
    rt.onAppEvent = function (obj) {
      switch (obj.type) {
        case "ACTION_START":
          // panel started.
          break;
        case "ACTION_STOP":
          // panel stopped.
          break;
        case "ACTION_SHOW":
          // panel is shown.
          break;
        case "ACTION_HIDE":
          // panel is hidden.
          break;
        case "ERROR":
          console.log(obj.errorMessage);
          break;
        case "LOCALE_CHANGED":
          // locale changed.
          break;
        default:
          // do nothing.
      }
    };
  </script>
</head>
<body>
</body>
</html>

You can also debug your service by changing debug parameter.

Edited by bayas
missing code
  • Like 3
Link to comment
Share on other sites
orz Freshman

orz

Posted
  • Author
Posted (edited)

That is good to know. Thanks a lot. I will try that out.

One more question :-).  How can I access locale defined in en.ini file from a html defined in my extension? this local html is used for re-direction when a web url should be blocked. javascript embedded in that local html cannot load locale text from en.ini. Maybe I also missed something here?

Edited by orz
Link to comment
Share on other sites
bayas Freshman

bayas

Posted
Posted

Don't use local html file like panel.$.htm
After the release of Maxthon 4.9.x, extension framework hasn't supported them. You must do it manually. For example;

en.ini 

[lang]
app.title=Title
app.description=Description

panel.htm 

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <title data-lang="app.title">Title</title>
  </head>
  <body>
    <div data-lang="app.description">Description</div>
  </body>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script>
    
	var rt = window.external.mxGetRuntime();
	var i18n = rt.locale.t;
	
	jQuery(document).ready(function() {
	  // localize.
	  jQuery("[data-lang]").each(function(index, item) {
	    var key = jQuery(this).attr("data-lang");
	    jQuery(this).text(i18n(key));
	  });
	});
	
  </script>
</html>

 

Link to comment
Share on other sites
orz Freshman

orz

Posted
  • Author
Posted
4 hours ago, bayas said:

Don't use local html file like panel.$.htm
After the release of Maxthon 4.9.x, extension framework hasn't supported them. You must do it manually. For example;

en.ini 


[lang]
app.title=Title
app.description=Description

panel.htm 


<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <title data-lang="app.title">Title</title>
  </head>
  <body>
    <div data-lang="app.description">Description</div>
  </body>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script>
    
	var rt = window.external.mxGetRuntime();
	var i18n = rt.locale.t;
	
	jQuery(document).ready(function() {
	  // localize.
	  jQuery("[data-lang]").each(function(index, item) {
	    var key = jQuery(this).attr("data-lang");
	    jQuery(this).text(i18n(key));
	  });
	});
	
  </script>
</html>

 

hmm, my panel.html can retrieve the text from en.ini file. However if I have another html like blocked.html, after I redirect current tab to this local html file, then locale cannot take any text from en.ini.

Link to comment
Share on other sites
 Share
Go to topic listing