7 odoo12 全屏模块开发

全屏功能开发:

1 定义web模板 t-name=”WebFullScreen”，预置全屏和退出全屏的a标签，退出全屏默认隐藏

1. <?xml version="1.0" encoding="UTF-8" ?>
2. <template xml:space="preserve" >
3. <t t-name="WebFullScreen">
4. <li>
5. <a class="full_screen" href="#">全屏</a>
6. </li>
7. <li><a style="display:none" class="not_full_screen" href="#">退出全屏</a></li>
8. </t>
9. </template>

2 通过js加载模块，并注册到系统工具栏

1. FullScreenMenu.prototype.sequence = 0; # 排序位置
2. SystrayMenu.Items.push(FullScreenMenu);

3 通过点击事件触发方法

1. odoo.define('web_full_screen.FullScreen', function (require) {
2. "use strict";
4. var Widget = require('web.Widget');
5. var SystrayMenu = require('web.SystrayMenu');
7. var FullScreenMenu = Widget.extend({
8. template: 'WebFullScreen',
9. events: {
10. 'click .not_full_screen': '_onNotFullScreen',
11. 'click .full_screen': '_onFullScreen',
12. },
14. _onNotFullScreen: function () {
15. var de = document;
16. if(de.exitFullScreen) {
17. de.exitFullScreen();
18. } else if(de.mozCancelFullScreen) {
19. de.mozCancelFullScreen();
20. } else if(de.webkitExitFullscreen) {
21. de.webkitExitFullscreen();
22. } else if(de.msExitFullscreen) {
23. de.msExitFullscreen();
24. }
25. var $full_screen = document.getElementsByClassName('full_screen')[0]
26. var $not_full_screen = document.getElementsByClassName('not_full_screen')[0]
27. this.do_notify("退出网页版全屏.");
28. $not_full_screen.style.display = 'none';
29. $full_screen.style.display = 'block';
30. },
32. _onFullScreen: function () {
33. var de = document.documentElement;
34. if (de.requestFullscreen) {
35. de.requestFullscreen();
36. } else if (de.mozRequestFullScreen) {
37. de.mozRequestFullScreen();
38. } else if (de.webkitRequestFullScreen) {
39. de.webkitRequestFullScreen();
40. } else if (de.msRequestFullscreen) {
41. de.msRequestFullscreen();
42. }
43. var $full_screen = document.getElementsByClassName('full_screen')[0]
44. var $not_full_screen = document.getElementsByClassName('not_full_screen')[0]
45. $not_full_screen.style.display = 'block';
46. $full_screen.style.display = 'none';
47. this.do_notify("进入网页版全屏.");
48. },
49. });
51. FullScreenMenu.prototype.sequence = 0; // force UserMenu to be the right-most item in the systray
52. SystrayMenu.Items.push(FullScreenMenu);
54. return FullScreenMenu;
56. });