Changeset 12821

Timestamp:

Sep 4, 2009, 11:46:25 AM (13 years ago)

Author:

ShogoKawahara

Message:

#4273:added opWidgetFormRichTextareaOpenPNE to edit decoration text

Location:

OpenPNE3/trunk

Files:

• apps/pc_frontend/templates/_richTextareaOpenPNEButton.php (added)
• lib/widget/opWidgetFormRichTextarea.class.php (modified) (5 diffs)
• lib/widget/opWidgetFormRichTextareaOpenPNE.class.php (added)
• web/images/deco_op_b.gif (added)
• web/images/deco_op_cmd.gif (added)
• web/images/deco_op_color.gif (added)
• web/images/deco_op_emoji_au.gif (added)
• web/images/deco_op_emoji_docomo.gif (added)
• web/images/deco_op_emoji_softbank.gif (added)
• web/images/deco_op_i.gif (added)
• web/images/deco_op_image.gif (added)
• web/images/deco_op_large.gif (added)
• web/images/deco_op_s.gif (added)
• web/images/deco_op_small.gif (added)
• web/images/deco_op_u.gif (added)
• web/js/Selection.js (added)
• web/js/Selection.js.src (added)
• web/js/decoration.js (added)
• web/js/decoration.js.src (added)
• web/js/op_emoji.js (added)
• web/js/op_emoji.js.src (added)
• web/js/tiny_mce/plugins/openpne/editor_plugin.js (modified) (1 diff)
• web/js/tiny_mce/plugins/openpne/editor_plugin.js.src (modified) (5 diffs)

OpenPNE3/trunk/lib/widget/opWidgetFormRichTextarea.class.php

@@ -20 +20 @@
   static protected $firstRender = true;
 
-  static protected $defaultTinyMCEConfigs = array(
+  protected $defaultTinyMCEConfigs = array(
     'mode'  => 'textareas',
     'theme' => 'advanced',
@@ -31 +31 @@
   );
 
+  public function __construct($options = array(), $attributes = array())
+  {
+    parent::__construct($options, $attributes);
+
+    $this->setOption('config', array_merge($this->defaultTinyMCEConfigs, $this->getOption('config')));
+  }
+
   protected function configure($options = array(), $attributes = array())
   {
@@ -36 +43 @@
     $this->addOption('is_toggle', true);
     $this->addOption('is_textmode', true);
+    $this->addOption('textarea_template', '%s');
 
     parent::configure($options, $attributes);
   }
 
+  protected function getId($name, $attributes)
+  {
+    if (isset($attributes['id']))
+    {
+      return $attributes['id'];
+    }
+    $tmpAttributes = $this->fixFormId(array_merge(array('name' => $name, $attributes)));
+    return $tmpAttributes['id'];
+  }
+
   public function render($name, $value = null, $attributes = array(), $errors = array())
   {
-    $this->setOption('config', array_merge(self::$defaultTinyMCEConfigs, $this->getOption('config')));
-
     $toggle = '';
     $js = '';
 
-    if (isset($attributes['id']))
-    {
-      $id = $attributes['id'];
-    }
-    else
-    {
-      $tmpAttributes = $this->fixFormId(array_merge(array('name' => $name, $attributes)));
-      $id = $tmpAttributes['id'];
-    }
+    $id = $this->getId($name, $attributes);
 
     $changerName = $id.'_changer';
@@ -62 +70 @@
     if (self::$firstRender)
     {
+      sfContext::getInstance()->getResponse()->addJavascript('/sfProtoculousPlugin/js/prototype');
       sfContext::getInstance()->getResponse()->addJavascript('tiny_mce/tiny_mce');
       $js .= <<<EOF
   function op_toggle_mce_editor(id)
   {
-    var textmode_checked = document.getElementById(id + "_changer_1").checked;
-    var previewmode_checked = document.getElementById(id + "_changer_2").checked;
+    var textmode_checked    = $(id + "_changer_1").checked;
+    var previewmode_checked = $(id + "_changer_2").checked;
+    var relational_objects  = $$("." + id);
     var editor = tinyMCE.get(id);
     if (!editor) {
-      if (previewmode_checked) 
-        tinyMCE.execCommand('mceAddControl', 0, id);
+      if (previewmode_checked) {
+        tinyMCE.execCommand('mceAddControl', false, id);
+        relational_objects.each(function(object){ object.style.display = "none"; });
+      }
       return true;
     }
-    if (editor.isHidden() && previewmode_checked)
+    if (editor.isHidden() && previewmode_checked) {
       editor.show();
-    else if (!editor.isHidden() && textmode_checked)
+      relational_objects.each(function(object){ object.style.display = "none"; });
+    } else if (!editor.isHidden() && textmode_checked) {
       editor.hide();
+      relational_objects.each(function(object){ object.style.display = "block"; });
+    }
   }
 
 EOF;
+      $js .= sprintf("  tinyMCE.init(%s);\n", json_encode($this->getOption('config')));
       self::$firstRender = false;
     }
 
-    $js .= sprintf("  tinyMCE.init(%s);\n", json_encode($this->getOption('config')));
     if (!$this->getOption('is_textmode'))
     {
       $js .= sprintf("  tinyMCE.execCommand('mceAddControl', false, '%s');\n", $id);
     }
-    $js = '<script type="text/javascript">'."\n".$js.'</script>';
+
+    $js .= sprintf("  op_toggle_mce_editor('%s')\n", $id);
+
+    if ($js)
+    {
+      sfProjectConfiguration::getActive()->loadHelpers('Javascript');
+      $js = javascript_tag($js);
+    }
+
     if ($this->getOption('is_toggle'))
     {
@@ -111 +134 @@
       );
     }
-    return $toggle.parent::render($name, $value, $attributes, $errors).$js;
+    return $toggle.sprintf($this->getOption('textarea_template'), parent::render($name, $value, $attributes, $errors)).$js;
   }
 }

OpenPNE3/trunk/web/js/tiny_mce/plugins/openpne/editor_plugin.js

@@ -3 +3 @@
 +'" onmousedown="return false;" onclick="return false;" title="'+tinymce.DOM.encode(s.title)+'">';if(s.image){h+='<img class="mceIcon" src="'+s.image+'" /></a>';}else{h+='<span class="mceIcon '+s['class']+'"></span></a>';}
 return h;},postRender:function(){tinymce.dom.Event.add(this.id,'click',this.showMenu,this);},setColor:function(c){this.value=c;this.hideMenu();this.settings.onselect(c);}});tinymce.create('tinymce.ui.OpenPNEEmojiButton:tinymce.ui.ColorSplitButton',{OpenPNEEmojiButton:function(id,s){var t=this;t.parent(id,s);t.settings=s;},renderMenu:function(){var t=this,m,i=0,s=t.settings,n,tb,tr,w;var DOM=tinymce.DOM,Event=tinymce.dom.Event,is=tinymce.is,each=tinymce.each;w=DOM.add(s.menu_container,'div',{id:t.id+'_menu',dir:'ltr','class':s['menu_class']+' '+s['class'],style:'position:absolute;left:0;top:-1000px;width:402px;'});m=DOM.add(w,'div',{'class':s['class']+' mceSplitButtonMenu'});DOM.add(m,'span',{'class':'mceMenuLine'});n=DOM.add(m,'table',{'class':'mceEmojiSplitMenu'});tb=DOM.add(n,'tbody');for(var num in s.emoji){var emoji=s.emoji[num];for(var i=emoji.start;i<=emoji.end;i++){if(i==emoji.start||i%25==0){tr=DOM.add(tb,'tr');}
-n=DOM.add(tr,'td');n=DOM.add(n,'img',{src:"./skin/default/img/emoji/"+s.carrier+"/"+s.carrier+i+".gif",alt:"["+s.carrier+":"+i+"]"});Event.add(n,'mousedown',function(e){if(Prototype.Browser.IE){tinyMCE.execCommand("mceInsertContent",false,e.srcElement.getAttribute("alt"));}else{tinyMCE.execCommand("mceInsertContent",false,e.element().getAttribute("alt"));}});}}
+n=DOM.add(tr,'td');n=DOM.add(n,'img',{src:op_get_relative_uri_root()+"/images/emoji/"+s.carrier+"/"+s.carrier+i+".gif",alt:"["+s.carrier+":"+i+"]"});Event.add(n,'mousedown',function(e){if(Prototype.Browser.IE){tinyMCE.execCommand("mceInsertContent",false,e.srcElement.getAttribute("alt"));}else{tinyMCE.execCommand("mceInsertContent",false,e.element().getAttribute("alt"));}});}}
 DOM.addClass(m,'mceColorSplitMenu');return w;},renderHTML:function(){var s=this.settings,h='<a id="'+this.id+'" href="javascript:;" class="mceButton mceButtonEnabled '+s['class']
 +'" onmousedown="return false;" onclick="return false;" title="'+tinymce.DOM.encode(s.title)+'">';if(s.image){h+='<img class="mceIcon" src="'+s.image+'" /></a>';}else{h+='<span class="mceIcon '+s['class']+'"></span></a>';}
 return h;},showMenu:function(){var t=this,r,p,e;var DOM=tinymce.DOM,Event=tinymce.dom.Event,is=tinymce.is,each=tinymce.each;if(t.isDisabled())
 return;if(!t.isMenuRendered){t.renderMenu();t.isMenuRendered=true;}
-e=DOM.get(t.id);DOM.show(t.id+'_menu');DOM.addClass(e,'mceSplitButtonSelected');p2=DOM.getPos(e);DOM.setStyles(t.id+'_menu',{left:720-DOM.get(t.id+'_menu').clientWidth,top:p2.y+e.clientHeight,zIndex:150});e=0;Event.add(document,'mousedown',t.hideMenu,t);},postRender:function(){tinymce.dom.Event.add(this.id,'click',this.showMenu,this);}});tinymce.create('tinymce.ui.OpenPNECmdButton:tinymce.ui.Button',{renderHTML:function(){var s=this.settings;var h='<a id="'+this.id+'" href="javascript:;" class="mceButton mceButtonEnabled '+s['class']+'" style="width:40px; margin-left: 25px;" onmousedown="return false;" onclick="return false;" title="'+tinymce.DOM.encode(s.title)+'"><img class="mceIcon" style="width:40px;" src="'+s.image+'" /></a>';return h;}});tinymce.PluginManager.requireLangPack('openpne');var config=pne_mce_editor_get_config();tinymce.create('tinymce.plugins.OpenPNEPlugin',{init:function(ed,url){var t=this;ed.settings.content_css=url+"/css/editor.css";ed.addCommand('mceOpenPNE_op_b',function(){tinyMCE.execCommand("Bold");});ed.addCommand('mceOpenPNE_op_u',function(){tinyMCE.execCommand("Underline");});ed.addCommand('mceOpenPNE_op_s',function(){tinyMCE.execCommand("Strikethrough");});ed.addCommand('mceOpenPNE_op_i',function(){tinyMCE.execCommand("Italic");});ed.addCommand('mceOpenPNE_op_large',function(){tinyMCE.execCommand("Fontsize",false,5);});ed.addCommand('mceOpenPNE_op_small',function(){tinyMCE.execCommand("Fontsize",false,1);});ed.addCommand('mceOpenPNE_op_image',function(){window.open(config.op_image.contentURL.unescapeHTML(),'','width=600,height=550,toolbar=no,scrollbars=yes,left=10,top=10');});ed.addCommand('mceOpenPNE_op_cmd',function(){window.open(config.op_cmd.contentURL.unescapeHTML());});for(var key in config){var value=config[key];if(value.isEnabled&&key!="op_color"){ed.addButton(key,{title:'{#openpne.'+key+'}',image:value.imageURL,cmd:'mceOpenPNE_'+key});}}
-ed.onBeforeSetContent.add(function(ed,o){o.content=t._textToPreview(o.content);});ed.onPostProcess.add(function(ed,o){if(o.save){if(ed.isHidden()){o.content=ed.getElement().value.replace(/\n\n/g,"\n \n");}else{o.content=t._previewToText(o.content,ed);}}});ed.onNodeChange.add(function(ed,cm,n){cm.setActive('mce_editor_textarea_op_b',false);cm.setActive('mce_editor_textarea_op_u',false);cm.setActive('mce_editor_textarea_op_s',false);cm.setActive('mce_editor_textarea_op_i',false);cm.setActive('mce_editor_textarea_op_large',false);cm.setActive('mce_editor_textarea_op_small',false);var elm=n;while(elm.parentNode){var tagname=t._getTagName(elm);if((tagname=="large"||tagname=="small")&&(cm.get('mce_editor_textarea_op_large').isActive()||cm.get('mce_editor_textarea_op_small').isActive())){elm=elm.parentNode;continue;}
-cm.setActive('mce_editor_textarea_op_'+tagname,true);elm=elm.parentNode;}});},createControl:function(n,cm){var c=null;if(n=="op_color"&&config["op_color"].isEnabled){c=this._createOpenPNEColorButton("op_color",{title:"{#openpne.op_color}",image:config["op_color"].imageURL,cmd:"ForeColor"},cm);}
-if(n=="op_emoji_docomo"||n=="op_emoji_au"&&config["op_emoji_au"].isEnabled||n=="op_emoji_softbank"&&config["op_emoji_softbank"].isEnabled){var emoji_config={op_emoji_docomo:{carrier:"i",emoji:[{start:1,end:252}],title:"{#openpne."+n+"}",image:config[n].imageURL},op_emoji_au:{carrier:"e",emoji:[{start:1,end:518},{start:700,end:822}],title:"{#openpne."+n+"}",image:config[n].imageURL},op_emoji_softbank:{carrier:"s",emoji:[{start:1,end:485}],title:"{#openpne."+n+"}",image:config[n].imageURL}}
+e=DOM.get(t.id);DOM.show(t.id+'_menu');DOM.addClass(e,'mceSplitButtonSelected');p2=DOM.getPos(e);DOM.setStyles(t.id+'_menu',{left:720-DOM.get(t.id+'_menu').clientWidth,top:p2.y+e.clientHeight,zIndex:150});e=0;Event.add(document,'mousedown',t.hideMenu,t);},postRender:function(){tinymce.dom.Event.add(this.id,'click',this.showMenu,this);}});tinymce.create('tinymce.ui.OpenPNECmdButton:tinymce.ui.Button',{renderHTML:function(){var s=this.settings;var h='<a id="'+this.id+'" href="javascript:;" class="mceButton mceButtonEnabled '+s['class']+'" style="width:40px; margin-left: 25px;" onmousedown="return false;" onclick="return false;" title="'+tinymce.DOM.encode(s.title)+'"><img class="mceIcon" style="width:40px;" src="'+s.image+'" /></a>';return h;}});tinymce.PluginManager.requireLangPack('openpne');var config=op_mce_editor_get_config();tinymce.create('tinymce.plugins.OpenPNEPlugin',{init:function(ed,url){var t=this;ed.settings.content_css=url+"/css/editor.css";ed.addCommand('mceOpenPNE_op_b',function(){tinyMCE.execCommand("Bold");});ed.addCommand('mceOpenPNE_op_u',function(){tinyMCE.execCommand("Underline");});ed.addCommand('mceOpenPNE_op_s',function(){tinyMCE.execCommand("Strikethrough");});ed.addCommand('mceOpenPNE_op_i',function(){tinyMCE.execCommand("Italic");});ed.addCommand('mceOpenPNE_op_large',function(){tinyMCE.execCommand("Fontsize",false,5);});ed.addCommand('mceOpenPNE_op_small',function(){tinyMCE.execCommand("Fontsize",false,1);});ed.addCommand('mceOpenPNE_op_image',function(){window.open(config.op_image.contentURL.unescapeHTML(),'','width=600,height=550,toolbar=no,scrollbars=yes,left=10,top=10');});ed.addCommand('mceOpenPNE_op_cmd',function(){window.open(config.op_cmd.contentURL.unescapeHTML());});for(var key in config){var value=config[key];if(value.isEnabled&&key!="op_color"){ed.addButton(key,{title:'{#openpne.'+key+'}',image:value.imageURL,cmd:'mceOpenPNE_'+key});}}
+ed.onBeforeSetContent.add(function(ed,o){o.content=t._textToPreview(o.content);});ed.onPostProcess.add(function(ed,o){if(o.save){if(ed.isHidden()){o.content=ed.getElement().value.replace(/\n\n/g,"\n \n");}else{o.content=t._previewToText(o.content,ed);}}});ed.onNodeChange.add(function(ed,cm,n){cm.setActive(this.id+'_op_b',false);cm.setActive(this.id+'_op_u',false);cm.setActive(this.id+'_op_s',false);cm.setActive(this.id+'_op_i',false);cm.setActive(this.id+'_op_large',false);cm.setActive(this.id+'_op_small',false);var elm=n;while(elm.parentNode){var tagname=t._getTagName(elm);if((tagname=="large"||tagname=="small")&&(cm.get(this.id+'_op_large').isActive()||cm.get(this.id+'_op_small').isActive())){elm=elm.parentNode;continue;}
+cm.setActive(this.id+'_op_'+tagname,true);elm=elm.parentNode;}});},createControl:function(n,cm){var c=null;if(n=="op_color"&&config["op_color"].isEnabled){c=this._createOpenPNEColorButton("op_color",{title:"{#openpne.op_color}",image:config["op_color"].imageURL,cmd:"ForeColor"},cm);}
+if(n=="op_emoji_docomo"||n=="op_emoji_au"&&config["op_emoji_au"]&&config["op_emoji_au"].isEnabled||n=="op_emoji_softbank"&&config["op_emoji_softbank"]&&config["op_emoji_softbank"].isEnabled){var emoji_config={op_emoji_docomo:{carrier:"i",emoji:[{start:1,end:252}],title:"{#openpne."+n+"}",image:config[n].imageURL},op_emoji_au:{carrier:"e",emoji:[{start:1,end:518},{start:700,end:822}],title:"{#openpne."+n+"}",image:config[n].imageURL},op_emoji_softbank:{carrier:"s",emoji:[{start:1,end:485}],title:"{#openpne."+n+"}",image:config[n].imageURL}}
 c=this._createOpenPNEEmojiButton(n,emoji_config[n],cm);}
-if(n=="op_cmd"&&config["op_cmd"].isEnabled){c=this._createOpenPNECmdButton(n,{title:"{#openpne.op_cmd}",image:config["op_cmd"].imageURL,cmd:"mceOpenPNE_op_cmd"},cm);}
+if(n=="op_cmd"&&config["op_cmd"]&&config["op_cmd"].isEnabled){c=this._createOpenPNECmdButton(n,{title:"{#openpne.op_cmd}",image:config["op_cmd"].imageURL,cmd:"mceOpenPNE_op_cmd"},cm);}
 return c;},getInfo:function(){return{longname:'OpenPNE plugin',author:'Kousuke Ebihara',version:"1.0"}},_getTagName:function(elm){var tagname=elm.nodeName.toLowerCase();if(Prototype.Browser.WebKit&&tagname=="span"){if(elm.style.fontWeight=='bold'){return'b';}
 if(elm.style.textDecoration=='underline'){return'u';}

OpenPNE3/trunk/web/js/tiny_mce/plugins/openpne/editor_plugin.js.src

@@ -61 +61 @@
 
                     n = DOM.add(n, 'img', {
-                        src : "./skin/default/img/emoji/" + s.carrier + "/" + s.carrier + i + ".gif",
+                        src : op_get_relative_uri_root() + "/images/emoji/" + s.carrier + "/" + s.carrier + i + ".gif",
                         alt : "[" + s.carrier + ":" + i + "]"
                     });
@@ -136 +136 @@
     tinymce.PluginManager.requireLangPack('openpne');
 
-    var config = pne_mce_editor_get_config();
+    var config = op_mce_editor_get_config();
 
     tinymce.create('tinymce.plugins.OpenPNEPlugin', {
@@ -193 +193 @@
             });
             ed.onNodeChange.add(function(ed, cm, n) {
-                cm.setActive('mce_editor_textarea_op_b', false);
-                cm.setActive('mce_editor_textarea_op_u', false);
-                cm.setActive('mce_editor_textarea_op_s', false);
-                cm.setActive('mce_editor_textarea_op_i', false);
-                cm.setActive('mce_editor_textarea_op_large', false);
-                cm.setActive('mce_editor_textarea_op_small', false);
+                cm.setActive(this.id + '_op_b', false);
+                cm.setActive(this.id + '_op_u', false);
+                cm.setActive(this.id + '_op_s', false);
+                cm.setActive(this.id + '_op_i', false);
+                cm.setActive(this.id + '_op_large', false);
+                cm.setActive(this.id + '_op_small', false);
 
                 var elm = n;
                 while (elm.parentNode) {
                     var tagname = t._getTagName(elm);
-                    if ((tagname == "large" || tagname == "small") && (cm.get('mce_editor_textarea_op_large').isActive() || cm.get('mce_editor_textarea_op_small').isActive())) {
+                    if ((tagname == "large" || tagname == "small") && (cm.get(this.id + '_op_large').isActive() || cm.get(this.id + '_op_small').isActive())) {
                         elm = elm.parentNode;
                         continue;
                     }
-                    cm.setActive('mce_editor_textarea_op_' + tagname,  true);
+                    cm.setActive(this.id + '_op_' + tagname,  true);
                     elm = elm.parentNode;
                 }
@@ -219 +219 @@
             }
 
-            if (n == "op_emoji_docomo" || n == "op_emoji_au" && config["op_emoji_au"].isEnabled || n == "op_emoji_softbank" && config["op_emoji_softbank"].isEnabled) {
+            if (n == "op_emoji_docomo" || 
+                n == "op_emoji_au"  && config["op_emoji_au"] && config["op_emoji_au"].isEnabled ||
+                n == "op_emoji_softbank" && config["op_emoji_softbank"] && config["op_emoji_softbank"].isEnabled) {
                 var emoji_config = {
                     op_emoji_docomo : {
@@ -243 +245 @@
             }
 
-            if (n == "op_cmd" && config["op_cmd"].isEnabled) {
+            if (n == "op_cmd" && config["op_cmd"] && config["op_cmd"].isEnabled) {
                 c = this._createOpenPNECmdButton(n, {title: "{#openpne.op_cmd}", image: config["op_cmd"].imageURL, cmd: "mceOpenPNE_op_cmd"}, cm);
             }