remove images from chat

inc/databap.php

@@ -137,11 +137,12 @@ class Databap extends PhpObject
 	const OPT_BG_2 = 11;
 	const OPT_BG_3 = 3;
 	const OPT_HOVER = 4;
-	const OPT_IMAGE_CHAT = 6;
+	const OPT_CHAT_BG = 6;
+	const OPT_CHAT_HISTO = 10;
+	const OPT_CHAT_IMAGES = 12;
 	const OPT_STATUS = 7;
 	const OPT_CONSOLE = 8;
 	const OPT_EMAIL = 9;
-	const OPT_CHAT_HISTO = 10;
 	
 	//Search Constants
 	const CODE_TYPE = 'c';
@@ -360,23 +361,26 @@ class Databap extends PhpObject
 		$this->oMySql->insertRow(self::OPTNAME_TABLE, array($sOptionNameIdCol=>self::OPT_BG_2, $sOptionNameCol=>'couleur de fond 2', 'type'=>self::OPT_TEXT, 'language'=>self::LANG_FR));
 		$this->oMySql->insertRow(self::OPTNAME_TABLE, array($sOptionNameIdCol=>self::OPT_BG_3, $sOptionNameCol=>'couleur de fond 3', 'type'=>self::OPT_TEXT, 'language'=>self::LANG_FR));
 		$this->oMySql->insertRow(self::OPTNAME_TABLE, array($sOptionNameIdCol=>self::OPT_HOVER, $sOptionNameCol=>'couleur de survol', 'type'=>self::OPT_TEXT, 'language'=>self::LANG_FR));
-		$this->oMySql->insertRow(self::OPTNAME_TABLE, array($sOptionNameIdCol=>self::OPT_IMAGE_CHAT, $sOptionNameCol=>'image du chat', 'type'=>self::OPT_TEXT, 'language'=>self::LANG_FR));
+		$this->oMySql->insertRow(self::OPTNAME_TABLE, array($sOptionNameIdCol=>self::OPT_CHAT_BG, $sOptionNameCol=>'image du chat', 'type'=>self::OPT_TEXT, 'language'=>self::LANG_FR));
 		$this->oMySql->insertRow(self::OPTNAME_TABLE, array($sOptionNameIdCol=>self::OPT_STATUS, $sOptionNameCol=>'mission en cours', 'type'=>self::OPT_TEXT, 'language'=>self::LANG_FR));
 		$this->oMySql->insertRow(self::OPTNAME_TABLE, array($sOptionNameIdCol=>self::OPT_CONSOLE, $sOptionNameCol=>'afficher la console du chat', 'type'=>self::OPT_CHECKBOX, 'language'=>self::LANG_FR));
 		$this->oMySql->insertRow(self::OPTNAME_TABLE, array($sOptionNameIdCol=>self::OPT_EMAIL, $sOptionNameCol=>'email', 'type'=>self::OPT_TEXT, 'language'=>self::LANG_FR));
 		$this->oMySql->insertRow(self::OPTNAME_TABLE, array($sOptionNameIdCol=>self::OPT_CHAT_HISTO, $sOptionNameCol=>'historique du chat (jours)', 'type'=>self::OPT_TEXT, 'language'=>self::LANG_FR));
+		$this->oMySql->insertRow(self::OPTNAME_TABLE, array($sOptionNameIdCol=>self::OPT_CHAT_IMAGES, $sOptionNameCol=>'afficher les images du chat', 'type'=>self::OPT_CHECKBOX, 'language'=>self::LANG_FR));
 		
-		//Select and Default Option values
+		//Select/checkbox and Default Option values: option_name => array(option_value => is_default, ...)
 		$asDefaultValues = array(	self::OPT_CONSOLE=>array(true=>false, false=>true),
 									self::OPT_NICKNAME=>array('Utilisateur inconnu'=>true),
 									self::OPT_BG=>array('#04357B'=>true),
 									self::OPT_BG_2=>array('#88B2F0'=>true),
 									self::OPT_BG_3=>array('#D9E5F2'=>true),
 									self::OPT_HOVER=>array('#EFAB00'=>true),
-									self::OPT_IMAGE_CHAT=>array('images/sap_gold_332.jpg'=>true),
+									self::OPT_CHAT_BG=>array('images/sap_gold_332.jpg'=>true),
 									self::OPT_STATUS=>array('aucune mission en cours'=>true),
 									self::OPT_EMAIL=>array('email inconnu'=>true),
-									self::OPT_CHAT_HISTO=>array('0'=>true));
+									self::OPT_CHAT_HISTO=>array('0'=>true),
+									self::OPT_CHAT_IMAGES=>array(true=>true, false=>false)
+		);
 		foreach($asDefaultValues as $sOptionNameId=>$asOptionValues)
 		{
 			foreach($asOptionValues as $sOptionValue=>$bDefault)
@@ -474,6 +478,7 @@ class Databap extends PhpObject
 		$asVars['hash_to_page'] = $this->getPagesFromHash();
 		$asVars['page_to_hash'] = array_flip($asVars['hash_to_page']);
 		$asVars['opt_console'] = ($this->getUserOptionValue(self::OPT_CONSOLE)==true);
+		$asVars['opt_chat_images'] = ($this->getUserOptionValue(self::OPT_CHAT_IMAGES)==true);
 		$oPage->setTag('variables', $this->jsonConvert($asVars));
 		
 		return $oPage->getMask();
@@ -730,23 +735,39 @@ class Databap extends PhpObject
 		//Title
 		$asPost['title'] = $oPost->getElementsByTagName('h2')->item(0)->nodeValue;
 
-		//Image
+		//Movie
-		$oImages = $oPost->getElementsByTagName('img');
+		$sSource = '';
-		foreach($oImages as $oImage)
+		$oMovies = $oPost->getElementsByTagName('div');
+		foreach($oMovies as $oMovie)
 		{
-			switch($oImage->getAttribute('class'))
+			if($oMovie->getAttribute('class')=='badge-animated-container-animated post-view')
 			{
-				case 'badge-item-animated-img':
+				$sSource = $oMovie->getAttribute('data-image');
-					$o9gagImage = $oImage;
+				break;
-					break 2;
-				case 'badge-item-img':
-					$o9gagImage = $oImage;
-					break;
 			}
 		}
 		
+		//Image
+		if($sSource=='')
+		{
+			$oImages = $oPost->getElementsByTagName('img');
+			foreach($oImages as $oImage)
+			{
+				switch($oImage->getAttribute('class'))
+				{
+					case 'badge-item-animated-img':
+						$o9gagImage = $oImage;
+						break 2; //exit
+					case 'badge-item-img':
+						$o9gagImage = $oImage;
+						break; //keep on looking for animated gif
+				}
+			}
+			if(isset($o9gagImage)) $sSource = $o9gagImage->getAttribute('src');
+		}
+		
 		$asResult = array();
-		if(isset($o9gagImage)) $asResult = $this->downloadToTmp($o9gagImage->getAttribute('src'));
+		if(isset($sSource)) $asResult = $this->downloadToTmp($sSource);
 		else $asResult['error'] = 'Not safe for work';
 			
 		if($asResult['error']=='')
@@ -2821,7 +2842,7 @@ class Databap extends PhpObject
 	public function getStyleSheet()
 	{
 		$sStyle = file_get_contents(self::STYLE_PATH);
-		$asStyleParams = array(self::OPT_BG, self::OPT_BG_2, self::OPT_BG_3, self::OPT_HOVER, self::OPT_IMAGE_CHAT);
+		$asStyleParams = array(self::OPT_BG, self::OPT_BG_2, self::OPT_BG_3, self::OPT_HOVER, self::OPT_CHAT_BG);
 
 		//Inserting Color Anchors
 		$asDefaultValues = $this->getDefaultOptionValues($asStyleParams, false);

masks/chat.html

@@ -782,6 +782,9 @@ function refresh_chat(bReset)
 							}
 						);
 						
+						//Image display
+						setImageDisplay();
+						
 						//News
 						if(databap.tmp('get_news') === true && !bReset) getNews();
 						databap.tmp('get_news', false);
@@ -821,6 +824,7 @@ function addMessage(message_info, bReset)
 	var msg_body = '';
 	var sUnreadChanName, iUnreadCount;
 	var bSystemMsg = false;
+	var bImage = false;
 
 	switch(message_info.msg_class)
 	{
@@ -866,12 +870,11 @@ function addMessage(message_info, bReset)
 			bSystemMsg = true;
 			break;
 		case databap.consts.msg_types.img:
-			var msg = '<a href="'+message_info.message[3]+'" target="_blank"><img src="'+message_info.message[0]+'" width="'+message_info.message[1]+'" height="'+message_info.message[2]+'" class="proxy"></a>';
+			message_info.message = {url:message_info.message[3], title:'Source : '+message_info.message[3], url_img:message_info.message[0], width:message_info.message[1], height:message_info.message[2]};
-			msg_body = sMsgPrefix+'<span class="text">'+msg+'</span>';
-			break;
 		case databap.consts.msg_types['9gag']:
 			var msg = '<a href="'+message_info.message.url+'" target="_blank" title="'+message_info.message.title+'"><img src="'+message_info.message.url_img+'" width="'+message_info.message.width+'" height="'+message_info.message.height+'" class="proxy" /></a>';
 			msg_body = sMsgPrefix+'<span class="text">'+msg+'</span>';
+			bImage = true;
 			break;
 		case databap.consts.msg_types.reboot:
 			if(!bReset)
@@ -915,8 +918,21 @@ function addMessage(message_info, bReset)
 	
 	if(msg_body != '')
 	{
+		//Hide image button
+		$Msg = $(msg_body);
+		if(bImage)
+		{
+			var $Banner = $('<span>', {'class':'banner'})
+							.append($('<span>', {'class':'banner_title'}).text(message_info.message.title))
+							.addButton('close', 'Cacher les images', toggleImages, '', 'no_text no_bg');
+			$Banner.css({'top':'calc('+Math.round(message_info.message.height / -2)+'px + 4px)'});
+			$Msg.find('a').addClass('img_box').append($Banner);
+		}
+		
 		//Adding message to channel panel
-		$Message = $('<p>', {'class':message_info.msg_class+' class_'+sChanKeyName+' hide round_right'}).append($('<span>', {'class':'time'}).text(((message_info.date==databap.consts.cur_date)?'':message_info.date+' - ')+message_info.time), msg_body);
+		$Message = $('<p>', {'class':message_info.msg_class+' class_'+sChanKeyName+' hide round_right'})
+					.append($('<span>', {'class':'time'}).text(((message_info.date==databap.consts.cur_date)?'':message_info.date+' - ')+message_info.time))
+					.append($Msg);
 		$Message.find('.chan_link').click(function(){joinChan($(this).find('.chan_text').text());});
 		$Message.find('.user').click(setPm);
 		databap.getMainElem('#chat_messages').append($Message);
@@ -934,6 +950,22 @@ function addMessage(message_info, bReset)
 	}
 }
 
+function toggleImages()
+{
+	databap.vars2('opt_chat_images', !databap.vars2('opt_chat_images'));
+	setImageDisplay();
+}
+function setImageDisplay()
+{
+	var $Images = $('#chat_messages').find('.img_box');
+	$Images.toggleClass('hidden', !self.vars2('opt_chat_images'));
+	$Images.find('.banner .fa').toggleClass('fa-c-image', !self.vars2('opt_chat_images'));
+	$Images.find('.banner .fa').toggleClass('fa-c-close', self.vars2('opt_chat_images'));
+	$Images.find('.banner .button').attr('title', (self.vars2('opt_chat_images')?'Cacher':'Afficher')+' les images');
+	
+	databap.updateScrollBar('bottom');
+}
+
 function refresh_users()
 {
 	if(typeof oUserTimer != "undefined") clearTimeout(oUserTimer);

style/_common.scss

@@ -243,6 +243,20 @@ a.button .fa {
 	margin-right:5px;
 }
 
+a.button.no_text .fa {
+	margin-right:0;
+}
+
+a.button.no_bg, a.button.no_bg:hover {
+	background:none;
+	color:$col_none;
+	margin: 0.33333em 0; /* to compensate the fa-60 */
+	padding:0;
+}
+a.button.no_bg:hover .fa {
+	color:$col_hover_1;
+}
+
 a.button.strong .value {
 	font-weight:bold;
 }

style/_fa-custom.scss

@@ -321,3 +321,7 @@ vertical-align	0%		-5%			-10%		-15%		-20%		-25%		-30%
 .fa-c-off:before, .fa-c-0:before {
 	content: "\f204";
 }
+
+.fa-c-ban:before {
+	content: "\f05e";
+}

style/databap.scss

@@ -724,12 +724,6 @@
 #chat_messages p {
 	color:$col_main_1;
 }
-#chat_messages p img.proxy {
-	vertical-align:middle;
-	border:1px solid $col_main_1;
-	padding:5px;
-	background:$col_none;
-}
 #chat_messages p.U {
 	/*background-color:white;*/
 }
@@ -782,6 +776,67 @@
 	font-weight:bold;
 }
 
+#chat_messages p img.proxy {
+	vertical-align:middle;
+	border:1px solid $col_main_1;
+	padding:5px;
+	background:$col_none;
+}
+#chat_messages p span.text a.img_box {
+	position:relative;
+}
+#chat_messages p .banner {
+	position: absolute;
+	display:none;
+	z-index: 1000;
+	right: 0px;
+	top:0;
+	width:100%;
+	margin:0;
+	padding:0;
+	background: rgba(4, 53, 123, 0.7);
+}
+#chat_messages p .banner a.button {
+	margin:calc(0.33333em + 5px) 6px;
+	float:right;
+}
+#chat_messages p span.text a.img_box:hover .banner, #chat_messages p span.text a.img_box.hidden .banner {
+	display:inherit;
+}
+
+#chat_messages p .banner .banner_title {
+	color:$col_none;
+	text-overflow: ellipsis;
+	font-size: $size_vbig;
+	line-height:25px;
+	margin:0 0 0 6px;
+	madding:0;
+}
+
+#chat_messages p span.text a.img_box.hidden {
+	position:inherit;
+}
+#chat_messages p span.text a.img_box.hidden img {
+	display:none;
+}
+#chat_messages p span.text a.img_box.hidden .banner {
+	top:0 !important;
+	position:inherit;
+	background:none;
+}
+#chat_messages p span.text a.img_box.hidden .banner_title {
+	display:none;
+}
+#chat_messages p span.text a.img_box.hidden .banner .button {
+	color:$col_main_1;
+	margin:0;
+	padding:0;
+	float:none;
+}
+#chat_messages p span.text a.img_box.hidden .banner .button .fa {
+	@extend .fa-20;
+}
+
 #chat_messages .help {
 	border:1px dashed #666666;
 	padding:0 0 5px 0;