| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 | 29x 29x 29x 29x 392x 392x 2733x 2733x 392x 324x 1820x 392x 1237x 1237x 1237x 392x 392x 29x 29x 29x 29x 50x 50x 8x 29x 122x 122x 122x 122x 122x 122x 122x 122x 122x 29x 193x 29x 50x 50x 41x 59x 41x 50x 29x 29x 225x 225x 225x 134x 134x 225x 29x 29x 874x 874x 29x 684x 684x 29x 544x 29x 28x 28x 28x 28x 82x 54x 82x 82x 82x 82x 45x 63x 45x 82x 82x 28x 28x 29x 48x 11x 29x 35x 35x 35x 52x 52x 16x 35x 29x 33x 29x 28x 13x 13x 29x 28x 28x 28x 28x 28x 28x 28x 82x 54x 54x 54x 20x 20x 20x 20x 20x 20x 20x 20x 54x 28x 28x 29x 98x 356x 96x 29x 28x 28x 28x 82x 54x 54x 28x 28x 28x 28x 29x 81x 29x 28x 82x 54x 54x 102x 75x 29x 28x 28x 82x 54x 54x 6x 54x 28x 29x 19x 19x 29x 239x 29x 24x 24x 29x 116x 116x 92x 24x 24x 29x 355x 355x 215x 355x 146x 209x 6x 203x 57x 57x 57x 146x 24x 122x 116x 116x 53x 53x 355x 29x 280x 146x 215x 134x 280x 29x 79x 79x 79x 79x 79x 29x 79x 79x 79x 29x 79x 79x 292x 292x 134x 134x 134x 134x 134x 134x 79x 29x 29x 29x 29x 106x 627x 627x 627x 627x 627x 627x 106x 627x 29x 29x 94x 29x 29x 29x 29x 29x 29x 29x 29x 106x 521x 521x | /* Copyright 2013-2017 OCAD University Copyright 2016 Raising the Floor - International Licensed under the Educational Community License (ECL), Version 2.0 or the New BSD license. You may not use this file except in compliance with one these Licenses. You may obtain a copy of the ECL 2.0 License and BSD License at https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt */ var fluid_3_0_0 = fluid_3_0_0 || {}; (function ($, fluid) { "use strict"; /********************** * msgLookup grade * **********************/ fluid.defaults("fluid.prefs.msgLookup", { gradeNames: ["fluid.component"], members: { msgLookup: { expander: { funcName: "fluid.prefs.stringLookup", args: ["{msgResolver}", "{that}.options.stringArrayIndex"] } } }, stringArrayIndex: {} }); fluid.prefs.stringLookup = function (messageResolver, stringArrayIndex) { var that = {id: fluid.allocateGuid()}; that.singleLookup = function (value) { var looked = messageResolver.lookup([value]); return fluid.get(looked, "template"); }; that.multiLookup = function (values) { return fluid.transform(values, function (value) { return that.singleLookup(value); }); }; that.lookup = function (value) { var values = fluid.get(stringArrayIndex, value) || value; var lookupFn = fluid.isArrayable(values) ? "multiLookup" : "singleLookup"; return that[lookupFn](values); }; that.resolvePathSegment = that.lookup; return that; }; /*********************************************** * Base grade panel ***********************************************/ fluid.defaults("fluid.prefs.panel", { gradeNames: ["fluid.prefs.msgLookup", "fluid.rendererComponent"], events: { onDomBind: null }, // Any listener that requires a DOM element, should be registered // to the onDomBind listener. By default it is fired by onCreate, but // when used as a subpanel, it will be triggered by the resetDomBinder invoker. listeners: { "onCreate.onDomBind": "{that}.events.onDomBind" }, components: { msgResolver: { type: "fluid.messageResolver" } }, rendererOptions: { messageLocator: "{msgResolver}.resolve" }, distributeOptions: { "panel.msgResolver.messageBase": { source: "{that}.options.messageBase", target: "{that > msgResolver}.options.messageBase" } } }); /*************************** * Base grade for subpanel * ***************************/ fluid.defaults("fluid.prefs.subPanel", { gradeNames: ["fluid.prefs.panel", "{that}.getDomBindGrade"], listeners: { "{compositePanel}.events.afterRender": { listener: "{that}.events.afterRender", args: ["{that}"], namespce: "boilAfterRender" }, // Changing the firing of onDomBind from the onCreate. // This is due to the fact that the rendering process, controlled by the // composite panel, will set/replace the DOM elements. "onCreate.onDomBind": null, // remove listener "afterRender.onDomBind": "{that}.resetDomBinder" }, rules: { expander: { func: "fluid.prefs.subPanel.generateRules", args: ["{that}.options.preferenceMap"] } }, invokers: { refreshView: "{compositePanel}.refreshView", // resetDomBinder must fire the onDomBind event resetDomBinder: { funcName: "fluid.prefs.subPanel.resetDomBinder", args: ["{that}"] }, getDomBindGrade: { funcName: "fluid.prefs.subPanel.getDomBindGrade", args: ["{prefsEditor}"] } }, strings: {}, parentBundle: "{compositePanel}.messageResolver", renderOnInit: false }); fluid.defaults("fluid.prefs.subPanel.domBind", { gradeNames: ["fluid.component"], listeners: { "onDomBind.domChange": { listener: "{prefsEditor}.events.onSignificantDOMChange" } } }); fluid.prefs.subPanel.getDomBindGrade = function (prefsEditor) { var hasListener = fluid.get(prefsEditor, "options.events.onSignificantDOMChange") !== undefined; if (hasListener) { return "fluid.prefs.subPanel.domBind"; } }; /* * Since the composite panel manages the rendering of the subpanels * the markup used by subpanels needs to be completely replaced. * The subpanel's container is refereshed to point at the newly * rendered markup, and the domBinder is re-initialized. Once * this is all done, the onDomBind event is fired. */ fluid.prefs.subPanel.resetDomBinder = function (that) { // TODO: The line below to find the container jQuery instance was copied from the framework code - // https://github.com/fluid-project/infusion/blob/master/src/framework/core/js/FluidView.js#L145 // in order to reset the dom binder when panels are in an iframe. // It can be be eliminated once we have the new renderer. var userJQuery = that.container.constructor; var context = that.container[0].ownerDocument; var selector = that.container.selector; that.container = userJQuery(selector, context); // To address FLUID-5966, manually adding back the selector and context properties that were removed from jQuery v3.0. // ( see: https://jquery.com/upgrade-guide/3.0/#breaking-change-deprecated-context-and-selector-properties-removed ) // In most cases the "selector" property will already be restored through the DOM binder or fluid.container. // However, in this case we are manually recreating the container to ensure that it is referencing an element currently added // to the correct Document ( e.g. iframe ) (also see: FLUID-4536). This manual recreation of the container requires us to // manually add back the selector and context from the original container. This code and fix parallels that in // FluidView.js fluid.container line 129 that.container.selector = selector; that.container.context = context; Iif (that.container.length === 0) { fluid.fail("resetDomBinder got no elements in DOM for container searching for selector " + that.container.selector); } fluid.initDomBinder(that, that.options.selectors); that.events.onDomBind.fire(that); }; fluid.prefs.subPanel.safePrefKey = function (prefKey) { return prefKey.replace(/[.]/g, "_"); }; /* * Generates the model relay rules for a subpanel. * Takes advantage of the fact that compositePanel * uses the preference key (with "." replaced by "_"), * as its model path. */ fluid.prefs.subPanel.generateRules = function (preferenceMap) { var rules = {}; fluid.each(preferenceMap, function (prefObj, prefKey) { fluid.each(prefObj, function (value, prefRule) { if (prefRule.indexOf("model.") === 0) { rules[fluid.prefs.subPanel.safePrefKey(prefKey)] = prefRule.slice("model.".length); } }); }); return rules; }; /********************************** * Base grade for composite panel * **********************************/ fluid.registerNamespace("fluid.prefs.compositePanel"); fluid.prefs.compositePanel.arrayMergePolicy = function (target, source) { target = fluid.makeArray(target); source = fluid.makeArray(source); fluid.each(source, function (selector) { Eif (target.indexOf(selector) < 0) { target.push(selector); } }); return target; }; fluid.defaults("fluid.prefs.compositePanel", { gradeNames: ["fluid.prefs.panel", "{that}.getDistributeOptionsGrade", "{that}.getSubPanelLifecycleBindings"], mergePolicy: { subPanelOverrides: "noexpand", selectorsToIgnore: fluid.prefs.compositePanel.arrayMergePolicy }, selectors: {}, // requires selectors into the template which will act as the containers for the subpanels selectorsToIgnore: [], // should match the selectors that are used to identify the containers for the subpanels repeatingSelectors: [], events: { initSubPanels: null }, listeners: { "onCreate.combineResources": "{that}.combineResources", "onCreate.appendTemplate": { "this": "{that}.container", "method": "append", "args": ["{that}.options.resources.template.resourceText"] }, "onCreate.initSubPanels": "{that}.events.initSubPanels", "onCreate.hideInactive": "{that}.hideInactive", "onCreate.surfaceSubpanelRendererSelectors": "{that}.surfaceSubpanelRendererSelectors", "afterRender.hideInactive": "{that}.hideInactive" }, invokers: { getDistributeOptionsGrade: { funcName: "fluid.prefs.compositePanel.assembleDistributeOptions", args: ["{that}.options.components"] }, getSubPanelLifecycleBindings: { funcName: "fluid.prefs.compositePanel.subPanelLifecycleBindings", args: ["{that}.options.components"] }, combineResources: { funcName: "fluid.prefs.compositePanel.combineTemplates", args: ["{that}.options.resources", "{that}.options.selectors"] }, surfaceSubpanelRendererSelectors: { funcName: "fluid.prefs.compositePanel.surfaceSubpanelRendererSelectors", args: ["{that}", "{that}.options.components", "{that}.options.selectors"] }, produceSubPanelTrees: { funcName: "fluid.prefs.compositePanel.produceSubPanelTrees", args: ["{that}"] }, expandProtoTree: { funcName: "fluid.prefs.compositePanel.expandProtoTree", args: ["{that}"] }, produceTree: { funcName: "fluid.prefs.compositePanel.produceTree", args: ["{that}"] }, hideInactive: { funcName: "fluid.prefs.compositePanel.hideInactive", args: ["{that}"] }, handleRenderOnPreference: { funcName: "fluid.prefs.compositePanel.handleRenderOnPreference", args: ["{that}", "{that}.refreshView", "{that}.conditionalCreateEvent", "{arguments}.0", "{arguments}.1", "{arguments}.2"] }, conditionalCreateEvent: { funcName: "fluid.prefs.compositePanel.conditionalCreateEvent" } }, subPanelOverrides: { gradeNames: ["fluid.prefs.subPanel"] }, rendererFnOptions: { noexpand: true, cutpointGenerator: "fluid.prefs.compositePanel.cutpointGenerator", subPanelRepeatingSelectors: { expander: { funcName: "fluid.prefs.compositePanel.surfaceRepeatingSelectors", args: ["{that}.options.components"] } } }, components: {}, resources: {} // template is reserved for the compositePanel's template, the subpanel template should have same key as the selector for its container. }); /* * Attempts to prefetch a components options before it is instantiated. * Only use in cases where the instatiated component cannot be used. */ fluid.prefs.compositePanel.prefetchComponentOptions = function (type, options) { var baseOptions = fluid.getMergedDefaults(type, fluid.get(options, "gradeNames")); // TODO: awkwardly, fluid.merge is destructive on each argument! return fluid.merge(baseOptions.mergePolicy, fluid.copy(baseOptions), options); }; /* * Should only be used when fluid.prefs.compositePanel.isActivatePanel cannot. * While this implementation doesn't require an instantiated component, it may in * the process miss some configuration provided by distribute options and demands. */ fluid.prefs.compositePanel.isPanel = function (type, options) { var opts = fluid.prefs.compositePanel.prefetchComponentOptions(type, options); return fluid.hasGrade(opts, "fluid.prefs.panel"); }; fluid.prefs.compositePanel.isActivePanel = function (comp) { return comp && fluid.hasGrade(comp.options, "fluid.prefs.panel"); }; /* * Creates a grade containing the distributeOptions rules needed for the subcomponents */ fluid.prefs.compositePanel.assembleDistributeOptions = function (components) { var gradeName = "fluid.prefs.compositePanel.distributeOptions_" + fluid.allocateGuid(); var distributeOptions = {}; var relayOption = {}; fluid.each(components, function (componentOptions, componentName) { if (fluid.prefs.compositePanel.isPanel(componentOptions.type, componentOptions.options)) { distributeOptions[componentName + ".subPanelOverrides"] = { source: "{that}.options.subPanelOverrides", target: "{that > " + componentName + "}.options" }; } // Construct the model relay btw the composite panel and its subpanels var componentRelayRules = {}; var definedOptions = fluid.prefs.compositePanel.prefetchComponentOptions(componentOptions.type, componentOptions.options); var preferenceMap = fluid.get(definedOptions, ["preferenceMap"]); fluid.each(preferenceMap, function (prefObj, prefKey) { fluid.each(prefObj, function (value, prefRule) { if (prefRule.indexOf("model.") === 0) { fluid.set(componentRelayRules, prefRule.slice("model.".length), "{compositePanel}.model." + fluid.prefs.subPanel.safePrefKey(prefKey)); } }); }); relayOption[componentName] = componentRelayRules; distributeOptions[componentName + ".modelRelay"] = { source: "{that}.options.relayOption." + componentName, target: "{that > " + componentName + "}.options.model" }; }); fluid.defaults(gradeName, { gradeNames: ["fluid.component"], relayOption: relayOption, distributeOptions: distributeOptions }); return gradeName; }; fluid.prefs.compositePanel.conditionalCreateEvent = function (value, createEvent) { if (value) { createEvent(); } }; fluid.prefs.compositePanel.handleRenderOnPreference = function (that, refreshViewFunc, conditionalCreateEventFunc, value, createEvent, componentNames) { componentNames = fluid.makeArray(componentNames); conditionalCreateEventFunc(value, createEvent); fluid.each(componentNames, function (componentName) { var comp = that[componentName]; if (!value && comp) { comp.destroy(); } }); refreshViewFunc(); }; fluid.prefs.compositePanel.creationEventName = function (pref) { return "initOn_" + pref; }; fluid.prefs.compositePanel.generateModelListeners = function (conditionals) { return fluid.transform(conditionals, function (componentNames, pref) { var eventName = fluid.prefs.compositePanel.creationEventName(pref); return { func: "{that}.handleRenderOnPreference", args: ["{change}.value", "{that}.events." + eventName + ".fire", componentNames], namespace: "handleRenderOnPreference_" + pref }; }); }; /* * Creates a grade containing all of the lifecycle binding configuration needed for the subpanels. * This includes the following: * - adding events used to trigger the initialization of the subpanels * - adding the createOnEvent configuration for the subpanels * - binding handlers to model changed events * - binding handlers to afterRender and onCreate */ fluid.prefs.compositePanel.subPanelLifecycleBindings = function (components) { var gradeName = "fluid.prefs.compositePanel.subPanelCreationTimingDistibution_" + fluid.allocateGuid(); var distributeOptions = {}; var subPanelCreationOpts = { "default": "initSubPanels" }; var conditionals = {}; var listeners = {}; var events = {}; fluid.each(components, function (componentOptions, componentName) { if (fluid.prefs.compositePanel.isPanel(componentOptions.type, componentOptions.options)) { var creationEventOpt = "default"; // would have had renderOnPreference directly sourced from the componentOptions // however, the set of configuration specified there is restricted. var renderOnPreference = fluid.get(componentOptions, "options.renderOnPreference"); if (renderOnPreference) { var pref = fluid.prefs.subPanel.safePrefKey(renderOnPreference); var onCreateListener = "onCreate." + pref; creationEventOpt = fluid.prefs.compositePanel.creationEventName(pref); subPanelCreationOpts[creationEventOpt] = creationEventOpt; events[creationEventOpt] = null; conditionals[pref] = conditionals[pref] || []; conditionals[pref].push(componentName); listeners[onCreateListener] = { listener: "{that}.conditionalCreateEvent", args: ["{that}.model." + pref, "{that}.events." + creationEventOpt + ".fire"] }; } distributeOptions[componentName + ".subPanelCreationOpts"] = { source: "{that}.options.subPanelCreationOpts." + creationEventOpt, target: "{that}.options.components." + componentName + ".createOnEvent" }; } }); fluid.defaults(gradeName, { gradeNames: ["fluid.component"], events: events, listeners: listeners, modelListeners: fluid.prefs.compositePanel.generateModelListeners(conditionals), subPanelCreationOpts: subPanelCreationOpts, distributeOptions: distributeOptions }); return gradeName; }; /* * Used to hide the containers of inactive sub panels. * This is necessary as the composite panel's template is the one that has their containers and * it would be undesirable to have them visible when their associated panel has not been created. * Also, hiding them allows for the subpanel to initialize, as it requires their container to be present. * The subpanels need to be initialized before rendering, for the produce function to source the rendering * information from it. */ fluid.prefs.compositePanel.hideInactive = function (that) { fluid.each(that.options.components, function (componentOpts, componentName) { if (fluid.prefs.compositePanel.isPanel(componentOpts.type, componentOpts.options) && !fluid.prefs.compositePanel.isActivePanel(that[componentName])) { that.locate(componentName).hide(); } }); }; /* * Use the renderer directly to combine the templates into a single * template to be used by the components actual rendering. */ fluid.prefs.compositePanel.combineTemplates = function (resources, selectors) { var cutpoints = []; var tree = {children: []}; fluid.each(resources, function (resource, resourceName) { if (resourceName !== "template") { tree.children.push({ ID: resourceName, markup: resource.resourceText }); cutpoints.push({ id: resourceName, selector: selectors[resourceName] }); } }); var resourceSpec = { base: { resourceText: resources.template.resourceText, href: ".", resourceKey: ".", cutpoints: cutpoints } }; var templates = fluid.parseTemplates(resourceSpec, ["base"]); var renderer = fluid.renderer(templates, tree, {cutpoints: cutpoints, debugMode: true}); resources.template.resourceText = renderer.renderTemplates(); }; fluid.prefs.compositePanel.rebaseSelectorName = function (memberName, selectorName) { return memberName + "_" + selectorName; }; /* * Surfaces the rendering selectors from the subpanels to the compositePanel, * and scopes them to the subpanel's container. * Since this is used by the cutpoint generator, which only gets run once, we need to * surface all possible subpanel selectors, and not just the active ones. */ fluid.prefs.compositePanel.surfaceSubpanelRendererSelectors = function (that, components, selectors) { fluid.each(components, function (compOpts, compName) { if (fluid.prefs.compositePanel.isPanel(compOpts.type, compOpts.options)) { var opts = fluid.prefs.compositePanel.prefetchComponentOptions(compOpts.type, compOpts.options); fluid.each(opts.selectors, function (selector, selName) { if (!opts.selectorsToIgnore || opts.selectorsToIgnore.indexOf(selName) < 0) { fluid.set(selectors, fluid.prefs.compositePanel.rebaseSelectorName(compName, selName), selectors[compName] + " " + selector); } }); } }); }; fluid.prefs.compositePanel.surfaceRepeatingSelectors = function (components) { var repeatingSelectors = []; fluid.each(components, function (compOpts, compName) { if (fluid.prefs.compositePanel.isPanel(compOpts.type, compOpts.options)) { var opts = fluid.prefs.compositePanel.prefetchComponentOptions(compOpts.type, compOpts.options); var rebasedRepeatingSelectors = fluid.transform(opts.repeatingSelectors, function (selector) { return fluid.prefs.compositePanel.rebaseSelectorName(compName, selector); }); repeatingSelectors = repeatingSelectors.concat(rebasedRepeatingSelectors); } }); return repeatingSelectors; }; fluid.prefs.compositePanel.cutpointGenerator = function (selectors, options) { var opts = { selectorsToIgnore: options.selectorsToIgnore, repeatingSelectors: options.repeatingSelectors.concat(options.subPanelRepeatingSelectors) }; return fluid.renderer.selectorsToCutpoints(selectors, opts); }; fluid.prefs.compositePanel.rebaseID = function (value, memberName) { return memberName + "_" + value; }; fluid.prefs.compositePanel.rebaseParentRelativeID = function (val, memberName) { var slicePos = "..::".length; // ..:: refers to the parentRelativeID prefix used in the renderer return val.slice(0, slicePos) + fluid.prefs.compositePanel.rebaseID(val.slice(slicePos), memberName); }; fluid.prefs.compositePanel.rebaseValueBinding = function (value, modelRelayRules) { return fluid.find(modelRelayRules, function (oldModelPath, newModelPath) { if (value === oldModelPath) { return newModelPath; } else Eif (value.indexOf(oldModelPath) === 0) { return value.replace(oldModelPath, newModelPath); } }) || value; }; fluid.prefs.compositePanel.rebaseTreeComp = function (msgResolver, model, treeComp, memberName, modelRelayRules) { var rebased = fluid.copy(treeComp); if (rebased.ID) { rebased.ID = fluid.prefs.compositePanel.rebaseID(rebased.ID, memberName); } if (rebased.children) { rebased.children = fluid.prefs.compositePanel.rebaseTree(msgResolver, model, rebased.children, memberName, modelRelayRules); } else if (rebased.selection) { rebased.selection = fluid.prefs.compositePanel.rebaseTreeComp(msgResolver, model, rebased.selection, memberName, modelRelayRules); } else if (rebased.messagekey) { // converts the "UIMessage" renderer component into a "UIBound" // and passes in the resolved message as the value. rebased.componentType = "UIBound"; rebased.value = msgResolver.resolve(rebased.messagekey.value, rebased.messagekey.args); delete rebased.messagekey; } else if (rebased.parentRelativeID) { rebased.parentRelativeID = fluid.prefs.compositePanel.rebaseParentRelativeID(rebased.parentRelativeID, memberName); } else if (rebased.valuebinding) { rebased.valuebinding = fluid.prefs.compositePanel.rebaseValueBinding(rebased.valuebinding, modelRelayRules); if (rebased.value) { var modelValue = fluid.get(model, rebased.valuebinding); rebased.value = modelValue !== undefined ? modelValue : rebased.value; } } return rebased; }; fluid.prefs.compositePanel.rebaseTree = function (msgResolver, model, tree, memberName, modelRelayRules) { var rebased; if (fluid.isArrayable(tree)) { rebased = fluid.transform(tree, function (treeComp) { return fluid.prefs.compositePanel.rebaseTreeComp(msgResolver, model, treeComp, memberName, modelRelayRules); }); } else { rebased = fluid.prefs.compositePanel.rebaseTreeComp(msgResolver, model, tree, memberName, modelRelayRules); } return rebased; }; fluid.prefs.compositePanel.produceTree = function (that) { var produceTreeOption = that.options.produceTree; var ownTree = produceTreeOption ? (typeof (produceTreeOption) === "string" ? fluid.getGlobalValue(produceTreeOption) : produceTreeOption)(that) : that.expandProtoTree(); var subPanelTree = that.produceSubPanelTrees(); var tree = { children: ownTree.children.concat(subPanelTree.children) }; return tree; }; fluid.prefs.compositePanel.expandProtoTree = function (that) { var expanderOptions = fluid.renderer.modeliseOptions(that.options.expanderOptions, {ELstyle: "${}"}, that); var expander = fluid.renderer.makeProtoExpander(expanderOptions, that); return expander(that.options.protoTree || {}); }; fluid.prefs.compositePanel.produceSubPanelTrees = function (that) { var tree = {children: []}; fluid.each(that.options.components, function (options, componentName) { var subPanel = that[componentName]; if (fluid.prefs.compositePanel.isActivePanel(subPanel)) { var expanderOptions = fluid.renderer.modeliseOptions(subPanel.options.expanderOptions, {ELstyle: "${}"}, subPanel); var expander = fluid.renderer.makeProtoExpander(expanderOptions, subPanel); var subTree = subPanel.produceTree(); subTree = fluid.get(subPanel.options, "rendererFnOptions.noexpand") ? subTree : expander(subTree); var rebasedTree = fluid.prefs.compositePanel.rebaseTree(subPanel.msgResolver, that.model, subTree, componentName, subPanel.options.rules); tree.children = tree.children.concat(rebasedTree.children); } }); return tree; }; /******************************************************************************** * The grade that contains the connections between a panel and the prefs editor * ********************************************************************************/ fluid.defaults("fluid.prefs.prefsEditorConnections", { gradeNames: ["fluid.component"], listeners: { // No namespace supplied because this grade is added to every panel. Suppling a // namespace would mean that only one panel's refreshView method was bound to the // onPrefsEditorRefresh event. "{fluid.prefs.prefsEditor}.events.onPrefsEditorRefresh": "{fluid.prefs.panel}.refreshView" }, strings: {}, parentBundle: "{fluid.prefs.prefsEditorLoader}.msgResolver" }); /******************************************* * A base grade for switch adjuster panels * *******************************************/ fluid.defaults("fluid.prefs.panel.switchAdjuster", { gradeNames: ["fluid.prefs.panel"], // preferences maps should map model values to "model.value" // model: {value: ""} selectors: { header: ".flc-prefsEditor-header", switchContainer: ".flc-prefsEditor-switch", label: ".flc-prefsEditor-label", description: ".flc-prefsEditor-description" }, selectorsToIgnore: ["header", "switchContainer"], components: { switchUI: { type: "fluid.switchUI", container: "{that}.dom.switchContainer", createOnEvent: "afterRender", options: { strings: { on: "{fluid.prefs.panel.switchAdjuster}.msgLookup.switchOn", off: "{fluid.prefs.panel.switchAdjuster}.msgLookup.switchOff" }, model: { enabled: "{fluid.prefs.panel.switchAdjuster}.model.value" }, attrs: { "aria-labelledby": { expander: { funcName: "fluid.allocateSimpleId", args: ["{fluid.prefs.panel.switchAdjuster}.dom.description"] } } } } } }, protoTree: { label: {messagekey: "label"}, description: {messagekey: "description"} } }); /************************************************ * A base grade for themePicker adjuster panels * ************************************************/ fluid.defaults("fluid.prefs.panel.themePicker", { gradeNames: ["fluid.prefs.panel"], mergePolicy: { "controlValues.theme": "replace", "stringArrayIndex.theme": "replace" }, // The controlValues are the ordered set of possible modelValues corresponding to each theme option. // The order in which they are listed will determine the order they are presented in the UI. // The stringArrayIndex contains the ordered set of namespaced strings in the message bundle. // The order must match the controlValues in order to provide the proper labels to the theme options. controlValues: { theme: [] // must be supplied by the integrator }, stringArrayIndex: { theme: [] // must be supplied by the integrator }, selectID: "{that}.id", // used for the name attribute to group the selection options listeners: { "afterRender.style": "{that}.style" }, selectors: { themeRow: ".flc-prefsEditor-themeRow", themeLabel: ".flc-prefsEditor-theme-label", themeInput: ".flc-prefsEditor-themeInput", label: ".flc-prefsEditor-themePicker-label", description: ".flc-prefsEditor-themePicker-descr" }, styles: { defaultThemeLabel: "fl-prefsEditor-themePicker-defaultThemeLabel" }, repeatingSelectors: ["themeRow"], protoTree: { label: {messagekey: "label"}, description: {messagekey: "description"}, expander: { type: "fluid.renderer.selection.inputs", rowID: "themeRow", labelID: "themeLabel", inputID: "themeInput", selectID: "{that}.options.selectID", tree: { optionnames: "${{that}.msgLookup.theme}", optionlist: "${{that}.options.controlValues.theme}", selection: "${value}" } } }, markup: { // Aria-hidden needed on fl-preview-A and Display 'a' created as pseudo-content in css to prevent AT from reading out display 'a' on IE, Chrome, and Safari // Aria-hidden needed on fl-crossout to prevent AT from trying to read crossout symbol in Safari label: "<span class=\"fl-preview-A\" aria-hidden=\"true\"></span><span class=\"fl-hidden-accessible\">%theme</span><div class=\"fl-crossout\" aria-hidden=\"true\"></div>" }, invokers: { style: { funcName: "fluid.prefs.panel.themePicker.style", args: [ "{that}.dom.themeLabel", "{that}.msgLookup.theme", "{that}.options.markup.label", "{that}.options.controlValues.theme", "default", "{that}.options.classnameMap.theme", "{that}.options.styles.defaultThemeLabel" ] } } }); fluid.prefs.panel.themePicker.style = function (labels, strings, markup, theme, defaultThemeName, style, defaultLabelStyle) { fluid.each(labels, function (label, index) { label = $(label); var themeValue = strings[index]; label.html(fluid.stringTemplate(markup, { theme: themeValue })); // Aria-label set to prevent Firefox from reading out the display 'a' label.attr("aria-label", themeValue); var labelTheme = theme[index]; if (labelTheme === defaultThemeName) { label.addClass(defaultLabelStyle); } label.addClass(style[labelTheme]); }); }; /****************************************************** * A base grade for textfield stepper adjuster panels * ******************************************************/ fluid.defaults("fluid.prefs.panel.stepperAjuster", { gradeNames: ["fluid.prefs.panel"], // preferences maps should map model values to "model.value" // model: {value: ""} selectors: { header: ".flc-prefsEditor-header", textfieldStepperContainer: ".flc-prefsEditor-textfieldStepper", label: ".flc-prefsEditor-label", descr: ".flc-prefsEditor-descr" }, selectorsToIgnore: ["header", "textfieldStepperContainer"], components: { textfieldStepper: { type: "fluid.textfieldStepper", container: "{that}.dom.textfieldStepperContainer", createOnEvent: "afterRender", options: { model: { value: "{fluid.prefs.panel.stepperAjuster}.model.value", range: { min: "{fluid.prefs.panel.stepperAjuster}.options.range.min", max: "{fluid.prefs.panel.stepperAjuster}.options.range.max" }, step: "{fluid.prefs.panel.stepperAjuster}.options.step" }, scale: 1, strings: { increaseLabel: "{fluid.prefs.panel.stepperAjuster}.msgLookup.increaseLabel", decreaseLabel: "{fluid.prefs.panel.stepperAjuster}.msgLookup.decreaseLabel" }, attrs: { "aria-labelledby": "{fluid.prefs.panel.stepperAjuster}.options.panelOptions.labelId" } } } }, protoTree: { label: { messagekey: "label", decorators: { attrs: {id: "{that}.options.panelOptions.labelId"} } }, descr: {messagekey: "description"} }, panelOptions: { labelIdTemplate: "%guid", labelId: { expander: { funcName: "fluid.prefs.panel.stepperAjuster.setLabelID", args: ["{that}.options.panelOptions.labelIdTemplate"] } } } }); /** * @param {String} template - take string template with a token "%guid" to be replaced by the a unique ID. * @return {String} - the resolved templated with the injected unique ID. */ fluid.prefs.panel.stepperAjuster.setLabelID = function (template) { return fluid.stringTemplate(template, { guid: fluid.allocateGuid() }); }; /******************************** * Preferences Editor Text Size * ********************************/ /** * A sub-component of fluid.prefs that renders the "text size" panel of the user preferences interface. */ fluid.defaults("fluid.prefs.panel.textSize", { gradeNames: ["fluid.prefs.panel.stepperAjuster"], preferenceMap: { "fluid.prefs.textSize": { "model.value": "default", "range.min": "minimum", "range.max": "maximum", "step": "divisibleBy" } }, panelOptions: { labelIdTemplate: "textSize-label-%guid" } }); /******************************** * Preferences Editor Text Font * ********************************/ /** * A sub-component of fluid.prefs that renders the "text font" panel of the user preferences interface. */ fluid.defaults("fluid.prefs.panel.textFont", { gradeNames: ["fluid.prefs.panel"], preferenceMap: { "fluid.prefs.textFont": { "model.value": "default", "controlValues.textFont": "enum" } }, mergePolicy: { "controlValues.textFont": "replace", "stringArrayIndex.textFont": "replace" }, selectors: { header: ".flc-prefsEditor-text-font-header", textFont: ".flc-prefsEditor-text-font", label: ".flc-prefsEditor-text-font-label", textFontDescr: ".flc-prefsEditor-text-font-descr" }, selectorsToIgnore: ["header"], stringArrayIndex: { textFont: ["textFont-default", "textFont-times", "textFont-comic", "textFont-arial", "textFont-verdana"] }, protoTree: { label: {messagekey: "textFontLabel"}, textFontDescr: {messagekey: "textFontDescr"}, textFont: { optionnames: "${{that}.msgLookup.textFont}", optionlist: "${{that}.options.controlValues.textFont}", selection: "${value}", decorators: { type: "fluid", func: "fluid.prefs.selectDecorator", options: { styles: "{that}.options.classnameMap.textFont" } } } }, classnameMap: null, // must be supplied by implementors controlValues: { textFont: ["default", "times", "comic", "arial", "verdana"] } }); /********************************* * Preferences Editor Line Space * *********************************/ /** * A sub-component of fluid.prefs that renders the "line space" panel of the user preferences interface. */ fluid.defaults("fluid.prefs.panel.lineSpace", { gradeNames: ["fluid.prefs.panel.stepperAjuster"], preferenceMap: { "fluid.prefs.lineSpace": { "model.value": "default", "range.min": "minimum", "range.max": "maximum", "step": "divisibleBy" } }, panelOptions: { labelIdTemplate: "lineSpace-label-%guid" } }); /******************************* * Preferences Editor Contrast * *******************************/ /** * A sub-component of fluid.prefs that renders the "contrast" panel of the user preferences interface. */ fluid.defaults("fluid.prefs.panel.contrast", { gradeNames: ["fluid.prefs.panel.themePicker"], preferenceMap: { "fluid.prefs.contrast": { "model.value": "default", "controlValues.theme": "enum" } }, listeners: { "afterRender.style": "{that}.style" }, selectors: { header: ".flc-prefsEditor-contrast-header", themeRow: ".flc-prefsEditor-themeRow", themeLabel: ".flc-prefsEditor-theme-label", themeInput: ".flc-prefsEditor-themeInput", label: ".flc-prefsEditor-themePicker-label", contrastDescr: ".flc-prefsEditor-themePicker-descr" }, selectorsToIgnore: ["header"], styles: { defaultThemeLabel: "fl-prefsEditor-themePicker-defaultThemeLabel" }, stringArrayIndex: { theme: ["contrast-default", "contrast-bw", "contrast-wb", "contrast-by", "contrast-yb", "contrast-lgdg"] }, controlValues: { theme: ["default", "bw", "wb", "by", "yb", "lgdg"] } }); /************************************** * Preferences Editor Layout Controls * **************************************/ /** * A sub-component of fluid.prefs that renders the "layout and navigation" panel of the user preferences interface. */ fluid.defaults("fluid.prefs.panel.layoutControls", { gradeNames: ["fluid.prefs.panel.switchAdjuster"], preferenceMap: { "fluid.prefs.tableOfContents": { "model.value": "default" } } }); /************************************* * Preferences Editor Enhance Inputs * *************************************/ /** * A sub-component of fluid.prefs that renders the "enhance inputs" panel of the user preferences interface. */ fluid.defaults("fluid.prefs.panel.enhanceInputs", { gradeNames: ["fluid.prefs.panel.switchAdjuster"], preferenceMap: { "fluid.prefs.enhanceInputs": { "model.value": "default" } } }); /******************************************************** * Preferences Editor Select Dropdown Options Decorator * ********************************************************/ /** * A sub-component that decorates the options on the select dropdown list box with the css style */ fluid.defaults("fluid.prefs.selectDecorator", { gradeNames: ["fluid.viewComponent"], listeners: { "onCreate.decorateOptions": "fluid.prefs.selectDecorator.decorateOptions" }, styles: { preview: "fl-preview-theme" } }); fluid.prefs.selectDecorator.decorateOptions = function (that) { fluid.each($("option", that.container), function (option) { var styles = that.options.styles; $(option).addClass(styles.preview + " " + styles[fluid.value(option)]); }); }; })(jQuery, fluid_3_0_0); |