1
0
mirror of https://github.com/e107inc/e107.git synced 2025-01-17 20:58:30 +01:00

Modal Window and TinyMce Fixes.

This commit is contained in:
Cameron 2013-03-04 22:59:03 -08:00
parent 6ba120e826
commit f666d18f6c
13 changed files with 185 additions and 157 deletions

View File

@ -420,12 +420,18 @@ echo getModal();
return;
}
if(e_PAGE == "image.php")
{
return;
}
return '
<div id="uiModal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3 class="modal-caption">&nbsp;</h3>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-caption">&nbsp;</h4>
</div>
<div class="modal-body">
<p>Loading…</p>

View File

@ -844,7 +844,7 @@ class media_admin_ui extends e_admin_ui
if($this->getQuery('iframe'))
{
e107::js('tinymce','tiny_mce_popup.js');
$this->getResponse()->setIframeMod(); // disable header/footer menus etc.
if(!$this->getQuery('for'))
@ -982,7 +982,7 @@ class media_admin_ui extends e_admin_ui
<div class='tab-content'>
<div class='tab-pane active' id='core-media-select'>
<legend>Library</legend>
<div class='table' style='display:block; height:500px'>
<div class='table' style='display:block'>
";

View File

@ -9,7 +9,7 @@
| $Author$
+----------------------------------------------------------------------------+
*/
define("LAN_PLUGIN_DOWNLOAD_NAME", "Downloads");
// define("LAN_PLUGIN_DOWNLOAD_NAME", "Downloads");
define("LAN_DL_OPTIONS", "Options"); //FIXME Use Generic
define("LAN_DL_DOWNLOAD_OPT_GENERAL", "General");
define("LAN_DL_DOWNLOAD_OPT_BROKEN", "Reporting");

View File

@ -23,7 +23,7 @@ if(e_WYSIWYG || strpos(e_SELF,"tinymce/admin_config.php") )
}
else
{
e107::js('tinymce','tiny_mce_popup.js','jquery');
// e107::js('tinymce','tiny_mce_popup.js','jquery');
}
if(ADMIN)
@ -76,20 +76,22 @@ if(e_WYSIWYG || strpos(e_SELF,"tinymce/admin_config.php") )
return false;
});
/*
$('img.tinyInsertEmote').live('click',function() {
var src = $(this).attr('src');
alert(src);
// var html = '<img src=\''+src +'\' alt=\'emote\' />';
tinyMCE.execCommand('mceInsertRawHTML',false, 'hi there');
;
$('.mceContentBody', window.top.document).tinymce().execCommand('mceInsertContent',false,src);
// tinyMCE.selectedInstance.execCommand('mceInsertContent',0,src);
$('#uiModal').modal('hide');
return true;
});
var src = $(this).attr('src');
alert(src);
// var html = '<img src=\''+src +'\' alt=\'emote\' />';
tinyMCE.execCommand('mceInsertRawHTML',false, 'hi there');
;
$('.mceContentBody', window.top.document).tinymce().execCommand('mceInsertContent',false,src);
// tinyMCE.selectedInstance.execCommand('mceInsertContent',0,src);
$('#uiModal').modal('hide');
return true;
});*/
@ -127,7 +129,11 @@ if(e_WYSIWYG || strpos(e_SELF,"tinymce/admin_config.php") )
tinyMCEPopup.close();
});
$('.e-dialog-close').click(function(){
tinyMCEPopup.close();
});

View File

@ -23,8 +23,8 @@
ed.addCommand('mceEmotion', function() {
ed.windowManager.open({
file : url + '/emoticons.php',
width : 220 + parseInt(ed.getLang('emoticons.delta_width', 0)),
height : 220 + parseInt(ed.getLang('emoticons.delta_height', 0)),
width : 480 + parseInt(ed.getLang('emoticons.delta_width', 0)),
height : 340 + parseInt(ed.getLang('emoticons.delta_height', 0)),
inline : 1
}, {
plugin_url : url, // Plugin absolute URL
@ -35,13 +35,13 @@
// Register example button
ed.addButton('emoticons', {
title : 'emoticons.desc',
onclick: function(){
// onclick: function(){
cmd : 'mceEmotion',
// $("div.modal-body").html('hi there');
$('div.modal-body').load(url + "/emoticons.php");
$('#uiModal').modal('show');
// $('div.modal-body').load(url + "/emoticons.php");
// $('#uiModal').modal('show');
/*
$.colorbox({
@ -54,7 +54,7 @@
scrolling: false
});
*/
},
// },
//cmd : 'mceEmotion',
image : url + '/images/emoticons.png'
});

View File

@ -6,13 +6,13 @@ exit;
define("e_IFRAME",true); //FIXME Not functioning on front-end yet.
$HEADER = "";
$FOOTER = "";
// $HEADER = "";
// $FOOTER = "";
e107::css('inline',"
.selectEmote { display:inline-block; cursor:pointer;margin:3px }
.selectEmote { display:inline-block; cursor:pointer;margin:3px }
body { text-align:center }
");
e107::js('tinymce','tiny_mce_popup.js');
@ -24,10 +24,14 @@ $(document).ready(function()
var file_name = $(this).attr('src');
var html = '<img src=\"' + file_name + '\" alt=\"\" />';
tinyMCEPopup.editor.execCommand('mceInsertContent', false, html);
parent.$.colorbox.close()
tinyMCEPopup.close();
});
$('#e-cancel').click(function () {
tinyMCEPopup.close();
});
});
@ -35,58 +39,38 @@ $(document).ready(function()
e107::lan('core','admin',TRUE);
require_once(HEADERF);
$emotes = $sysprefs->getArray("emote_".$pref['emotepack']);
$str = "<div style='text-align:center;margin:0px'><div class='spacer' style='white-space:wrap;width:180px;text-align:center'>";
foreach($emotes as $key => $value){
$str = "<div class='center btn-group' style='margin-bottom:20px'>";
foreach($emotes as $key => $value)
{
$key = str_replace("!", ".", $key);
$key = preg_replace("#_(\w{3})$#", ".\\1", $key);
$value2 = substr($value, 0, strpos($value, " "));
$value = ($value2 ? $value2 : $value);
// $str .= "\n<a href='javascript:void(0);' onmousedown=\"javascript:insertEmotion('$key')\"><img src=\"".e_IMAGE_ABS."emotes/" . $pref['emotepack'] . "/$key\" style=\"border:0; padding-top:2px;\" alt=\"\" /></a> ";
$str .= "\n<img class='tinyInsertEmote' src=\"".e_IMAGE_ABS."emotes/" . $pref['emotepack'] . "/$key\" style=\"border:0; padding-top:2px;\" alt=\"\" />";
$str .= "\n<button class='btn btn-large selectEmote pull-left'>
<img src=\"".e_IMAGE_ABS."emotes/" . $pref['emotepack'] . "/$key\" style=\"min-width:32px; min-height:32px; border:0px\" alt=\"\" />
</button>";
}
$str .= "</div>
</div>";
echo $str;
function headerjs(){
return;
global $pref;
// $js = "<script type='text/javascript' src='../../tiny_mce_popup.js'></script>";
$js .= " <script type='text/javascript'>
// function init() {
// tinyMCEPopup.resizeToInnerSize();
// }
function insertEmotion(file_name, title) {
var html = '<img src=\'".e_IMAGE_ABS."emotes/".$pref['emotepack']."/' + file_name + '\' alt=\'' + file_name + '\' />';
tinyMCE.selectedInstance.execCommand('mceInsertContent',0,html);
//tinyMCE.execCommand('mceInsertContent', false, html);
//tinyMCEPopup.close();
}
<div class='right'>
<button class='btn ' id='e-cancel'>".LAN_CANCEL."</button></div>
";
$js .= "</script>";
return $js;
$ns->tablerender("Emoticons",$str);
}
//require_once(FOOTERF);
//exit;
echo "</body></html>";
require_once(FOOTERF);
exit;
?>

View File

@ -23,19 +23,21 @@
ed.addCommand('mceibrowser', function() {
ed.windowManager.open({
file : url + '/ibrowser.php',
width : 830 + parseInt(ed.getLang('ibrowser.delta_width', 0)),
height : 770 + parseInt(ed.getLang('ibrowser.delta_height', 0)),
inline : 1
width : 1050, // + parseInt(ed.getLang('ibrowser.delta_width', 0)),
height : 520, // + parseInt(ed.getLang('ibrowser.delta_height', 0)),
inline : 1,
title : 'Media Manager',
}, {
plugin_url : url, // Plugin absolute URL
some_custom_arg : 'custom arg' // Custom argument
modal_caption : 'custom arg' // Custom argument
});
});
// Register ibrowser button
ed.addButton('ibrowser', {
title : 'ibrowser.desc',
// cmd : 'mceibrowser',
cmd : 'mceibrowser',
/*
onclick: function() {
// $('div.modal-body').load(url + "/ibrowser.php");
@ -50,6 +52,7 @@
opacity: 0.4
});
},
*/
image : url + '/images/ibrowser.gif'
});

View File

@ -44,16 +44,17 @@
open : function(f, p) {
var t = this, id, opt = '', ed = t.editor, dw = 0, dh = 0, vp, po, mdf, clf, we, w, u, parentWindow;
f = f || {};
p = p || {};
// Run native windows
if (!f.inline) {
if (!f.inline)
return t.parent(f, p);
}
var
t = this,
// t = this,
id = DOM.uniqueId(),
// Dialog config
@ -90,8 +91,8 @@
}
// Inline content
if (f.content){
if (f.content)
{
if (f.type == 'confirm'){
config.buttons = [{
'text': 'Ok',
@ -114,14 +115,34 @@
}];
}
dialog.html($('<div />', {
'class': 'ui-dialog-tinymce-content',
'html': f.content
}));
$('#uiModal .modal-body').html(f.content);
$('#uiModal .modal-footer').text('');
$('#uiModal').modal('show');
return;
}
// iFramed document
else
{
var src = (f.url === undefined) ? f.file : f.url;
var wdt = f.width + 'px';
$('#uiModal .modal-caption').text(f.title);
// $('#uiModal').css('height',f.height + "px");
$('#uiModal').width(wdt);
$('#uiModal').css('min-width','800px');
$('#uiModal .modal-body').html("<iframe src='" + src + "' width='100%' height='" + (f.height + 60) + "px' frameborder='0'></iframe>");
$('#uiModal .modal-footer').text('');
$('#uiModal .modal-header').hide();
$('#uiModal').modal('show');
// return;
/*
var iframe = $('<iframe />', {
id: id + '_ifr',
frameborder: 0
@ -132,7 +153,9 @@
})
.attr('scrollbars', 'no')
.appendTo(dialog);
*/
}
p.mce_inline = true;
p.mce_window_id = id;
@ -142,20 +165,21 @@
this.params = p;
this.onOpen.dispatch(this, f, p);
dialog
.dialog(config)
.dialog('option', 'width', dialog.innerWidth())
.dialog('option', 'position', dialog.dialog('option', 'position'));
// dialog
// .dialog(config)
// .dialog('option', 'width', dialog.innerWidth())
// .dialog('option', 'position', dialog.dialog('option', 'position'));
// Load in iframe src
if (!f.content) {
iframe.attr( 'src', f.url || f.file );
}
// if (!f.content) {
// iframe.attr( 'src', f.url || f.file );
// }
// Add window
t.windows[id] = w;
return w;
},
resizeBy : function(dw, dh, id) { return; },
@ -164,6 +188,11 @@
close : function(win, id) {
$('#uiModal').modal('hide');
$('#uiModal .modal-header').show();
return;
/*
var t = this, w, id = id || win.frameElement.id.replace(/_ifr$/, '');
// Probably not inline
@ -176,9 +205,12 @@
w.element.dialog('destroy').remove();
delete t.windows[id];
}
*/
},
setTitle : function(w, ti) {
$('#uiModal .modal-caption').text(ti);
return;
var id = w.frameElement.id.replace(/_ifr$/, '');
$('#ui-dialog-title-dialog-' + id).html(ti);
},

View File

@ -23,43 +23,33 @@
*/
init: function (ed, url) {
// Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('mceExample');
/*
ed.addCommand('mceYoutube', function () {
ed.windowManager.open({
file: url + '/youtube.htm',
width: 320 + parseInt(ed.getLang('example.delta_width', 0)),
height: 120 + parseInt(ed.getLang('example.delta_height', 0)),
inline: 1
file: url + '/youtube.php',
width: 600 + parseInt(ed.getLang('example.delta_width', 0)),
height: 240 + parseInt(ed.getLang('example.delta_height', 0)),
inline: 1,
title: 'YouTube'
}, {
plugin_url: url, // Plugin absolute URL
some_custom_arg: 'custom arg' // Custom argument
});
});
*/
// Register example button
ed.addButton('youtube', {
title: 'youtube.desc',
onclick: function(){
$.colorbox({
href: url + "/youtube.php",
iframe: true,
width:"500px",
height:"240px",
speed:10,
opacity: 0.3
});
},
// cmd: 'mceYoutube',
cmd: 'mceYoutube',
image: url + '/img/youtube.gif'
});
// Add a node change handler, selects the button in the UI when a image is selected
ed.onNodeChange.add(function (ed, cm, n) {
var active = false;
if (n.nodeName == 'IMG') {
if (n.nodeName == 'IFRAME') {
try {
var src = n.attributes["src"].value;
var alt = n.attributes["alt"].value;

View File

@ -4,10 +4,16 @@ require_once("../../../../class2.php");
define("e_IFRAME",true);
e107::css('inline',"
.sizeblock { display:inline-block; width: 180px; padding:4px }
.sizeblock { display:inline-block; width: 180px; margin:6px; font-size:14px}
input[type='radio'] { vertical-align: middle; padding-right:10px; }
.e-footer-info { color: silver }
body { background-color: #EEEEEE }
label { vertical-align:middle; line-height:12px}
");
e107::js('tinymce','tiny_mce_popup.js');
@ -15,23 +21,23 @@ e107::js('inline',"
$(document).ready(function()
{
$('#insert').click(function () {
$('#e-insert').click(function () {
var url = $('#youtubeURL').val();
var size = $('input:radio[name=size]:checked').val();
var convert = {};
convert['tiny'] = 'width:320px;height:205px';
convert['small'] = 'width:560px;height:340px';
convert['medium'] = 'width:640px;height:385px';
convert['large'] = 'width:853px;height:505px';
convert['huge'] = 'width:1280px;height:745px';
convert['tiny'] = {width: '302px', height: '205px'};
convert['small'] = {width: '560px', height: '340px'};
convert['medium'] = {width: '604px', height: '385px'};
convert['large'] = {width: '853px', height: '505px'};
convert['huge'] = {width: '1280px',height: '745px'};
if(url === null)
{
alert('Please enter a valid Youtube URL');
return;
return false;
}
@ -49,37 +55,34 @@ $(document).ready(function()
else
{
var style = convert[size];
var w = convert[size]['width'];
var h = convert[size]['height'];
}
// alert('width='+w + ' height='+h);
if (code === '') {
if (code === '')
{
alert('Please enter a valid Youtube URL');
return;
}
var html = '<iframe width=\"'+ w +'\" height=\"'+ h +'\" src=\"http://www.youtube.com/embed/YNrn-7zjmYw\" frameborder=\"0\" allowfullscreen></iframe>';
var s = '[youtube='+size+']'+code+'[/youtube]';
tinyMCEPopup.editor.execCommand('mceInsertContent', false, html);
tinyMCEPopup.close();
var p = $.ajax({
type: 'POST',
url: '".e_PLUGIN_ABS."tinymce/plugins/e107bbcode/parser.php',
data: { content: s, mode: 'tohtml' },
async: false,
dataType: 'html',
success: function(html) {
return html;
}
}).responseText;
tinyMCEPopup.editor.execCommand('mceInsertContent', false, p);
// tinyMCEPopup.editor.execCommand('mceInsertContent', false, '<img class=\"youtube-' + size + '\" src=\"http://img.youtube.com/vi/' + code + '/0.jpg\" alt=\"' + code + '\" style=\"' + style + '\" />');
parent.$.colorbox.close()
});
$('#cancel').click(function () {
$('#e-cancel').click(function () {
parent.$.colorbox.close()
tinyMCEPopup.close();
});
});
@ -117,23 +120,22 @@ require_once(e_ADMIN."auth.php");
break;
*/
$text = '<div><form onsubmit="YoutubeDialog.insert();return false;" action="#">
<p><label for="youtubeURL">Youtube URL or Code</label>
<input id="youtubeURL" name="youtubeURL" type="text" class="text" style="width:97%" autofocus="autofocus" /></p>
<div class="sizeblock"><input type="radio" name="size" value="tiny" checked="checked" />Tiny (320 x 205)</div>
<div class="sizeblock"><input type="radio" name="size" value="small" />Small (560 x 340)</div>
<div class="sizeblock"><input type="radio" name="size" value="medium" />Medium (640 x 385)</div>
<div class="sizeblock"><input type="radio" name="size" value="large" />Large (854 x 505)</div>
<div class="sizeblock"><input type="radio" name="size" value="huge" />Huge (1280 x 745)</div>
<div class="sizeblock"><input type="radio" name="size" value="custom" />Custom
<input type="text" id="width" name="width" value="" size="3" /> x <input type="text" id="height" name="height" value="" size="3" /></div>
$text = '<div>
<p>
<input id="youtubeURL" placeholder="Youtube URL or Code" name="youtubeURL" type="text" class="text" style="width:97%" autofocus />
</p><label class="radio sizeblock"><input type="radio" name="size" value="tiny" checked="checked" /> Tiny (320 x 205)</label>
<label class="radio sizeblock"><input type="radio" name="size" value="small" /> Small (560 x 340)</label>
<label class="radio sizeblock"><input type="radio" name="size" value="medium" /> Medium (640 x 385)</label>
<label class="radio sizeblock"><input type="radio" name="size" value="large" /> Large (854 x 505)</label>
<label class="radio sizeblock form-inline"><input type="radio" name="size" value="huge" /> Huge (1280 x 745)</label>
<label class="youtube-custom sizeblock" style="white-space:nowrap"><input type="radio" name="size" value="custom" /> Custom
<input class="span1" type="text" id="width" name="width" maxlength="4" value="" size="3" /> x <input class="span1" type="text" id="height" name="height" value="" size="3" maxlength="4" />
</label>
<div style="padding:10px">
<input type="button" id="insert" name="insert" value="Insert" />
<input type="button" id="cancel" name="cancel" value="'.LAN_CANCEL.'" />
<div class="right" style="padding:10px">
<input class="btn btn-primary" type="button" id="e-insert" name="insert" value="Insert" />
<input class="btn" type="button" id="e-cancel" name="cancel" value="'.LAN_CANCEL.'"/>
</div>
</form>
</div>';
$ns = e107::getRender();

View File

@ -1,7 +1,7 @@
<?xml version="1.0"?>
<tinymce>
<tinymce_name>Main Admin</tinymce_name>
<tinymce_plugins>advhr,advlink,autosave,contextmenu,directionality,e107bbcode,emoticons,ibrowser,jqueryinlinepopups,paste,table,visualchars,wordcount,xhtmlxtras,youtube,epagebreak</tinymce_plugins>
<tinymce_buttons1>link, unlink, bold, italic, underline, undo, redo,formatselect,justifyleft,justifycenter,justifyright,justifyfull, |, ibrowser, forecolor, removeformat, table, bullist, numlist, outdent, indent, cleanup, emoticons, youtube, epagebreak</tinymce_buttons1>
<tinymce_plugins>advhr,advlink,autosave,contextmenu,directionality,e107bbcode,emoticons,ibrowser,jqueryinlinepopups,paste,table,visualchars,wordcount,xhtmlxtras,youtube,fullscreen</tinymce_plugins>
<tinymce_buttons1>link, unlink, bold, italic, underline, undo, redo,formatselect,justifyleft,justifycenter,justifyright,justifyfull, |, ibrowser, forecolor, removeformat, table, bullist, numlist, outdent, indent, cleanup, emoticons, youtube, fullscreen</tinymce_buttons1>
<extended_valid_elements>object[*],embed[*]</extended_valid_elements>
</tinymce>

View File

@ -83,8 +83,10 @@ a.brand:hover img {
}
.modal { min-width:800px; left:42% }
.modal-header { border-bottom:1px solid #DDDDDD; padding-left:20px; background-image: -moz-linear-gradient(center top , rgb(253, 253, 253) 0%, rgb(234, 234, 234) 100%); }
.modal { min-width:800px; left:38%; z-index:10001}
.modal-header { border-radius: 6px 6px 6px 6px; border-bottom:1px solid #DDDDDD; padding-left:20px; background-image: -moz-linear-gradient(center top , rgb(253, 253, 253) 0%, rgb(234, 234, 234) 100%); }
.modal-body { max-height:800px }
#media-select-container { min-height:378px }
@media (min-width: 1500px) {

View File

@ -286,10 +286,13 @@ $(document).ready(function()
src = src + '&search='+search;
}
//TODO Animate.
$(id).load(src,function() {
// alert(src);
// $(this).hide();
// $(this).SlideLeft();
// $(this).hide();
// $(this).show('slow'); // .slideLeft();
});