☰

Twitch Confirm Message Send

Confirms Twitch Chat Messages

  1. // ==UserScript==
  2. // @name          Twitch Confirm Message Send
  3. // @namespace     http://userstyles.org
  4. // @description   Confirms Twitch Chat Messages
  5. // @author        636597
  6. // @include       *://*.twitch.tv/*
  7. // @run-at        document-start
  8. // @version       0.3
  9. // ==/UserScript==
  10.  
  11.  
  12. // https://www.cssscript.com/simple-plain-popup-box-vanilla-javascript-smile-alert/
  13. // (function () {
  14. //     window.CustomConfirm = CustomConfirm;
  15. //     window.C2 = CustomConfirm;
  16.  
  17. //     var template;
  18. //     var showing = false;
  19.  
  20. //     function CustomConfirm(config, callback) {
  21. //         if (! arguments.length) {
  22. //             throw 'CustomConfirm: No arguments were passed';
  23. //         }
  24.  
  25. //         if (typeof config === 'function') {
  26. //             callback = config;
  27. //         }
  28.  
  29. //         config = getFinalConfig(config);
  30.  
  31. //         if (config.targets) {
  32. //             var limit = config.targets.length;
  33.  
  34. //             if (limit > 0) {
  35. //                 var dialog = new Dialog(config, callback);
  36.  
  37. //                 for (var i = 0; i < limit; i++) {
  38. //                     setupEvents(config.targets[i], dialog);
  39. //                 }
  40. //             }
  41. //         } else {
  42. //             var dialog = new Dialog(config, callback);
  43. //             dialog.show();
  44. //         }
  45. //     }
  46.  
  47. //     function Dialog(settings, callback) {
  48. //         var _this = this;
  49. //         var modal = getTemplate();
  50.  
  51. //         var title = modal.querySelector('.c2_title');
  52. //         var close = modal.querySelector('.c2_btn-close');
  53. //         var yes = modal.querySelector('.c2_btn-yes');
  54. //         var no = modal.querySelector('.c2_btn-no');
  55. //         var body = modal.querySelector('.c2_body');
  56.  
  57. //         title.innerHTML = settings.title;
  58. //         body.innerHTML = settings.body;
  59. //         close.innerHTML = settings.btn_close;
  60. //         yes.innerHTML = settings.btn_yes;
  61. //         no.innerHTML = settings.btn_no;
  62.  
  63. //         close.addEventListener('click', cancel);
  64. //         no.addEventListener('click', cancel);
  65. //         yes.addEventListener('click', confirm);
  66.  
  67. //         if (settings.has_overlay) {
  68. //             var overlay = document.createElement('DIV');
  69.  
  70. //             modal.appendChild(overlay);
  71. //             overlay.className = 'c2_overlay';
  72. //             overlay.addEventListener('click', cancel);
  73. //         }
  74.  
  75. //         function cancel(event) {
  76. //             event.preventDefault();
  77. //             _this.hide();
  78.  
  79. //             if (typeof callback === 'function') {
  80. //                 callback(false, _this.context);
  81. //             }
  82.  
  83. //             _this.setContext(undefined);
  84. //         }
  85.  
  86. //         function confirm(event) {
  87. //             event.preventDefault();
  88. //             _this.hide();
  89.  
  90. //             if (typeof callback === 'function') {
  91. //                 callback(true, _this.context);
  92. //             }
  93.  
  94. //             _this.setContext(undefined);
  95. //         }
  96.  
  97. //         _this.modal = modal;
  98. //     }
  99.  
  100. //     Dialog.prototype.setContext = function (context) {
  101. //         this.context = context;
  102. //     };
  103.  
  104. //     Dialog.prototype.show = function () {
  105. //         if (showing) {
  106. //             $warn('CustomConfir: There\'s already a confirm showing');
  107. //             return;
  108. //         }
  109.  
  110. //         showing = true;
  111. //         document.body.appendChild(this.modal);
  112. //     };
  113.  
  114. //     Dialog.prototype.hide = function () {
  115. //         showing = false;
  116. //         this.modal.remove();
  117. //     };
  118.  
  119. //     function getFinalConfig(config) {
  120. //         var _defaults = {
  121. //             title: 'Confirm dialog',
  122. //             body: 'Are you sure ?',
  123. //             btn_yes: 'confirm',
  124. //             btn_no: 'cancel',
  125. //             btn_close: '',
  126. //             has_overlay: true
  127. //         };
  128.  
  129. //         if (typeof config === 'string') {
  130. //             _defaults.targets = config;
  131. //         } else if (typeof config === 'object') {
  132. //             Object.assign(_defaults, config)
  133. //         }
  134.  
  135. //         if (typeof _defaults.targets === 'string') {
  136. //             _defaults.targets = document.querySelectorAll(_defaults.targets);
  137. //         } else if (typeof _defaults.targets === 'object' && ! _defaults.targets.length) {
  138. //             _defaults.targets = [_defaults.targets];
  139. //         }
  140.  
  141. //         return _defaults;
  142. //     }
  143.  
  144. //     function setupEvents(el, dialog) {
  145. //         el.addEventListener('click', function (event) {
  146. //             event.preventDefault();
  147. //             dialog.setContext(el);
  148. //             dialog.show();
  149. //         }, false);
  150. //     }
  151.  
  152. //     function getTemplate() {
  153. //         if (! template) {
  154. //             template = document.createElement('DIV');
  155. //             template.className = 'c2';
  156. //             template.innerHTML = '<div class="c2_content"> <header class="c2_header"> <h2 class="c2_title"></h2> <button class="c2_btn-close"></button> </header> <div class="c2_body"> </div><footer class="c2_footer"> <button class="c2_btn-no"></button> <button class="c2_btn-yes"></button> </footer>';
  157. //         }
  158.  
  159. //         return template.cloneNode(true);
  160. //     }
  161.  
  162. //     function $warn() {
  163. //         if (typeof window.console === 'object' && typeof console.warn === 'function') {
  164. //             console.warn.apply(console, arguments);
  165. //         }
  166. //     }
  167.  
  168. // })();
  169.  
  170. var custom_confirm_css_rules = [
  171. 	".c2{position:fixed;z-index:1000;top:0;left:0;right:0;bottom:0;font-family:arial, sans-serif}" ,
  172. 	".c2_content{max-width:300px;margin:50px auto 0;padding:10px;background:#fff;border-radius:4px;-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.4);box-shadow:0 0 10px rgba(0, 0, 0, 0.4)}" ,
  173. 	".c2_header{position:relative;display:flex;justify-content:space-between}" ,
  174. 	".c2_title{margin:0;flex:1;font-size:24px;text-align:center}" ,
  175. 	".c2_body{margin:10px;font-size:16px;text-align:center}" ,
  176. 	".c2_btn-close{position:absolute;top:0;right:0;width:20px;height:20px;padding:0;font-size:12px;font-weight:700;text-align:center;background:none;border:1px solid #000;border-radius:50%;cursor:pointer;transition:all 0.4s}" ,
  177. 	".c2_btn-close:hover{opacity:0.4}" ,
  178. 	".c2_btn-close:before{content:'X'}" ,
  179. 	".c2_footer{margin-top:20px;text-align:center}" ,
  180. 	".c2_btn-no{margin:0 5px;padding:4px 14px;font-size:18px;border-radius:20px;border:1px solid #000;cursor:pointer;transition:all 0.4s}" ,
  181. 	".c2_btn-yes{margin:0 5px;padding:4px 14px;font-size:18px;border-radius:20px;border:1px solid #000;cursor:pointer;transition:all 0.4s}" ,
  182. 	".c2_btn-no{background:#000;color:#fff}" ,
  183. 	".c2_btn-yes{background:#fff;color:#000}" ,
  184. 	".c2_btn-no:hover{color:#000;border-color:transparent;background:rgba(0, 0, 0, 0.1)}" ,
  185. 	".c2_btn-yes:hover{color:#000;border-color:transparent;background:rgba(0, 0, 0, 0.1)}" ,
  186. 	".c2_overlay{position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.5)}"
  187. ];
  188.  
  189. function add_confirm_styles() {
  190. 	var sheet = window.document.styleSheets[ 0 ];
  191. 	for ( var i = 0; i < custom_confirm_css_rules.length; ++i ){
  192. 		sheet.insertRule( custom_confirm_css_rules[ i ]	, sheet.cssRules.length );
  193. 	}
  194. }
  195.  
  196. var chat_box_send_button_query_selector = '[data-a-target="chat-send-button"]';
  197. var chat_box_send_button_element = null;
  198. var chat_box_element_query_selector = '[data-a-target="chat-input"]';
  199. var chat_box_element = null;
  200. var chat_box_observer = null;
  201. var observerConfig = {
  202. 	attributes: true,
  203. 	childList: true,
  204. 	characterData: true
  205. };
  206.  
  207. function sending_exec( event , value ) {
  208. 	event.target.dispatchEvent( event );
  209. }
  210.  
  211. function confirm_send( event ) {
  212. 	CustomConfirm( function ( confirmed , element ) {
  213. 		if ( confirmed ) {
  214. 			console.log( "passing" );
  215. 			sending_exec( event );
  216. 			return true;
  217. 		}
  218. 		else {
  219. 			console.log( "Prevented !!!" );
  220. 			return false;
  221. 		}
  222. 	});
  223. }
  224.  
  225. function loadObserver() {
  226.  
  227. 	// chat_box_element.addEventListener( "keydown" , function( event ) {
  228. 	// 	if ( event.key === "Enter" ) {
  229. 	// 		event.stopImmediatePropagation();
  230. 	// 		event.stopPropagation();
  231. 	// 		event.preventDefault();
  232. 	// 		confirm_send( event );
  233. 	// 	}
  234. 	// } , false );
  235.  
  236. 	chat_box_element.addEventListener( "keydown" , function( event ) {
  237. 		if ( event.key === "Enter" ) {
  238. 			if ( confirm( "Do you want to post message?" ) === true ) {
  239. 				console.log( "passing" );
  240. 			} else {
  241. 				event.stopImmediatePropagation();
  242. 				event.stopPropagation();
  243. 				event.preventDefault();
  244. 				return false;
  245. 			}
  246. 		}
  247. 	});
  248.  
  249.  
  250. 	chat_box_send_button_element.addEventListener( "click" , function( event ) {
  251. 		if ( confirm( "Do you want to post message?" ) === true ) {
  252. 			console.log( "passing" );
  253. 		} else {
  254. 			event.stopImmediatePropagation();
  255. 			event.stopPropagation();
  256. 			event.preventDefault();
  257. 			return false;
  258. 		}
  259. 	});
  260.  
  261. 	// setTimeout( function() {
  262. 	// 	add_confirm_styles();
  263. 	// } , 2000 );
  264.  
  265. 	console.log( "Twitch Message Confirm Loaded" );
  266. }
  267.  
  268.  
  269. (function() {
  270. 	var ready = setInterval(function(){
  271. 		var x1 = document.querySelectorAll( chat_box_element_query_selector );
  272. 		if ( x1 ) { if ( x1[ 0 ] ) {
  273. 			chat_box_element = x1[0];
  274. 			var x2 = document.querySelectorAll( chat_box_send_button_query_selector );
  275. 			if ( x2 ) { if ( x2[ 0 ] ) {
  276. 				chat_box_send_button_element = x2[ 0 ];
  277. 				clearInterval( ready );
  278. 				loadObserver();
  279. 			}}
  280. 		}}
  281. 	} , 2 );
  282. 	setTimeout( function() { clearInterval( ready ); } , 20000 );
  283. })();