فهرست منبع

HUE-274. Add a filter for autocompletion

Aaron Newton 15 سال پیش
والد
کامیت
9bb84e79d5

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 27 - 0
apps/jframegallery/src/jframegallery/templates/autocomplete.html


+ 1 - 0
apps/jframegallery/src/jframegallery/urls.py

@@ -19,6 +19,7 @@ from django.conf.urls.defaults import patterns, url
 
 urlpatterns = patterns('jframegallery',
   url(r'^$', 'views.index'),
+  url(r'^autocomplete$', 'views.autocomplete'),
   url(r'^flash.redirect.*$', 'views.flash_redirect'),
   url(r'^flash.*$', 'views.flash'),
   url(r'^error_404.*$', 'views.error_404'),

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 5 - 1
apps/jframegallery/src/jframegallery/views.py


+ 1 - 1
desktop/core/src/desktop/templates/index.mako

@@ -25,7 +25,7 @@
   <link rel="stylesheet" href="/static/css/windows.css" type="text/css" media="screen" charset="utf-8">
   <link rel="stylesheet" href="/static/css/desktop.css" type="text/css" media="screen" charset="utf-8">
 
-  <script src="/depender/build?client=true&require=dbug,DomReady,Cookie,Element.Dimensions,Element.Style,CCS.Desktop.BackgroundManager,Cookie"></script>
+  <script src="/depender/build?client=true&require=dbug,DomReady,Cookie,Element.Dimensions,Element.Style,CCS.Desktop.BackgroundManager,Cookie,Clientcide"></script>
   <!--[if IE 8]>
       <script>
           window.ie8 = true;

+ 1 - 0
desktop/core/static/css/desktop.css

@@ -21,6 +21,7 @@ body>.ccs-error-popup {
 	width: 100%;
 	height: 100%;
 	position: absolute;
+	z-index: 0;
 	opacity: 0;
 	filter: alpha(opacity=0);
 	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

+ 65 - 12
desktop/core/static/css/shared.css

@@ -106,7 +106,7 @@
 	display:-moz-inline-box;		/* FF2 */
 	display:inline-block;		   /* webkit and FF3 */
 	#zoom: 1; /* set hasLayout:true to mimic inline-block */
-	#display:inline; 
+	#display:inline;
 	border:0;
 	padding:0;
 	vertical-align:middle;
@@ -121,7 +121,7 @@
 	background: url(../art/divots.png) -11px -11px no-repeat;
 }
 /* tabbed layout */
-/* .ccs-tabs, a ul; container for the tabs 
+/* .ccs-tabs, a ul; container for the tabs
 
 <ul class="tabs">
 <li><span>Tab 1</span></li>
@@ -406,12 +406,12 @@ form.ccs-table_config .art {
 	margin: 4px;
 }
 /* stickywin solid; this is the login window styles */
-div.solid-win div.body-left { 
-	background: url(../art/sticky-win-solid-back.png); 
-	width: 16px !important; 
-	overflow: visible; 
-	position: relative; 
-	z-index: 1; 
+div.solid-win div.body-left {
+	background: url(../art/sticky-win-solid-back.png);
+	width: 16px !important;
+	overflow: visible;
+	position: relative;
+	z-index: 1;
 }
 div.solid-win div.body {
 	position: relative;
@@ -419,7 +419,7 @@ div.solid-win div.body {
 	padding: 10px 16px 1px 0px;
 	background: url(../art/sticky-win-solid-back.png) top right;
 }
-div.solid-win div.bottom { 
+div.solid-win div.bottom {
 	z-index: 0;
 	background: url(../art/sticky-win-solid-back.png) bottom left;
 	width: 16px !important;
@@ -427,7 +427,7 @@ div.solid-win div.bottom {
 	position: relative;
 	clear: both;
 }
-div.solid-win div.bottom_lr { 
+div.solid-win div.bottom_lr {
 	position: relative;
 	left: 16px;
 	background: url(../art/sticky-win-solid-back.png) bottom right;
@@ -540,7 +540,7 @@ div.jframe_default h5 { font-size: 105%; margin-bottom: 0.3em; padding-top: 8px;
 /* button bar */
 input[data-filters*=ArtButton] {
 	padding: 0px 0px 0px 0px;
-	/* webkit madness: 
+	/* webkit madness:
 		put this padding statement in place and buttons are still padding 0/8/0/8px
 		add the border: 0px statement below
 		and they all go to 0/0/0/0px
@@ -603,7 +603,7 @@ Takes a multi-select box and makes it so you can click to move elements from a s
 	display:-moz-inline-box;		/* FF2 */
 	display:inline-block;		   /* webkit and FF3 */
 	#zoom: 1; /* set hasLayout:true to mimic inline-block */
-	#display:inline; 
+	#display:inline;
 	border:0;
 	padding:0;
 	vertical-align:middle;
@@ -754,3 +754,56 @@ OTHER DEALINGS IN THE SOFTWARE.
 .print .error a {color:#8a1f11;}
 .print .notice a {color:#514721;}
 .print .success a {color:#264409;}
+
+/* autocompleter styles from clientcide */
+
+.ccs-shared ul.autocompleter-choices
+{
+	position: absolute;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	border: 1px solid #7c7c7c;
+	border-left-color: #c3c3c3;
+	border-right-color: #c3c3c3;
+	border-bottom-color#ddd;
+	background-color: #fff;
+	text-align: left;
+	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
+	z-index: 50;
+	background-color: #fff;
+}
+
+.ccs-shared ul.autocompleter-choices li
+{
+	position: relative;
+	margin: -2px 0 0 0;
+	padding: 0.2em 1.5em 0.2em 1em;
+	display: block;
+	float: none !important;
+	cursor: pointer;
+	font-weight: normal;
+	white-space: nowrap;
+	font-size: 1em;
+	line-height: 1.5em;
+}
+
+.ccs-shared ul.autocompleter-choices li.autocompleter-selected
+{
+	background-color: #444;
+	color: #fff;
+}
+
+.ccs-shared ul.autocompleter-choices span.autocompleter-queried
+{
+	display: inline;
+	float: none;
+	font-weight: bold;
+	margin: 0;
+	padding: 0;
+}
+
+.ccs-shared ul.autocompleter-choices li.autocompleter-selected span.autocompleter-queried
+{
+	color: #9FCFFF;
+}

+ 81 - 0
desktop/core/static/js/Source/BehaviorFilters/Behavior.Autocomplete.js

@@ -0,0 +1,81 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/*
+---
+description: Adds support for Autocompletion on form inputs.
+provides: [Behavior.Autocomplete]
+requires: [Widgets/Behavior, clientcide/Autocompleter.Local, clientcide/Autocompleter.Remote]
+script: Behavior.Autocomplete.js
+
+...
+*/
+
+Behavior.addGlobalFilters({
+
+	/*
+		takes elements (inputs) with the data filter "Autocomplete" and creates a autocompletion ui for them
+		that either completes against a list of terms supplied as a property of the element (dtaa-autocomplete-tokens)
+		or fetches them from a server. In both cases, the tokens must be an array of values. Example:
+
+		<input data-filters="Autocomplete" data-autocomplete-tokens="['foo', 'bar', 'baz']"/>
+
+		Alternately, you can specify a url to submit the current typed token to get back a list of valid values in the
+		same format (i.e. a JSON response; an array of strings). Example:
+
+		<input data-filters="Autocomplete" data-autocomplete-url="/some/API/for/autocomplete"/>
+
+		When the values ar fetched from the server, the server is sent the current term (what the user is typing) as
+		a post variable "term" as well as the entire contents of the input as "value".
+
+		An additional data property for autocomplete-options can be specified; this must be a JSON encoded string
+		of key/value pairs that configure the Autocompleter instance (see documentation for the Autocompleter classes
+		online at http://www.clientcide.com/docs/3rdParty/Autocompleter but also available as a markdown file in the
+		clientcide repo fetched by hue in the thirdparty directory).
+
+		Note that this JSON string can't include functions as callbacks; if you require amore advanced usage you should
+		write your own Behavior filter or filter plugin.
+
+	*/
+
+	Autocomplete: function(element, methods){
+		var options = $merge({
+			minLength: 1,
+			selectMode: 'type-ahead',
+			overflow: true,
+			selectFirst: true,
+			multiple: true,
+			separator: ' ',
+			allowDupes: true,
+			postVar: 'term'
+		}, element.getJSONData('autocomplete-options'));
+
+		if (element.getData('autocomplete-url')) {
+			var aaj = new Autocompleter.Ajax.Json(element, element.getData('autocomplete-url'), options);
+			aaj.addEvent('request', function(el, req, data, value){
+				data['value'] = el.get('value');
+			});
+		} else {
+			var tokens = element.getJSONData('autocomplete-tokens');
+			if (!tokens) {
+				dbug.warn('Could not set up autocompleter; no local tokens found.');
+				return;
+			}
+			new Autocompleter.Local(element, tokens, options);
+		}
+	}
+
+});

+ 1 - 0
desktop/core/static/js/Source/CCS/CCS.JFrame.js

@@ -37,6 +37,7 @@ requires:
  - More-Behaviors/Behavior.OverText
  - More-Behaviors/Behavior.Resizable
  - More-Behaviors/Behavior.Sortable
+ - /Behavior.Autocomplete
  - /Behavior.CollapsingElements
  - /Behavior.ContextMenu
  - /Behavior.DataGroupToggle

+ 1 - 0
desktop/core/static/js/package.yml

@@ -52,6 +52,7 @@ sources: [
   Source/Native/Element.Data.js,
   Source/StaticThirdParty/DynamicTextarea.js,
   Source/UI/ART.SideBySideSelect.js,
+  Source/BehaviorFilters/Behavior.Autocomplete.js,
   Source/BehaviorFilters/Behavior.CollapsingElements.js,
   Source/BehaviorFilters/Behavior.ContextMenu.js,
   Source/BehaviorFilters/Behavior.DataGroupToggle.js,

برخی فایل ها در این مقایسه diff نمایش داده نمی شوند زیرا تعداد فایل ها بسیار زیاد است