From 08810a8fe7f6d2501ca017c2e87e9cdcbace54e5 Mon Sep 17 00:00:00 2001 From: laurence Date: Fri, 13 Sep 2013 06:55:10 +0800 Subject: laurence --- colors.htm | 85 ++++++++++------- css/style.css | 3 + index.html | 15 +-- js/colorpicker.js | 50 +++++++++- js/jquery.remember-state.js | 193 +++++++++++++++++++++++++++++++++++++++ js/jquery.remember-state.pack.js | 1 + 6 files changed, 306 insertions(+), 41 deletions(-) create mode 100644 js/jquery.remember-state.js create mode 100644 js/jquery.remember-state.pack.js diff --git a/colors.htm b/colors.htm index 4ad747d..bdb1295 100644 --- a/colors.htm +++ b/colors.htm @@ -2,50 +2,71 @@ -

CLICK TO CHOOSE THE COLOR

- OPTIONS -

CLICK TO SWITCH TO RGB VALUES

-
-

CLICK TO TOGGLE PALATE INFO(NONE)

-
-

BACKGROUNDS...

- -
-

YOU WILL CHOOSE:
- - SUBMIT -

-
- to choose transparent as a color, click - HERE - -

+ +

- - + + + + diff --git a/css/style.css b/css/style.css index 6cc8421..7b944cb 100644 --- a/css/style.css +++ b/css/style.css @@ -202,4 +202,7 @@ label { #controls a:hover{ cursor:pointer; text-decoration:underline; +} +#noticeDlg { + display:none; } \ No newline at end of file diff --git a/index.html b/index.html index e98160f..3141b24 100644 --- a/index.html +++ b/index.html @@ -2,8 +2,8 @@ - - + + @@ -35,10 +35,10 @@
- List of Color Names + List of Color Names - hue (0-200) - + hue (0-200) + flip horizontally? @@ -73,11 +73,12 @@ type : 'iframe', closeBtn : false, padding : 5, - beforeShow : function(){ + beforeShow : function(){ $('.fancybox-iframe').contents().find('#submitvalue').click(function(){ + $('.fancybox-iframe').contents().find('form').submit(); $.fancybox.close(); }); - }, + }, beforeClose : function(){ x = $('.fancybox-iframe').contents().find('#namespace').val(); }, diff --git a/js/colorpicker.js b/js/colorpicker.js index 785d430..574349f 100644 --- a/js/colorpicker.js +++ b/js/colorpicker.js @@ -87,12 +87,14 @@ var ColorPicker = { var key = event.which || event.keyCode; if(key === 13) { $('#colorpicker').css({'background-image':"url('" + $('#bgURI').val() + "')"}); + $('#opt_bgURI').val($('#bgURI').val()); $('#bgURI').val(''); } }); }else{ $('#colorpicker').css({'background-image':'none','background-color':$('#' + this.id).html().toLowerCase()}); - } + } + $('#opt_bgColor').val(this.id); }); //--------event handler over colorpanel------- var firstwidth; @@ -152,6 +154,43 @@ var ColorPicker = { }); } }, + loadColorStorage: function() { + var opts = $('#opt_hexswitch').val(); + names = false; + rgbs = false; + hexes = false; + if(opts == 'names') { + selectedname = namespace.val(); + selectedrgb = hextorgb[nametohex[selectedname]]; + hexswitch.html('CLICK TO SWITCH TO RGB VALUES'); + rgbs = true; + }else if(opts == 'rgbs') { + selectedname = rgbtoname[namespace.val()]; + selectedrgb = namespace.val(); + hexes = true; + hexswitch.html('CLICK TO SWITCH TO HEX VALUES') + }else if(opts == 'hexes') { + names = true; + selectedrgb = hextorgb[namespace.val()]; + selectedname = rgbtoname[selectedrgb]; + hexswitch.html('CLICK TO SWITCH TO COLOR NAMES'); + } + colornames.html(selectedname); + preview.css({'background-color':selectedrgb,'border-style':'none'}); + vasebackground.css('background-color',selectedrgb); + infostate = parseInt($('#opt_infoswitch').val()); + ColorPicker.switchcolorinfo(); + var bgOpt = $('#opt_bgColor').val(); + if (bgOpt == "bg1") + { + $('#colorpicker').css({'background-image':'url("./images/bg.dither.gif")','background-color':'gray','background-color':'black'}); + }else if(bgOpt == "bg5"){ + $('#colorpicker').css({'background-image':"url('" + $('#opt_bgURI').val() + "')"}); + }else{ + $('#colorpicker').css({'background-image':'none','background-color':$('#' + bgOpt).html()}); + } + $('#bgURI').val($('#opt_bgURI').val()); + }, switchhovercss: function(sel, uno) { var chng = {}; chng['color'] = 'white'; @@ -191,6 +230,7 @@ var ColorPicker = { namespace.val(selectedname); names = false; rgbs = true; + $('#opt_hexswitch').val('names'); }else if(hexes == true) { rgbs = false; names = false; @@ -198,6 +238,7 @@ var ColorPicker = { namespace.val(rgbtohex[selectedrgb]); hexes = false; names = true; + $('#opt_hexswitch').val('hexes'); }else if(rgbs == true) { names = false; hexes = false; @@ -205,6 +246,7 @@ var ColorPicker = { namespace.val(selectedrgb) rgbs = false; hexes = true; + $('#opt_hexswitch').val('rgbs'); } }, putitin: function() { @@ -292,22 +334,26 @@ var ColorPicker = { } infostate = 2; infospace.html('(NAMES)'); + $('#opt_infoswitch').val('1'); }else if(infostate == 0) { $('.colors').html(""); infostate = 1; infospace.html('(NONE)'); + $('#opt_infoswitch').val('0'); }else if(infostate == 2) { for(var i=0; i < color_values.length; i++) { $('#d' + i).html(nametohex[divtoname['#d' + i]]); } infostate = 3; infospace.html('(HEXES)'); + $('#opt_infoswitch').val('2'); }else if(infostate == 3) { for(var i=0; i < color_values.length; i++) { $('#d' + i).html(hextorgb[nametohex[divtoname['#d' + i]]]); } - infostate = 0; + infostate = 0; infospace.html('(RGBS)'); + $('#opt_infoswitch').val('3'); } }, show: function() { diff --git a/js/jquery.remember-state.js b/js/jquery.remember-state.js new file mode 100644 index 0000000..d695fbd --- /dev/null +++ b/js/jquery.remember-state.js @@ -0,0 +1,193 @@ +(function($) { + /* jQuery form remember state plugin + Name: rememberState + Version: 1.3.2 + Description: When called on a form element, localStorage is used to + remember the values that have been input up to the point of either + saving or unloading. (closing window, navigating away, etc.) If + localStorage isn't available, nothing is bound or stored. + The plugin looks for an element with a class of remember_state to show + a note indicating there is stored data that can be repopulated by clicking + on the anchor within the remember_state container. If the element doesn't + exist, it is created and prepended to the form. + Usage: $("form").rememberState("my_object_name"); + Notes: To trigger the deletion of a form's localStorage object from + outside the plugin, trigger the reset_state event on the form element + by using $("form").trigger("reset_state"); + */ + if (!window.localStorage || !window.JSON) { + if (console && console.log) { + !window.localStorage && console.log("ERROR: you browser does not support" + + " localStorage (use this polyfill https://gist.github.com/350433)"); + !window.JSON&& console.log("ERROR: you browser does not support" + + " JSON (use this polyfill http://bestiejs.github.com/json3/)"); + } + return $.fn.rememberState = function() { return this; }; + } + + var remember_state = { + name: "rememberState", + clearOnSubmit: true, + noticeDialog: (function() { + return $("

", {"class": "remember_state"}) + .html('Do you want to restore your previously entered info?'); + })(), + ignore: null, + noticeSelector: ".remember_state", + use_ids: false, + objName: false, + clickNotice: function(e) { + var data = JSON.parse(localStorage.getItem(e.data.instance.objName)), + $f = $(this).closest("form"), + $e; + for (var i in data) { + $e = $f.find("[name=\"" + data[i].name + "\"]"); + if ($e.is(":radio, :checkbox")) { + $e.filter("[value=" + data[i].value + "]").prop("checked", true); + } + else if ($e.is("select")) { + $e.find("[value=" + data[i].value + "]").prop("selected", true); + } + else { + $e.val(data[i].value); + } + $e.change(); + } + e.data.instance.noticeDialog.remove(); + e.preventDefault(); + }, + chooseStorageProp: function() { + if (this.$el.length > 1) { + if (console && console.warn) { + console.warn("WARNING: Cannot process more than one form with the same" + + " object. Attempting to use form IDs instead."); + } + this.objName = this.$el.attr("id"); + } + }, + errorNoID: function() { + if (console && console.log) { + console.log("ERROR: No form ID or object name. Add an ID or pass" + + " in an object name"); + } + }, + saveState: function(e) { + var instance = e.data.instance; + var values = instance.$el.serializeArray(); + // jQuery doesn't currently support datetime-local inputs despite a + // comment by dmethvin stating the contrary: + // http://bugs.jquery.com/ticket/5667 + // Manually storing input type until jQuery is patched + instance.$el.find("input[type='datetime-local']").each(function() { + var $i = $(this); + values.push({ name: $i.attr("name"), value: $i.val() }); + }); + values = instance.removeIgnored(values); + values.length && internals.setObject(instance.objName, values); + }, + save: function() { + var instance = this; + if (!this.saveState) { + instance = this.data(remember_state.name); + } + instance.saveState({ data: { instance: instance } }); + }, + removeIgnored: function(values) { + var ignore = this.ignore; + if (!ignore) { return values; } + $.each(values, function(i, input) { + if ($.inArray(input.name, ignore) !== -1) { + values[i] = false; + } + }); + values = $.grep(values, function(val) { return val; }); + return values; + }, + bindNoticeDialog: function() { + if (!this.noticeDialog.length || !this.noticeDialog.jquery) { + return; + } + this.noticeDialog.find("a").bind("click." + this.name, { + instance: this + }, this.clickNotice); + }, + setName: function() { + this.objName = this.objName || this.$el.attr("id"); + if (!this.objName) { this.errorNoID(); } + }, + bindResetEvents: function() { + if (this.clearOnSubmit) { + this.$el.bind("submit." + this.name, function() { + this.$el.trigger("reset_state"); + $(window).unbind("unload." + this.name); + }); + } + + this.$el.bind("reset_state." + this.name, function() { + localStorage.removeItem(this.objName); + }); + this.$el.find(":reset").bind("click." + this.name, function() { + $(this).closest("form").trigger("reset_state"); + }); + }, + createNoticeDialog: function() { + if (localStorage[this.objName]) { + if (this.noticeDialog.length && this.noticeDialog.jquery) { + this.noticeDialog.prependTo(this.$el); + } + else { + this.$el.find(this.noticeSelector).show(); + } + } + }, + destroy: function(destroy_local_storage) { + var namespace = "." + this.name; + this.$el.unbind(namespace).find(":reset").unbind(namespace); + $(window).unbind(namespace); + destroy_local_storage && localStorage.removeItem(this.objName); + }, + init: function() { + this.bindNoticeDialog(); + this.setName(); + + if (!this.objName) { return; } + + this.bindResetEvents(); + this.createNoticeDialog(); + + $(window).bind("unload." + this.name, { instance: this }, this.saveState); + } + }; + + var internals = { + setObject: function(key, value) { localStorage[key] = JSON.stringify(value); }, + getObject: function(key) { return JSON.parse(localStorage[key]); }, + createPlugin: function(plugin) { + $.fn[plugin.name] = function(opts) { + var $els = this, + method = $.isPlainObject(opts) || !opts ? "" : opts, + args = arguments; + if (method && plugin[method]) { + $els.each(function(i) { + plugin[method].apply($els.eq(i).data(plugin.name), Array.prototype.slice.call(args, 1)); + }); + } + else if (!method) { + $els.each(function(i) { + var plugin_instance = $.extend(true, { + $el: $els.eq(i) + }, plugin, opts); + $els.eq(i).data(plugin.name, plugin_instance); + plugin_instance.init(); + }); + } + else { + $.error('Method ' + method + ' does not exist on jQuery.' + plugin.name); + } + return $els; + }; + } + }; + + internals.createPlugin(remember_state); +})(jQuery); diff --git a/js/jquery.remember-state.pack.js b/js/jquery.remember-state.pack.js new file mode 100644 index 0000000..3aec315 --- /dev/null +++ b/js/jquery.remember-state.pack.js @@ -0,0 +1 @@ +eval(function(p,a,c,k,e,r){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(2($){4(!k.h||!k.n){4(8&&8.s){!k.h&&8.s("B: C L D E M"+" h (F 0 N 1q://1r.O.P/1s)");!k.n&&8.s("B: C L D E M"+" n (F 0 N 1t://1u.O.P/1v/)")}9 $.Q.R=2(){9 0}}6 f={3:"R",S:w,j:(2(){9 $("

",{"1w":"T"}).1x(\'1y C 1z U 1B 1C 1D 1E 1F?\')})(),V:1G,W:".T",1H:G,7:G,X:2(e){6 a=n.Y(h.1I(e.l.o.7)),$f=$(0).Z("t"),$e;1J(6 i 10 a){$e=$f.m("[3=\\""+a[i].3+"\\"]");4($e.11(":1K, :1L")){$e.1M("[q="+a[i].q+"]").12("1N",w)}u 4($e.11("1O")){$e.m("[q="+a[i].q+"]").12("1P",w)}u{$e.13(a[i].q)}$e.1Q()}e.l.o.j.1R();e.1S()},1T:2(){4(0.$5.x>1){4(8&&8.14){8.14("1U: 1V 1W 1X 1Y 1Z t 20 21 22"+" H. 23 U F t 24 25.")}0.7=0.$5.I("15")}},16:2(){4(8&&8.s){8.s("B: 26 t 17 18 H 3. 27 19 17 18 28"+" 10 19 H 3")}},y:2(e){6 b=e.l.o;6 c=b.$5.29();b.$5.m("2a[2b=\'2c-2d\']").z(2(){6 a=$(0);c.2e({3:a.I("3"),q:a.13()})});c=b.1a(c);c.x&&g.1b(b.7,c)},2f:2(){6 a=0;4(!0.y){a=0.l(f.3)}a.y({l:{o:a}})},1a:2(b){6 c=0.V;4(!c){9 b}$.z(b,2(i,a){4($.2g(a.3,c)!==-1){b[i]=G}});b=$.2h(b,2(a){9 a});9 b},1c:2(){4(!0.j.x||!0.j.1d){9}0.j.m("a").v("1e."+0.3,{o:0},0.X)},1f:2(){0.7=0.7||0.$5.I("15");4(!0.7){0.16()}},1g:2(){4(0.S){0.$5.v("2i."+0.3,2(){0.$5.1h("J");$(k).A("1i."+0.3)})}0.$5.v("J."+0.3,2(){h.1j(0.7)});0.$5.m(":1k").v("1e."+0.3,2(){$(0).Z("t").1h("J")})},1l:2(){4(h[0.7]){4(0.j.x&&0.j.1d){0.j.2j(0.$5)}u{0.$5.m(0.W).2k()}}},2l:2(a){6 b="."+0.3;0.$5.A(b).m(":1k").A(b);$(k).A(b);a&&h.1j(0.7)},1m:2(){0.1c();0.1f();4(!0.7){9}0.1g();0.1l();$(k).v("1i."+0.3,{o:0},0.y)}};6 g={1b:2(a,b){h[a]=n.2m(b)},2n:2(a){9 n.Y(h[a])},1n:2(d){$.Q[d.3]=2(b){6 c=0,r=$.2o(b)||!b?"":b,1o=2p;4(r&&d[r]){c.z(2(i){d[r].2q(c.K(i).l(d.3),2r.2s.2t.2u(1o,1))})}u 4(!r){c.z(2(i){6 a=$.2v(w,{$5:c.K(i)},d,b);c.K(i).l(d.3,a);a.1m()})}u{$.2w(\'2x \'+r+\' D E 2y 2z 1p.\'+d.3)}9 c}}};g.1n(f)})(1p);',62,160,'this||function|name|if|el|var|objName|console|return||||||||localStorage||noticeDialog|window|data|find|JSON|instance||value|method|log|form|else|bind|true|length|saveState|each|unbind|ERROR|you|does|not|use|false|object|attr|reset_state|eq|browser|support|polyfill|github|com|fn|rememberState|clearOnSubmit|remember_state|to|ignore|noticeSelector|clickNotice|parse|closest|in|is|prop|val|warn|id|errorNoID|ID|or|an|removeIgnored|setObject|bindNoticeDialog|jquery|click|setName|bindResetEvents|trigger|unload|removeItem|reset|createNoticeDialog|init|createPlugin|args|jQuery|https|gist|350433|http|bestiejs|json3|class|html|Do|want|href|restore|your|previously|entered|info|null|use_ids|getItem|for|radio|checkbox|filter|checked|select|selected|change|remove|preventDefault|chooseStorageProp|WARNING|Cannot|process|more|than|one|with|the|same|Attempting|IDs|instead|No|Add|pass|serializeArray|input|type|datetime|local|push|save|inArray|grep|submit|prependTo|show|destroy|stringify|getObject|isPlainObject|arguments|apply|Array|prototype|slice|call|extend|error|Method|exist|on'.split('|'),0,{})) -- cgit v1.2.3-70-g09d2