PowerPoint 加载项 NavBar 开发(2)：前端界面

const {createApp} = Vue;

createApp({
  data() {
    return {
      slideSectionTitles: ["", "Introduction", "", "Methods", "", "Results and Discussions", "Conclusions"],
      slideTitles: Array(7).fill(0).map((_, i) => `Title ${i+1}`),
      slideSkipped: Array(7).fill(false),
      slideCount: 7,
    }
  }
}).mount('#navbar-app');

async function readPresentationProp() {
  return await PowerPoint.run(async (context) => {
    const slideCounter = context.presentation.slides.getCount();
    const slides = context.presentation.slides.load("items/id");
    await context.sync();
    const slideCount = slideCounter.value;
    const slideIds = slides.items.map((slide) => slide.id);
    const shapesList = slideIds.map((id) => {
      return context.presentation.slides.getItem(id).shapes.load("items/name, items/textFrame/textRange/text");
    });
    await context.sync();
    const slideTitles = shapesList.map((shapes) => {
      for (let item of shapes.items) {
        if (item.name.startsWith("Title")) {
          return item.textFrame.textRange.text;
        }
      }
      return "";
    });
    const tag = context.presentation.tags.getItemOrNullObject("NAVBAR");
    tag.load("value");
    await context.sync();
    const savedData = tag.isNullObject ? tag : JSON.parse(tag.value);
    return { slideCount, slideIds, slideTitles, savedData };
  });
}

{
  data() {
    return {
      slideSectionTitles: [],
      slideTitles: [],
      slideSkipped: [],
      slideCount: 0,
    }
  },
  methods: {
    load() {
      readPresentationProp()
        .then((res) => {
          this.slideTitles = res.slideTitles;
          this.slideIds = res.slideIds;
          this.slideCount = res.slideCount;
          if (res.savedData.isNullObject) {
            this.slidesectionTitles = Array(res.slideCount).fill("");
            this.slideSkipped = Array(res.slideCount).fill(false);
          }
        })
        .catch((reason) => {
          console.log(reason);
        });
    },
  },
  mounted() {
    this.load();
  },
}

{
  methods: {
    create() {
      createSectionBar(defaultSectionBarConfig());
    },
    deleteAll() {
      deleteAllNavbarShapes();
    },
  },
}

{
  data: {
    return {
      sectionBar: {
        docking: "Top",
        distribution: "EqualSpacing",
        edgeOffset: 0,
        startOffset: 0,
        endOffset: 0,
        activeFormat: defaultActiveFormat(),
        inactiveFormat: defaultInactiveFormat(),
        width: 30
      }
    }
  }
}

{
  computed: {
    slideSectionIds() {
      let currentId = -1;
      return Array(this.slideCount)
        .fill(0)
        .map((_, i) => {
          if (this.slideSkipped[i]) {
            return -1;
          } else {
            if (this.slidesectionTitles[i] !== "") {
              currentId += 1;
            }
            return currentId;
          }
        });
    },
    sectionTitles() {
      let sectionTitles = [];
      let currentsectionTitle = "";
      for (let i = 0; i < this.slideCount; i++) {
        if (this.slidesectionTitles[i] !== "" && this.slidesectionTitles[i] != currentsectionTitle) {
          currentsectionTitle = this.slidesectionTitles[i];
          if (currentsectionTitle != "") {
            sectionTitles.push(currentsectionTitle);
          }
        }
      }
      return sectionTitles;
    },
    sectionBarConfig() {
      return {
        ...this.sectionBar,
        sectionTitles: this.sectionTitles,
        slideSectionIds: this.slideSectionIds
      };
    },
  }
}

{
  methods: {
    create() {
      createSectionBar(this.sectionBarConfig);
    },
  }
}

{
  methods: {
    create() {
      tryCatch(() => {createSectionBar(this.sectionBarConfig)});
    },
  }
}

{
  mounted() {
    window.VueData = this;
  }
}

{
  methods: {
    matchSelectedTextboxFormat(isActive) {
      readSelectedTextboxFormat()
        .then((format) => {
          if (isActive) {
            this.sectionBar.activeFormat = format;
          } else {
            this.sectionBar.inactiveFormat = format;
          }
        });
    },
  }
}

{ 
  computed: {
    slideIdTosectionTitle() {
      let res = {};
      this.slidesectionTitles.map((name, i) => {
        if (name !== "") {
          res[this.slideIds[i]] = name;
        }
      });
      return res;
    },
  }
}

{
  computed: {
    slideIdSkipped() {
      let res = {};
      for (let i = 0; i < this.slideSkipped.length; i++) {
        if (this.slideSkipped[i]) {
          res[this.slideIds[i]] = true;
        }
      }
      return res;
    }
  }
}

{
  computed : {
    saveData() {
      return {
        slideIdTosectionTitle: this.slideIdTosectionTitle,
        slideIdSkipped: this.slideIdSkipped,
        sectionBar: this.sectionBar,
      };
    },
  }
}

async function saveToTag(data) {
  await PowerPoint.run(async (context) => {
    context.presentation.tags.add("NAVBAR", JSON.stringify(data));
    await context.sync();
  });
}

{
  methods:{
    save() {
      saveToTag(this.saveData)
        .then(() => {
          console.log("Save successful!");
        });
    },
  }
}

let { slideIdTosectionTitle, slideIdSkipped } = res.savedData;
// slide section names
let slidesectionTitles = Array(res.slideCount).fill(0).map(() => "");
for (let i = 0; i < res.slideCount; i++) {
  if (slideIdTosectionTitle[res.slideIds[i]] != undefined) {
    slidesectionTitles[i] = slideIdTosectionTitle[res.slideIds[i]];
  }
}
this.slidesectionTitles = slidesectionTitles;
// slide skip
this.slideSkipped = this.slideIds.map((id) => {
  return slideIdSkipped[id] !== undefined ? true : false;
  // other
});

{
  methods: {
    create() {
      // ...
      this.save();
    },
    refresh() {
      this.save();
      this.load();
    }
  },
  beforeDestroy() {
    this.save();
  }
}

{
  methods: {
    initMaterialize() {
      M.Tooltip.init(document.querySelectorAll(".tooltipped"));
    }
  },
  mounted() {
    this.initMaterialze();
    this.load();
  }
}

{
  data() {
    return {
      isSyncing: false,
    }
  }
}

create() {
  this.syncing = true;
  createSectionBar(this.sectionBarConfig)
    .then(() => {
      this.syncing = false;
    })
}

{
  methods: {
    toastSuccess(message) {
      M.toast({ html: message, classes: "green darken-4" });
    },
    toastFailure(message) {
      M.toast({ html: message, classes: "red darken-4" });
    },
    create() {
      this.syncing = true;
      createSectionBar(this.sectionBarConfig)
        .then(() => {
          this.syncing = false;
          M.toastSuccess("OK! Configuration is saved.");
        }).catch((reason) => {
          this.syncing = false;
          M.toastFailure(reason.message);
        })
    }
  }
}

//...
if (sectionNames.length === 0) {
  throw new Error("Sections are not defined");
}
// loops

async function createSectionBarHideInactive(sectionBarConfig) {
  const { sectionTitles, slideSectionIds, edgeOffset, startOffset, endOffset, width, docking, activeFormat } = sectionBarConfig;
  let prop;
  if (docking === 'Left' || docking === 'Right') {
    prop = {
      width: width,
      height: SLIDEHEIGHT - startOffset - endOffset,
      left: (docking === 'Left') ? edgeOffset : SLIDEWIDTH - edgeOffset - width,
      top: startOffset,
    }
  } else if (docking === 'Top' || docking === 'Bottom') {
    prop = {
      width: SLIDEWIDTH - startOffset - endOffset,
      height: width,
      left: startOffset,
      top: (docking === 'Top') ? edgeOffset : SLIDEHEIGHT - width - edgeOffset
    }
  } else {
    throw new Error(`Invalid docking ${docking}`);
  }
  await PowerPoint.run(async context => {
    slideSectionIds.map((id, n) => {
      const shapes = context.presentation.slides.getItemAt(n).shapes;
      const shape = shapes.addTextBox(sectionTitles[id], prop);
      setTextboxFormat(shape, activeFormat);
      shape.name = `NavbarSectionTextbox-${n}`;
    })
    await context.sync();
  })
}

{
  data() {
    return {
      sectionBar: {
        showActiveOnnly: false,
      }
    }
  }
}

async function createSectionBar() {
  if (sectionBarConfig.showActiveOnly) {
    createSectionBarActiveOnly(sectionBarConfig);
    return
  }
  // ... other logics.
}

{
  data() {
    return {
      sectionBar: {
        docking: "Top",
        distribution: "EqualSpacing",
        activeFormat: defaultActiveFormat(),
        inactiveFormat: defaultInactiveFormat(),
        showActiveOnly: false,
      },
      sectionBarRange: {
        direction: "Horizontal",
        width: 960,
        height: 30,
        left: 0,
        top: 0,
      }
    }
  },
  methods: {
    loadSectionBarRange() {
      readSelectedShapeFormat()
        .then(format => {
          this.sectionBarRange.width = format.width;
          this.sectionBarRange.height = format.height;
          this.sectionBarRange.left = format.left;
          this.sectionBarRange.top = format.top;
        })
    }
  },
  computed: {
    sectionBarConfig() {
      if (this.sectionBarRange.direction === "Horizontal") {
        return {
          ...this.sectionBar,
          slideSectionIds: this.slideSectionIds,
          sectionTitles: this.sectionTitles,
          docking: "Top",
          width: this.sectionBarRange.height,
          startOffset: this.sectionBarRange.left,
          endOffset: SLIDEWIDTH - this.sectionBarRange.width - this.sectionBarRange.left,
          edgeOffset: this.sectionBarRange.top,
        }
      } else if (this.sectionBarRange.direction === "Vertical") {
        return {
          ...this.sectionBar,
          slideSectionIds: this.slideSectionIds,
          sectionTitles: this.sectionTitles,
          docking: "Left",
          width: this.sectionBarRange.width,
          startOffset: this.sectionBarRange.top,
          endOffset: SLIDEHEIGHT - this.sectionBarRange.height - this.sectionBarRange.top,
          edgeOffset: this.sectionBarRange.left,
        }
      } else {
        throw new Error("sectionBarRange.direction is invalid")
      }
    }
  }
}