Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-2433

Highlight text in a listitem without using nonselectableTag

    XMLWordPrintable

    Details

    • Type: New Feature
    • Status: Closed
    • Priority: Normal
    • Resolution: Done
    • Affects Version/s: 7.0.3
    • Fix Version/s: 7.0.4
    • Component/s: Components
    • Security Level: Jimmy
    • Labels:
      None

      Description

      Problem Description

      Users want to copy text in a listbox, the current solution is "nonselectableTag".

      <listbox nonselectableTags="span, a">
      	<listhead><listheader> nonselectableTags=" span, a"</listheader></listhead>
          <listitem><listcell><textbox/></listcell></listitem>
          <listitem><listcell><a href="http://www.zkoss.org">www.zkoss.org</a></listcell></listitem>
          <listitem><listcell><label>text_without_space</label></listcell></listitem>
          <listitem><listcell><label>long text with space</label></listcell></listitem>
      </listbox>
      
      

      A customer reported that he wants "to be able to select a line by clicking and also select text within the line by clicking and dragging".

      2 issues with nonselectableTag:

      1. It's very tricky to highlight a text by dragging mouse pointer.
        You must be very carefully not to release mouse outside of the text, or zk will think you do not click on a <span> then listbox will select the item and cancel the highlighting. Although double clicking can also highlight the text, but this doesn't work for text with space.
      2. click label cannot select the item.
        So users must be aware of clicking outside of a text to select them. Although this effect is just the result when setting nonselectableTag="span", but it also causes inconvenience when selecting an item. Because users just want to copy text, this behavior looks like a side effect to enable highlighting text.

      Proposed Solution

      If we can distinguish dragging and clicking, we can avoid select an item when mouse dragging. For example, we use window.getSelection() to determine whether if users select a text or not.

      <script type="text/javascript"><![CDATA[
      zk.afterLoad('zul.sel', function () {
      	var oldMethod = {};
      	zk.override(zul.sel.SelectWidget.prototype, oldMethod, {		
      		_shallIgnore: function(evt, bSel){
      		 	var selection = window.getSelection();
      		 	 if(selection.type == "Range") {
      			    //evt.stop({propagation:true});
      			    return true;
      			 }else{
      				return oldMethod._shallIgnore.apply(this, arguments); //call the original method
      			 }
      		}
      	
      	});
      });	
      ]]>
      </script>
      

      Above code is just showing an idea. For IE, getSelection() is only supported since IE 9. Prior to IE 9, we can use document.selection(). (ref http://stackoverflow.com/questions/5421892/getselection-not-working-in-ie)

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              hanhsu hanhsu
              Reporter:
              hawk hawk
              Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved: