/**
* @class Roo.bootstrap.Modal
* @extends Roo.bootstrap.Component
+ * @parent none builder
+ * @children Roo.bootstrap.Component
* Bootstrap Modal class
* @cfg {String} title Title of dialog
* @cfg {String} html - the body of the dialog (for simple ones) - you can also use template..
* @cfg {Roo.Template} tmpl - a template with variables. to use it, add a handler in show:method adn
* @cfg {Boolean} specificTitle default false
- * @cfg {Array} buttons Array of buttons or standard button set..
+ * @cfg {Roo.bootstrap.Button} buttons[] Array of buttons or standard button set..
* @cfg {String} buttonPosition (left|right|center) default right (DEPRICATED) - use mr-auto on buttons to put them on the left
* @cfg {Boolean} animate default true
* @cfg {Boolean} allow_close default true
* @cfg {Boolean} fitwindow default false
+ * @cfg {Boolean} bodyOverflow should the body element have overflow auto added default false
* @cfg {Number} width fixed width - usefull for chrome extension only really.
* @cfg {Number} height fixed height - usefull for chrome extension only really.
- * @cfg {String} size (sm|lg) default empty
+ * @cfg {String} size (sm|lg|xl) default empty
* @cfg {Number} max_width set the max width of modal
+ * @cfg {Boolean} editableTitle can the title be edited
+
*
*
* @constructor
* @param {Roo.bootstrap.Modal} this
* @param {Roo.EventObject} e
*/
- </span><span class="jsdoc-string">"resize" </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
+ </span><span class="jsdoc-string">"resize" </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+ </span><span class="jsdoc-comment">/**
+ * @event titlechanged
+ * Fire when the editable title has been changed
+ * @param {Roo.bootstrap.Modal} this
+ * @param {Roo.EventObject} value
+ */
+ </span><span class="jsdoc-string">"titlechanged" </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
+
</span><span class="jsdoc-syntax">});
</span><span class="jsdoc-var">this.buttons </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.buttons </span><span class="jsdoc-syntax">|| [];
</span><span class="jsdoc-var">max_height</span><span class="jsdoc-syntax">: 0,
</span><span class="jsdoc-var">fit_content</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+ </span><span class="jsdoc-var">editableTitle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
</span><span class="jsdoc-var">onRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">)
{
{
</span><span class="jsdoc-comment">// we will default to modal-body-overflow - might need to remove or make optional later.
</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bdy </span><span class="jsdoc-syntax">= {
- </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'modal-body enable-modal-body-overflow '</span><span class="jsdoc-syntax">,
+ </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'modal-body ' </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">this.bodyOverflow </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'overflow-auto' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">),
</span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.html </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">''
</span><span class="jsdoc-syntax">};
</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">= {
- </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'h4'</span><span class="jsdoc-syntax">,
+ </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'h5'</span><span class="jsdoc-syntax">,
</span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'modal-title'</span><span class="jsdoc-syntax">,
</span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.title
</span><span class="jsdoc-syntax">};
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.specificTitle</span><span class="jsdoc-syntax">){
+ </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.specificTitle</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// WTF is this?
</span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.title</span><span class="jsdoc-syntax">;
-
}
</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">header </span><span class="jsdoc-syntax">= [];
</span><span class="jsdoc-var">header.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">);
+ </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.editableTitle</span><span class="jsdoc-syntax">) {
+ </span><span class="jsdoc-var">header.push</span><span class="jsdoc-syntax">({
+ </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'form-control roo-editable-title d-none'</span><span class="jsdoc-syntax">,
+ </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'input'</span><span class="jsdoc-syntax">,
+ </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'text'
+ </span><span class="jsdoc-syntax">});
+ }
+
</span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.allow_close </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">Roo.bootstrap.version </span><span class="jsdoc-syntax">== 4) {
</span><span class="jsdoc-var">header.push</span><span class="jsdoc-syntax">({
</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
</span><span class="jsdoc-var">this.closeEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
}
</span><span class="jsdoc-var">Roo.EventManager.onWindowResize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.resize</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
-
+ </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.editableTitle</span><span class="jsdoc-syntax">) {
+ </span><span class="jsdoc-var">this.headerEditEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.headerEl.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.form-control'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
+ </span><span class="jsdoc-var">this.headerEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() { </span><span class="jsdoc-var">this.toggleHeaderInput</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) } , </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+ </span><span class="jsdoc-var">this.headerEditEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'keyup'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
+ </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">([ </span><span class="jsdoc-var">e.RETURN </span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e.TAB </span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e.ESC </span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.keyCode</span><span class="jsdoc-syntax">) > -1) {
+ </span><span class="jsdoc-var">this.toggleHeaderInput</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">)
+ }
+ }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+ </span><span class="jsdoc-var">this.headerEditEl.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'blur'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
+ </span><span class="jsdoc-var">this.toggleHeaderInput</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">)
+ },</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+ }
},
</span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fitwindow</span><span class="jsdoc-syntax">) {
-
+ </span><span class="jsdoc-var">this.dialogEl.setStyle</span><span class="jsdoc-syntax">( { </span><span class="jsdoc-string">'max-width' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'100%' </span><span class="jsdoc-syntax">});
</span><span class="jsdoc-var">this.setSize</span><span class="jsdoc-syntax">(
</span><span class="jsdoc-var">this.width </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.lib.Dom.getViewportWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) - 30,
</span><span class="jsdoc-var">this.height </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.lib.Dom.getViewportHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) </span><span class="jsdoc-comment">// catering margin-top 30 margin-bottom 30
</span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">) {
</span><span class="jsdoc-var">this.render</span><span class="jsdoc-syntax">();
}
-
+ </span><span class="jsdoc-var">this.toggleHeaderInput</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
</span><span class="jsdoc-comment">//this.el.setStyle('display', 'block');
</span><span class="jsdoc-var">this.el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'hideing'</span><span class="jsdoc-syntax">);
</span><span class="jsdoc-var">this.el.dom.style.display</span><span class="jsdoc-syntax">=</span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">;
*/
</span><span class="jsdoc-var">setTitle</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">) {
</span><span class="jsdoc-var">this.titleEl.dom.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">;
+ </span><span class="jsdoc-var">this.title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">;
},
</span><span class="jsdoc-comment">/**
* Set the body of the Dialog
!</span><span class="jsdoc-var">child_nodes </span><span class="jsdoc-syntax">||
</span><span class="jsdoc-var">child_nodes.length </span><span class="jsdoc-syntax">== 0
) {
- </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+ </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">0;
}
</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">child_height </span><span class="jsdoc-syntax">= 0;
</span><span class="jsdoc-syntax">}
</span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">child_height</span><span class="jsdoc-syntax">;
+ },
+ </span><span class="jsdoc-var">toggleHeaderInput </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">is_edit</span><span class="jsdoc-syntax">)
+ {
+ </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.editableTitle</span><span class="jsdoc-syntax">) {
+ </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// not editable.
+ </span><span class="jsdoc-syntax">}
+ </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">is_edit </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">this.is_header_editing</span><span class="jsdoc-syntax">) {
+ </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// already editing..
+ </span><span class="jsdoc-syntax">}
+ </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">is_edit</span><span class="jsdoc-syntax">) {
+
+ </span><span class="jsdoc-var">this.headerEditEl.dom.value </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.title</span><span class="jsdoc-syntax">;
+ </span><span class="jsdoc-var">this.headerEditEl.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'d-none'</span><span class="jsdoc-syntax">);
+ </span><span class="jsdoc-var">this.headerEditEl.dom.focus</span><span class="jsdoc-syntax">();
+ </span><span class="jsdoc-var">this.titleEl.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'d-none'</span><span class="jsdoc-syntax">);
+
+ </span><span class="jsdoc-var">this.is_header_editing </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+ </span><span class="jsdoc-keyword">return
+ </span><span class="jsdoc-syntax">}
+ </span><span class="jsdoc-comment">// flip back to not editing.
+ </span><span class="jsdoc-var">this.title </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.headerEditEl.dom.value</span><span class="jsdoc-syntax">;
+ </span><span class="jsdoc-var">this.headerEditEl.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'d-none'</span><span class="jsdoc-syntax">);
+ </span><span class="jsdoc-var">this.titleEl.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'d-none'</span><span class="jsdoc-syntax">);
+ </span><span class="jsdoc-var">this.titleEl.dom.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">String.format</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'{0}'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.title</span><span class="jsdoc-syntax">);
+ </span><span class="jsdoc-var">this.is_header_editing </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+ </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'titlechanged'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.title</span><span class="jsdoc-syntax">);
+
+
+
}
});
</span><span class="jsdoc-var">zIndex </span><span class="jsdoc-syntax">: 10001
});
+
</span></code></body></html>
\ No newline at end of file